Restyle

2 files changed, 322 insertions, 228 deletions

diff --git a/index.html b/index.html
index 19035a7..47170c9 100644
--- a/index.html
+++ b/index.html
@@ -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>
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;
+  }
 }