ajout du bouton de switch + quelque reglage des input
This commit is contained in:
parent
af6feaf913
commit
57b2e432e2
10 changed files with 48 additions and 11 deletions
|
|
@ -138,3 +138,5 @@ button.less::after {
|
|||
width: 100%;
|
||||
margin-top: calc(var(--unit--vertical) / 2);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -79,14 +79,16 @@
|
|||
padding: calc(var(--unit--vertical) / 4) 0;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-background);
|
||||
color: var(--color-background);
|
||||
color: var(--color-primary);
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: var(--font-weight-light);
|
||||
|
||||
caret-color: var(--color-primary);
|
||||
}
|
||||
.search__input::placeholder {
|
||||
color: var(--color-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.55;
|
||||
}
|
||||
.search__icon {
|
||||
|
|
|
|||
|
|
@ -11,18 +11,24 @@
|
|||
#subscribe-form input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--color-background);
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0.3rem;
|
||||
padding-right: 2rem;
|
||||
color: var(--color-background);
|
||||
width: 15rem;
|
||||
|
||||
border-bottom: 1px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
caret-color: var(--color-primary);
|
||||
}
|
||||
#subscribe-form input::placeholder {
|
||||
color: var(--color-primary);
|
||||
opacity: 0.55;
|
||||
}
|
||||
#subscribe-form input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
#subscribe-form button[type="submit"] {
|
||||
color: var(--color-background);
|
||||
color: var(--color-primary);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
20
assets/css/src/toggle-light-mode.css
Normal file
20
assets/css/src/toggle-light-mode.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.theme-toggler{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: var(--unit--vertical) var(--unit--horizontal);
|
||||
}
|
||||
.theme-toggler > *{
|
||||
}
|
||||
.theme-toggler-icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
|
||||
background-color: var(--color-primary);
|
||||
|
||||
mask-size: cover;
|
||||
-webkit-mask-size: cover;
|
||||
|
||||
mask: var(--icon-theme-toggler) no-repeat center;
|
||||
-webkit-mask: var(--icon-theme-toggler) no-repeat center;
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
@import url("src/newsletter.css");
|
||||
@import url("src/footer.css");
|
||||
@import url("src/print.css");
|
||||
@import url("src/toggle-light-mode.css");
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
3
assets/images/icons/circle-half.svg
Normal file
3
assets/images/icons/circle-half.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
|
||||
<path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 181 B |
|
|
@ -6,20 +6,22 @@
|
|||
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");
|
||||
|
||||
// const theme = "dark";
|
||||
|
||||
root.setAttribute("data-theme", theme);
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const togglers = document.querySelectorAll("[data-theme-toggler]");
|
||||
const togglers = document.querySelectorAll(".theme-toggler");
|
||||
togglers.forEach((toggler) => {
|
||||
toggler.addEventListener("click", toggleDarkMode);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
|
||||
<?php if (!$page->is(page('lettre')) && !$page->is(page('a-propos'))): ?>
|
||||
<footer id="main-footer">
|
||||
<button data-theme-toggler>Changer de mode</button>
|
||||
<ul id="links">
|
||||
<li class="open-nav-wrapper hidden">
|
||||
<button class="plus open-nav" title="chercher parmi les textes">textes</button>
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ $entryTopPos ??= 20;
|
|||
:root {
|
||||
--icon-search: url("<?= url('assets/images/icons/search.svg') ?>");
|
||||
--icon-close: url("<?= url('assets/images/icons/close.svg') ?>");
|
||||
--icon-theme-toggler: url("<?= url('assets/images/icons/circle-half.svg') ?>");
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -84,6 +85,9 @@ $entryTopPos ??= 20;
|
|||
<body
|
||||
class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>"
|
||||
data-template="<?= $page->template() ?>">
|
||||
<button class="theme-toggler" data-theme-toggler>
|
||||
<span class="theme-toggler-icon"></span>
|
||||
</button>
|
||||
<header id="main-header">
|
||||
<a id="logo"
|
||||
href="<?= e($page->isHomePage(), '#main-edito', $site->url()) ?>"
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@
|
|||
</p>
|
||||
<div class="search">
|
||||
<input class="search__input" type="text" placeholder="Chercher" x-model="search">
|
||||
<img x-show="search.length === 0"
|
||||
src="<?= url('assets/images/icons/search.svg') ?>"
|
||||
class="search__icon" alt="Icône loupe indiquant le champ de recherche.">
|
||||
<div class="search__icon"></div>
|
||||
<button x-show="search.length > 0" @click="search = ''" class="search__icon">
|
||||
<img
|
||||
src="<?= url('assets/images/icons/close.svg') ?>"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue