From b818b68af77924d69d52e583eafbe5865f0cb6ae Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 2 Jun 2024 21:01:15 +0200 Subject: [PATCH] style(topbar): fix select element color on mobile --- src/components/topbar/topbar.module.css | 5 +- src/index.css | 4 + src/themes.css | 146 ++++++++++++------------ 3 files changed, 79 insertions(+), 76 deletions(-) diff --git a/src/components/topbar/topbar.module.css b/src/components/topbar/topbar.module.css index 7528774b..1d8a8c9a 100644 --- a/src/components/topbar/topbar.module.css +++ b/src/components/topbar/topbar.module.css @@ -33,7 +33,7 @@ } .boardNavMobile .pageJump a { - color: var(--button-text-color-mobile); + color: var(--topbar-mobile-button-color); text-decoration: var(--button-text-decoration-mobile); } @@ -44,9 +44,6 @@ .boardNavMobile select { font-size: var(--topbar-mobile-font-size); - border: var(--select-border, revert); - background-color: var(--select-background-color, revert); - color: var(--select-color, revert); } .boardSelect { diff --git a/src/index.css b/src/index.css index aabf2312..938cfbd0 100644 --- a/src/index.css +++ b/src/index.css @@ -42,6 +42,10 @@ hr { user-select: none; display: inline-block; } + + select { + filter: var(--filter80); + } } @media (min-width: 640px) { diff --git a/src/themes.css b/src/themes.css index 912f1300..ad091f7b 100644 --- a/src/themes.css +++ b/src/themes.css @@ -4,18 +4,6 @@ --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; --board-address-font-size: x-small; - - /* board nav */ - --topbar-font-size: 9pt; - --topbar-separator-color: #b86; - --topbar-desktop-link-text-color: #800; - --topbar-desktop-link-text-color-hover: #e00; - --topbar-desktop-link-text-decoration: none; - --topbar-desktop-link-text-decoration-hover: underline; - --topbar-mobile-background-color: #f0e0d6; - --topbar-mobile-border-bottom: 2px solid #d9c5b7; - --topbar-mobile-font-size: 10px; - --topbar-mobile-button-text-color: navy; /* body */ --body-background-base-color: #ffe; @@ -180,6 +168,18 @@ /* stats */ --stats-font-size: 11px; + + /* topbar */ + --topbar-font-size: 9pt; + --topbar-separator-color: #b86; + --topbar-desktop-link-text-color: #800; + --topbar-desktop-link-text-color-hover: #e00; + --topbar-desktop-link-text-decoration: none; + --topbar-desktop-link-text-decoration-hover: underline; + --topbar-mobile-background-color: #f0e0d6; + --topbar-mobile-border-bottom: 2px solid #d9c5b7; + --topbar-mobile-font-size: 10px; + --topbar-mobile-button-text-color: navy; } :root .yotsuba-b { @@ -191,18 +191,6 @@ --board-title-text-color: #af0a0f; --board-address-text-color: #af0a0f; - /* board nav */ - --topbar-font-size: 9pt; - --topbar-separator-color: #89a; - --topbar-desktop-link-text-color: #34345c; - --topbar-desktop-link-text-color-hover: #d00; - --topbar-desktop-link-text-decoration: none; - --topbar-desktop-link-text-decoration-hover: none; - --topbar-mobile-background-color: #d6daf0; - --topbar-mobile-border-bottom: 2px solid #b7c5d9; - --topbar-mobile-font-size: 10px; - --topbar-mobile-button-text-color: #34345c; - /* body */ --body-background-base-color: #eef2ff; --body-background-pattern-image: url("/public/assets/background-fade-blue.png"); @@ -364,6 +352,18 @@ /* stats */ --stats-font-size: 11px; + + /* topbar */ + --topbar-font-size: 9pt; + --topbar-separator-color: #89a; + --topbar-desktop-link-text-color: #34345c; + --topbar-desktop-link-text-color-hover: #d00; + --topbar-desktop-link-text-decoration: none; + --topbar-desktop-link-text-decoration-hover: none; + --topbar-mobile-background-color: #d6daf0; + --topbar-mobile-border-bottom: 2px solid #b7c5d9; + --topbar-mobile-font-size: 10px; + --topbar-mobile-button-text-color: #34345c; } :root .futaba { @@ -374,18 +374,6 @@ --body-font-family: times new roman, serif; --body-font-size: 16px; - /* board nav */ - --topbar-font-size: 11pt; - --topbar-separator-color: none; - --topbar-desktop-link-text-color: #00e; - --topbar-desktop-link-text-color-hover: red; - --topbar-desktop-link-text-decoration: underline; - --topbar-desktop-link-text-decoration-hover: underline; - --topbar-mobile-background-color: #f0e0d6; - --topbar-mobile-border-bottom: 2px solid #d9c5b7; - --topbar-mobile-font-size: 9pt; - --topbar-mobile-button-text-color: #00f; - /* board title */ --board-title-font-size: 32px; --board-address-font-size: 10pt; @@ -514,6 +502,18 @@ /* stats */ --stats-font-size: 10pt; + + /* topbar */ + --topbar-font-size: 11pt; + --topbar-separator-color: none; + --topbar-desktop-link-text-color: #00e; + --topbar-desktop-link-text-color-hover: red; + --topbar-desktop-link-text-decoration: underline; + --topbar-desktop-link-text-decoration-hover: underline; + --topbar-mobile-background-color: #f0e0d6; + --topbar-mobile-border-bottom: 2px solid #d9c5b7; + --topbar-mobile-font-size: 9pt; + --topbar-mobile-button-text-color: #00f; } :root .burichan { @@ -525,18 +525,6 @@ --board-address-font-size: 10pt; --board-address-text-color: #af0a0f; - /* board nav */ - --topbar-font-size: 11pt; - --topbar-separator-color: none; - --topbar-desktop-link-text-color: #34345c; - --topbar-desktop-link-text-color-hover: #d00; - --topbar-desktop-link-text-decoration: underline; - --topbar-desktop-link-text-decoration-hover: underline; - --topbar-mobile-background-color: #d6daf0; - --topbar-mobile-border-bottom: 2px solid #b7c5d9; - --topbar-mobile-font-size: 9pt; - --topbar-mobile-button-text-color: #34345c; - /* body */ --body-background-base-color: #eef2ff; --body-background-pattern-image: none; @@ -678,6 +666,18 @@ /* stats */ --stats-font-size: 10pt; + + /* topbar */ + --topbar-font-size: 11pt; + --topbar-separator-color: none; + --topbar-desktop-link-text-color: #34345c; + --topbar-desktop-link-text-color-hover: #d00; + --topbar-desktop-link-text-decoration: underline; + --topbar-desktop-link-text-decoration-hover: underline; + --topbar-mobile-background-color: #d6daf0; + --topbar-mobile-border-bottom: 2px solid #b7c5d9; + --topbar-mobile-font-size: 9pt; + --topbar-mobile-button-text-color: #34345c; } :root .tomorrow { @@ -688,18 +688,6 @@ --body-font-family: arial, helvetica, sans-serif; --body-font-size: 13px; - /* board nav */ - --topbar-font-size: 9pt; - --topbar-separator-color: #c5c8c6; - --topbar-desktop-link-text-color: #81a2be; - --topbar-desktop-link-text-color-hover: #5f89ac; - --topbar-desktop-link-text-decoration: none; - --topbar-desktop-link-text-decoration-hover: none; - --topbar-mobile-background-color: #1d1f21; - --topbar-mobile-border-bottom: 2px solid #282a2e; - --topbar-mobile-font-size: 10px; - --topbar-mobile-button-text-color: #81a2be; - /* board title */ --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; @@ -864,6 +852,19 @@ /* stats */ --stats-font-size: 11px; + + /* topbar */ + --topbar-font-size: 9pt; + --topbar-separator-color: #c5c8c6; + --topbar-desktop-link-text-color: #81a2be; + --topbar-desktop-link-text-color-hover: #5f89ac; + --topbar-desktop-link-text-decoration: none; + --topbar-desktop-link-text-decoration-hover: none; + --topbar-mobile-background-color: #1d1f21; + --topbar-mobile-border-bottom: 2px solid #282a2e; + --topbar-mobile-font-size: 10px; + --topbar-mobile-button-text-color: #81a2be; + --topbar-mobile-button-color: #81a2be; } :root .photon { @@ -874,18 +875,6 @@ --body-font-family: arial, helvetica, sans-serif; --body-font-size: 13px; - /* board nav */ - --topbar-font-size: 9pt; - --topbar-separator-color: #333; - --topbar-desktop-link-text-color: #f60; - --topbar-desktop-link-text-color-hover: #f30; - --topbar-desktop-link-text-decoration: none; - --topbar-desktop-link-text-decoration-hover: none; - --topbar-mobile-background-color: #ddd; - --topbar-mobile-border-bottom: 2px solid #ccc; - --topbar-mobile-font-size: 10px; - --topbar-mobile-button-text-color: #f60; - /* board title */ --board-title-font-size: 28px; --board-title-font-family: Tahoma, sans-serif; @@ -1030,4 +1019,17 @@ /* stats */ --stats-font-size: 11px; + + /* topbar */ + --topbar-font-size: 9pt; + --topbar-separator-color: #333; + --topbar-desktop-link-text-color: #f60; + --topbar-desktop-link-text-color-hover: #f30; + --topbar-desktop-link-text-decoration: none; + --topbar-desktop-link-text-decoration-hover: none; + --topbar-mobile-background-color: #ddd; + --topbar-mobile-border-bottom: 2px solid #ccc; + --topbar-mobile-font-size: 10px; + --topbar-mobile-button-text-color: #f60; + --topbar-mobile-button-color: #f60; }