Silvestar BistroviΔhtml {
background-color: #6495ED;
background-color: cornflowerblue;
}
Colours Bot
tjn21Hover background of toolbar bookmark items
Hover background of toolbar bookmark items #6495ed #FirefoxCSS
Hover background of toolbar bookmark items - Firefox Customs - Fedia
I have created a standard hover background which, using various stanzas, applies to everything except the toolbar bookmark items. The following code doesn't have the desired effect. What will? The browser toolbox only shows the main window so I have improvised....
Party Snacks
Colours Bot
klopoModifikasi tema #snac2 berdasarkan tema Paper buatan @[email protected]
merubah background menjadi terang dan beberapa detil kecil lainnya. Untuk font pakai Source Serif 4 dari Google Fonts. https://fonts.google.com/specimen/Source+Serif+4
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
max-width: 48em;
margin: 0 auto;
line-height: 1.5;
padding: 0.5rem 1rem;
word-wrap: break-word;
height: 100%;
color: #292929;
font-weight: 400;
font-size: 16px;
font-family: 'Source Serif 4', Georgia, serif;
line-height: 1.725;
text-rendering: geometricPrecision;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
}
blockquote { font-style: italic; border-left: 5px solid #e85d04; border-radius: 0.4em; padding: 0rem 0 0rem 0.5rem }
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: #023e8a;
}
.snac-content a:hover {
text-decoration: underline;
}
pre {
padding: 1em;
border-radius: 6px;
overflow: auto;
border: 1px solid #eee;
margin: 1em 0;
tab-size: 1rem
}
pre, code {
font-family: 'SF Mono', monospace, Consolas, Courier New;
font-size: 90%;
}
p code, div code {
border: 1px solid #eee;
border-radius: 3px;
font-size: 85%;
padding: 1px 2px;
}
input[type="file"] {
margin-bottom: 1rem;
width: 100%;
}
select,
input[type=file]::file-selector-button {
background: rgb(201, 201, 203, 0.4);
border: none;
border-radius: 4px;
padding: 0.3rem;
}
select:hover,
input[type=file]::file-selector-button:hover {
background: rgb(201, 201, 203);
}
input[type="text"] {
height: auto;
font-size: inherit;
width: 100%;
color: inherit;
border-radius: 4px;
border: inherit;
}
input[class^="snac-btn-"] {
background: rgb(201, 201, 203, 0.4);
border: none;
border-radius: 4px;
padding: 0.3rem;
font-size: 85%;
}
input[class^="snac-btn-"]:hover {
background: rgb(201, 201, 203);
}
input[name="telegram_bot"] {
margin-bottom: 0.5rem;
}
.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);
}
.snac-top-controls input[value="Follow"],
.snac-top-controls input[value="Boost"] {
margin-top: 0.5rem;
}
.snac-top-controls > div > details > summary::marker {
content: "βοΈ ";
}
.snac-top-controls #new_post_form details:first-of-type summary::marker {
content: "π ";
}
.snac-top-controls #new_post_form details:last-of-type summary::marker {
content: "π ";
}
.snac-top-controls > details:first-of-type summary::marker {
content: "ποΈ ";
}
.snac-top-controls > details:last-of-type summary::marker {
content: "βοΈ ";
}
form[id$=_reply_form] details:first-of-type summary::marker {
content: "π ";
}
.snac-controls details:first-of-type summary::marker {
content: "π¨οΈ ";
}
.hashtag, .hashtag span { color: #ef233c; font-weight: 600;}
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-content-attachments img {
border: 1px solid #ccc;
border-radius: 8px;
}
.snac-embedded-video,
img {
max-width: 100%;
border-radius: 4px;
}
.snac-origin {
font-size: 85%;
font-family: system-ui, sans-serif;
color: limegreen;
margin-top: 0.3rem;
}
.snac-origin>a {
color: #363533;
}
.snac-score {
float: right;
font-size: 85%;
margin-left: 0.5rem;
}
.snac-metadata {
margin-bottom: 1rem;
}
.snac-top-user-name {
font-size: 150%;
font-family: system-ui, sans-serif;
color: #444;
margin-bottom: -1.1rem;
margin-top: 0.5rem;
}
.snac-top-user-id {
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.5rem;
aspect-ratio: 1 / 1;
margin-right: 0.5rem;
border-radius: 8px;
}
.snac-author {
font-size: 95%;
text-decoration: none;
font-weight: 700;
color: #363533;
}
.snac-author-tag {
font-size: 90%;
color: #363533;
text-decoration: none;
}
.snac-pubdate {
color: #a0a0a0;
font-size: 90%;
float: right;
}
.snac-top-controls {
padding-bottom: 1.5em;
}
.e-content summary {
margin-bottom: 1rem;
color: #c1121f;
}
.snac-post {
border-top: 1px solid #c1c1c1;
margin-bottom: 1rem;
}
.snac-post-header {
line-height: 1.3;
}
.snac-children {
padding-left: 1.5em;
border-left: 1px solid #c1c1c1;
}
.snac-textarea {
font-family: inherit;
width: 100%;
color: inherit;
border-radius: 4px;
border: inherit;
}
.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 {
margin-top: 2em;
font-size: 75%;
color: #666;
}
.snac-poll-result {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 500px) {
body {
font-size: 14px;
}
sup {
left: 2px;
}
.snac-children {
padding-left: 1em;
}
input[class^="snac-btn-"] {
font-size: 80%;
}
.snac-pubdate {
font-size: 80%;
}
h2::before {
top: -0.2rem;
}
.snac-top-nav > a {
padding-left: 0.2rem;
margin: -0.2rem;
}
}
merubah background menjadi terang dan beberapa detil kecil lainnya. Untuk font pakai Source Serif 4 dari Google Fonts. https://fonts.google.com/specimen/Source+Serif+4
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
max-width: 48em;
margin: 0 auto;
line-height: 1.5;
padding: 0.5rem 1rem;
word-wrap: break-word;
height: 100%;
color: #292929;
font-weight: 400;
font-size: 16px;
font-family: 'Source Serif 4', Georgia, serif;
line-height: 1.725;
text-rendering: geometricPrecision;
display: flex;
flex-direction: column;
overflow-wrap: break-word;
}
blockquote { font-style: italic; border-left: 5px solid #e85d04; border-radius: 0.4em; padding: 0rem 0 0rem 0.5rem }
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: #023e8a;
}
.snac-content a:hover {
text-decoration: underline;
}
pre {
padding: 1em;
border-radius: 6px;
overflow: auto;
border: 1px solid #eee;
margin: 1em 0;
tab-size: 1rem
}
pre, code {
font-family: 'SF Mono', monospace, Consolas, Courier New;
font-size: 90%;
}
p code, div code {
border: 1px solid #eee;
border-radius: 3px;
font-size: 85%;
padding: 1px 2px;
}
input[type="file"] {
margin-bottom: 1rem;
width: 100%;
}
select,
input[type=file]::file-selector-button {
background: rgb(201, 201, 203, 0.4);
border: none;
border-radius: 4px;
padding: 0.3rem;
}
select:hover,
input[type=file]::file-selector-button:hover {
background: rgb(201, 201, 203);
}
input[type="text"] {
height: auto;
font-size: inherit;
width: 100%;
color: inherit;
border-radius: 4px;
border: inherit;
}
input[class^="snac-btn-"] {
background: rgb(201, 201, 203, 0.4);
border: none;
border-radius: 4px;
padding: 0.3rem;
font-size: 85%;
}
input[class^="snac-btn-"]:hover {
background: rgb(201, 201, 203);
}
input[name="telegram_bot"] {
margin-bottom: 0.5rem;
}
.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);
}
.snac-top-controls input[value="Follow"],
.snac-top-controls input[value="Boost"] {
margin-top: 0.5rem;
}
.snac-top-controls > div > details > summary::marker {
content: "βοΈ ";
}
.snac-top-controls #new_post_form details:first-of-type summary::marker {
content: "π ";
}
.snac-top-controls #new_post_form details:last-of-type summary::marker {
content: "π ";
}
.snac-top-controls > details:first-of-type summary::marker {
content: "ποΈ ";
}
.snac-top-controls > details:last-of-type summary::marker {
content: "βοΈ ";
}
form[id$=_reply_form] details:first-of-type summary::marker {
content: "π ";
}
.snac-controls details:first-of-type summary::marker {
content: "π¨οΈ ";
}
.hashtag, .hashtag span { color: #ef233c; font-weight: 600;}
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-content-attachments img {
border: 1px solid #ccc;
border-radius: 8px;
}
.snac-embedded-video,
img {
max-width: 100%;
border-radius: 4px;
}
.snac-origin {
font-size: 85%;
font-family: system-ui, sans-serif;
color: limegreen;
margin-top: 0.3rem;
}
.snac-origin>a {
color: #363533;
}
.snac-score {
float: right;
font-size: 85%;
margin-left: 0.5rem;
}
.snac-metadata {
margin-bottom: 1rem;
}
.snac-top-user-name {
font-size: 150%;
font-family: system-ui, sans-serif;
color: #444;
margin-bottom: -1.1rem;
margin-top: 0.5rem;
}
.snac-top-user-id {
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.5rem;
aspect-ratio: 1 / 1;
margin-right: 0.5rem;
border-radius: 8px;
}
.snac-author {
font-size: 95%;
text-decoration: none;
font-weight: 700;
color: #363533;
}
.snac-author-tag {
font-size: 90%;
color: #363533;
text-decoration: none;
}
.snac-pubdate {
color: #a0a0a0;
font-size: 90%;
float: right;
}
.snac-top-controls {
padding-bottom: 1.5em;
}
.e-content summary {
margin-bottom: 1rem;
color: #c1121f;
}
.snac-post {
border-top: 1px solid #c1c1c1;
margin-bottom: 1rem;
}
.snac-post-header {
line-height: 1.3;
}
.snac-children {
padding-left: 1.5em;
border-left: 1px solid #c1c1c1;
}
.snac-textarea {
font-family: inherit;
width: 100%;
color: inherit;
border-radius: 4px;
border: inherit;
}
.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 {
margin-top: 2em;
font-size: 75%;
color: #666;
}
.snac-poll-result {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 500px) {
body {
font-size: 14px;
}
sup {
left: 2px;
}
.snac-children {
padding-left: 1em;
}
input[class^="snac-btn-"] {
font-size: 80%;
}
.snac-pubdate {
font-size: 80%;
}
h2::before {
top: -0.2rem;
}
.snac-top-nav > a {
padding-left: 0.2rem;
margin: -0.2rem;
}
}
