summaryrefslogtreecommitdiff
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rwxr-xr-xstyle.css548
1 files changed, 321 insertions, 227 deletions
diff --git a/style.css b/style.css
index de97607..c888fa7 100755
--- a/style.css
+++ b/style.css
@@ -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;
+ }
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 07:21:24 +0000