kopia lustrzana https://github.com/snarfed/bridgy-fed
830 wiersze
12 KiB
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%; }
|
|
}
|