adrien-payet/actuel-inactuel
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Packages Wiki Activity Actions

début implémentation light-mode avec son script : remplacement de tout les valeur de couleur par varriable corespondante, text-shadow autour de du logo pour le contour, changement de fonctionnement pour que svg puisse changer de couleur

Browse source
This commit is contained in:
antonin gallon 2025-11-20 17:31:26 +01:00
parent 8f9e75126e
commit 0585421854
56 changed files with 492 additions and 6978 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/css/panel.css
View file

@ -1,12 +1,12 @@
.k-panel-menu {
background-color: #000;
background-color: var(--color-primary);
}
.k-panel-menu * {
color: #fff;
color: var(--color-background);
}
.k-panel-menu-button[aria-current] * {
color: #000;
color: var(--color-primary);
}
.k-panel[data-template="year"] .k-list-items .k-item:first-child {
@ -20,6 +20,6 @@
border-radius: var(--rounded-md) var(--rounded-md) 0 0;
transform: translateY(0.3rem);
background-color: #000;
color: #fff;
background-color: var(--color-primary);
color: var(--color-background);
}

2
assets/css/src/article.css
View file

@ -24,7 +24,7 @@ article #main-content #chapo::after {
width: 100%;
height: 1px;
background-color: #fff;
background-color: var(--color-background);
}
article #main-content li:not(.text) {

4
assets/css/src/footer.css
View file

@ -32,9 +32,9 @@
justify-content: center;
width: 100%;
outline: none;
border-top: 1px solid #fff;
border-top: 1px solid var(--color-background);
font-size: var(--font-size-m);
background-color: #000;
background-color: var(--color-primary);
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
margin-bottom: env(safe-area-inset-bottom);
}

13
assets/css/src/header.css
View file

@ -44,6 +44,16 @@ main article > div {
#logo #actuel {
font-weight: 550;
}
[data-theme="light"] #logo #actuel {
font-weight: 550;
color: white;
/*diag*/
/* text-shadow: -1px -1px var(--color-primary), 1px 1px var(--color-primary); */
/*difus*/
/* text-shadow: -2px 0 5px var(--color-primary), 2px 0 5px var(--color-primary); */
/*partout*/
text-shadow: -1px 0 var(--color-primary), 1px 0 var(--color-primary), 0 -1px var(--color-primary),0 1px var(--color-primary);
}
#logo #actuel,
#logo #inactuel {
@ -53,6 +63,9 @@ main article > div {
#logo #inactuel {
transition: margin-top 0.3s ease-in-out, transform 0.3s ease-in-out;
}
[data-theme="light"] #logo #inactuel {
mix-blend-mode: difference;
}
#main-header.minimized #inactuel {
margin-top: -20vw;

4
assets/css/src/html.css
View file

@ -39,7 +39,7 @@ html {
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255) transparent;
scrollbar-color: var(--color-primary) transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -54,7 +54,7 @@ html {
}
*::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255);
background-color: var(--color-primary);
border-radius: 0px;
border: none;
}

39
assets/css/src/nav.css
View file

@ -1,7 +1,7 @@
#nav-overlay {
position: fixed;
inset: 0;
background-color: #000;
background-color: var(--color-background);
opacity: 0.7;
z-index: 2;
cursor: w-resize;
@ -16,9 +16,9 @@
overflow: auto;
width: 100vw;
height: 100dvh;
top: 0;
background-color: #000;
outline: 1px solid #fff;
top: 0;
background-color: var(--color-background);
outline: 1px solid var(--color-primary);
transition: all 0.5s var(--curve-sine);
z-index: 3;
box-sizing: border-box;
@ -34,7 +34,7 @@
position: sticky;
top: 0;
z-index: 1;
background-color: #000;
background-color: var(--color-background);
padding: var(--unit--vertical) var(--unit--horizontal);
padding-bottom: 0;
}
@ -64,10 +64,13 @@
position: relative;
width: 100%;
margin-top: var(--unit--vertical);
background-color: #000;
background-color: var(--color-background);
z-index: 1;
top: 0;
box-sizing: border-box;
border-bottom: 1px solid var(--color-primary);
display: flex;
align-items: center;
}
.search__input {
all: unset;
@ -75,23 +78,31 @@
background-color: transparent;
padding: calc(var(--unit--vertical) / 4) 0;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
border-bottom: 1px solid var(--color-background);
color: var(--color-background);
font-size: var(--font-size-m);
font-weight: var(--font-weight-light);
}
.search__input::placeholder {
font-size: var(--font-size-sm);
letter-spacing: 1px;
color: var(--color-primary);
opacity: 0.55;
}
.search__icon {
all: unset;
position: absolute;
width: 1.2rem;
height: 1.2rem;
width: 0.2rem;
height: 0.2rem;
padding: 0.5rem;
right: 0;
transform: translateX(0.5rem) translateY(0.2rem);
/* transform: translateY(0.2rem); */
background-color: var(--color-primary);
mask: var(--icon-search) no-repeat center;
mask-size: contain;
-webkit-mask: var(--icon-search) no-repeat center;
-webkit-mask-size: contain;
}
button.search__icon {
cursor: pointer;
@ -114,9 +125,9 @@ footer {
justify-content: center;
width: 100%;
outline: none;
border-top: 1px solid #fff;
border-top: 1px solid var(--color-background);
font-size: var(--font-size-m);
background-color: #000;
background-color: var(--color-primary);
padding: calc(var(--unit--vertical) / 2) var(--unit--horizontal);
margin-bottom: env(safe-area-inset-bottom);
}
@ -180,7 +191,7 @@ button.see-more {
top: 0;
height: 100%;
width: 1px;
background-color: #fff;
background-color: var(--color-background);
}
@media screen and (min-width: 640px) {

6
assets/css/src/newsletter.css
View file

@ -11,18 +11,18 @@
#subscribe-form input {
background-color: transparent;
border: none;
border-bottom: 1px solid #fff;
border-bottom: 1px solid var(--color-background);
box-sizing: border-box;
padding-bottom: 0.3rem;
padding-right: 2rem;
color: #fff;
color: var(--color-background);
width: 15rem;
}
#subscribe-form input:focus-visible {
outline: none;
}
#subscribe-form button[type="submit"] {
color: #fff;
color: var(--color-background);
position: absolute;
top: 0;
right: 0;

4
assets/css/src/print.css
View file

@ -27,7 +27,7 @@
body {
padding-top: 4rem;
color: #000;
color: var(--color-primary);
}
.panel {
@ -44,7 +44,7 @@
}
#logo #actuel {
color: #000;
color: var(--color-primary);
opacity: 0.8;
}

4
assets/css/src/tabs.css
View file

