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

2
public/index.html
View file

@ -82,7 +82,7 @@
box-sizing: border-box;
overflow: hidden;
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>

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

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

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

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

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

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

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

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

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

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

57
src/styles/GlobalStyle.js
View file

@ -5,18 +5,22 @@ import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
:root {
/* Colors */
--lavender: #d9d9f9;
--lavenderlight: #f0f3ff;
--lightblue: #2b2bde;
--link: #0019f6;
--nav: #fff;
--cardbg: #151515;
--Styledlinks: #394ae4;
--lavender: #484870;
--lavenderlight: #1a1a2e;
--lightblue: #738aff;
--link: #738aff;
--nav: #1a1a2a;
--cardbg: #121212;
--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;
--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 */
--regular: 400;
@ -35,11 +39,11 @@ export const GlobalStyle = createGlobalStyle`
overflow: hidden;
max-height: 100vh;
width: 100%;
color: #fff;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
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;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
@ -68,10 +72,13 @@ export const GlobalStyle = createGlobalStyle`
cursor: pointer;
outline: none;
display: inline;
color: var(--text-color);
background-color: var(--lavender);
}
div,
p {
outline: none;
color: var(--text-color);
}
a {
text-decoration: none;
@ -83,8 +90,34 @@ export const GlobalStyle = createGlobalStyle`
display: inline-block;
}
li {
/* display: inline-block; */
list-style: none;
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);
}
`;