bridgy-fed/static/style.css

830 wiersze
12 KiB
CSS

/* color variables */
:root {
--bg: #23527c;
--fg: white;
--glow: #ffd080;
}
#header {
width: 100%;
margin: 0;
padding-top: 1em;
padding-bottom: 1em;
overflow-x: clip;
/* this keeps it always visible on top, even when scrolling
position: sticky;
top: 0;
*/
}
.big {
font-size: 1.5em;
}
.bigger {
font-size: 2.25em;
}
.small {
font-size: .8em;
}
.header-links {
float: right;
text-align: right;
}
#logo {
float: left;
text-align: left;
}
#header .header-links {
margin-top: .5em;
margin-bottom: .5em;
}
#logo-img {
height: 3em;
}
#front #footer {
margin-top: -2em;
}
#footer {
margin-top: 2em;
margin-bottom: 0;
}
#title {
font-weight: normal;
}
#topology {
position: absolute;
z-index: -1;
background-color: var(--bg); /* #003355; */
overflow: clip;
}
pre .keyword, code .keyword, code.keyword {
color: green;
}
pre .value, code .value, code.value {
color: chocolate;
}
.handle {
font-style: italic;
}
.row {
text-align: center;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
#blogposts, #publishes, #webmentions, #user {
margin-top: 1em;
}
#top, #listen-ui, #listening-label, #publish-ui, #publishing-label {
margin-bottom: 1em;
}
#front .row {
padding-top: 1em;
padding-bottom: 1em;
}
#front .row p {
padding-left: 1em;
padding-right: 1em;
}
#front #header {
padding-bottom: 0;
background-color: var(--fg);
/* see corresponding shadow in .front-dark below */
box-shadow: 0 0 .5em 1.5em var(--fg);
}
.text-outline {
text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
/* this is easier and supported in major browsers but draws the outline *inside*
the text, not outside, which looks much worse.
-webkit-text-stroke: 2px var(--bg);
*/
}
.front-light, .front-dark {
margin-top: 2em;
margin-bottom: 2em;
}
.front-light {
background-color: var(--fg);
box-shadow: 0 0 .5em 1.5em var(--fg);
}
.front-dark {
background-color: var(--bg);
color: var(--fg);
box-shadow: 0 0 .5em 1.5em var(--bg);
}
.front-dark a {
color: #63aae0;
}
.front-dark a:hover {
color: #93cae7;
}
#front-form row {
margin-bottom: 0;
background-color: transparent;
}
.front-buttons {
/* vertical center button groups against left side text */
/* display: flex; */
/* align-items: center; */
}
.front-buttons .btn-group {
text-align: left;
}
#front-tagline {
margin-bottom: 0;
text-shadow: 0px 0px .2em var(--glow);
}
@media (min-width: 992px) { /* @screen-md-min */
.front-buttons > div:first-child {
text-align: right;
}
}
.front-buttons label {
font-size: 1em;
white-space: nowrap;
}
.front-buttons label img {
height: 1em;
margin-top: -.2em;
}
.front-buttons .btn {
float: none; /* separate buttons */
border-radius: .2em !important;
margin: .1em !important;
}
.web, .fediverse, .bluesky, .handle {
white-space: nowrap;
}
.front-light .web, .front-light .web:hover {
color: #20593c;
}
.front-light .fediverse, .front-light .fediverse:hover {
color: #88305b;
}
.front-light .bluesky, .front-light .bluesky:hover {
color: #305b88;
}
.front-dark .web, .front-dark .web:hover {
color: #b7e4c6;
}
.front-dark .fediverse, .front-dark .fediverse:hover {
color: #e4b7c6;
}
.front-dark .bluesky, .front-dark .bluesky:hover {
color: #b7c6e4;
}
.fediverse img,
.bluesky img {
height: 1em;
}
.btn.web {
background-color: #20593c;
border: 2px solid #47c986;
}
.btn.fediverse {
background-color: #88305b;
border: 2px solid #c94786;
}
#front-instructions {
min-height: 4em;
}
.instruction {
display: none;
margin: 1em;
margin-left: 2em;
margin-right: 2em;
margin-top: 0;
margin-bottom: 0;
}
#front-instruction-placeholder {
display: block;
font-style: italic;
opacity: 70%;
}
#front-logo-bottom {
padding-bottom: 0;
margin-bottom: -1em;
}
#listen-signups input, #webmention-signups input {
margin: .5em;
}
#user, .promo, #listen-signups, #webmention-signups {
margin-bottom: 1em;
}
.promo {
text-align: left;
}
.promo form {
margin: 10px; /* same as p */
}
.promo details {
display: inline-block;
margin-bottom: 10px;
}
.promo details[open] {
margin-left: 10px;
margin-bottom: 0;
}
.promo details[open] pre {
margin-top: 10px;
margin-bottom: 0;
}
.promo summary {
cursor: pointer;
}
#edit-profile em {
font-style: normal;
}
form {
display: inline;
}
form input {
vertical-align: middle;
}
.delete-website {
padding: 0;
font-size: .7em;
border: none;
background-color: transparent;
}
.delete-website:hover {
color: red;
background-color: transparent;
}
#users-label {
margin-top: 1em;
}
#users {
list-style: none;
}
#users-paging {
clear: both;
}
.source {
text-align: left;
margin-top: .5em;
}
#choose-blog > ul {
list-style: none;
text-align: left;
}
@media (min-width: 768px) {
.user-items > .row {
display: table;
table-layout: fixed !important;
width: 100%;
text-align: left;
}
.user-items > .row > .col-sm-1,
.user-items > .row > .col-sm-2,
.user-items > .row > .col-sm-3,
.user-items > .row > .col-sm-4,
.user-items > .row > .col-sm-5,
.user-items > .row > .col-sm-6,
.user-items > .row > .col-sm-7,
.user-items > .row > .col-sm-8,
.user-items > .row > .col-sm-9,
.user-items > .row > .col-sm-10 {
display: table-cell;
float: none;
text-align: left;
border-spacing: 0;
}
}
@media (max-width: 767px) {
.user-items > .row {
margin-bottom: 1em;
text-align: left;
}
.user-items, .user-items ul {
padding-left: 0;
}
}
.deliveries li {
list-style: none;
}
.source-buttons, .original-post, .deliveries li {
white-space: nowrap;
}
.delete {
border: none;
background: none;
font-weight: bold;
color: red;
}
.delete:hover, .delete:focus {
color: darkred;
}
/* .glyphicon-warning-sign { color: gold; } */
.glyphicon-ok-sign { color: green; }
.glyphicon-exclamation-sign { color: gold; }
.glyphicon-pause { color: gold; }
.glyphicon-refresh { color: blue; }
.glyphicon-remove { color: red !important; }
.glyphicon-transfer { color: blue; }
.user-items {
font-size: .8em;
list-style: none;
}
code {
color: black;
background-color: white !important;
}
code a, a code {
color: #337ab7;
}
code a:hover, a code:hover {
color: var(--bg);
}
.original-post-links {
list-style: none;
padding-left: 0;
}
label {
/* override Bootstrap style */
font-weight: 300;
}
button {
border: 0;
background-color: #337AB7; /* same color as links */
color: white;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .5em;
padding-right: .5em;
border-radius: 2px;
}
button[disabled] {
border-color: gray !important;
color: gray !important;
pointer-events: auto !important;
}
button[disabled]:hover {
background-color: lightgray !important;
}
#preview-ui {
margin-top: 1em;
}
#preview-ui > * {
vertical-align: middle;
}
.btn-group {
white-space: nowrap;
}
.btn {
white-space: normal;
}
.btn-default {
background-color: #CEF;
border-color: #337AB7;
color: #337AB7;
}
.btn-copy {
color: #66A0D0;
background-color: transparent;
border-color: transparent !important;
padding: 3px 6px;
}
.btn-default:hover, .btn-default:hover:focus {
background-color: #BDE;
border-color: #337AB7;
color: #337AB7;
}
.btn-default:focus {
/* same as without :focus */
background-color: #CEF;
border-color: #337AB7;
color: #337AB7;
}
.btn-default pre {
background-color: transparent;
border: none;
}
.logo, .logo img {
height: 1.1em;
margin-top: -.2em;
}
.retry {
font-size: 1em !important;
font-style: normal;
border: none;
background-color: transparent;
vertical-align: baseline;
}
.highlight {
background-color: lightgreen;
padding: .2em;
border-radius: .5em;
}
#update-profile-button {
margin-top: -.5em;
}
.tabs a {
border-bottom: 1px solid lightgray;
background: linear-gradient(white, #e8e8e8);
padding-left: .5em;
padding-right: .5em;
padding-top: .2em;
padding-bottom: .2em;
}
.tabs a:hover {
text-decoration: none;
}
a.active-tab {
border-bottom: none;
border-left: 1px solid lightgray;
background: inherit;
color: inherit;
}
/* TODO: drop border-left above and switch to this once Firefix supports :has()
* https://caniuse.com/css-has
a:has(+ a.active-tab) {
border-right: 1px solid lightgray;
} */
a.active-tab + a {
border-left: 1px solid lightgray;
}
.disable-button, #bad-button {
border-color: red;
color: red;
}
.disable-button:hover, #bad-button:hover {
background-color: #FCC;
}
#good-button {
border-color: green;
color: green;
}
#good-button:hover {
background-color: #DED;
}
#micropub-token-button, #disable-publish-button {
margin-top: -6px;
}
.mastodon-button {
height: 50px;
padding: 6px;
background-color: #323946;
}
#preview .verb {
font-weight: bold;
}
#preview-text {
display: inline-block;
margin-top: 1em;
text-align: left;
white-space: pre-wrap;
font-family: inherit;
font-size: inherit;
max-width: 98%;
}
#preview-text hr {
border-color: #cccccc;
}
#preview-text img, #preview-text video {
max-height: 200px;
max-width: 100%;
margin-top: 1em;
}
.mastodon-embed {
margin: 1em;
}
input[type="text"], input[type="url"] {
color: black; /* overrides .front-dark */
padding-left: .3em;
padding-right: .3em;
border: 1px solid black;
font-size: 1em;
}
input[type="submit"], summary.btn {
font-size: .75em;
}
#sent pre {
display: inline-block;
}
.profile {
width: 32px;
}
.big .profile {
width: 48px;
}
a img.shadow:hover
{
box-shadow: 3px 3px 3px #06c !important;
}
.error, .warning {
margin: 10px;
padding: .2em;
font-style: italic;
}
.error {
background-color: lightcoral !important;
}
.warning {
background-color: gold !important;
}
.error p, .warning p {
margin: 10px;
}
.error code, .warning code {
font-style: normal;
background-color: inherit !important;
}
.warning pre {
text-align: left;
}
.docs {
list-style: none;
}
.docs table {
border-collapse: collapse;
width: auto;
font-size: .8em;
border: 1px solid steelblue;
margin-left: -55px;
margin-right: -15px;
margin-top: 2em;
margin-bottom: 2em;
}
.docs table.list {
margin-left: inherit;
}
.docs th, .docs td {
padding: .5em;
}
.docs td.na {
background-color: #f0f0f0;
}
.docs th.subhead {
font-weight: normal;
font-style: italic;
}
.docs tbody th {
text-align: right;
}
.docs thead th {
text-align: center;
}
.docs table.list thead th {
text-align: left;
}
.docs table code {
white-space: nowrap;
background-color: transparent !important;
}
.docs td {
text-align: center;
}
.docs table.list td {
text-align: left;
}
.docs th {
background-color: #ebecf6;
}
.docs tr:nth-child(even) {
background-color: #f6f6f6;
}
.docs .done, .docs .yes {
background-color: #ebf6eb;
}
.docs tr:nth-child(even) .done, .docs tr:nth-child(even) .yes {
background-color: #e2f6e2;
}
.docs .not-done {
background-color: white;
}
.docs .maybe {
background-color: #fffdda;
}
.docs tr:nth-child(even) .maybe {
background-color: #fffacd;
}
.question {
margin-top: 2em;
margin-bottom: .5em;
font-weight: bold;
}
.answer ul li, .answer ol {
margin-bottom: .5em;
}
.right {
float: right;
margin-left: 20px;
text-align: center;
}
.left {
float: left;
margin-right: 20px;
text-align: center;
}
.left img, .right img {
width: 100%;
}
.left p, .right p {
margin-top: .3em;
margin-bottom: 1em;
}
.which-bridgy.row {
margin-bottom: 1em;
}
.which-bridgy .btn {
white-space: normal;
border-radius: 1em;
}
.which-bridgy .btn img {
height: 1em;
}
.which-bridgy .btn-default {
background-color: #CEF;
margin-bottom: 1em;
}
.which-bridgy .btn-default:hover {
background-color: #BDE;
}
.which-bridgy .btn-default pre {
background-color: transparent;
border: none;
}
.which-bridgy .highlight {
background-color: lightgreen;
padding: .2em;
border-radius: .5em;
}
@media screen and (min-width: 312px) {
}
@media screen and (max-width: 455px) {
.half, .half-sidebyside {
width: 100%;
}
.third, .quarter, .sixth {
width: 50%;
}
}
@media screen and (min-width: 456px) {
.half { width: 50%; }
.half-sidebyside { width: 45%; }
.third { width: 32%; }
.quarter { width: 25%; }
.sixth { width: 17%; }
}