From a3ea6559d63c1a2769ad5f6601dd84b2d209d3c3 Mon Sep 17 00:00:00 2001 From: r4bb1t Date: Mon, 12 Sep 2022 00:37:25 +0900 Subject: [PATCH 1/4] add darkmode class --- icon/dark/apple.svg | 13 ++ icon/dark/button.png | Bin 0 -> 2003 bytes icon/dark/checkmark.svg | 26 +++ icon/dark/radio-border-focused.svg | 14 ++ icon/dark/radio-border.svg | 14 ++ icon/dark/radio-dot.svg | 5 + icon/dark/scrollbar-down-active.svg | 22 +++ icon/dark/scrollbar-down.svg | 22 +++ icon/dark/scrollbar-left-active.svg | 22 +++ icon/dark/scrollbar-left.svg | 22 +++ icon/dark/scrollbar-right-active.svg | 22 +++ icon/dark/scrollbar-right.svg | 22 +++ icon/dark/scrollbar-up-active.svg | 22 +++ icon/dark/scrollbar-up.svg | 22 +++ icon/dark/select-button.svg | 10 ++ style.css | 232 ++++++++++++++++++++++++++- 16 files changed, 489 insertions(+), 1 deletion(-) create mode 100644 icon/dark/apple.svg create mode 100644 icon/dark/button.png create mode 100644 icon/dark/checkmark.svg create mode 100644 icon/dark/radio-border-focused.svg create mode 100644 icon/dark/radio-border.svg create mode 100644 icon/dark/radio-dot.svg create mode 100644 icon/dark/scrollbar-down-active.svg create mode 100644 icon/dark/scrollbar-down.svg create mode 100644 icon/dark/scrollbar-left-active.svg create mode 100644 icon/dark/scrollbar-left.svg create mode 100644 icon/dark/scrollbar-right-active.svg create mode 100644 icon/dark/scrollbar-right.svg create mode 100644 icon/dark/scrollbar-up-active.svg create mode 100644 icon/dark/scrollbar-up.svg create mode 100644 icon/dark/select-button.svg diff --git a/icon/dark/apple.svg b/icon/dark/apple.svg new file mode 100644 index 0000000..c95fc4d --- /dev/null +++ b/icon/dark/apple.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/icon/dark/button.png b/icon/dark/button.png new file mode 100644 index 0000000000000000000000000000000000000000..5a886e536ee57a371994a11b09f18d0a9409eeb3 GIT binary patch literal 2003 zcmbtVeN5bB7%$5<=aiU*McMqrrVu}(z4qGspba-<9D`F25H0~nV7%A9ch}>tt!?2B zLbBnE;Ie?ujb(}-nf!yseZ*`=7LYg>GZ&3ZScU;YHkoH63x1N#59ZtB?!pWk%WTs2 zZTowk-|zW&pT1gEQI@@a^Lh-!vOVSQYIJ|zJlCy7*AIH1aiH71YWWK~hTWHAo>|zN z{ka&n=9J{CGwQt0@q!Yy08#NnOFXI~G=>!x#Z@3QLj(82pd`D9xl^AJxFouWTDzC_ zswFTamA7lKroF-^v^NW!NEB_s3*$U;5QPT7rhNlh!(P?6UuXb-s zk)bCS5i$&wr>IygW{I&DMGI0^j^ikrp%{il2vTp84GmOQTY-L z0z=V!iV{gzswyoRXIP6Jf4o+bMJ1*`vBUtnfdO5FSv8X8NGs!`Y2M26HttE9<7s*k z>QzK3(6%g;;~CpcP}DObFu;mnQQ!lL76m9^DGGv+Qsp3lXVS=*C=o?N#7G^RRN?jV z9$7blEI^OjMWC21k|gppaBxmQvn0a;Kj~*|GzshuD+vW#KxAkK=jRI2_HIRJF)N$4 z7fpMozyi_6kPf!MM%o=Vkp!&3k^&F{PMU+P-3HS3m70XM7Kq%nA9KT*Ey0&dIx1FM zYDd(-7gMW*+gJ!9r?)BhB1~5TMhs}MIEb>f zVmnc{60d{S6{O!$@opo1Y5U!c^i*1f5Riiq%}Rz6PrYsBL&_Qm_JPM-IkrgKX#)sJQITg#euzv5}i`6_=j ze}DG)u4Bbc`hlOvr>no-FmSn}y3v0o+#9y<*?4q&bLVjWp&vcPUHQ(LmuqLl8wWOI zZCjnYp~*cu#GdqME;>;*vXFH!{LT2(>H2-&4|XtIL8h%LV z8vA6`mm4c>mdPLfD!5`jJ3lr$wE5bWq8l?g4etqm7WG^md}9eshVTC`W`E!D@%V#@ z-s?N(j&}@%FKqv?XYj)O+q0JI(O!Ar__M>C&eZh%)B2O+Y=iaW z!-rJc<^Am!drJBq`Q@GdZ?D`>6QkW&-m1Op>RMVmro~9*cN1fkJNud{el1j|>i0ZW kJKX*Lq+>^dP2;Yu4tF`Tf(sLe&EKx4w8DL4Ytu{r0)VZerT_o{ literal 0 HcmV?d00001 diff --git a/icon/dark/checkmark.svg b/icon/dark/checkmark.svg new file mode 100644 index 0000000..913e7c1 --- /dev/null +++ b/icon/dark/checkmark.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/radio-border-focused.svg b/icon/dark/radio-border-focused.svg new file mode 100644 index 0000000..a0fe878 --- /dev/null +++ b/icon/dark/radio-border-focused.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/icon/dark/radio-border.svg b/icon/dark/radio-border.svg new file mode 100644 index 0000000..47baa96 --- /dev/null +++ b/icon/dark/radio-border.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/icon/dark/radio-dot.svg b/icon/dark/radio-dot.svg new file mode 100644 index 0000000..4f30038 --- /dev/null +++ b/icon/dark/radio-dot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/icon/dark/scrollbar-down-active.svg b/icon/dark/scrollbar-down-active.svg new file mode 100644 index 0000000..c042a7b --- /dev/null +++ b/icon/dark/scrollbar-down-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-down.svg b/icon/dark/scrollbar-down.svg new file mode 100644 index 0000000..a5f41cd --- /dev/null +++ b/icon/dark/scrollbar-down.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-left-active.svg b/icon/dark/scrollbar-left-active.svg new file mode 100644 index 0000000..5c0e9f3 --- /dev/null +++ b/icon/dark/scrollbar-left-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-left.svg b/icon/dark/scrollbar-left.svg new file mode 100644 index 0000000..addb09a --- /dev/null +++ b/icon/dark/scrollbar-left.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-right-active.svg b/icon/dark/scrollbar-right-active.svg new file mode 100644 index 0000000..04fbf35 --- /dev/null +++ b/icon/dark/scrollbar-right-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-right.svg b/icon/dark/scrollbar-right.svg new file mode 100644 index 0000000..6a71e82 --- /dev/null +++ b/icon/dark/scrollbar-right.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-up-active.svg b/icon/dark/scrollbar-up-active.svg new file mode 100644 index 0000000..cd64e6e --- /dev/null +++ b/icon/dark/scrollbar-up-active.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/scrollbar-up.svg b/icon/dark/scrollbar-up.svg new file mode 100644 index 0000000..6ab3804 --- /dev/null +++ b/icon/dark/scrollbar-up.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/icon/dark/select-button.svg b/icon/dark/select-button.svg new file mode 100644 index 0000000..871dcb0 --- /dev/null +++ b/icon/dark/select-button.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/style.css b/style.css index 4851976..af488a5 100644 --- a/style.css +++ b/style.css @@ -46,16 +46,21 @@ /* Fonts below are recreations by Giles Booth */ @font-face { font-family: Chicago_12; - src: url("fonts/ChiKareGo2.ttf"); + src: url("fonts/ChiKareGo2.ttf"); } @font-face { font-family: Geneva_9; src: url("fonts/FindersKeepers.ttf") } + ::-webkit-scrollbar { width: 22px; background-color: #fff; } +.darkmode ::-webkit-scrollbar { + width: 22px; + background-color: #000; +} ::-webkit-scrollbar-track { background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); @@ -65,6 +70,14 @@ width: 10px; border-left: 3px solid black; } +.darkmode ::-webkit-scrollbar-track { + background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); + background-color: black; + background-size: 4px 4px; + background-position: 0 0, 2px 2px; + width: 10px; + border-left: 3px solid white; +} ::-webkit-scrollbar-thumb { width: 20px; @@ -73,6 +86,13 @@ border: 2px solid black; border-right: none; } +.darkmode ::-webkit-scrollbar-thumb { + width: 20px; + box-sizing: content-box; + background-color: #000; + border: 2px solid white; + border-right: none; +} ::-webkit-scrollbar-button:horizontal:start:decrement, ::-webkit-scrollbar-button:horizontal:end:increment, @@ -86,55 +106,94 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-up.svg"); } +.darkmode ::-webkit-scrollbar-button:vertical:start { + background-image: svg-load("./icon/dark/scrollbar-up.svg"); +} + ::-webkit-scrollbar-button:vertical:start:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-up-active.svg"); } +.darkmode ::-webkit-scrollbar-button:vertical:start:active { + background-image: svg-load("./icon/dark/scrollbar-up-active.svg"); +} + ::-webkit-scrollbar-button:vertical:end { height: 23.38px; background-image: svg-load("./icon/scrollbar-down.svg"); } +.darkmode ::-webkit-scrollbar-button:vertical:end { + background-image: svg-load("./icon/dark/scrollbar-down.svg"); +} + ::-webkit-scrollbar-button:vertical:end:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-down-active.svg"); } +.darkmode ::-webkit-scrollbar-button:vertical:end:active { + background-image: svg-load("./icon/dark/scrollbar-down-active.svg"); +} ::-webkit-scrollbar-button:horizontal:start { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-left.svg"); } +.darkmode ::-webkit-scrollbar-button:horizontal:start { + background-image: svg-load("./icon/dark/scrollbar-left.svg"); +} + ::-webkit-scrollbar-button:horizontal:start:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-left-active.svg"); } +.darkmode ::-webkit-scrollbar-button:horizontal:start:active { + background-image: svg-load("./icon/dark/scrollbar-left-active.svg"); +} + ::-webkit-scrollbar-button:horizontal:end { height: 23.38px; background-image: svg-load("./icon/scrollbar-right.svg"); } +.darkmode ::-webkit-scrollbar-button:horizontal:end { + background-image: svg-load("./icon/dark/scrollbar-right.svg"); +} + ::-webkit-scrollbar-button:horizontal:end:active { background-repeat: no-repeat; height: 23.38px; background-image: svg-load("./icon/scrollbar-right-active.svg"); } +.darkmode ::-webkit-scrollbar-button:horizontal:end:active { + background-image: svg-load("./icon/dark/scrollbar-right-active.svg"); +} body { background: linear-gradient(90deg, #ffffff 21px, transparent 1%) center, linear-gradient(#ffffff 21px, transparent 1%) center, #000000; background-size: 22px 22px; background-attachment: fixed; } +.darkmode body { + background: linear-gradient(90deg, #000000 21px, transparent 1%) center, linear-gradient(#000000 21px, transparent 1%) center, #ffffff; +} a { color: black; text-decoration: underline; } +.darkmode a { + color: white; +} hr { border-top: 0.15em solid #000; } +.darkmode hr { + border-top: 0.15em solid #fff; +} /*.container { width: 50%; @@ -167,12 +226,18 @@ h2 { box-shadow: var(--box-shadow); background-color: white; } +.darkmode .standard-dialog { + background-color: black; +} .modal-dialog, .alert-box { width: auto; padding: 13px; background: #fff; } +.darkmode .modal-dialog,.darkmode .alert-box { + background: #000; +} .modal-contents, .alert-contents { padding: 10px; @@ -197,6 +262,12 @@ h2 { border: 2px solid; padding: 3px; } +.darkmode .inner-border { + border-color: white; +} +.darkmode .outer-border { + border-color: white; +} /* title bar */ .title-bar { @@ -210,6 +281,11 @@ h2 { background-size: 6.6666666667% 13.3333333333%; background-clip: content-box; } +.darkmode .title-bar { + background: linear-gradient(#fff 50%, transparent 50%); + background-size: 6.6666666667% 13.3333333333%; + background-clip: content-box; +} .title-bar .title { padding: 0 0.5em; margin: 0 auto; @@ -221,6 +297,9 @@ h2 { cursor: default; font-family: Chicago_12; } +.darkmode .title-bar .title { + background: #000; +} .inactive-title-bar { flex: none; @@ -243,6 +322,9 @@ h2 { font-family: Chicago_12; color:#A5A5A5; } +.darkmmode .inactive-title-bar .title { + color:#5A5A5A; +} .title-bar button { position: relative; @@ -255,6 +337,10 @@ h2 { cursor: pointer; transform: scale(0.5); } +.darkmode .title-bar button { + border: 4px solid #fff; + background-color: #000; +} .title-bar button span { position: absolute !important; clip: rect(1px 1px 1px 1px); @@ -275,12 +361,23 @@ h2 { background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; background-repeat: no-repeat; } +.darkmode .title-bar button.close::before { + background: linear-gradient(#fff 0%, #fff 100%) left center, linear-gradient(#fff 0%, #fff 100%) right center, linear-gradient(#fff 0%, #fff 100%) center top, linear-gradient(#fff 0%, #fff 100%) center bottom; + background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; + background-repeat: no-repeat; +} .title-bar button.close::after { background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom; background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; background-repeat: no-repeat; transform: rotate(45deg) scale(1.1); } +.darkmode .title-bar button.close::after { + background: linear-gradient(#fff 0%, #fff 100%) left center, linear-gradient(#fff 0%, #fff 100%) right center, linear-gradient(#fff 0%, #fff 100%) center top, linear-gradient(#fff 0%, #fff 100%) center bottom; + background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; + background-repeat: no-repeat; + transform: rotate(45deg) scale(1.1); +} .title-bar button.close:active::before, .title-bar button.close:active::after { opacity: 1; } @@ -290,9 +387,18 @@ h2 { background-repeat: no-repeat; background-color: #fff; } +.darkmode .title-bar button.resize { + background: linear-gradient(#fff 0%, #fff 100%) left 58%, linear-gradient(to bottom, #fff 0%, #fff 100%) 58% top; + background-size: 60% 4px, 4px 60%; + background-repeat: no-repeat; + background-color: #000; +} .title-bar button.resize:active { background: #fff; } +.darkmode .title-bar button.resize:active { + background: #000; +} .title-bar button.hidden { visibility: hidden; } @@ -306,6 +412,10 @@ h2 { border: 0.1em solid #000; font-family: "Inconsolata", Menlo, Chicago, Geneva; } +.darkmode .window { + background-color: #000; + border: 0.1em solid #fff; +} .window-pane { overflow-y: scroll; height: 100%; @@ -318,6 +428,10 @@ h2 { width: 22px; background-color: #fff; } +.darkmode .window-pane::-webkit-scrollbar { + width: 22px; + background-color: #000; +} .window-pane::-webkit-scrollbar-track { background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); background-color: white; @@ -326,6 +440,14 @@ h2 { width: 10px; border-left: 4px solid black; } +.darkmode .window-pane::-webkit-scrollbar-track { + background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); + background-color: black; + background-size: 4px 4px; + background-position: 0 0, 2px 2px; + width: 10px; + border-left: 4px solid white; +} .window-pane::-webkit-scrollbar-thumb { width: 20px; box-sizing: content-box; @@ -333,6 +455,13 @@ h2 { border: 2px solid black; border-right: none; } +.darkmode .window-pane::-webkit-scrollbar-thumb { + width: 20px; + box-sizing: content-box; + background-color: #000; + border: 2px solid white; + border-right: none; +} .separator { flex: none; @@ -344,6 +473,16 @@ h2 { border-width: 0.1rem 0; font-size: 1rem; } +.darkmode .separator { + flex: none; + display: flex; + flex-direction: row; + justify-content: space-between; + /*padding: 0.4rem 0.8rem;*/ + border-top: 0.1rem solid white; + border-width: 0.1rem 0; + font-size: 1rem; +} .details-bar { flex: none; @@ -356,6 +495,17 @@ h2 { font-size: 1rem; font-weight: 100; } +.darkmode .details-bar { + flex: none; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0.4rem 0.8rem; + border: 0.1rem solid white; + border-width: 0.1rem 0; + font-size: 1rem; + font-weight: 100; +} /* buttons */ @@ -375,6 +525,12 @@ h2 { font-family: Chicago_12; cursor: pointer; } +.darkmode .btn { + background: black; + border-style: solid; + border-width: 5.5px; + border-image: url("./icon/dark/button.png") 30 stretch; +} .btn:active { background: black; @@ -382,6 +538,12 @@ h2 { color: white; font-family: Chicago_12; } +.darkmode .btn:active { + background: white; + border-radius:6px; + color: white; + font-family: Chicago_12; +} .btn:disabled { min-height: 20px; @@ -397,6 +559,13 @@ h2 { font-size: 18px; font-family: Chicago_12; } +.darkmode .btn:disabled { + background: black; + border-style: solid; + border-width: 5.5px; + border-image: url("./icon/dark/button.png") 30 stretch; + color: #535353; +} /* text input */ input { @@ -405,6 +574,9 @@ input { font-size: 18px; padding-left: 5px; } +.darkmode input { + border: 1.5px solid white; +} input:focus { outline:none; @@ -415,12 +587,18 @@ input[type="radio"] + label::before { width: 20px; height: 20px; } +.darkmmode input[type="radio"] + label::before { + border-image: svg-load("./icon/dark/radio-border.svg"); +} input[type="checkbox"] + label::before { border: 1.5px solid black; width: 20px; height: 20px; } +.darkmmode input[type="checkbox"] + label::before { + border: 1.5px solid white; +} input[type="radio"], input[type="checkbox"] { @@ -456,10 +634,17 @@ input[type="radio"] + label::before { margin-right: var(--radio-label-spacing); background: svg-load("./icon/radio-border.svg"); } +.darkmmode input[type="radio"] + label::before { + background: svg-load("./icon/dark/radio-border.svg"); +} + input[type="radio"]:focus-visible + label::before { background-image: svg-load("./icon/radio-border-focused.svg"); } +.darkmmode input[type="radio"]:focus-visible + label::before { + background-image: svg-load("./icon/dark/radio-border-focused.svg"); +} input[type="radio"]:checked + label::after { content: ""; @@ -471,6 +656,9 @@ input[type="radio"]:checked + label::after { position: absolute; background: svg-load("./icon/radio-dot.svg"); } +.darkmode input[type="radio"]:checked + label::after { + background: svg-load("./icon/dark/radio-dot.svg"); +} input[type="checkbox"] + label { position: relative; @@ -492,6 +680,9 @@ input[type="checkbox"] + label::before { input[type="checkbox"]:focus-visible + label::before { outline: 1px solid black; } +.darkmmode input[type="checkbox"]:focus-visible + label::before { + outline: 1px solid white; +} input[type="checkbox"]:checked + label::after { content: ""; @@ -506,6 +697,10 @@ input[type="checkbox"]:checked + label::after { background: svg-load("./icon/checkmark.svg"); background-repeat: no-repeat; } +.darkmmode input[type="checkbox"]:checked + label::after { + background: svg-load("./icon/dark/checkmark.svg"); + background-repeat: no-repeat; +} input[type="checkbox"][disabled] + label::before { @@ -515,6 +710,9 @@ input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled]:checked + label::after { background: svg-load("./icon/checkmark-disabled.svg"); } +.darkmmode input[type="checkbox"][disabled]:checked + label::after { + background: svg-load("./icon/dark/checkmark-disabled.svg"); +} .field-row { display: flex; @@ -540,6 +738,10 @@ input[type="checkbox"][disabled]:checked + label::after { display: inline-block; margin-right: 2px; } +.darkmmode .apple { + background: svg-load("./icon/dark/apple.svg"); + background-repeat: no-repeat; +} /* Form */ form { @@ -566,6 +768,14 @@ select { -moz-box-shadow: 2px 8px 0 0px black; box-shadow: 2px 2px 0 -1px black; } +.darkmmode select { + background-image: svg-load("./icon/dark/select-button.svg"); + background-position: top 2px right 2px; + background-repeat: no-repeat; + -webkit-box-shadow: 2px 8px 0 0px white; + -moz-box-shadow: 2px 8px 0 0px white; + box-shadow: 2px 2px 0 -1px white; +} /* menu-bar */ ul[role] { @@ -580,6 +790,9 @@ ul[role="menu-bar"] { display: flex; background: white; } +.darkmode ul[role="menu-bar"] { + background: black; +} ul[role="menu-bar"] > [role="menu-item"] { position: relative; padding: 6px 10px; @@ -589,6 +802,10 @@ ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="men color: #fff; outline: none; } +.darkmode ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="menu-item"]:focus-within, ul[role="menu-bar"] > [role="menu-item"]:hover { + background: #fff; + color: #000; +} ul[role="menu"] { position: relative; min-width: 200px; @@ -597,6 +814,9 @@ ul[role="menu"] { border: 1px solid; box-shadow: var(--box-shadow); } +.darkmode ul[role="menu"] { + background: black; +} ul[role="menu"]::before { content: ""; pointer-events: none; @@ -605,6 +825,9 @@ ul[role="menu"]::before { width: 2px; box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15), inset -1px 0 #fff; } +.darkmode ul[role="menu"]::before { + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.15), inset -1px 0 #000; +} [role="menu-item"] ul[role="menu"] { display: none; position: absolute; @@ -625,6 +848,10 @@ ul[role="menu"] > [role="menu-item"] > a:hover, ul[role="menu"] > [role="menu-it background: #000; color: white; } +.darkmmode ul[role="menu"] > [role="menu-item"] > a:hover, ul[role="menu"] > [role="menu-item"] > button:hover, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, ul[role="menu"] > [role="menu-item"] > a:focus, ul[role="menu"] > [role="menu-item"] > button:focus, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { + background: #fff; + color: black; +} ul [role="menu-item"] { position: relative; } @@ -638,6 +865,9 @@ ul [role="menu-item"].divider::after { padding: 0; border-top: 1.5px dotted #000; } +.darkmode ul [role="menu-item"].divider::after { + border-top: 1.5px dotted #fff; +} /* styles specific to demo page */ .menu-items > li { From e93390c04e9c5368aac38465abe8038f91ff2e20 Mon Sep 17 00:00:00 2001 From: r4bb1t Date: Mon, 12 Sep 2022 00:37:46 +0900 Subject: [PATCH 2/4] apply prettier --- style.css | 190 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 143 insertions(+), 47 deletions(-) diff --git a/style.css b/style.css index af488a5..ad0ba6f 100644 --- a/style.css +++ b/style.css @@ -40,7 +40,7 @@ } @font-face { font-family: Monaco; - src: url("fonts/monaco.ttf") + src: url("fonts/monaco.ttf"); } /* Fonts below are recreations by Giles Booth */ @@ -50,7 +50,7 @@ } @font-face { font-family: Geneva_9; - src: url("fonts/FindersKeepers.ttf") + src: url("fonts/FindersKeepers.ttf"); } ::-webkit-scrollbar { @@ -63,7 +63,22 @@ } ::-webkit-scrollbar-track { - background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); + background: linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ), + linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ); background-color: white; background-size: 4px 4px; background-position: 0 0, 2px 2px; @@ -71,7 +86,22 @@ border-left: 3px solid black; } .darkmode ::-webkit-scrollbar-track { - background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); + background: linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ), + linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ); background-color: black; background-size: 4px 4px; background-position: 0 0, 2px 2px; @@ -172,12 +202,14 @@ } body { - background: linear-gradient(90deg, #ffffff 21px, transparent 1%) center, linear-gradient(#ffffff 21px, transparent 1%) center, #000000; + background: linear-gradient(90deg, #ffffff 21px, transparent 1%) center, + linear-gradient(#ffffff 21px, transparent 1%) center, #000000; background-size: 22px 22px; background-attachment: fixed; } .darkmode body { - background: linear-gradient(90deg, #000000 21px, transparent 1%) center, linear-gradient(#000000 21px, transparent 1%) center, #ffffff; + background: linear-gradient(90deg, #000000 21px, transparent 1%) center, + linear-gradient(#000000 21px, transparent 1%) center, #ffffff; } a { @@ -230,16 +262,19 @@ h2 { background-color: black; } -.modal-dialog, .alert-box { +.modal-dialog, +.alert-box { width: auto; padding: 13px; background: #fff; } -.darkmode .modal-dialog,.darkmode .alert-box { +.darkmode .modal-dialog, +.darkmode .alert-box { background: #000; } -.modal-contents, .alert-contents { +.modal-contents, +.alert-contents { padding: 10px; } @@ -320,10 +355,10 @@ h2 { text-align: center; cursor: default; font-family: Chicago_12; - color:#A5A5A5; + color: #a5a5a5; } .darkmmode .inactive-title-bar .title { - color:#5A5A5A; + color: #5a5a5a; } .title-bar button { @@ -347,7 +382,8 @@ h2 { /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } -.title-bar button.close::before, .title-bar button.close::after { +.title-bar button.close::before, +.title-bar button.close::after { content: ""; position: absolute; top: 0; @@ -357,38 +393,55 @@ h2 { opacity: 0; } .title-bar button.close::before { - background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom; + background: linear-gradient(#000 0%, #000 100%) left center, + linear-gradient(#000 0%, #000 100%) right center, + linear-gradient(#000 0%, #000 100%) center top, + linear-gradient(#000 0%, #000 100%) center bottom; background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; background-repeat: no-repeat; } .darkmode .title-bar button.close::before { - background: linear-gradient(#fff 0%, #fff 100%) left center, linear-gradient(#fff 0%, #fff 100%) right center, linear-gradient(#fff 0%, #fff 100%) center top, linear-gradient(#fff 0%, #fff 100%) center bottom; + background: linear-gradient(#fff 0%, #fff 100%) left center, + linear-gradient(#fff 0%, #fff 100%) right center, + linear-gradient(#fff 0%, #fff 100%) center top, + linear-gradient(#fff 0%, #fff 100%) center bottom; background-size: 30% 4px, 30% 4px, 4px 30%, 4px 30%; background-repeat: no-repeat; } .title-bar button.close::after { - background: linear-gradient(#000 0%, #000 100%) left center, linear-gradient(#000 0%, #000 100%) right center, linear-gradient(#000 0%, #000 100%) center top, linear-gradient(#000 0%, #000 100%) center bottom; - background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; + background: linear-gradient(#000 0%, #000 100%) left center, + linear-gradient(#000 0%, #000 100%) right center, + linear-gradient(#000 0%, #000 100%) center top, + linear-gradient(#000 0%, #000 100%) center bottom; + background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, + 3.6363636364px 22.5%, 3.6363636364px 22.5%; background-repeat: no-repeat; transform: rotate(45deg) scale(1.1); } .darkmode .title-bar button.close::after { - background: linear-gradient(#fff 0%, #fff 100%) left center, linear-gradient(#fff 0%, #fff 100%) right center, linear-gradient(#fff 0%, #fff 100%) center top, linear-gradient(#fff 0%, #fff 100%) center bottom; - background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; + background: linear-gradient(#fff 0%, #fff 100%) left center, + linear-gradient(#fff 0%, #fff 100%) right center, + linear-gradient(#fff 0%, #fff 100%) center top, + linear-gradient(#fff 0%, #fff 100%) center bottom; + background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, + 3.6363636364px 22.5%, 3.6363636364px 22.5%; background-repeat: no-repeat; transform: rotate(45deg) scale(1.1); } -.title-bar button.close:active::before, .title-bar button.close:active::after { +.title-bar button.close:active::before, +.title-bar button.close:active::after { opacity: 1; } .title-bar button.resize { - background: linear-gradient(#000 0%, #000 100%) left 58%, linear-gradient(to bottom, #000 0%, #000 100%) 58% top; + background: linear-gradient(#000 0%, #000 100%) left 58%, + linear-gradient(to bottom, #000 0%, #000 100%) 58% top; background-size: 60% 4px, 4px 60%; background-repeat: no-repeat; background-color: #fff; } .darkmode .title-bar button.resize { - background: linear-gradient(#fff 0%, #fff 100%) left 58%, linear-gradient(to bottom, #fff 0%, #fff 100%) 58% top; + background: linear-gradient(#fff 0%, #fff 100%) left 58%, + linear-gradient(to bottom, #fff 0%, #fff 100%) 58% top; background-size: 60% 4px, 4px 60%; background-repeat: no-repeat; background-color: #000; @@ -433,7 +486,22 @@ h2 { background-color: #000; } .window-pane::-webkit-scrollbar-track { - background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000); + background: linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ), + linear-gradient( + 45deg, + #000 25%, + transparent 25%, + transparent 75%, + #000 75%, + #000 + ); background-color: white; background-size: 4px 4px; background-position: 0 0, 2px 2px; @@ -441,7 +509,22 @@ h2 { border-left: 4px solid black; } .darkmode .window-pane::-webkit-scrollbar-track { - background: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff); + background: linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ), + linear-gradient( + 45deg, + #fff 25%, + transparent 25%, + transparent 75%, + #fff 75%, + #fff + ); background-color: black; background-size: 4px 4px; background-position: 0 0, 2px 2px; @@ -507,13 +590,12 @@ h2 { font-weight: 100; } - /* buttons */ .btn { min-height: 20px; min-width: 59px; padding: 0 20px; - text-align:center; + text-align: center; background: white; border-style: solid; border-width: 5.5px; @@ -534,13 +616,13 @@ h2 { .btn:active { background: black; - border-radius:6px; + border-radius: 6px; color: white; font-family: Chicago_12; } .darkmode .btn:active { background: white; - border-radius:6px; + border-radius: 6px; color: white; font-family: Chicago_12; } @@ -548,12 +630,12 @@ h2 { .btn:disabled { min-height: 20px; min-width: 59px; - text-align:center; + text-align: center; background: white; border-style: solid; border-width: 5.5px; border-image: url("./icon/button.png") 30 stretch; - color: #B6B7B8; + color: #b6b7b8; text-align: center; text-decoration: none; font-size: 18px; @@ -568,18 +650,18 @@ h2 { } /* text input */ -input { +input { border: 1.5px solid black; font-family: Chicago_12; font-size: 18px; padding-left: 5px; } -.darkmode input { +.darkmode input { border: 1.5px solid white; } -input:focus { - outline:none; +input:focus { + outline: none; } input[type="radio"] + label::before { @@ -638,7 +720,6 @@ input[type="radio"] + label::before { background: svg-load("./icon/dark/radio-border.svg"); } - input[type="radio"]:focus-visible + label::before { background-image: svg-load("./icon/radio-border-focused.svg"); } @@ -702,7 +783,6 @@ input[type="checkbox"]:checked + label::after { background-repeat: no-repeat; } - input[type="checkbox"][disabled] + label::before { background: var(--surface); } @@ -746,7 +826,7 @@ input[type="checkbox"][disabled]:checked + label::after { /* Form */ form { font-family: "Inconsolata", Menlo, Chicago, Geneva; - font-size:14px; + font-size: 14px; } /* select menu */ @@ -765,16 +845,16 @@ select { position: relative; padding-left: 20px; -webkit-box-shadow: 2px 8px 0 0px black; - -moz-box-shadow: 2px 8px 0 0px black; - box-shadow: 2px 2px 0 -1px black; + -moz-box-shadow: 2px 8px 0 0px black; + box-shadow: 2px 2px 0 -1px black; } .darkmmode select { background-image: svg-load("./icon/dark/select-button.svg"); background-position: top 2px right 2px; background-repeat: no-repeat; -webkit-box-shadow: 2px 8px 0 0px white; - -moz-box-shadow: 2px 8px 0 0px white; - box-shadow: 2px 2px 0 -1px white; + -moz-box-shadow: 2px 8px 0 0px white; + box-shadow: 2px 2px 0 -1px white; } /* menu-bar */ @@ -797,12 +877,16 @@ ul[role="menu-bar"] > [role="menu-item"] { position: relative; padding: 6px 10px; } -ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="menu-item"]:focus-within, ul[role="menu-bar"] > [role="menu-item"]:hover { +ul[role="menu-bar"] > [role="menu-item"]:focus, +ul[role="menu-bar"] > [role="menu-item"]:focus-within, +ul[role="menu-bar"] > [role="menu-item"]:hover { background: #000; color: #fff; outline: none; } -.darkmode ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="menu-item"]:focus-within, ul[role="menu-bar"] > [role="menu-item"]:hover { +.darkmode ul[role="menu-bar"] > [role="menu-item"]:focus, +ul[role="menu-bar"] > [role="menu-item"]:focus-within, +ul[role="menu-bar"] > [role="menu-item"]:hover { background: #fff; color: #000; } @@ -835,27 +919,39 @@ ul[role="menu"]::before { top: 100%; z-index: 99; } -ul[role="menu"] > [role="menu-item"] > a, ul[role="menu"] > [role="menu-item"] > button, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"] { +ul[role="menu"] > [role="menu-item"] > a, +ul[role="menu"] > [role="menu-item"] > button, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"] { all: unset; position: relative; padding: 5px 20px; display: block; width: 100%; box-sizing: border-box; - } -ul[role="menu"] > [role="menu-item"] > a:hover, ul[role="menu"] > [role="menu-item"] > button:hover, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, ul[role="menu"] > [role="menu-item"] > a:focus, ul[role="menu"] > [role="menu-item"] > button:focus, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { +ul[role="menu"] > [role="menu-item"] > a:hover, +ul[role="menu"] > [role="menu-item"] > button:hover, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, +ul[role="menu"] > [role="menu-item"] > a:focus, +ul[role="menu"] > [role="menu-item"] > button:focus, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { background: #000; color: white; } -.darkmmode ul[role="menu"] > [role="menu-item"] > a:hover, ul[role="menu"] > [role="menu-item"] > button:hover, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, ul[role="menu"] > [role="menu-item"] > a:focus, ul[role="menu"] > [role="menu-item"] > button:focus, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { +.darkmmode ul[role="menu"] > [role="menu-item"] > a:hover, +ul[role="menu"] > [role="menu-item"] > button:hover, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, +ul[role="menu"] > [role="menu-item"] > a:focus, +ul[role="menu"] > [role="menu-item"] > button:focus, +ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { background: #fff; color: black; } ul [role="menu-item"] { position: relative; } -ul [role="menu-item"]:focus > [role="menu"], ul [role="menu-item"]:focus-within > [role="menu"] { +ul [role="menu-item"]:focus > [role="menu"], +ul [role="menu-item"]:focus-within > [role="menu"] { display: block; } ul [role="menu-item"].divider::after { From 08ae47dab4f729e0eb02b6aab9f07b5f16a43dce Mon Sep 17 00:00:00 2001 From: r4bb1t Date: Mon, 12 Sep 2022 00:56:26 +0900 Subject: [PATCH 3/4] fix bug --- style.css | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/style.css b/style.css index ad0ba6f..4e1e473 100644 --- a/style.css +++ b/style.css @@ -57,7 +57,7 @@ width: 22px; background-color: #fff; } -.darkmode ::-webkit-scrollbar { +.darkmode::-webkit-scrollbar { width: 22px; background-color: #000; } @@ -85,7 +85,7 @@ width: 10px; border-left: 3px solid black; } -.darkmode ::-webkit-scrollbar-track { +.darkmode::-webkit-scrollbar-track { background: linear-gradient( 45deg, #fff 25%, @@ -116,7 +116,7 @@ border: 2px solid black; border-right: none; } -.darkmode ::-webkit-scrollbar-thumb { +.darkmode::-webkit-scrollbar-thumb { width: 20px; box-sizing: content-box; background-color: #000; @@ -136,7 +136,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-up.svg"); } -.darkmode ::-webkit-scrollbar-button:vertical:start { +.darkmode::-webkit-scrollbar-button:vertical:start { background-image: svg-load("./icon/dark/scrollbar-up.svg"); } @@ -145,7 +145,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-up-active.svg"); } -.darkmode ::-webkit-scrollbar-button:vertical:start:active { +.darkmode::-webkit-scrollbar-button:vertical:start:active { background-image: svg-load("./icon/dark/scrollbar-up-active.svg"); } @@ -153,7 +153,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-down.svg"); } -.darkmode ::-webkit-scrollbar-button:vertical:end { +.darkmode::-webkit-scrollbar-button:vertical:end { background-image: svg-load("./icon/dark/scrollbar-down.svg"); } @@ -162,7 +162,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-down-active.svg"); } -.darkmode ::-webkit-scrollbar-button:vertical:end:active { +.darkmode::-webkit-scrollbar-button:vertical:end:active { background-image: svg-load("./icon/dark/scrollbar-down-active.svg"); } @@ -171,7 +171,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-left.svg"); } -.darkmode ::-webkit-scrollbar-button:horizontal:start { +.darkmode::-webkit-scrollbar-button:horizontal:start { background-image: svg-load("./icon/dark/scrollbar-left.svg"); } @@ -180,7 +180,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-left-active.svg"); } -.darkmode ::-webkit-scrollbar-button:horizontal:start:active { +.darkmode::-webkit-scrollbar-button:horizontal:start:active { background-image: svg-load("./icon/dark/scrollbar-left-active.svg"); } @@ -188,7 +188,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-right.svg"); } -.darkmode ::-webkit-scrollbar-button:horizontal:end { +.darkmode::-webkit-scrollbar-button:horizontal:end { background-image: svg-load("./icon/dark/scrollbar-right.svg"); } @@ -197,7 +197,7 @@ height: 23.38px; background-image: svg-load("./icon/scrollbar-right-active.svg"); } -.darkmode ::-webkit-scrollbar-button:horizontal:end:active { +.darkmode::-webkit-scrollbar-button:horizontal:end:active { background-image: svg-load("./icon/dark/scrollbar-right-active.svg"); } @@ -212,6 +212,10 @@ body { linear-gradient(#000000 21px, transparent 1%) center, #ffffff; } +.darkmode body { + color: white; +} + a { color: black; text-decoration: underline; @@ -612,6 +616,7 @@ h2 { border-style: solid; border-width: 5.5px; border-image: url("./icon/dark/button.png") 30 stretch; + color: white; } .btn:active { From 9090cbd09b5fb8ad32fbf4df05f7afc19a60daee Mon Sep 17 00:00:00 2001 From: r4bb1t Date: Thu, 15 Sep 2022 17:19:10 +0900 Subject: [PATCH 4/4] fix bug --- docs/docs.css | 20 +- docs/index.html.ejs | 290 +++++++++--------- icon/{dark/apple.svg => dark-apple.svg} | 0 icon/{dark/button.png => dark-button.png} | Bin .../checkmark.svg => dark-checkmark.svg} | 0 ...used.svg => dark-radio-border-focused.svg} | 0 ...radio-border.svg => dark-radio-border.svg} | 0 .../radio-dot.svg => dark-radio-dot.svg} | 0 ...ive.svg => dark-scrollbar-down-active.svg} | 0 ...llbar-down.svg => dark-scrollbar-down.svg} | 0 ...ive.svg => dark-scrollbar-left-active.svg} | 0 ...llbar-left.svg => dark-scrollbar-left.svg} | 0 ...ve.svg => dark-scrollbar-right-active.svg} | 0 ...bar-right.svg => dark-scrollbar-right.svg} | 0 ...ctive.svg => dark-scrollbar-up-active.svg} | 0 ...scrollbar-up.svg => dark-scrollbar-up.svg} | 0 ...lect-button.svg => dark-select-button.svg} | 0 style.css | 84 ++--- 18 files changed, 201 insertions(+), 193 deletions(-) rename icon/{dark/apple.svg => dark-apple.svg} (100%) rename icon/{dark/button.png => dark-button.png} (100%) rename icon/{dark/checkmark.svg => dark-checkmark.svg} (100%) rename icon/{dark/radio-border-focused.svg => dark-radio-border-focused.svg} (100%) rename icon/{dark/radio-border.svg => dark-radio-border.svg} (100%) rename icon/{dark/radio-dot.svg => dark-radio-dot.svg} (100%) rename icon/{dark/scrollbar-down-active.svg => dark-scrollbar-down-active.svg} (100%) rename icon/{dark/scrollbar-down.svg => dark-scrollbar-down.svg} (100%) rename icon/{dark/scrollbar-left-active.svg => dark-scrollbar-left-active.svg} (100%) rename icon/{dark/scrollbar-left.svg => dark-scrollbar-left.svg} (100%) rename icon/{dark/scrollbar-right-active.svg => dark-scrollbar-right-active.svg} (100%) rename icon/{dark/scrollbar-right.svg => dark-scrollbar-right.svg} (100%) rename icon/{dark/scrollbar-up-active.svg => dark-scrollbar-up-active.svg} (100%) rename icon/{dark/scrollbar-up.svg => dark-scrollbar-up.svg} (100%) rename icon/{dark/select-button.svg => dark-select-button.svg} (100%) diff --git a/docs/docs.css b/docs/docs.css index 85442c2..723cb9f 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -1,14 +1,13 @@ @font-face { font-family: Geneva9; - src: url("fonts/FindersKeepers.ttf") + src: url("fonts/FindersKeepers.ttf"); } @font-face { font-family: Chicago_12; - src: url("fonts/ChiKareGo2.ttf"); + src: url("fonts/ChiKareGo2.ttf"); } - * { box-sizing: border-box; } @@ -22,7 +21,7 @@ body { .col-main { flex: 1; -} +} .col-complementary { flex: 1; @@ -59,7 +58,6 @@ h3 { font-size: 2em; } - .center { text-align: center; } @@ -84,7 +82,8 @@ h3 { margin-top: 20px; } -.modal-text, .alert-text { +.modal-text, +.alert-text { font-size: 1.2em; margin-top: 10px; } @@ -94,7 +93,6 @@ p { font-size: 0.9em; } - blockquote { margin: 0 0 20px; padding: 20px; @@ -128,7 +126,7 @@ pre { .btn.active { background: black; - border-radius:6px; + border-radius: 6px; color: white; font-family: Chicago_12; } @@ -173,4 +171,8 @@ pre { .scale-down { transform: scale(0.8); } -} \ No newline at end of file +} + +.gap2 { + gap: 10px; +} diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 168747a..ecff5db 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -18,7 +18,7 @@

-
+

Docs

@@ -53,20 +53,20 @@
- +

System.css

A design system for building retro -inspired interfaces

- +

Intro

System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.

- +

Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.

- +

Components

- +

Buttons

@@ -74,49 +74,49 @@ A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name.
— Apple HI Guidelines, p. 204
- +

A standard button measures 59px wide and 20px tall. We use the .btn class for these buttons

- + <%- example(` - - + + `)%> - +

When pressed, buttons invert. The button below is stimulated to be in the active state.

- + <%- example(` - + `)%> - +

Buttons can also have dynamic widths.

- + <%- example(` - + `)%> - +

Disabled buttons look the same as standard buttons, but with grey button text. Add the disabled attribute to use it.

- + <%- example(` - + `)%> - - + +
- - + +
- +

Radio Buttons

@@ -124,9 +124,9 @@ A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time.
— Apple HI Guidelines, p. 210
- +

Radio Buttons can be rendered by specifying a radio type on an input tag and assigning it a name.

- + <%- example(`
@@ -140,13 +140,13 @@
- + `)%> - - + +
- +

Checkboxes

@@ -155,9 +155,9 @@ checkbox is a square with label text next to it
— Apple HI Guidelines, p. 211
- +

Checkboxes can be rendered by specifying a checkbox type on an input tag and assigning it a name.

- + <%- example(`
@@ -171,14 +171,14 @@
- + `)%> - - + +
- - + +
@@ -187,11 +187,11 @@ icons that serve as the title of each menu
— Apple HI Guidelines, p. 52
- +

A menu bar consists of menu elements that name menu items and they typically have a dropdown menu associated with them.

- +

To create a menu bar we will use the .menu-bar class.

- + <%- example(`
  • @@ -230,9 +230,9 @@
`)%> - +

We can also manipulate a menu bar into a standard dropdown.

- + <%- example(`
  • @@ -248,17 +248,17 @@ `)%>
- - + +

Select Menu

A select menu can be used to create a drop-down list, typically used in forms.
- +

Select menus can be rendered using the select and option elements.

- + <%- example(` `)%> - +

By default the first option will be selected, but you can change that by adding the selected attribute to an option

- + <%- example(` `)%> - +

Other types of text are also supported

- + <%- example(`





-
+ `)%> - - + +
- - + +

Windows

Standard document windows have standard structural components. These components include the title bar, size box, close box, zoom box, - and scroll bars. Windows are designed for visual consistency across all monitors + and scroll bars. Windows are designed for visual consistency across all monitors
— Apple HI Guidelines, p. 134, 159
- - - + + +

Title Bar

- +
A standard title bar is at least 19px tall, has a close button, caption, and racing stripes.
- +

They're usually a part of a window. Title bars use the Chicago 12pt font.

- + <%- example(` - +
-
+

A Title Bar

- + `)%> - +

Title bars can look different depending on what they're intended for.

- + <%- example(` - +
-
+

Also a Title Bar

-
+

Dialog Title

- + `)%> - +

You can also set a title bar to be inactive by applying the .inactive-title-bar class

- + <%- example(` - +
-
- +
+

Inactive Title Bar

- +
- + `)%> - +
- - - + + +

Window Contents

- +
Document windows present a view into the content that people create and store.
— Apple HI Guidelines, p. 134
- +

This is a window (without stuff in it). To create a basic window, we simply use the .window class.

- + <%- example(` - +
-
+

Window Without Stuff

- + `)%> - - + +

This is a window with stuff in it. We can achieve this by simply adding a div with the .window-pane below the title bar.

- + <%- example(` - +
-
+

Window With Stuff

- +
Woo I got stuff in me!
- + `)%> - - - + + +

You can also add a details bar to a window by adding.details-bar below the title bar.

- + <%- example(` - +
-
+

Window With Details

@@ -443,19 +443,19 @@ more details
- +
Woo I got a details bar.
- + `)%> - +

You can also create an inactive window using an inactive title bar.

- + <%- example(`
-
+

Inactive Window

@@ -463,17 +463,17 @@ more details
- +
not active :(
`)%> - - + +
- +

Dialogs

@@ -482,35 +482,35 @@ computer can present alternatives from which the user can choose.
— Apple HI Guidelines, p. 176
- +

A basic dialog is just a box with text in it. We use the .standard-dialog class here.

- + <%- example(` - +

The Macintosh Finder, Version 1.0 (18 Jan 84)

© 1984 Apple Computer

- - + + `)%> - +

A modeless dialog box looks like a window without a size box, zoom box, or scroll bars.

- + <%- example(`
-
+

Modeless Dialog

- +
@@ -523,11 +523,11 @@
`)%> - +

We can also have a modal dialog box, which typically has some interactive component within it. It has a double-outline border. We achieve this by using a nested div. The outer div uses the .outer-border class and the .inner-border for the inner div.

- + <%- example(`
@@ -546,20 +546,20 @@
- +
- +
- +
`)%> - - + +
Alert boxes appear when the system software or an application needs to communicate information to the user. Alert boxes provide messages about @@ -567,52 +567,52 @@ actions
— Apple HI Guidelines, p. 176
- +

Like modal dialogs, alert boxes also have a double-outline frame. The empty square is where you'd place an icon.

- + <%- example(`
-

This is a standard alert box. The text would be placed here. +

This is a standard alert box. The text would be placed here. This is where more text appears

- +
- +
`)%>
- +

Contributing, Credits, etc.

- +

Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css. The Chicago 12pt and Geneva 9pt fonts are recreations by @blogmywiki

- +

System.css is still in beta! There's a few things that are currently missing that I incline on adding pretty soon. I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.

- +

If you find a bug, consider opening an issue here. If there's something that you'd like to add, please feel free to create a PR!

- +

If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)

