Something went wrong. Try again.
🌉 A bridge between decentralized social networks fed.brid.gy
Something went wrong. Try again.
19 kB · 1209 lines
CSS
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210/* 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; */}
#admin #header #logo { background-color: var(--glow); padding: .5em; padding-bottom: 0;}
#admin #header #logo::after { content: 'Admin'; padding-left: .5em; font-family: monospace;}
#admin .row { text-align: left;}
#admin .line { margin-bottom: .2em;}
#admin .field { text-align: right;}
#admin .value { display: flex; align-items: center; overflow: hidden; white-space: nowrap; font-weight: normal;}
#admin .id-text { min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis;}
#logins img { border-radius: 50%; /* makes perfect circle */ object-fit: cover; /* keeps aspect ratio */}
#logins { text-decoration: none; padding-top: .5em; padding-bottom: .75em; padding-left: .75em; padding-right: .5em; margin-left: -.25em;}
#logins:hover { background-color: #DEF; border-radius: 1em;}
#logins .profile { position: relative; z-index: 1;}
#logins .provider { position: relative; margin-left: -.5em;}
#login input[type="text"], #login input[type="url"] { width: 12em !important; /* these are from bootstrap */ padding: 6px 12px; border: 1px solid #ccc;}
.divider { margin-left: .5em; margin-right: .5em;}
.btn-link { padding: 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;}
#settings .row { text-align: left;}
form.settings-item, #block-row, #blocklist-buttons input[type="submit"] { display: revert; margin-top: .5em; margin-bottom: .5em;}
#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-tagline { margin-bottom: 0; text-shadow: 0px 0px .2em var(--glow);}
.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-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-item { padding: 0; font-size: .7em; border: none; background-color: transparent;}
.delete-item: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; }
#settings .user-items > .row { display: block; }
.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; 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; text-align: left;}
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], input[disabled] { border-color: gray !important; color: gray !important; pointer-events: auto !important;}
button[disabled]:hover, input[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;}
.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-hasa:has(+ a.active-tab) { border-right: 1px solid lightgray;} */
a.active-tab + a { border-left: 1px solid lightgray;}
.blocklist-buttons input[type="submit"] { margin-top: .2em; margin-bottom: .2em;}
.blocklist-buttons input[type="submit"]:hover { background-color: lightcoral; color: white;}
.blocklist-buttons a:hover { text-decoration: none;}
/* bootstrap sets summary to display: block, which hides the ▸/▾ marker */.blocklist-buttons summary { display: list-item; cursor: pointer;}
.disable-button { border-color: red; color: red; background-color: white;}
.disable-button:hover { background-color: #FCC;}
.enable-button { border-color: green; color: green; background-color: white;}
.enable-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;}
.post-embed > .h-entry,.post-embed > .h-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75em 1em; margin: 1em 0; padding: 1em; border: 1px solid #dddddd; border-radius: 12px; background-color: white; text-align: left;}
/* bare h-card, eg a user profile */.post-embed > .h-card { align-items: center;}
.post-embed > .h-card .u-photo { order: -1; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;}
.post-embed:has(> .post-logo) { position: relative;}
/* bottom right corner of the .h-entry card, inside its 1em padding. its vertical margin collapses through .post-embed */.post-embed > .post-logo { position: absolute; bottom: 1em; right: 1em;}
.post-embed > .post-logo,.post-embed > .post-logo img { height: 1.5em; margin: 0;}
.post-embed .p-uid,.post-embed .u-in-reply-to:empty,.post-embed .u-url:empty { display: none;}
.post-embed > .h-entry > .p-author { order: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: .5em; width: 100%; position: relative;}
.post-embed > .h-entry > .p-author:has(.u-photo) { padding-left: calc(48px + .75em); min-height: 48px;}
.post-embed > .h-entry > .p-author .u-photo { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;}
.post-embed > .h-entry > .p-author .p-name,.post-embed > .h-card .p-name { font-weight: bold;}
.post-embed > .h-entry > .p-author .p-nickname,.post-embed > .h-card .p-nickname { color: #777777;}
.post-embed > .h-entry > .p-author .p-nickname::before,.post-embed > .h-card .p-nickname::before { content: '@';}
.post-embed > .h-entry > .e-content { order: 2; width: 100%; overflow-wrap: anywhere;}
/* granary wraps multi-line plain text in an inline white-space: pre div */.post-embed > .h-entry > .e-content > div { white-space: pre-wrap !important;}
.post-embed > .h-entry > img,.post-embed > .h-entry > video { order: 3; max-width: 100%; max-height: 400px; border-radius: 8px;}
/* title, for posts that have one, eg articles */.post-embed > .h-entry > .p-name:not(.e-content) { order: 2; width: 100%; font-weight: bold;}
/* granary links published time to the post if it has a URL */.post-embed > .h-entry > .dt-published,.post-embed > .h-entry > a:has(> .dt-published) { order: 4; font-size: .85em; color: #777777; /* leave room for .post-logo */ margin-right: 2em;}
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; border-radius: 90px; margin-right: 10px; margin-left: 10px;}
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%; }}
/* CSS View Transitions * https://developer.chrome.com/docs/web-platform/view-transitions * https://caniuse.com/view-transitions */@view-transition { navigation: auto;}
/* The switch - the box around the slider */@media (scripting: none) { .switch { display: none; }}
@media (scripting: enabled) { .switch { display: inline-block; }}.switch { position: relative; width: 60px; height: 34px; margin-left: 10px;}
/* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0;}
/* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s;}
.disabled-notice { font-size: small; color: gray; display: none; margin-bottom: 10px; }
input:checked + .slider { background-color: #2196F3;}
input:focus + .slider { box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
/* Rounded sliders */.slider.round { border-radius: 34px;}
.slider.round:before { border-radius: 50%;}
/* new profile page row */.profile-row { border: gray 1px solid; border-radius: 10px; padding: 20px; margin: 20px;}
#login p.row { margin-top: 35px;}
/* login buttons: <details> with the logo as <summary>, input and submit inside */.login-button { cursor: pointer; list-style: none; width: fit-content; margin: 0 auto 5px; border:gray 1px solid; border-radius:30px; padding:15px; transition: transform 0.5s ease-in-out; position: relative;}
.login-button::-webkit-details-marker { display: none;}
details[open] > .login-button { transform: translateY(-20px); margin-top:20px;}
.login-label { font-weight: bold; vertical-align: middle;}
.login-input { width: 135px; height: 50px; border-radius: 90px; margin-right:10px; vertical-align: middle;}
.submit-button { position: absolute; border:gray 1px solid; border-radius:30px; width: 45px; height: 45px;}
.fade-in-element { transition: all 0.3s ease-in-out; margin-top:20px;}
@starting-style { .fade-in-element { opacity: 0; transform: translateY(-10px); }}
.login-button-logotype { display: flex; flex-direction: row; align-items: center; user-select: none;}
.login-button-logotype img { pointer-events: none;}
.login-button-logotype span { font-size: 28px; font-weight: bold; margin-left: 10px; pointer-events: none; white-space: nowrap;}
/* Mastodon OAuth */.account-chooser .btn-link { font-weight: 300;}
.account-chooser button a { /* the user's link shouldn't navigate; clicks should always submit the form */ pointer-events: none;}