Light colour scheme for sigure.tw 時雨の町. Slighted modified components and their styling for better consistency.
時雨の町、Sigure.TW Light Colour Scheme by explicit-dispose
Details
Authorexplicit-dispose
LicenseGNU GENERAL PUBLIC LICENSE
Categorysigure.tw
Created
Updated
Size9.4 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Written for my own usage. If you encounter issues, open an Issue on GitHub. Enhancement for its dark scheme is also planned (because I use the site fairly often).
Source code
/* ==UserStyle==
@name 時雨の町、Sigure.TW Light Colour Scheme
@version 20231108.08.22
@namespace userstyles.world/user/explicit-dispose
@description Light colour scheme for sigure.tw 時雨の町. Slighted modified components and their styling for better consistency.
@author explicit-dispose
@license GNU GENERAL PUBLIC LICENSE
==/UserStyle== */
@-moz-document domain("sigure.tw") {
.HomeArticle li {
margin-bottom: 1.2rem;
}
nav.menu > ul > li > ul > li > a {
border-radius: 10px;
}
nav.menu > ul > li > ul > li > ul > li > a,
nav.menu > ul > li > ul > li > ul > li {
border-radius: 10px;
margin: 0 0.7rem 0 0.7rem;
}
nav.menu > ul ul {
padding: 0.7rem 0rem 0.7rem 0rem;
}
* {
text-shadow: none !important;
}
.article-menu,
.toc {
border-radius: 14px;
}
.point,
.hosoku {
border-radius: 14px;
}
.block-note,
.note {
border-radius: 14px;
}
#srchBox {
padding-top: 2rem;
}
.gsc-search-box-tools .gsc-search-box {
border-radius: 8px;
}
input#gsc-i-id1 {
margin-left: 10px !important;
}
nav.menu {
height: 76px;
}
nav.menu > ul {
width: 100%;
max-width: 80rem;
height: 100%;
border-radius: 0 0 14px 14px;
padding: 0.2rem;
}
.hpBox {
margin-top: 2.2rem;
margin-bottom: 2rem;
}
@media (prefers-color-scheme: light) {
::before {
border-bottom-color: #fff !important;
}
nav.menu > ul ul::before {
border-bottom-color: #f4f4f4 !important;
}
body {
background: #eaeaea;
}
h1,
h2 {
color: rgb(16, 163, 229) !important;
}
.time {
color: #ea9304;
}
a,
.hpBox a {
color: rgb(228, 67, 100) !important;
}
h2 a {
color: rgb(228, 67, 100) !important;
}
.hpBox {
text-shadow: none !important;
background-color: rgb(244, 244, 244);
box-shadow: 0 0 0 8px #fff, -2px 2px 5px 8px #b2b2b2;
border: 2px dashed #747474;
}
article {
color: rgb(0, 0, 0);
}
.homepage {
color: rgb(0, 0, 0);
}
nav.menu > ul {
background: #fff;
box-shadow: rgba(0, 0, 0, 0.2) 0 6px 12px;
}
nav.menu > ul > li {
margin: 0.2rem;
padding: 0.2rem;
}
nav.menu > ul > li > a,
nav.menu > ul > li > span {
border-radius: 8px;
}
nav.menu > ul > li:hover > a,
nav.menu > ul > li:hover > span {
background: rgba(228, 67, 100, 0.2);
color: rgb(228, 67, 100) !important;
}
nav.menu > ul ul {
background: #f4f4f4;
box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 12px;
}
nav.menu a,
.avatar > div > div:nth-child(2) > a,
nav.menu span {
color: rgb(228, 67, 100) !important;
text-shadow: none;
}
nav.menu > ul > li > ul > li {
border-radius: 10px;
border-bottom: none;
}
nav.menu > ul > li > ul > li:hover > a {
color: rgb(228, 67, 100) !important;
background: transparent;
}
nav.menu > ul > li > ul > li > ul {
background: none;
}
nav.menu > ul > li > ul > li > ul {
background: #fcfcfc;
}
nav.menu > ul > li > ul > li:hover,
nav.menu > ul > li > ul > li > ul > li:hover {
color: rgb(228, 67, 100) !important;
background: rgba(228, 67, 100, 0.2);
}
#BackTop {
background-color: #fff;
color: #999;
box-shadow: 0px 6px 8px #00000045;
transition-duration: 300ms;
}
#BackTop:hover {
width: 3.4rem;
height: 3.4rem;
box-shadow: 0px 10px 14px #00000035;
}
.fa-solid.fa-up {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
footer > div:nth-child(2) {
background-color: #2f3747;
}
footer > div:nth-child(2) > div:nth-child(1) > address {
color: #939aa9;
}
#ftBar {
background: #fff;
box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
color: #000;
}
#setBox,
#srchBox {
background-color: #f4f4f4;
box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 14px;
}
.gsc-search-box-tools .gsc-search-box {
background: #3b5179 !important;
color: #000000 !important;
}
input#gsc-i-id1 {
color: #000000 !important;
}
.HomeArticle li {
box-shadow: 0px 2px 4px #00000040;
background: #ffffff;
transition-duration: 300ms;
}
.HomeArticle li:hover {
box-shadow: 0px 8px 14px #00000030;
background: #ffffff;
}
#breadcrumbs a {
color: #fff !important;
background-image: none;
background-color: rgb(228, 67, 100);
}
#breadcrumbs a::after,
#breadcrumbs a::before,
#breadcrumbs pathway::before,
#breadcrumbs .pathway::after {
border-top: none;
border-bottom: none;
border-left: none;
}
#breadcrumbs a:hover,
#breadcrumbs .pathway:hover {
background: rgb(255, 134, 150);
color: #fff !important;
}
.article-menu,
.toc {
background: #fff;
box-shadow: 5px 5px 5px 0px #00000045;
border-left: 23px solid #48536b;
}
.toc::before {
color: #48536b;
border-bottom: 9px solid #4b5771;
}
:lang(ja) {
color: #265194;
}
.keyword,
.keyword :lang(ja),
:lang(ja) .keyword,
:lang(ja) .keyword *,
:lang(ja).keyword {
color: #dc8400;
}
.hosoku {
color: #2d2d2d;
background-color: #b2b8be;
}
.hosoku :lang(ja) {
color: #265194;
}
.hosoku .trans {
color: #0e7a44;
}
.block-url,
.related {
color: #000;
border-radius: 4px;
background: #fff;
border-left: 8px dotted #000;
box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.2), 1px 0px 0 1px #1f1f1f,
2px 0px 0 1px #1f1f1f70, 3px 0px 0 1px #787878de, 4px 0px 0 1px #1f1f1f7d,
5px 0px 0 1px #585858de, 5px 0px 10px 1px #47474796;
}
.pager {
background: rgb(212, 212, 212);
}
.no_access_box::before {
background-image: none;
}
.no_access_box {
color: #000;
border-radius: 14px;
padding: 10px;
margin: 0 auto 45px auto;
box-shadow: 0px 0px 20px #0000003b;
background: #fff;
box-sizing: border-box;
}
.no_access_border {
border: 2px dashed #0000001f;
box-shadow: none;
border-radius: 14px;
padding: 10px;
}
h3 a:hover {
color: rgb(228, 67, 100) !important;
}
.no_access_content > h3 {
color: #000 !important;
}
article h3 a {
color: #000 !important;
}
.no_access_box .block {
color: #000;
border-radius: 6px;
}
.waku {
border: 2px solid #00000012;
border-radius: 6px;
}
:lang(en),
:lang(fr),
:lang(es),
:lang(pt),
:lang(nl) {
color: #3d7c68;
}
.no_access_content {
color: #000;
}
table#myTable {
border: 2px solid #0000004f;
background: #fff;
}
table th,
td {
color: #000;
background: #fff;
}
table#myTable th {
background: #0000000f;
}
table#myTable td:first-child,
table#myTable th:first-child {
color: #5c5c5c;
}
.block-dashed,
.block {
outline: 8px solid #303747;
box-shadow: 0px 6px 10px 10px rgba(0, 0, 0, 0.2);
border: 2px dashed #b9d8ff3d;
}
.block :lang(ja),
.block-dashed :lang(ja) {
color: #619fff;
}
.block .num,
.block-dashed .num {
color: rgb(209, 138, 92);
}
strong {
color: #000;
background-color: transparent;
background: linear-gradient(transparent 60%, #0073ff5e 0%);
}
.note strong {
color: #fff;
background-color: rgb(26 48 62);
background: -webkit-linear-gradient(transparent 60%, #601f30 0%);
background: linear-gradient(transparent 60%, #598abb 0%);
font-weight: normal;
}
.url {
position: relative;
color: #000;
font-size: 0.9em;
background: #fff;
box-shadow: 0px 6px 10px 2px rgba(0, 0, 0, 0.2);
line-height: 2em;
}
.marginTop {
color: #147a97 !important;
}
.gold,
:lang(ja) .gold,
:lang(ja) .gold *,
:lang(ja).gold {
color: #c97200;
}
.avatar > div > div:nth-child(2) {
padding: 0.5rem 0.7rem 0.6rem 0.7rem;
background: #ffffff;
}
.avatar > div > div > a {
border-radius: 10px;
margin: 0.2rem 0 0.2rem 0;
}
.avatar > div > div:not(.avatarInfo) {
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}
.avatar > div > div > a:hover {
background: rgba(228, 67, 100, 0.2);
}
}
}