From 3188cdf6b72f7ae4de092429112cf1dbb8b6409d Mon Sep 17 00:00:00 2001
From: salixor <salixor@pm.me>
Date: Thu, 18 Jul 2024 14:36:44 +0200
Subject: [PATCH] tmp commit (i dont have time)
---
scripts.js | 1 -
styles.css | 94 +++++++++++++++++++++++++-----------------------------
2 files changed, 43 insertions(+), 52 deletions(-)
diff --git a/scripts.js b/scripts.js
index 3027367..c3c0669 100644
--- a/scripts.js
+++ b/scripts.js
@@ -6,7 +6,6 @@ $(document).ready(function() {
// Changement aléatoire de la couleur
$("header").css("background-color", color[col_rd]);
$("section.container a").css("background-color", color[col_rd]);
- // $("hr").css("border-color", color[col_rd]);
$("section.container a").hover(function(){
$(this).css("background-color", hexToRgbA(color[col_rd], 0.8));
}, function(){
diff --git a/styles.css b/styles.css
index 38ff8c4..e887fa7 100644
--- a/styles.css
+++ b/styles.css
@@ -8,13 +8,42 @@
}
:root {
- --accent-color: #444;
+ --accent-color: #444444;
+ --text-color: #333333;
+ --background-color: #ededed;
+ --border-color: #e4e4e4;
+ --light-border-color: #eeeeee;
+ --color1: #EF476F;
+ --color2: #F2951D;
+ --color3: #8E91D1;
+ --color4: #6D9C42;
+ --color5: #2A6EF7;
+ --color6: #D5D872;
}
-.clear { clear: both; }
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text-color: #ffffff;
+ --background-color: #222222;
+ --border-color: #555555;
+ --light-border-color: #444444;
+ --color1: #ef6989;
+ --color2: #f2a541;
+ --color3: #a4a6dd;
+ --color4: #8ab761;
+ --color5: #3f7bf4;
+ --color6: #e2e587;
+ }
+
+ a { color: #ccc; }
+ a:hover { color: #999; }
+ a:active { color: #bbb; }
+
+ ul.files-list li div { background: #EEEEEE; color: #222222; }
+}
html, body {
- background-color: #ededed;
+ background-color: var(--background-color);
color: #333333;
font-family: 'Nunito', sans-serif;
display: flex;
@@ -26,12 +55,10 @@ body > * {
flex-shrink: 0;
}
-hr { border: 0; border-bottom: 1px dotted #DDDDDD; margin: 10px 0px; }
-
div.container {
margin: 0;
box-shadow: 0 0 25px 0px rgba(0,0,0,0.15);
- background-color: #ffffff;
+ background-color: var(--text-color);
width: 100%;
position: relative;
}
@@ -139,7 +166,6 @@ header div.nickname { font-size: 42px; margin-top: 30px; font-weight: bold; }
header div.description { font-size: 14px; margin-top: -5px; }
@media only screen and (min-width: 1220px) {
- hr { margin: 15px 0; }
div.container { margin: 75px auto 0 !important; }
.container .row { line-height: normal; margin: 10px; }
section.container a, .container h3 { font-size: 16px; height: 46px; line-height: 46px; }
@@ -172,7 +198,7 @@ section.content {
background-color: #eee;
}
-section.content a { color: var(--accent-color); }
+section.content a { color: var(--text-color); }
section.content a:hover { color: var(--accent-color); opacity: 0.5; }
section.cours a {
@@ -224,7 +250,7 @@ html.dark button.theme_toggle:hover { color: orange; border-color: orange; }
ul.files-list {
position: relative;
left: 170px;
- border-left: solid 4px #e4e4e4;
+ border-left: solid 4px var(--border-color);
padding: 0 0 0 25px;
width: calc(100% - 170px);
}
@@ -234,7 +260,7 @@ ul.files-list li {
margin: 0 0 12px 0;
font-weight: bold;
padding: 0 0 12px 0;
- border-bottom: 1px dashed #EEEEEE;
+ border-bottom: 1px dashed var(--light-border-color);
}
ul.files-list li:last-child { border-bottom: none; margin: 0; }
@@ -247,7 +273,7 @@ ul.files-list li::after {
box-shadow: 0 0 0 6px;
content: "•";
vertical-align: middle;
- color: #ffffff;
+ color: var(--text-color);
border-radius: 3px;
width: 15px;
height: 15px;
@@ -256,12 +282,12 @@ ul.files-list li::after {
text-align: center;
}
-ul.files-list li.color1::after { background: #EF476F; }
-ul.files-list li.color2::after { background: #F2951D; }
-ul.files-list li.color3::after { background: #8E91D1; }
-ul.files-list li.color4::after { background: #6D9C42; }
-ul.files-list li.color5::after { background: #2A6EF7; }
-ul.files-list li.color6::after { background: #D5D872; }
+ul.files-list li.color1::after { background: var(--color1); }
+ul.files-list li.color2::after { background: var(--color2); }
+ul.files-list li.color3::after { background: var(--color3); }
+ul.files-list li.color4::after { background: var(--color4); }
+ul.files-list li.color5::after { background: var(--color5); }
+ul.files-list li.color6::after { background: var(--color6); }
ul.files-list li div {
position: absolute;
@@ -280,37 +306,3 @@ ul.files-list li div {
color: #EEEEEE;
padding: 0 10px;
}
-
-/* Turn off the lights ... */
-
-html.dark, html.dark body {
- background-color: #222222;
- color: #ffffff;
-}
-
-html.dark a { color: #ccc; }
-html.dark a:hover { color: #999; }
-html.dark a:active { color: #bbb; }
-
-html.dark div.container { background-color: #333333; }
-
-html.dark div.section { border-bottom-color: #444444; }
-html.dark div.section h2 { color: #ee6770; }
-
-html.dark hr { border-bottom-color: #444444; }
-html.dark section.container a { color: #FFFFFF; }
-
-html.dark ul.files-list { border-left-color: #555555; }
-html.dark ul.files-list li { border-bottom-color: #444444; }
-html.dark ul.files-list li::after { color: #333333; }
-html.dark ul.files-list li div { background: #EEEEEE; color: #222222; }
-
-html.dark ul.files-list li.color1::after { background: #ef6989; }
-html.dark ul.files-list li.color2::after { background: #f2a541; }
-html.dark ul.files-list li.color3::after { background: #a4a6dd; }
-html.dark ul.files-list li.color4::after { background: #8ab761; }
-html.dark ul.files-list li.color5::after { background: #3f7bf4; }
-html.dark ul.files-list li.color6::after { background: #e2e587; }
-
-html.dark section.header_links a { color: #FFFFFF !important; }
-html.dark section.content { background: #444444; color: #FFFFFF !important; }
--
GitLab