- +

Sponsors

- +

CSS Scan: The fastest and easiest way to check, copy and edit CSS

- +
- -

+ +

diff --git a/icon/dark/apple.svg b/icon/dark-apple.svg similarity index 100% rename from icon/dark/apple.svg rename to icon/dark-apple.svg diff --git a/icon/dark/button.png b/icon/dark-button.png similarity index 100% rename from icon/dark/button.png rename to icon/dark-button.png diff --git a/icon/dark/checkmark.svg b/icon/dark-checkmark.svg similarity index 100% rename from icon/dark/checkmark.svg rename to icon/dark-checkmark.svg diff --git a/icon/dark/radio-border-focused.svg b/icon/dark-radio-border-focused.svg similarity index 100% rename from icon/dark/radio-border-focused.svg rename to icon/dark-radio-border-focused.svg diff --git a/icon/dark/radio-border.svg b/icon/dark-radio-border.svg similarity index 100% rename from icon/dark/radio-border.svg rename to icon/dark-radio-border.svg diff --git a/icon/dark/radio-dot.svg b/icon/dark-radio-dot.svg similarity index 100% rename from icon/dark/radio-dot.svg rename to icon/dark-radio-dot.svg diff --git a/icon/dark/scrollbar-down-active.svg b/icon/dark-scrollbar-down-active.svg similarity index 100% rename from icon/dark/scrollbar-down-active.svg rename to icon/dark-scrollbar-down-active.svg diff --git a/icon/dark/scrollbar-down.svg b/icon/dark-scrollbar-down.svg similarity index 100% rename from icon/dark/scrollbar-down.svg rename to icon/dark-scrollbar-down.svg diff --git a/icon/dark/scrollbar-left-active.svg b/icon/dark-scrollbar-left-active.svg similarity index 100% rename from icon/dark/scrollbar-left-active.svg rename to icon/dark-scrollbar-left-active.svg diff --git a/icon/dark/scrollbar-left.svg b/icon/dark-scrollbar-left.svg similarity index 100% rename from icon/dark/scrollbar-left.svg rename to icon/dark-scrollbar-left.svg diff --git a/icon/dark/scrollbar-right-active.svg b/icon/dark-scrollbar-right-active.svg similarity index 100% rename from icon/dark/scrollbar-right-active.svg rename to icon/dark-scrollbar-right-active.svg diff --git a/icon/dark/scrollbar-right.svg b/icon/dark-scrollbar-right.svg similarity index 100% rename from icon/dark/scrollbar-right.svg rename to icon/dark-scrollbar-right.svg diff --git a/icon/dark/scrollbar-up-active.svg b/icon/dark-scrollbar-up-active.svg similarity index 100% rename from icon/dark/scrollbar-up-active.svg rename to icon/dark-scrollbar-up-active.svg diff --git a/icon/dark/scrollbar-up.svg b/icon/dark-scrollbar-up.svg similarity index 100% rename from icon/dark/scrollbar-up.svg rename to icon/dark-scrollbar-up.svg diff --git a/icon/dark/select-button.svg b/icon/dark-select-button.svg similarity index 100% rename from icon/dark/select-button.svg rename to icon/dark-select-button.svg diff --git a/style.css b/style.css index 4e1e473..846c9bc 100644 --- a/style.css +++ b/style.css @@ -137,7 +137,7 @@ background-image: svg-load("./icon/scrollbar-up.svg"); } .darkmode::-webkit-scrollbar-button:vertical:start { - background-image: svg-load("./icon/dark/scrollbar-up.svg"); + background-image: svg-load("./icon/dark-scrollbar-up.svg"); } ::-webkit-scrollbar-button:vertical:start:active { @@ -146,7 +146,7 @@ background-image: svg-load("./icon/scrollbar-up-active.svg"); } .darkmode::-webkit-scrollbar-button:vertical:start:active { - background-image: svg-load("./icon/dark/scrollbar-up-active.svg"); + background-image: svg-load("./icon/dark-scrollbar-up-active.svg"); } ::-webkit-scrollbar-button:vertical:end { @@ -154,7 +154,7 @@ background-image: svg-load("./icon/scrollbar-down.svg"); } .darkmode::-webkit-scrollbar-button:vertical:end { - background-image: svg-load("./icon/dark/scrollbar-down.svg"); + background-image: svg-load("./icon/dark-scrollbar-down.svg"); } ::-webkit-scrollbar-button:vertical:end:active { @@ -163,7 +163,7 @@ background-image: svg-load("./icon/scrollbar-down-active.svg"); } .darkmode::-webkit-scrollbar-button:vertical:end:active { - background-image: svg-load("./icon/dark/scrollbar-down-active.svg"); + background-image: svg-load("./icon/dark-scrollbar-down-active.svg"); } ::-webkit-scrollbar-button:horizontal:start { @@ -172,7 +172,7 @@ background-image: svg-load("./icon/scrollbar-left.svg"); } .darkmode::-webkit-scrollbar-button:horizontal:start { - background-image: svg-load("./icon/dark/scrollbar-left.svg"); + background-image: svg-load("./icon/dark-scrollbar-left.svg"); } ::-webkit-scrollbar-button:horizontal:start:active { @@ -181,7 +181,7 @@ background-image: svg-load("./icon/scrollbar-left-active.svg"); } .darkmode::-webkit-scrollbar-button:horizontal:start:active { - background-image: svg-load("./icon/dark/scrollbar-left-active.svg"); + background-image: svg-load("./icon/dark-scrollbar-left-active.svg"); } ::-webkit-scrollbar-button:horizontal:end { @@ -189,7 +189,7 @@ background-image: svg-load("./icon/scrollbar-right.svg"); } .darkmode::-webkit-scrollbar-button:horizontal:end { - background-image: svg-load("./icon/dark/scrollbar-right.svg"); + background-image: svg-load("./icon/dark-scrollbar-right.svg"); } ::-webkit-scrollbar-button:horizontal:end:active { @@ -198,7 +198,7 @@ background-image: svg-load("./icon/scrollbar-right-active.svg"); } .darkmode::-webkit-scrollbar-button:horizontal:end:active { - background-image: svg-load("./icon/dark/scrollbar-right-active.svg"); + background-image: svg-load("./icon/dark-scrollbar-right-active.svg"); } body { @@ -361,9 +361,6 @@ h2 { font-family: Chicago_12; color: #a5a5a5; } -.darkmmode .inactive-title-bar .title { - color: #5a5a5a; -} .title-bar button { position: relative; @@ -615,7 +612,7 @@ h2 { background: black; border-style: solid; border-width: 5.5px; - border-image: url("./icon/dark/button.png") 30 stretch; + border-image: url("./icon/dark-button.png") 30 stretch; color: white; } @@ -628,7 +625,7 @@ h2 { .darkmode .btn:active { background: white; border-radius: 6px; - color: white; + color: black; font-family: Chicago_12; } @@ -650,7 +647,7 @@ h2 { background: black; border-style: solid; border-width: 5.5px; - border-image: url("./icon/dark/button.png") 30 stretch; + border-image: url("./icon/dark-button.png") 30 stretch; color: #535353; } @@ -663,6 +660,7 @@ input { } .darkmode input { border: 1.5px solid white; + background-color: #000; } input:focus { @@ -674,8 +672,8 @@ input[type="radio"] + label::before { width: 20px; height: 20px; } -.darkmmode input[type="radio"] + label::before { - border-image: svg-load("./icon/dark/radio-border.svg"); +.darkmode input[type="radio"] + label::before { + border-image: svg-load("./icon/dark-radio-border.svg"); } input[type="checkbox"] + label::before { @@ -683,7 +681,7 @@ input[type="checkbox"] + label::before { width: 20px; height: 20px; } -.darkmmode input[type="checkbox"] + label::before { +.darkmode input[type="checkbox"] + label::before { border: 1.5px solid white; } @@ -721,15 +719,15 @@ input[type="radio"] + label::before { margin-right: var(--radio-label-spacing); background: svg-load("./icon/radio-border.svg"); } -.darkmmode input[type="radio"] + label::before { - background: svg-load("./icon/dark/radio-border.svg"); +.darkmode input[type="radio"] + label::before { + background: svg-load("./icon/dark-radio-border.svg"); } input[type="radio"]:focus-visible + label::before { background-image: svg-load("./icon/radio-border-focused.svg"); } -.darkmmode input[type="radio"]:focus-visible + label::before { - background-image: svg-load("./icon/dark/radio-border-focused.svg"); +.darkmode input[type="radio"]:focus-visible + label::before { + background-image: svg-load("./icon/dark-radio-border-focused.svg"); } input[type="radio"]:checked + label::after { @@ -743,7 +741,7 @@ input[type="radio"]:checked + label::after { background: svg-load("./icon/radio-dot.svg"); } .darkmode input[type="radio"]:checked + label::after { - background: svg-load("./icon/dark/radio-dot.svg"); + background: svg-load("./icon/dark-radio-dot.svg"); } input[type="checkbox"] + label { @@ -766,7 +764,7 @@ input[type="checkbox"] + label::before { input[type="checkbox"]:focus-visible + label::before { outline: 1px solid black; } -.darkmmode input[type="checkbox"]:focus-visible + label::before { +.darkmode input[type="checkbox"]:focus-visible + label::before { outline: 1px solid white; } @@ -783,8 +781,8 @@ input[type="checkbox"]:checked + label::after { background: svg-load("./icon/checkmark.svg"); background-repeat: no-repeat; } -.darkmmode input[type="checkbox"]:checked + label::after { - background: svg-load("./icon/dark/checkmark.svg"); +.darkmode input[type="checkbox"]:checked + label::after { + background: svg-load("./icon/dark-checkmark.svg"); background-repeat: no-repeat; } @@ -795,8 +793,8 @@ input[type="checkbox"][disabled] + label::before { input[type="checkbox"][disabled]:checked + label::after { background: svg-load("./icon/checkmark-disabled.svg"); } -.darkmmode input[type="checkbox"][disabled]:checked + label::after { - background: svg-load("./icon/dark/checkmark-disabled.svg"); +.darkmode input[type="checkbox"][disabled]:checked + label::after { + background: svg-load("./icon/dark-checkmark-disabled.svg"); } .field-row { @@ -823,8 +821,8 @@ input[type="checkbox"][disabled]:checked + label::after { display: inline-block; margin-right: 2px; } -.darkmmode .apple { - background: svg-load("./icon/dark/apple.svg"); +.darkmode .apple { + background: svg-load("./icon/dark-apple.svg"); background-repeat: no-repeat; } @@ -853,13 +851,16 @@ select { -moz-box-shadow: 2px 8px 0 0px black; box-shadow: 2px 2px 0 -1px black; } -.darkmmode select { - background-image: svg-load("./icon/dark/select-button.svg"); +.darkmode select { + background-color: #000; + background-image: svg-load("./icon/dark-select-button.svg"); background-position: top 2px right 2px; background-repeat: no-repeat; -webkit-box-shadow: 2px 8px 0 0px white; -moz-box-shadow: 2px 8px 0 0px white; box-shadow: 2px 2px 0 -1px white; + border-color: white; + color: white; } /* menu-bar */ @@ -890,8 +891,8 @@ ul[role="menu-bar"] > [role="menu-item"]:hover { outline: none; } .darkmode ul[role="menu-bar"] > [role="menu-item"]:focus, -ul[role="menu-bar"] > [role="menu-item"]:focus-within, -ul[role="menu-bar"] > [role="menu-item"]:hover { +.darkmode ul[role="menu-bar"] > [role="menu-item"]:focus-within, +.darkmode ul[role="menu-bar"] > [role="menu-item"]:hover { background: #fff; color: #000; } @@ -905,6 +906,7 @@ ul[role="menu"] { } .darkmode ul[role="menu"] { background: black; + color: white; } ul[role="menu"]::before { content: ""; @@ -943,12 +945,12 @@ ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { background: #000; color: white; } -.darkmmode ul[role="menu"] > [role="menu-item"] > a:hover, -ul[role="menu"] > [role="menu-item"] > button:hover, -ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, -ul[role="menu"] > [role="menu-item"] > a:focus, -ul[role="menu"] > [role="menu-item"] > button:focus, -ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { +.darkmode ul[role="menu"] > [role="menu-item"] > a:hover, +.darkmode ul[role="menu"] > [role="menu-item"] > button:hover, +.darkmode ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, +.darkmode ul[role="menu"] > [role="menu-item"] > a:focus, +.darkmode ul[role="menu"] > [role="menu-item"] > button:focus, +.darkmode ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus { background: #fff; color: black; } @@ -974,3 +976,7 @@ ul [role="menu-item"].divider::after { .menu-items > li { margin-bottom: 1rem; } + +.darkmode blockquote { + border-color: white; +}