External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(topbar): fix select element color on mobile

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-02 21:01:15 +02:00
parent 8b000a0bdb
commit b818b68af7
3 changed files with 79 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/topbar/topbar.module.css
+1 -4
View File
@@ -33,7 +33,7 @@
} }
.boardNavMobile .pageJump a { .boardNavMobile .pageJump a {
color: var(--button-text-color-mobile); color: var(--topbar-mobile-button-color);
text-decoration: var(--button-text-decoration-mobile); text-decoration: var(--button-text-decoration-mobile);
} }
@@ -44,9 +44,6 @@
.boardNavMobile select { .boardNavMobile select {
font-size: var(--topbar-mobile-font-size); 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 { .boardSelect {
src/index.css
+4
View File
@@ -42,6 +42,10 @@ hr {
user-select: none; user-select: none;
display: inline-block; display: inline-block;
} }
select {
filter: var(--filter80);
}
} }
@media (min-width: 640px) { @media (min-width: 640px) {
src/themes.css
+74 -72
View File
@@ -5,18 +5,6 @@
--board-title-font-family: Tahoma, sans-serif; --board-title-font-family: Tahoma, sans-serif;
--board-address-font-size: x-small; --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 */
--body-background-base-color: #ffe; --body-background-base-color: #ffe;
--body-background-pattern-image: url("/public/assets/background-fade.png"); --body-background-pattern-image: url("/public/assets/background-fade.png");
@@ -180,6 +168,18 @@
/* stats */ /* stats */
--stats-font-size: 11px; --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 { :root .yotsuba-b {
@@ -191,18 +191,6 @@
--board-title-text-color: #af0a0f; --board-title-text-color: #af0a0f;
--board-address-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 */
--body-background-base-color: #eef2ff; --body-background-base-color: #eef2ff;
--body-background-pattern-image: url("/public/assets/background-fade-blue.png"); --body-background-pattern-image: url("/public/assets/background-fade-blue.png");
@@ -364,6 +352,18 @@
/* stats */ /* stats */
--stats-font-size: 11px; --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 { :root .futaba {
@@ -374,18 +374,6 @@
--body-font-family: times new roman, serif; --body-font-family: times new roman, serif;
--body-font-size: 16px; --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 */
--board-title-font-size: 32px; --board-title-font-size: 32px;
--board-address-font-size: 10pt; --board-address-font-size: 10pt;
@@ -514,6 +502,18 @@
/* stats */ /* stats */
--stats-font-size: 10pt; --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 { :root .burichan {
@@ -525,18 +525,6 @@
--board-address-font-size: 10pt; --board-address-font-size: 10pt;
--board-address-text-color: #af0a0f; --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 */
--body-background-base-color: #eef2ff; --body-background-base-color: #eef2ff;
--body-background-pattern-image: none; --body-background-pattern-image: none;
@@ -678,6 +666,18 @@
/* stats */ /* stats */
--stats-font-size: 10pt; --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 { :root .tomorrow {
@@ -688,18 +688,6 @@
--body-font-family: arial, helvetica, sans-serif; --body-font-family: arial, helvetica, sans-serif;
--body-font-size: 13px; --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 */
--board-title-font-size: 28px; --board-title-font-size: 28px;
--board-title-font-family: Tahoma, sans-serif; --board-title-font-family: Tahoma, sans-serif;
@@ -864,6 +852,19 @@
/* stats */ /* stats */
--stats-font-size: 11px; --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 { :root .photon {
@@ -874,18 +875,6 @@
--body-font-family: arial, helvetica, sans-serif; --body-font-family: arial, helvetica, sans-serif;
--body-font-size: 13px; --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 */
--board-title-font-size: 28px; --board-title-font-size: 28px;
--board-title-font-family: Tahoma, sans-serif; --board-title-font-family: Tahoma, sans-serif;
@@ -1030,4 +1019,17 @@
/* stats */ /* stats */
--stats-font-size: 11px; --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;
} }