snac-ember/style.css
2024-01-07 16:34:59 +00:00

529 lines
13 KiB
CSS

body {
max-width: 48em;
margin: auto;
line-height: 1.5;
padding: 0.8em;
word-wrap: break-word;
display: flex;
flex-direction: column;
background: #101024;
font-family: sans;
font-size: 16px;
}
a {
color: #d60;
text-decoration: none;
}
.snac-instance-blurb {
color:#f7f7f7;
}
.snac-posts > p:nth-child(22) {
display: flex;
color: 101024;
}
.snac-posts > p:nth-child(22) a {
background: #e7e8ea;
padding: 0.5rem;
border-radius: 1rem;
width: 100%;
text-align: center;
color: #d60;
}
.snac-posts > p:nth-child(22) a:hover {
background: #ddd;
}
.snac-post-with-desc p {
color:#f7f7f7;
}
pre {
overflow-x: scroll;
padding: 0.3rem 0.6rem;
border-radius: 0.5rem;
background-color: #e7e8ea;
font-size: 90%;
margin: 0.5rem 0;
}
code {
background-color: #e7e8ea;
padding: 0.1em 0.4em;
border-radius: 0.5em;
font-size: 90%;
box-decoration-break: clone;
}
img {
border-radius: 1rem;
}
textarea {
border-radius: 1rem;
border: 1px solid #ddd;
padding: 0.5rem 0.9rem;
resize: none;
max-width: 95%;
}
textarea[name="bio"] {
max-width: 95%;
}
select {
width: 100%;
border-radius: 1rem;
border: 1px solid #ddd;
padding: 0.4em 0.9em;
margin-bottom: 0.5em;
width: 97%;
}
input[type="text"],
input[type="number"],
input[type="password"] {
border-radius: 1rem;
border: 1px solid #ddd;
padding: 0.4rem 0.9rem;
width: 96%;
margin: 0.3rem 0;
}
input[type="file"] {
background: #fff;
border-radius: 1rem;
border: 1px solid #ddd;
width: 98%;
margin: 0.3rem 0;
}
input[type="file"]::file-selector-button {
border: 1px solid #ddd;
border-radius: 1rem;
padding: 0.3rem;
background: #555;
}
input[type="file"]::file-selector-button:hover {
background: #ddd;
}
input[name="summary"] {
width: 96%;
margin: 0.3rem 0;
}
summary {
padding: 0.2rem 0.8rem 0.2rem 0.3rem;
display: inline-block;
border-radius: 1rem;
margin-bottom: 0.3rem;
}
summary:hover {
cursor: pointer;
background: #ddd;
}
details {
/*color:#100706;*/
color:#f7f7f7;
}
details summary:hover {
background:#fa4;
}
details > summary::before {
margin-right: 0.2rem;
filter: invert(42%);
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 12"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>');
}
details[open] > summary::before {
margin-right: 0.2rem;
filter: invert(42%);
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 12"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
}
sup {
padding: 2px;
height: fit-content;
border-radius: 1rem;
line-height: 1;
position: relative;
right: 1rem;
top: 0.4rem;
z-index: 100;
}
.snac-embedded-video,
img {
max-width: 100%;
border-radius: 1rem;
}
.snac-content-attachments {
margin-bottom: 1rem;
}
.snac-top-nav {
color: #101024;
display: flex;
justify-content: end;
position: relative;
}
.snac-top-nav > a {
padding-right: 1rem;
}
.snac-top-nav > img {
height: 4.5rem;
border-radius: 5rem;
margin-right: auto;
position: absolute;
left: 0rem;
}
.snac-top-user-banner > img {
border-radius: 1rem;
}
.snac-origin {
font-size: 85%;
margin-top: 1rem;
color: LimeGreen;
}
.snac-origin > a {
text-decoration: none;
color: #d60;
}
.snac-score {
float: right;
font-size: 85%;
color: #d60;
}
.snac-top-user {
padding-bottom: 1rem;
margin-top: -6rem;
padding-left: 4.5rem;
padding-top:4.5rem;
}
.snac-top-user-name {
color:#f7f7f7;
font-size: 130%;
margin-bottom: 0px;
margin-top: 3rem;
padding: 0 1rem 0 1rem;
font-weight: 600;
}
.snac-top-user-id {
margin-top: 0;
padding: 0 1rem 0 1rem;
color: #d60;
}
.snac-top-user-bio {
color:#f7f7f7;
padding: 0 1rem 0 1rem;
}
.snac-metadata {
color:#f7f7f7;
padding: 0 1rem 0 1rem;
}
.snac-avatar {
float: left;
height: 3em;
margin-right: 0.5rem;
border-radius: 50%;
border: 1px solid #c6c6c6;
}
.snac-author {
font-size: 90%;
text-decoration: none;
color: #c40;
font-weight: 600;
}
.snac-author-tag {
font-size: 80%;
color: #d60;
text-decoration: none;
}
.snac-pubdate {
color: #a0a0a0;
font-size: 85%;
}
.snac-top-controls {
padding-bottom: 0.5em;
}
.snac-top-controls details {
color:#f7f7f7;
}
.snac-top-controls details summary::before {
color:#f7f7f7;
}
.snac-posts > a:nth-child(3) {
content: url('data:image/svg+xml;dataset=utf-8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.8284 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.509 3.3668 14.9763 3.3668 13.4142 4.9289L10.5858 7.75732L12 9.17154L14.8284 6.34311C15.6095 5.56206 16.8758 5.56206 17.6568 6.34311C18.4379 7.12416 18.4379 8.39049 17.6568 9.17154L14.8284 12Z" fill="currentColor"/><path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02372 20.6332 6.49106 20.6332 4.92896 19.0711C3.36686 17.509 3.36686 14.9764 4.92896 13.4143L7.75739 10.5858L9.1716 12L6.34317 14.8285C5.56212 15.6095 5.56212 16.8758 6.34317 17.6569C7.12422 18.4379 8.39055 18.4379 9.1716 17.6569L12 14.8285Z" fill="currentColor"/><path d="M14.8285 10.5857C15.219 10.1952 15.219 9.56199 14.8285 9.17147C14.4379 8.78094 13.8048 8.78094 13.4142 9.17147L9.1716 13.4141C8.78107 13.8046 8.78107 14.4378 9.1716 14.8283C9.56212 15.2188 10.1953 15.2188 10.5858 14.8283L14.8285 10.5857Z" fill="currentColor"/></svg>');
filter: invert(42%);
}
.snac-post {
border: 1px solid #101024;
border-radius: 1rem;
padding: 0 1rem 0.5rem 1rem;
margin-bottom: 1rem;
background: #323246;
}
.snac-post .snac-content {
color:#f7f7f7;
}
.snac-post .snac-controls summary {
color:#f7f7f7;
}
.snac-post-header a:nth-child(3) {
margin: 0 0.1rem;
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="dodgerblue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
filter: invert(42%);
}
.snac-children {
padding-left: 1rem;
border-left: 1px solid #ddd;
}
.snac-textarea {
font-family: inherit;
width: 100%;
}
.snac-history {
display: none;
}
.snac-btn-mute {
float: right;
margin-left: 0.5em;
}
.snac-btn-unmute {
float: right;
margin-left: 0.5em;
}
.snac-btn-follow {
float: right;
margin-left: 0.5em;
}
.snac-btn-unfollow {
float: right;
margin-left: 0.5em;
}
.snac-btn-hide {
float: right;
margin-left: 0.5em;
}
.snac-btn-delete {
float: right;
margin-left: 0.5em;
}
.snac-btn-limit {
float: right;
margin-left: 0.5em;
}
.snac-btn-unlimit {
float: right;
margin-left: 0.5em;
}
.snac-footer {
color:#f7f7f7;
margin-top: 2em;
font-size: 75%;
}
.snac-poll-result {
margin-left: auto;
margin-right: auto;
}
.snac-top-nav > a:nth-child(2) {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
filter: invert(42%);
}
.snac-top-nav > a:nth-child(2):hover {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="Burlywood" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>');
}
.snac-top-nav > a[href$="/admin" i] {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>');
filter: invert(42%);
}
.snac-top-nav > a[href$="/admin" i]:hover {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="LimeGreen" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 9.9-1"></path></svg>');
}
.snac-top-nav > a[href$=".rss" i] {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>');
filter: invert(42%);
}
.snac-top-nav > a[href$=".rss" i]:hover {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="Coral" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>');
}
.snac-top-nav > a[href$="/notifications" i] {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>');
filter: invert(42%);
}
.snac-top-nav > a[href$="/notifications" i]:hover {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="DodgerBlue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>');
}
.snac-top-nav > a[href$="/people" i] {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>');
filter: invert(42%);
}
.snac-top-nav > a[href$="/people" i]:hover {
content: url('data:image/svg+xml;dataset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="MediumSlateBlue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>');
}
.snac-top-nav > a {
padding: 1rem;
z-index: 99;
}
.snac-top-nav > a:hover {
background: #fc0;
border-radius: 1rem;
}
.snac-header {
color:#f7f7f7;
font-weight: 500;
margin: 0 0 0.5rem 0.5rem;
}
.mention {
background-color: #fa4;
color: #000;
padding: 0.1em 0.4em;
font-size: 90%;
border-radius: 0.5em;
text-decoration: none;
}
.snac-controls .button,
.snac-top-controls .button,
.snac-top-controls-more input[value="Follow"],
.snac-top-controls-more input[value="Boost"] {
padding: 0.5rem;
border: 1px solid dodgerblue;
border-radius: 1rem;
text-transform: uppercase;
transition: background-color 0.2s ease-out;
font-weight: 600;
color: dodgerblue;
}
input[value="Post"] {
width: 8rem;
}
input[value="Update user info"] {
width: 12rem;
}
.snac-btn-like,
.snac-btn-boost,
.snac-btn-unfollow,
.snac-btn-follow,
.snac-btn-mute,
.snac-btn-delete,
.snac-btn-hide,
.snac-btn-limit,
.snac-btn-pin,
.snac-btn-unpin {
padding: 0.4rem;
border-radius: 1rem;
border: 1px solid #ddd;
background: #fff;
text-transform: uppercase;
transition: background-color 0.2s ease-out;
font-weight: 600;
font-size: 80%;
}
.snac-btn-like:hover {
color: DeepPink;
background: #ddd;
}
.snac-btn-boost:hover {
color: LimeGreen;
background: #ddd;
}
.snac-btn-unfollow:hover {
color: BlueViolet;
background: #ddd;
}
.snac-btn-follow:hover {
color: BlueViolet;
background: #ddd;
}
.snac-btn-mute:hover {
color: DarkTurquoise;
background: #ddd;
}
.snac-btn-delete:hover {
color: red;
background: #ddd;
}
.snac-btn-hide:hover {
color: Salmon;
background: #ddd;
}
.snac-btn-limit:hover {
color: RosyBrown;
background: #ddd;
}
.snac-btn-pin:hover {
color: OrangeRed;
background: #ddd;
}
.snac-btn-unpin:hover {
color: OrangeRed;
background: #ddd;
}