Kizuren/SauceKudasai
1
0
Fork 0
mirror of https://github.com/Kizuren/SauceKudasai.git synced 2025-12-21 21:16:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updated styles to use the dark theme

Browse source
This commit is contained in:
MarcUs7i 2025-04-24 08:51:40 +02:00
parent 8bfeef9090
commit 8a035550e6
7 changed files with 54 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -1,4 +1,4 @@
<!-- @format --> <!-- @format -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
@ -82,7 +82,7 @@
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
max-height: 100vh; max-height: 100vh;
background: linear-gradient(116.2deg, #d9e5fa -0.48%, #fad9f3 102.36%); background: linear-gradient(116.2deg, #121420 -0.48%, #1e1a2c 102.36%);
} }
</style> </style>

5
src/Components/Fileupload/Fileuploadstyle.js
View file

@ -4,15 +4,14 @@ import styled from 'styled-components';
import { respondTo } from '../../styles/mixins'; import { respondTo } from '../../styles/mixins';
export const Container = styled.div` export const Container = styled.div`
background: var(--primary); background: var(--container-bg);
width: 88%; width: 88%;
height: 310px; height: 310px;
padding: 1.3rem; padding: 1.3rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin: 1.5em auto; margin: 1.5em auto;
text-align: center; text-align: center;
background: #ffffff; box-shadow: var(--box-shadow);
box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.25), inset 0px 1px 5px rgba(0, 0, 0, 0.25);
border-radius: 30px; border-radius: 30px;
& p { & p {

2
src/Components/Footer/Footertext.js
View file

@ -10,7 +10,7 @@ const Footer = styled.footer`
position: absolute; position: absolute;
bottom: 0.5rem; bottom: 0.5rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #000; color: var(--text-color);
font-weight: var(--semi-bold); font-weight: var(--semi-bold);
a { a {

4
src/Components/Navbar/index.js
View file

@ -36,7 +36,7 @@ const Navbar = styled.nav`
const Title = styled.h1` const Title = styled.h1`
font-size: 1rem; font-size: 1rem;
font-weight: var(--medium); font-weight: var(--medium);
color: #000; color: var(--text-color);
${respondTo.lg` ${respondTo.lg`
font-size: 1.2rem; font-size: 1.2rem;
@ -53,7 +53,7 @@ const index = () => {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
aria-label="Github link"> aria-label="Github link">
<IconContext.Provider value={{ size: '1.4rem', color: '#000000' }}> <IconContext.Provider value={{ size: '1.4rem', color: '#e0e0e0' }}>
<BsGithub /> <BsGithub />
</IconContext.Provider> </IconContext.Provider>
</a> </a>

2
src/Components/Ui/Searchbtn.js
View file

@ -10,7 +10,7 @@ const Search = styled.button`
background: var(--lavender); background: var(--lavender);
font-family: inherit; font-family: inherit;
font-weight: var(--semi-medium); font-weight: var(--semi-medium);
color: #000; color: var(--text-color);
border-radius: calc(var(--radius) * 2); border-radius: calc(var(--radius) * 2);
margin-top: 0.5rem; margin-top: 0.5rem;
letter-spacing: 0; letter-spacing: 0;

2
src/Components/Ui/Urlinput.js
View file

@ -33,7 +33,7 @@ const Url = styled(motion.input)`
padding: 0rem 2.5rem; padding: 0rem 2.5rem;
height: 40px; height: 40px;
font-family: inherit; font-family: inherit;
color: #000; color: var(--text-color);
border-radius: calc(var(--radius) * 2); border-radius: calc(var(--radius) * 2);
font-size: 1rem; font-size: 1rem;
&::placeholder { &::placeholder {

57
src/styles/GlobalStyle.js
View file

@ -5,18 +5,22 @@ import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle` export const GlobalStyle = createGlobalStyle`
:root { :root {
/* Colors */ /* Colors */
--lavender: #d9d9f9; --lavender: #484870;
--lavenderlight: #f0f3ff; --lavenderlight: #1a1a2e;
--lightblue: #2b2bde; --lightblue: #738aff;
--link: #0019f6; --link: #738aff;
--nav: #fff; --nav: #1a1a2a;
--cardbg: #151515; --cardbg: #121212;
--Styledlinks: #394ae4; --Styledlinks: #738aff;
--text-color: #e0e0e0;
--container-bg: #1f1f2c;
--drop-container-bg: #1a1a2e;
--search-container-bg: #1a1a2a;
--border: 1.5px solid #fff; --border: 1.5px solid #2a2a3a;
--radius: 0.9rem; --radius: 0.9rem;
--card-radius: 15px 15px 0px 0px; --card-radius: 15px 15px 0px 0px;
--box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.25), inset 0px 1px 5px rgba(0, 0, 0, 0.25); --box-shadow: 0px 5px 29px -4px rgba(0, 0, 0, 0.5), inset 0px 1px 5px rgba(0, 0, 0, 0.5);
/* Font Weights */ /* Font Weights */
--regular: 400; --regular: 400;
@ -35,11 +39,11 @@ export const GlobalStyle = createGlobalStyle`
overflow: hidden; overflow: hidden;
max-height: 100vh; max-height: 100vh;
width: 100%; width: 100%;
color: #fff; color: var(--text-color);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
background: linear-gradient(116.2deg, #d9e5fa -0.48%, #fad9f3 102.36%); background: linear-gradient(116.2deg, #121420 -0.48%, #1e1a2c 102.36%);
text-size-adjust: none; text-size-adjust: none;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
-moz-text-size-adjust: none; -moz-text-size-adjust: none;
@ -68,10 +72,13 @@ export const GlobalStyle = createGlobalStyle`
cursor: pointer; cursor: pointer;
outline: none; outline: none;
display: inline; display: inline;
color: var(--text-color);
background-color: var(--lavender);
} }
div, div,
p { p {
outline: none; outline: none;
color: var(--text-color);
} }
a { a {
text-decoration: none; text-decoration: none;
@ -83,8 +90,34 @@ export const GlobalStyle = createGlobalStyle`
display: inline-block; display: inline-block;
} }
li { li {
/* display: inline-block; */
list-style: none; list-style: none;
display: inline-block; display: inline-block;
} }
/* Override styles for specific components */
.Container {
background: var(--container-bg);
box-shadow: var(--box-shadow);
}
.Dropcontainer {
background: var(--drop-container-bg);
}
.Search, .Button, .Url {
background: var(--lavender);
color: var(--text-color);
}
.Navbar {
background: var(--nav);
}
.Title {
color: var(--text-color);
}
.Footer {
color: var(--text-color);
}
`; `;