diff options
| -rw-r--r-- | index.html | 2 | ||||
| -rwxr-xr-x | style.css | 548 |
2 files changed, 322 insertions, 228 deletions
@@ -32,7 +32,7 @@ <br> Последний релиз - Отблеск: <b> -<iframe style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/track=1755501905/size=small/bgcol=333333/linkcol=4ec5ec/transparent=true/" seamless><a href="https://sn4il.bandcamp.com/track/--20">Отблеск by Sn4il</a></iframe> +<iframe style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/track=1755501905/size=small/bgcol=ffffff/linkcol=0687f5/transparent=true/" seamless><a href="https://sn4il.bandcamp.com/track/--20">Отблеск by Sn4il</a></iframe> </p> <a href="https://blog.sn4il.site/sn4il" target="_blank" rel="noopener noreferrer">Аккаунт в Fediverse</a> </p> @@ -1,339 +1,433 @@ +@import url('https://fonts.cdnfonts.com/css/sf-mono?styles=36552,36546'); -/*Begin copy-pasted segment from meowcity.club (with minor ajustments)*/ -/*Links styling*/ -a[href]:before { - content: "["; +*, +*:before, +*:after { + box-sizing: border-box; } -a[href]:after { - content: "]"; + +body { + max-width: 48em; + margin: 0 auto; + line-height: 1.5; + padding: 0.5rem 1rem; + word-wrap: break-word; + height: 100%; + background-color: #e2e0de; + color: #363533; + font-weight: 400; + font-size: 15px; + font-family: 'SF Mono', sans-serif; + line-height: 1.725; + text-rendering: geometricPrecision; + display: flex; + flex-direction: column; + overflow-wrap: break-word; +} + +video { + aspect-ratio: 16 / 9; +} + +sup { + padding: 0 2px; + border-radius: 5px; + line-height: 99%; + left: 4px; + position: relative; + bottom: 4px; +} + +a { + text-decoration: none; + color: #6495ED; } -a[href], -a>span /*Only required because some instances do some strange stuff with links*/{ - color: cyan; - text-decoration: none; + +pre { + overflow-x: auto; + border-radius: 4px; + background: #dedcd9; + color: #333; + padding: 10px 15px; + font-size: 90%; } +code { + border-radius: 3px; + background: #dedcd9; + color: #333; + padding: 0 4px; + font-size: 90%; + border: 1px dotted #666; +} -/*Header styling*/ -h1, -.p-name, -.snac-top-user-name { - font-size: 1em!important; - color: red; +blockquote { + border-left: 2px solid #6495ED; + margin-left: 1rem; + padding-left: 1rem; + background: #dedcd9; + border-radius: 4px; } -h1:before, -.p-name:before, -.snac-top-user-name { - content: "# "; + +input[type="file"] { + margin-bottom: 1rem; + width: 100%; } -h2, -.snac-top-user-id { - font-size: 1em!important; - color: deepskyblue; +select, +input[type=file]::file-selector-button { + background: rgb(201, 201, 203, 0.4); + border: none; + border-radius: 4px; + padding: 0.3rem; } -h2:before, -.snac-top-user-id::before { - content: "## "; + +select:hover, +input[type=file]::file-selector-button:hover { + background: rgb(201, 201, 203); } -h3 { - font-size: 1em; - color: magenta; +input[type="text"] { + height: auto; + font-size: inherit; + width: 100%; + color: inherit; + border-radius: 4px; + border: inherit; } -h3>a /*h3 colouring overrides the link*/{ - color: magenta; + +input[class^="snac-btn-"] { + background: rgb(201, 201, 203, 0.4); + border: none; + border-radius: 4px; + padding: 0.3rem; + font-size: 85%; } -h3:not(.terminal-input)::before { - content: "### "; + +input[class^="snac-btn-"]:hover { + background: rgb(201, 201, 203); } -h4:before { - content: "#### " +input[name="telegram_bot"] { + margin-bottom: 0.5rem; } -h4 { - font-size: 1em; - color: pink; + +.snac-note input[value="Post"], +.snac-top-controls input[value="Post"], +.snac-top-controls input[value="Follow"], +.snac-top-controls input[value="Boost"], +.snac-top-controls input[value="Update user info"] { + background: rgb(100, 149, 237, 0.2); + color: #6495ED; + border: none; + border-radius: 4px; + padding: 0.5rem 1rem; + font-weight: 700; } +.snac-note input[value="Post"]:hover, +.snac-top-controls input[value="Post"]:hover, +.snac-top-controls input[value="Follow"]:hover, +.snac-top-controls input[value="Boost"]:hover, +.snac-top-controls input[value="Update user info"]:hover { + background: rgb(100, 149, 237, 0.3); +} -/*Markup styling*/ -strong, -strong>span/*Once again due to weird instance styling*/ { - color: coral; +.snac-top-controls input[value="Follow"], +.snac-top-controls input[value="Boost"] { + margin-top: 0.5rem; } -strong:before { - content: "<"; + + +.snac-top-controls > div > details > summary::marker { + content: "✏️ "; } -strong:after { - content: ">"; + +.snac-top-controls #new_post_form details:first-of-type summary::marker { + content: "📎 "; } -ul { - list-style-type: none; + +.snac-top-controls #new_post_form details:last-of-type summary::marker { + content: "📊 "; } -li>h3:before /*List prefix overrides h3 prefix*/{ - content: "- " !important; + +.snac-top-controls > details:first-of-type summary::marker { + content: "🗃️ "; } -li:not(:has(h3)):before { - content: "- "; + +.snac-top-controls > details:last-of-type summary::marker { + content: "⚙️ "; } -/*Default SNAC css*/ -body { - width: 85%; - margin: auto; - line-height: 1.5; - padding: 0.8em; - word-wrap: break-word; +form[id$=_reply_form] details:first-of-type summary::marker { + content: "📎 "; } -pre { - overflow-x: scroll; /*Don't crop on overflow; this doesn't happen very often*/ +.snac-controls details:first-of-type summary::marker { + content: "🗨️ "; +} + +h2::before { + position: absolute; + left: -1.2rem; + color: #6495ED; + content: "#"; + font-size: 1.5rem; +} + +h2 { + position: relative; + display: block; + margin-left: 1rem; +} + +textarea, +input { + outline: none; + padding: 0.3rem; + background: #dedcd9; + border: none; + border-radius: 4px; +} + +textarea[name="bio"], +textarea[name="metadata"] { + width: 100%; +} + +textarea:focus, +input:focus { + background: #eae9e7; +} + +summary { + border-radius: 4px; + padding: 0.1rem 0.2rem; + width: fit-content; +} + +summary:hover { + cursor: pointer; + background: rgb(201, 201, 203, 0.4); } .snac-embedded-video, img { - max-width: 100% + max-width: 100%; + border-radius: 4px; } .snac-origin { - font-size: 85% + font-size: 85%; + color: limegreen; + margin-top: 0.3rem; +} + +.snac-origin>a { + color: #363533; } + .snac-score { - float: right; - font-size: 85% + float: right; + font-size: 85%; + margin-left: 0.5rem; +} + +.snac-top-user-banner > img { + width: 100%; } -.snac-top-user { - text-align: center; - padding-bottom: 2em +.snac-metadata { + margin-bottom: 1rem; } .snac-top-user-name { - font-size: 200% + font-size: 150%; + margin-bottom: -1.1rem; + margin-top: 0.5rem; } .snac-top-user-id { - font-size: 150% + font-size: 110%; + margin-bottom: 1rem; +} + +.snac-top-user-bio { + margin-bottom: 1em; +} + +.snac-top-user-bio br { + display: none; +} + +.snac-top-nav { + color: #e2e0de; + display: flex; + align-items: center; + justify-content: end; +} + +.snac-top-nav > a { + text-transform: capitalize; + border-left: 1px solid; + padding-left: 0.6rem; + line-height: 1em; +} + +.snac-top-nav > a:first-of-type { + padding-left: 0; + border-left: 0; +} + +.snac-top-nav>a:hover { + text-decoration: underline; +} + +.snac-top-nav>.snac-avatar { + margin-right: auto; } .snac-avatar { - float: left; - height: 2.5em; - padding: 0.25em + float: left; + height: 2.5rem; + aspect-ratio: 1 / 1; + margin-right: 0.5rem; + border-radius: 8px; } .snac-author { - font-size: 90%; - text-decoration: none + font-size: 95%; + text-decoration: none; + font-weight: 700; + color: #363533; } .snac-author-tag { - font-size: 80% + font-size: 90%; + color: #363533; + text-decoration: none; } .snac-pubdate { - color: #a0a0a0; - font-size: 90% + color: #a0a0a0; + font-size: 90%; + float: right; } .snac-top-controls { - padding-bottom: 1.5em + padding-bottom: 1.5em; +} + +.e-content summary { + margin-bottom: 1rem; + color: palevioletred; } .snac-post { - border-top: 1px solid #a0a0a0; + border-top: 1px solid #c1c1c1; + margin-bottom: 1rem; +} + +.snac-post-header { + line-height: 1.3; } .snac-children { - padding-left: 2em; - border-left: 1px solid #a0a0a0; + padding-left: 1.5em; + border-left: 1px solid #c1c1c1; } .snac-textarea { - font-family: inherit; - width: 100% + font-family: inherit; + width: 100%; + color: inherit; + border-radius: 4px; + border: inherit; } .snac-history { - border: 1px solid #606060; - border-radius: 3px; - margin: 2.5em 0; - padding: 0 2em + display: none; } .snac-btn-mute { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-btn-unmute { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-btn-follow { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-btn-unfollow { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-btn-hide { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-btn-delete { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em } .snac-btn-limit { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-btn-unlimit { - float: right; - margin-left: 0.5em + float: right; + margin-left: 0.5em; } .snac-footer { - margin-top: 2em; - font-size: 75% + margin-top: 2em; + font-size: 75%; + color: #666; } + .snac-poll-result { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } -/*Begin og segment*/ -* { - background-color: black; - color: white; - font-family: monospace; -} +@media (max-width: 500px) { + body { + font-size: 14px; + } -/*This makes buttons look like any other text - this was intended to have surrounding symbols, -but it doesn't work on inputs, so you may want to re-enable the border for a11y*/ -input[type=submit] { - border-width: 0px; - color: lime; - font-size: .9em; - cursor: pointer; -} -input[type=text] { - border-width: 0px; -} + sup { + left: 2px; + } -/*Summary ajustments*/ -details[open]>summary::marker { - content: "v " -} -details>summary:hover { - cursor: pointer; -} -details>summary::marker { - color: hotpink; - content: "> " -} + .snac-children { + padding-left: 1em; + } -/*Changes user @s in mentions and in posts*/ -.snac-origin>a, -.snac-post-with-desc>p>b>a, -.mention, -.snac-author-tag, -.mention>span { - color: mediumslateblue!important -} -.snac-origin>a::before, -.mention::before, -.snac-author::before, -.snac-author-tag::before, -.snac-post-with-desc>p>b>a:before { - content: "("!important; -} -.snac-origin>a::after, -.mention::after, -.snac-author::after, -.snac-author-tag::after, -.snac-post-with-desc>p>b>a::after { - content: ")"!important -} + input[class^="snac-btn-"] { + font-size: 80%; + } -/*Changes date from mm-dd-yyyy to [mm-dd-yyyy]*/ -.snac-pubdate::before { - content: "[" -} -.snac-pubdate::after { - content: "]" -} - -/*Origin ajustments - this includes boosts and replies*/ -.snac-origin { - color: indianred -} -.snac-origin::before { - content: "((" -} -.snac-origin::after { - content: "))" -} - -/*Media fixes*/ -.snac-embedded-video, -img { - max-width: 200px; - max-height: 200px; - height: fit-content; - object-fit: contain; -} -.snac-content-attachments>a::before, -.snac-content-attachments>a::after { - content: "" -} -.snac-content-attachments, -img { - animation-play-state: paused; -} -.snac-content-attachments:hover, -img:hover { - animation-play-state: running; -} - -.snac-top-user { - text-align: left; - padding-top: 1em; -} + .snac-pubdate { + font-size: 80%; + } -/*The below only styling works on webkit browsers*/ -input[type=submit]::after { - content: "]" -} -input[type=submit]::before { - content: "[" -} -input[type=checkbox] { - visibility: hidden; -} -input[type=checkbox]::after { - visibility: visible; - content: "[-]"; - color: red; -} -input[type=checkbox]::after:checked { - content: "[X]" -} + h2::before { + top: -0.2rem; + } -/*Hides pinned posts in private view*/ -/*Only works in userstyles; change to instance URL*/ -@-moz-document regexp(".*/admin.*") { - .snac-post:has(.snac-post-header > .snac-score > span) { - display: none; - } + .snac-top-nav > a { + padding-left: 0.2rem; + margin: -0.2rem; + } } |