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

update themes

Browse Source
This commit is contained in:
plebeius.eth
2024-03-21 22:16:24 +01:00
parent 9b6bccf1da
commit 61d58340be
4 changed files with 43 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-nav/board-nav.tsx
+1 -5
View File
@@ -28,11 +28,7 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
]
</span>
<span className={styles.navTopRight}>
[
<Link to='/settings' onClick={(e) => e.preventDefault()}>
{t('settings')}
</Link>
] [<Link to='/'>{t('home')}</Link>]
[<Link to='/settings'>{t('settings')}</Link>] [<Link to='/'>{t('home')}</Link>]
</span>
</div>
);
src/themes.css
+33 -38
View File
@@ -31,23 +31,23 @@
--button-background-color-mobile: #f0e0d6;
--button-border-mobile: 1px solid #c0a69d;
/* main colors */
--color1: #800;
--color2: #fca;
--color3: #fed;
/* horizontal rule */
--hr-border: none;
--hr-border-top: 1px solid #d9bfb7;
--hr-height: 0px;
/* homepage boxes */
--homepage-infobox-bar-text-color: #fff;
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #fff;
--homepage-infobox-bar-background-color: #800;
--homepage-box-background-color: #fff;
--homepage-box-border-color: #800;
--homepage-box-bar-text-color: #800;
--homepage-box-bar-text-color-hover: #c63;
--homepage-box-bar-background-color: #fca;
/* footer */
--footer-item-background-color-desktop: #fed;
/* links */
--link-external-text-color: #00f;
@@ -85,13 +85,15 @@
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
/* homepage boxes */
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
--homepage-infobox-bar-background-color: #98e;
--homepage-box-background-color: #fff;
--homepage-box-border-color: #000;
--homepage-box-bar-text-color: #000;
--homepage-box-bar-text-color-hover: #fff;
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
--homepage-box-bar-background-color: #98e;
/* desktop buttons */
--button-text-color: #34345c;
@@ -105,10 +107,8 @@
--button-background-color-mobile: #d6daf0;
--button-border-mobile: 1px solid #b7c5d9;
/* main colors */
--color1: #98e;
--color2: #98e;
--color3: #eef2ff;
/* footer */
--footer-item-background-color-desktop: #eef2ff;
/* horizontal rule */
--hr-border: none;
@@ -135,13 +135,15 @@
--body-font-family: times new roman, serif;
--body-font-size: 12pt;
/* homepage boxes */
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #fff;
--homepage-infobox-bar-background-color: #800;
--homepage-box-background-color: #fff;
--homepage-box-border-color: #800;
--homepage-box-bar-text-color: #800;
--homepage-box-bar-text-color-hover: #c63;
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #fff;
--homepage-box-bar-background-color: #fca;
/* board nav */
--boardnav-font-size: 11pt;
@@ -159,10 +161,8 @@
--button-text-color-hover: red;
--button-text-decoration: underline;
/* colors */
--color1: #800;
--color2: #fca;
--color3: #fed;
/* footer */
--footer-item-background-color-desktop: #fed;
/* links */
--link-external-text-color: #00f;
@@ -200,23 +200,23 @@
--body-font-family: times new roman, serif;
--body-font-size: 12pt;
/* homepage boxes */
/* homepage */
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
--homepage-infobox-bar-background-color: #98e;
--homepage-box-background-color: #fff;
--homepage-box-border-color: #000;
--homepage-box-bar-text-color: #000;
--homepage-box-bar-background-color: #98e;
--homepage-box-bar-text-color-hover: #fff;
--homepage-infobox-text-color: #000;
--homepage-infobox-bar-text-color: #000;
/* buttons */
--button-text-color: #34345c;
--button-text-decoration: underline;
--button-text-color-hover: #d00;
/* colors */
--color1: #98e;
--color2: #98e;
--color3: #eef2ff;
/* footer */
--footer-item-background-color-desktop: #eef2ff;
/* links */
--link-external-text-color: #00f;
@@ -239,13 +239,15 @@
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
/* homepage boxes */
/* homepage */
--homepage-infobox-text-color: #c5c8c6;
--homepage-infobox-bar-text-color: #c5c8c6;
--homepage-infobox-bar-background-color: rgb(33, 35, 38);
--homepage-box-background-color: #282a2e;
--homepage-box-bar-background-color: rgb(33, 35, 38);
--homepage-box-border-color: rgb(45, 47, 51);
--homepage-box-bar-text-color: #c5c8c6;
--homepage-box-bar-text-color-hover: #c5c8c6;
--homepage-infobox-text-color: #c5c8c6;
--homepage-infobox-bar-text-color: #c5c8c6;
/* board nav */
--boardnav-font-size: 9pt;
@@ -263,10 +265,6 @@
--button-text-color: #81a2be;
--button-text-color-hover: #5f89ac;
/* colors */
--color1: rgb(33, 35, 38);
--color2: rgb(33, 35, 38);
/* horizontal rule */
--hr-border: none;
--hr-border-top: 1px solid #282a2e;
@@ -284,9 +282,6 @@
--select-border: 1px solid #575a60;
--select-background-color: #282a2e;
--select-color: #c5c8c6;
/* text color on color3 */
--text-color-on-color3: #c5c8c6;
}
:root .photon {
src/views/home/home.module.css
+7 -7
View File
@@ -26,22 +26,22 @@
padding-bottom: 0.5em;
}
.boxBar {
.boxBar, .infoboxBar {
padding-left: 0.5em;
line-height: 2em;
}
.color1ColorBar {
background: var(--color1);
.infoboxBar {
background: var(--homepage-infobox-bar-background-color);
color: var(--homepage-infobox-bar-text-color);
}
.color2ColorBar {
background: var(--color2);
.boxBar {
background: var(--homepage-box-bar-background-color);
color: var(--homepage-box-bar-text-color);
}
.boxBar h2 {
.boxBar h2, .infoboxBar h2{
font-size: 131%;
font-weight: 700;
}
@@ -185,7 +185,7 @@
}
.footer li {
background: var(--color3);
background: var(--footer-item-background-color-desktop);
border: 1px solid;
padding: 2px 1em 2px 1em;
border-left: none;
src/views/home/home.tsx
+2 -2
View File
@@ -52,7 +52,7 @@ const InfoBox = () => {
const { t } = useTranslation();
return (
<div className={styles.box}>
<div className={`${styles.boxBar} ${styles.color1ColorBar}`}>
<div className={styles.infoboxBar}>
<h2>{t('what_is_plebchan')}</h2>
</div>
<div className={styles.boxContent}>
@@ -71,7 +71,7 @@ const Boards = () => {
return (
<div className={styles.box}>
<div className={`${styles.boxBar} ${styles.color2ColorBar}`}>
<div className={styles.boxBar}>
<h2 className={styles.capitalize}>{t('boards')}</h2>
<span>{t('options')} ▼</span>
</div>