From 9b684ce152e58359611ca37c64ccb7c0de376c18 Mon Sep 17 00:00:00 2001 From: Late Night Defender Date: Wed, 20 Nov 2024 15:21:05 +0700 Subject: [PATCH] merge navbar.css into style.css --- index.html | 8 +-- navbar.css | 143 ----------------------------------------------------- style.css | 60 ++++++++++++++++++++-- 3 files changed, 59 insertions(+), 152 deletions(-) delete mode 100644 navbar.css diff --git a/index.html b/index.html index 0e4b235..f538ea2 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,10 @@ TTT Logo -
- ทีม - วงแหวนเว็บ - สถานะการให้บริการ +
+ ทีม + วงแหวนเว็บ + สถานะการให้บริการ
diff --git a/navbar.css b/navbar.css deleted file mode 100644 index bd9910f..0000000 --- a/navbar.css +++ /dev/null @@ -1,143 +0,0 @@ -.headerbutton { - border: none; - border-radius: 8px; - justify-content: center; - align-items: center; - text-decoration: none; - display: flex; - font-size: 16px; - margin: 4px 2px; - padding-left: 0.3cm; - padding-right: 0.3cm; - cursor: pointer; - height: 35px; - transition-duration: 0.2s; -} - -.topbar { - position: fixed; - width: 100%; - top: 0px; - left: 0px; - z-index: 10; -} - -.topbar-group { - display: flex; - justify-content: space-between; - margin-left: 1cm; - margin-right: 1cm; -} - -.simple-topbar { - position: fixed; - width: 100%; - height: 1.2cm; - top: 0px; - left: 0px; - z-index: 10; -} - -.simple-topbar-backbutton { - position: absolute; - border-radius:10px; - justify-content: center; - align-items: center; - text-decoration: none; - display: grid; - font-size: 14px; - cursor: pointer; - margin: 0.1cm; - transition-duration: 0.2s; - width: 1cm; - height: 1cm; -} - -@media only screen and (max-width: 750px) { - .topbar-group { - display: flex; - align-items: center; - flex-direction: column; - margin-left: 0cm; - margin-right: 0cm; - } - - .headerbutton { - border: none; - border-radius: 8px; - justify-content: center; - align-items: center; - text-decoration: none; - display: flex; - font-size: 14px; - margin: 4px 2px; - padding-left: 0.2cm; - padding-right: 0.2cm; - cursor: pointer; - height: 35px; - transition-duration: 0.2s; - } - -} -@media (prefers-color-scheme: light) { - - .headerbutton { - color: black; - } - - .headerbutton:hover { - background-color: #fafafa; - } - - .topbar { - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(224, 224, 224, 1); - color: #000000; - } - - .simple-topbar { - background-color: rgba(255, 255, 255, 1); - border: 1px solid rgba(224, 224, 224, 1); - color: #000000; - } - - .simple-topbar-backbutton { - color: black; - } - - .simple-topbar-backbutton:hover { - background-color: #DEDEDE; - } - -} - -@media (prefers-color-scheme: dark) { - - .headerbutton { - color: #ffffff; - } - - .headerbutton:hover { - background-color: #4a4a4a; - } - - .topbar { - background-color: #303030; - border: 1px solid #1f1f1f; - color: #ffffff; - } - - .simple-topbar { - background-color: #303030; - border: 1px solid #1f1f1f; - color: #ffffff; - } - - .simple-topbar-backbutton { - color: #ffffff; - } - - .simple-topbar-backbutton:hover { - background-color: #3e3e3e; - } -} \ No newline at end of file diff --git a/style.css b/style.css index 8683721..fdcfc3c 100644 --- a/style.css +++ b/style.css @@ -3,8 +3,10 @@ :root { --white: 255, 255, 255; --whitebg: 250, 250, 250; + --whiteitem: 255, 255, 255; --black: 0, 0, 0; --blackbg: 34, 34, 34; + --blackitem: 50, 50, 50; --accent1: 153, 193, 241; --accent3: 53, 132, 228; --accent5: 26, 95, 180; @@ -110,6 +112,20 @@ h1 {margin-top: 3vh;} padding: 0cm 0.75cm 0cm 0.75cm; } +.button.header { + font-weight: normal; + margin-top: 0.25cm; +} + +.button.back { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + margin: 0.1cm; + height: 1cm; +} + .itemcard { display: grid; border-radius: 12px; @@ -221,6 +237,23 @@ h1 {margin-top: 3vh;} flex-wrap: wrap; } +.topbar { + position: fixed; + width: 100%; + top: 0px; + left: 0px; + z-index: 10; +} + +.topbar.simple {height: 1.2cm;} + +.topbar-group { + display: flex; + justify-content: space-between; + margin-left: 1cm; + margin-right: 1cm; +} + /* For tablet screens */ @media only screen and (max-width: 1366px) { .middle.large {width: 90vw;} @@ -229,6 +262,13 @@ h1 {margin-top: 3vh;} /* For phone screens */ @media only screen and (max-width: 750px) { .middle.large {margin-top: 1cm;} + + .topbar-group { + align-items: center; + flex-direction: column; + margin-left: 0cm; + margin-right: 0cm; + } } @media (prefers-color-scheme: light) { @@ -236,29 +276,39 @@ h1 {margin-top: 3vh;} html * {color: rgb(var(--black));} .list {background-color: rgb(var(--white));} .button {background-color: rgba(var(--black), 0.08);} + .button.header {background-color: rgb(var(--white));} + .button.back {background-color: rgb(var(--white));} .button:hover {background-color: rgba(var(--black), 0.18);} .togglegroups-background {background-color: rgba(var(--black), 0.08);} .togglegroups-highlighted {background-color: rgb(var(--white));} - .itemcard {background-color: rgb(var(--white));} + .itemcard {background-color: rgb(var(--whiteitem));} .itemcard:hover {background-color: rgb(var(--whitebg));} .itemcard-stealth:hover {background-color: rgba(var(--black), 0.1);} - .infocard {background-color: rgb(var(--white));} + .infocard {background-color: rgb(var(--whiteitem));} .separator {background-color: rgba(var(--blackbg), 0.1);} .banner {background-color: rgba(var(--accent1), 0.6);} + .topbar { + background-color: rgb(var(--whiteitem)); + border: 1px solid rgba(var(--blackbg), 0.1); + } } @media (prefers-color-scheme: dark) { body {background-color: rgb(var(--blackbg));} html * {color: rgb(var(--white));} .list {background-color: rgba(var(--white), 0.07);} - .button {background: rgba(var(--white), 0.1);} + .button {background: rgb(var(--blackitem));} .button:hover {background: rgba(var(--white), 0.18);} .togglegroups-background {background: rgba(var(--white), 0.1);} .togglegroups-highlighted {background-color: rgba(var(--white), 0.15);} - .itemcard {background-color: rgba(var(--white), 0.07);} + .itemcard {background-color: rgb(var(--blackitem));} .itemcard:hover {background-color: rgba(var(--white), 0.15);} .itemcard-stealth:hover {background-color: rgba(var(--white), 0.15);} - .infocard {background-color: rgba(var(--white), 0.07);} + .infocard {background-color: rgb(var(--blackitem));} .separator {background-color: rgb(var(--blackbg));} .banner {background-color: rgba(var(--accent5), 0.5);} + .topbar { + background-color: rgb(var(--blackitem)); + border: 1px solid rgba(var(--blackbg), 0.1); + } }