@ -56,7 +56,7 @@ button.toggle.right.open::before {
.active-tab {
scrollbar-width: thin;
scrollbar-color: #fff transparent;
scrollbar-color: var(--color-background) transparent;
}
/* Works on Chrome, Edge, and Safari */
@ -71,7 +71,7 @@ button.toggle.right.open::before {
}
.active-tab::-webkit-scrollbar-thumb {
background-color: #fff;
background-color: var(--color-background);
border-radius: 1px;
border: none;
}

19
assets/css/style.css
View file

@ -11,9 +11,11 @@
@import url("src/newsletter.css");
@import url("src/footer.css");
@import url("src/print.css");
:root {
--color-background: #000;
--color-primary: #ffffff;
--color-primary--transparent: rgba(255, 255, 255, 0.86);
/* --color-secondary-rgb: 120, 171, 150;
@ -56,6 +58,19 @@
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
[data-theme="dark"] {
--color-background: #000;
--color-primary: #ffffff;
}
[data-theme="light"] {
--color-background: #ffffff;
--color-primary: #000;
--color-secondary-rgb: 140, 140, 140;
/* --color-secondary--light: rgba(var(--color-secondary-rgb), 0.4);
--color-secondary--x-light: rgb(var(--color-secondary-rgb), 0.25); */
}
@media screen and (min-width: 640px) {
:root {
--unit--horizontal: 2.5vw;

32
assets/front-comments/style.css
View file

@ -1,5 +1,5 @@
:root {
--fc-border: 2px solid #000;
--fc-border: 2px solid var(--color-primary);
--fc-border-light: 1px solid #999;
--fc-font-size-m: 1.2rem;
--fc-font-size-s: calc(var(--fc-font-size-m) / 1.3);
@ -91,7 +91,7 @@
.fc__edition-panel textarea {
position: relative !important;
resize: none !important;
color: #000 !important;
color: var(--color-primary) !important;
font-family: sans-serif !important;
font-weight: 100 !important;
@ -108,14 +108,14 @@
.fc__edition-panel__btns {
display: flex;
background-color: #fff;
background-color: var(--color-background);
margin-top: 0.5rem;
}
.fc__edition-panel__btns button {
all: initial;
color: #000;
color: var(--color-primary);
font-family: sans-serif;
font-weight: 100;
text-align: center;
@ -124,7 +124,7 @@
width: 100%;
padding: 0.5rem;
border: var(--fc-border) !important;
background-color: #fff;
background-color: var(--color-background);
cursor: pointer;
}
.fc__edition-panel__btns button:first-child {
@ -145,7 +145,7 @@
height: 2.9rem;
scroll-margin-top: 6rem;
color: #000;
color: var(--color-primary);
font-family: sans-serif;
font-size: var(--fc-font-size-m);
font-weight: 500;
@ -162,12 +162,12 @@
width: 20rem;
padding: 1rem;
background-color: #fff;
background-color: var(--color-background);
border: var(--fc-border) !important;
}
.fc__comment * {
color: #000 !important;
color: var(--color-primary) !important;
font-family: sans-serif !important;
font-weight: 100 !important;
}
@ -248,20 +248,20 @@
.fc__context-item:not(:last-child) {
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px dotted #000;
border-bottom: 1px dotted var(--color-primary);
}
.fc__open-window {
background-color: transparent;
border: 1px solid #000;
border: 1px solid var(--color-primary);
border-radius: 0;
cursor: pointer;
margin-left: 1rem;
}
.fc__open-window:hover {
background-color: #000;
color: #fff !important;
background-color: var(--color-primary);
color: var(--color-background) !important;
}
/* ================= END CONTEXT ================= */
@ -281,8 +281,8 @@
border: var(--fc-border);
}
.fc__suggestion:hover {
color: #fff;
background-color: #000;
color: var(--color-background);
background-color: var(--color-primary);
}
.fc__suggestion--edit {
background-color: rgba(0, 0, 0, 0.1) !important;
@ -292,8 +292,8 @@
position: absolute;
z-index: 999;
width: 20vw;
background-color: #fff;
color: #000;
background-color: var(--color-background);
color: var(--color-primary);
border: var(--fc-border);
padding: 1rem;
left: -0.1rem;

27
assets/js/light-mode.js Normal file
View file

@ -0,0 +1,27 @@
(function () {
const root = document.documentElement;
function toggleDarkMode() {
const currentTheme = root.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
root.setAttribute("data-theme", newTheme);
localStorage.setItem("theme", newTheme);
console.log("tets");
}
function init() {
const storedPreference = localStorage.getItem("theme");
const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
root.setAttribute("data-theme", theme);
}
init();
document.addEventListener("DOMContentLoaded", function () {
const togglers = document.querySelectorAll("[data-theme-toggler]");
togglers.forEach((toggler) => {
toggler.addEventListener("click", toggleDarkMode);
});
});
})();