public/tubearchivist
1
0
Fork 0
mirror of https://git.vectorsigma.ru/public/tubearchivist.git synced 2026-08-04 22:49:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add custom.css #884

Browse Source
This commit is contained in:
MerlinScheurer
2025-04-05 13:16:30 +02:00
parent 253571b5ac
commit 68a69185fe
20 changed files with 102 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/configuration/colours/Colours.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { useUserConfigStore } from '../../stores/UserConfigStore';
import { ColourConstant } from './colourConstant';
import CustomStylesheet from './components/Custom';
import DarkStylesheet from './components/Dark';
import LightStylesheet from './components/Light';
import MatrixStylesheet from './components/Matrix';
import MidnightStylesheet from './components/Midnight';
const Colours = () => {
const { userConfig } = useUserConfigStore();
const stylesheet = userConfig?.stylesheet;
switch (stylesheet) {
case ColourConstant.Dark:
return <DarkStylesheet />;
case ColourConstant.Matrix:
return <MatrixStylesheet />;
case ColourConstant.Midnight:
return <MidnightStylesheet />;
case ColourConstant.Light:
return <LightStylesheet />;
case ColourConstant.Custom:
return <CustomStylesheet />;
default:
return <DarkStylesheet />;
}
};
export default Colours;

7
frontend/src/configuration/colours/colourConstant.ts Normal file
View File

@@ -0,0 +1,7 @@
export const ColourConstant = {
Dark: 'dark.css',
Light: 'light.css',
Matrix: 'matrix.css',
Midnight: 'midnight.css',
Custom: 'custom.css',
};

9
frontend/src/configuration/colours/components/Custom.tsx Normal file
View File

@@ -0,0 +1,9 @@
const CustomStylesheet = () => {
return (
<head>
<link rel="stylesheet" href="/css/custom.css" />
</head>
);
};
export default CustomStylesheet;

8
frontend/src/configuration/colours/components/Dark.tsx
View File

@@ -1,7 +1,9 @@
import './css/dark.css';
const DarkStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/dark.css" />
</head>
);
};
export default DarkStylesheet;

8
frontend/src/configuration/colours/components/Light.tsx
View File

@@ -1,7 +1,9 @@
import './css/light.css';
const LightStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/light.css" />
</head>
);
};
export default LightStylesheet;

8
frontend/src/configuration/colours/components/Matrix.tsx
View File

@@ -1,7 +1,9 @@
import './css/matrix.css';
const MatrixStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/matrix.css" />
</head>
);
};
export default MatrixStylesheet;

8
frontend/src/configuration/colours/components/Midnight.tsx
View File

@@ -1,7 +1,9 @@
import './css/midnight.css';
const MidnightStylesheet = () => {
return <></>;
return (
<head>
<link rel="stylesheet" href="/css/midnight.css" />
</head>
);
};
export default MidnightStylesheet;

16
frontend/src/configuration/colours/components/css/dark.css
View File

@@ -1,16 +0,0 @@
:root {
--main-bg: #00202f;
--highlight-bg: #00293b;
--highlight-error: #990202;
--highlight-error-light: #c44343;
--highlight-bg-transparent: #00293baf;
--main-font: #eeeeee;
--accent-font-dark: #259485;
--accent-font-light: #97d4c8;
--img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
contrast(90%);
--img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
contrast(120%);
--banner: url('/img/banner-tube-archivist-dark.png');
--logo: url('/img/logo-tube-archivist-dark.png');
}

16
frontend/src/configuration/colours/components/css/light.css
View File

@@ -1,16 +0,0 @@
:root {
--main-bg: #eeeeee;
--highlight-bg: #d9e0d9;
--highlight-error: #990202;
--highlight-error-light: #c44343;
--highlight-bg-transparent: #00293baf;
--main-font: #00202f;
--accent-font-dark: #259485;
--accent-font-light: #35b399;
--img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
contrast(90%);
--img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
contrast(120%);
--banner: url('/img/banner-tube-archivist-light.png');
--logo: url('/img/logo-tube-archivist-light.png');
}

69
frontend/src/configuration/colours/components/css/matrix.css
View File

@@ -1,69 +0,0 @@
:root {
--main-bg: #000000;
--highlight-bg: #080808;
--highlight-error: #880000;
--highlight-error-light: #aa0000;
--highlight-bg-transparent: #0c0c0caf;
--main-font: #00aa00;
--accent-font-dark: #007700;
--accent-font-light: #00aa00;
--img-filter: brightness(0) saturate(100%) invert(45%) sepia(100%) saturate(3710%)
hue-rotate(96deg) brightness(100%) contrast(102%);
--img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
contrast(120%);
--banner: url('/img/banner-tube-archivist-dark.png');
--logo: url('/img/logo-tube-archivist-dark.png');
--outline: 1px solid green;
--filter: hue-rotate(310deg);
}
.settings-group {
outline: var(--outline);
}
.info-box-item {
outline: var(--outline);
}
.footer {
outline: var(--outline);
}
.top-banner img {
filter: var(--filter);
}
.icon-text {
outline: var(--outline);
}
.video-item {
outline: var(--outline);
}
.channel-banner {
outline: var(--outline);
}
.description-box {
outline: var(--outline);
}
.video-player {
outline: var(--outline);
}
#notification {
outline: var(--outline);
}
textarea {
background-color: var(--highlight-bg);
outline: var(--outline);
color: var(--main-font);
}
input {
background-color: var(--highlight-bg);
color: var(--main-font);
}

16
frontend/src/configuration/colours/components/css/midnight.css
View File

@@ -1,16 +0,0 @@
:root {
--main-bg: #000000;
--highlight-bg: #0c0c0c;
--highlight-error: #220000;
--highlight-error-light: #330000;
--highlight-bg-transparent: #0c0c0caf;
--main-font: #888888;
--accent-font-dark: #555555;
--accent-font-light: #999999;
--img-filter: invert(50%) sepia(9%) saturate(2940%) hue-rotate(122deg) brightness(94%)
contrast(90%);
--img-filter-error: invert(16%) sepia(60%) saturate(3717%) hue-rotate(349deg) brightness(86%)
contrast(120%);
--banner: url('/img/banner-tube-archivist-dark.png');
--logo: url('/img/logo-tube-archivist-dark.png');
}

32
frontend/src/configuration/colours/useColours.ts
View File

@@ -1,32 +0,0 @@
import { useUserConfigStore } from '../../stores/UserConfigStore';
export const ColourConstant = {
Dark: 'dark.css',
Light: 'light.css',
Matrix: 'matrix.css',
Midnight: 'midnight.css',
};
const useColours = () => {
const { userConfig } = useUserConfigStore();
const stylesheet = userConfig?.stylesheet;
switch (stylesheet) {
case ColourConstant.Dark:
return import('./components/Dark');
case ColourConstant.Matrix:
return import('./components/Matrix');
case ColourConstant.Midnight:
return import('./components/Midnight');
case ColourConstant.Light:
return import('./components/Light');
default:
return import('./components/Dark');
}
};
export default useColours;