fix(style): fix wcag

This commit is contained in:
Romain J 2021-08-02 17:32:41 +02:00
parent 02036a02dd
commit 06a7b8788b
14 changed files with 1030 additions and 761 deletions

View file

@ -1,10 +1,12 @@
@import url(uikit/uikit.min.css);
html[data-theme="dark"] .uk-offcanvas .uk-nav > li > a.active {
color: #16171a; }
html[data-theme="dark"] .uk-logo img {
@import "uikit/uikit.css";
html[data-theme=dark] .uk-offcanvas .uk-nav > li > a.active {
color: #16171a;
}
html[data-theme=dark] .uk-logo img {
height: 38px;
border-radius: 50%; }
html[data-theme="dark"] .uk-button, html[data-theme="dark"] .uk-input {
border-radius: 50%;
}
html[data-theme=dark] .uk-button, html[data-theme=dark] .uk-input {
border: none;
color: #e6e6e8;
text-transform: none;
@ -12,126 +14,182 @@ html[data-theme="dark"] .uk-button, html[data-theme="dark"] .uk-input {
text-decoration: none;
background-color: #16171a;
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
font-weight: bolder; }
html[data-theme="dark"] .uk-button-link {
font-weight: bolder;
}
html[data-theme=dark] .uk-button-link {
color: white;
font-weight: bolder;
text-decoration: underline; }
html[data-theme="dark"] .uk-card {
text-decoration: underline;
}
html[data-theme=dark] .uk-card {
border-radius: 5px;
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .uk-card .uk-card-header {
border-bottom: 1px solid black; }
html[data-theme="dark"] .uk-card .uk-card-footer {
border-top: 1px solid black; }
html[data-theme="dark"] .uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
html[data-theme="dark"] .uk-card-secondary {
background: #23272A; }
html[data-theme="dark"] .uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .uk-h1, html[data-theme="dark"] h1 {
color: #cccccc; }
html[data-theme="dark"] .uk-h2, html[data-theme="dark"] h2 {
color: #cccccc; }
html[data-theme="dark"] .uk-h3, html[data-theme="dark"] h3 {
color: #cccccc; }
html[data-theme="dark"] .uk-h4, html[data-theme="dark"] h4 {
color: #cccccc; }
html[data-theme="dark"] .uk-h5, html[data-theme="dark"] h5 {
color: #cccccc; }
html[data-theme="dark"] .uk-h6, html[data-theme="dark"] h6 {
color: #cccccc; }
html[data-theme="dark"] .min-height-10vh {
min-height: 10vh; }
html[data-theme="dark"] .max-height-10vh {
max-height: 10vh; }
html[data-theme="dark"] .min-width-10vw {
max-width: 10vw; }
html[data-theme="dark"] .max-width-10vw {
max-width: 10vw; }
html[data-theme="dark"] .min-height-20vh {
min-height: 20vh; }
html[data-theme="dark"] .max-height-20vh {
max-height: 20vh; }
html[data-theme="dark"] .min-width-20vw {
max-width: 20vw; }
html[data-theme="dark"] .max-width-20vw {
max-width: 20vw; }
html[data-theme="dark"] .min-height-30vh {
min-height: 30vh; }
html[data-theme="dark"] .max-height-30vh {
max-height: 30vh; }
html[data-theme="dark"] .min-width-30vw {
max-width: 30vw; }
html[data-theme="dark"] .max-width-30vw {
max-width: 30vw; }
html[data-theme="dark"] .min-height-40vh {
min-height: 40vh; }
html[data-theme="dark"] .max-height-40vh {
max-height: 40vh; }
html[data-theme="dark"] .min-width-40vw {
max-width: 40vw; }
html[data-theme="dark"] .max-width-40vw {
max-width: 40vw; }
html[data-theme="dark"] .min-height-50vh {
min-height: 50vh; }
html[data-theme="dark"] .max-height-50vh {
max-height: 50vh; }
html[data-theme="dark"] .min-width-50vw {
max-width: 50vw; }
html[data-theme="dark"] .max-width-50vw {
max-width: 50vw; }
html[data-theme="dark"] .min-height-60vh {
min-height: 60vh; }
html[data-theme="dark"] .max-height-60vh {
max-height: 60vh; }
html[data-theme="dark"] .min-width-60vw {
max-width: 60vw; }
html[data-theme="dark"] .max-width-60vw {
max-width: 60vw; }
html[data-theme="dark"] .min-height-70vh {
min-height: 70vh; }
html[data-theme="dark"] .max-height-70vh {
max-height: 70vh; }
html[data-theme="dark"] .min-width-70vw {
max-width: 70vw; }
html[data-theme="dark"] .max-width-70vw {
max-width: 70vw; }
html[data-theme="dark"] .min-height-80vh {
min-height: 80vh; }
html[data-theme="dark"] .max-height-80vh {
max-height: 80vh; }
html[data-theme="dark"] .min-width-80vw {
max-width: 80vw; }
html[data-theme="dark"] .max-width-80vw {
max-width: 80vw; }
html[data-theme="dark"] .min-height-90vh {
min-height: 90vh; }
html[data-theme="dark"] .max-height-90vh {
max-height: 90vh; }
html[data-theme="dark"] .min-width-90vw {
max-width: 90vw; }
html[data-theme="dark"] .max-width-90vw {
max-width: 90vw; }
html[data-theme="dark"] .min-height-100vh {
min-height: 100vh; }
html[data-theme="dark"] .max-height-100vh {
max-height: 100vh; }
html[data-theme="dark"] .min-width-100vw {
max-width: 100vw; }
html[data-theme="dark"] .max-width-100vw {
max-width: 100vw; }
html[data-theme="dark"] .uk-switch {
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
}
html[data-theme=dark] .uk-card .uk-card-header {
border-bottom: 1px solid black;
}
html[data-theme=dark] .uk-card .uk-card-footer {
border-top: 1px solid black;
}
html[data-theme=dark] .uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
html[data-theme=dark] .uk-card-secondary {
background: #23272A;
}
html[data-theme=dark] .uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
}
html[data-theme=dark] .uk-h1, html[data-theme=dark] h1 {
color: #cccccc;
}
html[data-theme=dark] .uk-h2, html[data-theme=dark] h2 {
color: #cccccc;
}
html[data-theme=dark] .uk-h3, html[data-theme=dark] h3 {
color: #cccccc;
}
html[data-theme=dark] .uk-h4, html[data-theme=dark] h4 {
color: #cccccc;
}
html[data-theme=dark] .uk-h5, html[data-theme=dark] h5 {
color: #cccccc;
}
html[data-theme=dark] .uk-h6, html[data-theme=dark] h6 {
color: #cccccc;
}
html[data-theme=dark] .min-height-10vh {
min-height: 10vh;
}
html[data-theme=dark] .max-height-10vh {
max-height: 10vh;
}
html[data-theme=dark] .min-width-10vw {
max-width: 10vw;
}
html[data-theme=dark] .max-width-10vw {
max-width: 10vw;
}
html[data-theme=dark] .min-height-20vh {
min-height: 20vh;
}
html[data-theme=dark] .max-height-20vh {
max-height: 20vh;
}
html[data-theme=dark] .min-width-20vw {
max-width: 20vw;
}
html[data-theme=dark] .max-width-20vw {
max-width: 20vw;
}
html[data-theme=dark] .min-height-30vh {
min-height: 30vh;
}
html[data-theme=dark] .max-height-30vh {
max-height: 30vh;
}
html[data-theme=dark] .min-width-30vw {
max-width: 30vw;
}
html[data-theme=dark] .max-width-30vw {
max-width: 30vw;
}
html[data-theme=dark] .min-height-40vh {
min-height: 40vh;
}
html[data-theme=dark] .max-height-40vh {
max-height: 40vh;
}
html[data-theme=dark] .min-width-40vw {
max-width: 40vw;
}
html[data-theme=dark] .max-width-40vw {
max-width: 40vw;
}
html[data-theme=dark] .min-height-50vh {
min-height: 50vh;
}
html[data-theme=dark] .max-height-50vh {
max-height: 50vh;
}
html[data-theme=dark] .min-width-50vw {
max-width: 50vw;
}
html[data-theme=dark] .max-width-50vw {
max-width: 50vw;
}
html[data-theme=dark] .min-height-60vh {
min-height: 60vh;
}
html[data-theme=dark] .max-height-60vh {
max-height: 60vh;
}
html[data-theme=dark] .min-width-60vw {
max-width: 60vw;
}
html[data-theme=dark] .max-width-60vw {
max-width: 60vw;
}
html[data-theme=dark] .min-height-70vh {
min-height: 70vh;
}
html[data-theme=dark] .max-height-70vh {
max-height: 70vh;
}
html[data-theme=dark] .min-width-70vw {
max-width: 70vw;
}
html[data-theme=dark] .max-width-70vw {
max-width: 70vw;
}
html[data-theme=dark] .min-height-80vh {
min-height: 80vh;
}
html[data-theme=dark] .max-height-80vh {
max-height: 80vh;
}
html[data-theme=dark] .min-width-80vw {
max-width: 80vw;
}
html[data-theme=dark] .max-width-80vw {
max-width: 80vw;
}
html[data-theme=dark] .min-height-90vh {
min-height: 90vh;
}
html[data-theme=dark] .max-height-90vh {
max-height: 90vh;
}
html[data-theme=dark] .min-width-90vw {
max-width: 90vw;
}
html[data-theme=dark] .max-width-90vw {
max-width: 90vw;
}
html[data-theme=dark] .min-height-100vh {
min-height: 100vh;
}
html[data-theme=dark] .max-height-100vh {
max-height: 100vh;
}
html[data-theme=dark] .min-width-100vw {
max-width: 100vw;
}
html[data-theme=dark] .max-width-100vw {
max-width: 100vw;
}
html[data-theme=dark] .uk-switch {
position: relative;
display: inline-block;
height: 24px;
width: 42px; }
html[data-theme="dark"] .uk-switch input {
display: none; }
html[data-theme="dark"] .uk-switch-slider {
width: 42px;
}
html[data-theme=dark] .uk-switch input {
display: none;
}
html[data-theme=dark] .uk-switch-slider {
background-color: rgba(0, 0, 0, 0.22);
position: absolute;
top: 0;
@ -141,41 +199,55 @@ html[data-theme="dark"] .uk-switch-slider {
bottom: 0;
cursor: pointer;
transition-property: background-color;
transition-duration: .05s;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); }
html[data-theme="dark"] .uk-switch-slider:before {
content: '';
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: .05s; }
html[data-theme="dark"] input:checked + .uk-switch-slider {
background-color: #39f !important; }
html[data-theme="dark"] input:checked + .uk-switch-slider:before {
transform: translateX(18px); }
html[data-theme="dark"] .uk-switch-slider.uk-switch-on-off {
background-color: #f0506e; }
html[data-theme="dark"] input:checked + .uk-switch-slider.uk-switch-on-off {
background-color: #32d296 !important; }
html[data-theme="dark"] .uk-switch-slider.uk-switch-big:before {
transition-duration: 0.05s;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
}
html[data-theme=dark] .uk-switch-slider:before {
content: "";
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: 0.05s;
}
html[data-theme=dark] input:checked + .uk-switch-slider {
background-color: #39f !important;
}
html[data-theme=dark] input:checked + .uk-switch-slider:before {
transform: translateX(18px);
}
html[data-theme=dark] .uk-switch-slider.uk-switch-on-off {
background-color: #f0506e;
}
html[data-theme=dark] input:checked + .uk-switch-slider.uk-switch-on-off {
background-color: #32d296 !important;
}
html[data-theme=dark] .uk-switch-slider.uk-switch-big:before {
transform: scale(1.2);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] .uk-switch-slider.uk-switch-small:before {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); }
html[data-theme="dark"] input:checked + .uk-switch-slider.uk-switch-big:before {
transform: translateX(18px) scale(1.2); }
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
html[data-theme=dark] .uk-switch-slider.uk-switch-small:before {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
html[data-theme=dark] input:checked + .uk-switch-slider.uk-switch-big:before {
transform: translateX(18px) scale(1.2);
}
html[data-theme=dark] .uk-text-muted {
color: #999 !important;
}
html[data-theme="light"] .uk-offcanvas .uk-nav > li > a.active {
color: #E0E5EC; }
html[data-theme="light"] .uk-logo img {
html[data-theme=light] .uk-offcanvas .uk-nav > li > a.active {
color: #E0E5EC;
}
html[data-theme=light] .uk-logo img {
height: 38px;
border-radius: 50%; }
html[data-theme="light"] .uk-button, html[data-theme="light"] .uk-input {
border-radius: 50%;
}
html[data-theme=light] .uk-button, html[data-theme=light] .uk-input {
border: none;
color: #2c2c2e;
text-transform: none;
@ -183,124 +255,182 @@ html[data-theme="light"] .uk-button, html[data-theme="light"] .uk-input {
text-decoration: none;
background-color: #E0E5EC;
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1);
font-weight: bolder; }
html[data-theme="light"] .uk-button-link {
font-weight: bolder;
}
html[data-theme=light] .uk-button-link {
color: #5e5e62;
font-weight: bolder;
text-decoration: underline; }
html[data-theme="light"] .uk-card {
text-decoration: underline;
}
html[data-theme=light] .uk-card {
border-radius: 5px;
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .uk-card .uk-card-header {
border-bottom: 1px solid #c0cad9; }
html[data-theme="light"] .uk-card .uk-card-footer {
border-top: 1px solid #c0cad9; }
html[data-theme="light"] .uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
html[data-theme="light"] .uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .uk-h1, html[data-theme="light"] h1 {
color: #333333; }
html[data-theme="light"] .uk-h2, html[data-theme="light"] h2 {
color: #333333; }
html[data-theme="light"] .uk-h3, html[data-theme="light"] h3 {
color: #333333; }
html[data-theme="light"] .uk-h4, html[data-theme="light"] h4 {
color: #333333; }
html[data-theme="light"] .uk-h5, html[data-theme="light"] h5 {
color: #333333; }
html[data-theme="light"] .uk-h6, html[data-theme="light"] h6 {
color: #333333; }
html[data-theme="light"] .min-height-10vh {
min-height: 10vh; }
html[data-theme="light"] .max-height-10vh {
max-height: 10vh; }
html[data-theme="light"] .min-width-10vw {
max-width: 10vw; }
html[data-theme="light"] .max-width-10vw {
max-width: 10vw; }
html[data-theme="light"] .min-height-20vh {
min-height: 20vh; }
html[data-theme="light"] .max-height-20vh {
max-height: 20vh; }
html[data-theme="light"] .min-width-20vw {
max-width: 20vw; }
html[data-theme="light"] .max-width-20vw {
max-width: 20vw; }
html[data-theme="light"] .min-height-30vh {
min-height: 30vh; }
html[data-theme="light"] .max-height-30vh {
max-height: 30vh; }
html[data-theme="light"] .min-width-30vw {
max-width: 30vw; }
html[data-theme="light"] .max-width-30vw {
max-width: 30vw; }
html[data-theme="light"] .min-height-40vh {
min-height: 40vh; }
html[data-theme="light"] .max-height-40vh {
max-height: 40vh; }
html[data-theme="light"] .min-width-40vw {
max-width: 40vw; }
html[data-theme="light"] .max-width-40vw {
max-width: 40vw; }
html[data-theme="light"] .min-height-50vh {
min-height: 50vh; }
html[data-theme="light"] .max-height-50vh {
max-height: 50vh; }
html[data-theme="light"] .min-width-50vw {
max-width: 50vw; }
html[data-theme="light"] .max-width-50vw {
max-width: 50vw; }
html[data-theme="light"] .min-height-60vh {
min-height: 60vh; }
html[data-theme="light"] .max-height-60vh {
max-height: 60vh; }
html[data-theme="light"] .min-width-60vw {
max-width: 60vw; }
html[data-theme="light"] .max-width-60vw {
max-width: 60vw; }
html[data-theme="light"] .min-height-70vh {
min-height: 70vh; }
html[data-theme="light"] .max-height-70vh {
max-height: 70vh; }
html[data-theme="light"] .min-width-70vw {
max-width: 70vw; }
html[data-theme="light"] .max-width-70vw {
max-width: 70vw; }
html[data-theme="light"] .min-height-80vh {
min-height: 80vh; }
html[data-theme="light"] .max-height-80vh {
max-height: 80vh; }
html[data-theme="light"] .min-width-80vw {
max-width: 80vw; }
html[data-theme="light"] .max-width-80vw {
max-width: 80vw; }
html[data-theme="light"] .min-height-90vh {
min-height: 90vh; }
html[data-theme="light"] .max-height-90vh {
max-height: 90vh; }
html[data-theme="light"] .min-width-90vw {
max-width: 90vw; }
html[data-theme="light"] .max-width-90vw {
max-width: 90vw; }
html[data-theme="light"] .min-height-100vh {
min-height: 100vh; }
html[data-theme="light"] .max-height-100vh {
max-height: 100vh; }
html[data-theme="light"] .min-width-100vw {
max-width: 100vw; }
html[data-theme="light"] .max-width-100vw {
max-width: 100vw; }
html[data-theme="light"] .uk-switch {
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1);
}
html[data-theme=light] .uk-card .uk-card-header {
border-bottom: 1px solid #c0cad9;
}
html[data-theme=light] .uk-card .uk-card-footer {
border-top: 1px solid #c0cad9;
}
html[data-theme=light] .uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
html[data-theme=light] .uk-card-secondary {
background: #23272A;
}
html[data-theme=light] .uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1);
}
html[data-theme=light] .uk-h1, html[data-theme=light] h1 {
color: #333333;
}
html[data-theme=light] .uk-h2, html[data-theme=light] h2 {
color: #333333;
}
html[data-theme=light] .uk-h3, html[data-theme=light] h3 {
color: #333333;
}
html[data-theme=light] .uk-h4, html[data-theme=light] h4 {
color: #333333;
}
html[data-theme=light] .uk-h5, html[data-theme=light] h5 {
color: #333333;
}
html[data-theme=light] .uk-h6, html[data-theme=light] h6 {
color: #333333;
}
html[data-theme=light] .min-height-10vh {
min-height: 10vh;
}
html[data-theme=light] .max-height-10vh {
max-height: 10vh;
}
html[data-theme=light] .min-width-10vw {
max-width: 10vw;
}
html[data-theme=light] .max-width-10vw {
max-width: 10vw;
}
html[data-theme=light] .min-height-20vh {
min-height: 20vh;
}
html[data-theme=light] .max-height-20vh {
max-height: 20vh;
}
html[data-theme=light] .min-width-20vw {
max-width: 20vw;
}
html[data-theme=light] .max-width-20vw {
max-width: 20vw;
}
html[data-theme=light] .min-height-30vh {
min-height: 30vh;
}
html[data-theme=light] .max-height-30vh {
max-height: 30vh;
}
html[data-theme=light] .min-width-30vw {
max-width: 30vw;
}
html[data-theme=light] .max-width-30vw {
max-width: 30vw;
}
html[data-theme=light] .min-height-40vh {
min-height: 40vh;
}
html[data-theme=light] .max-height-40vh {
max-height: 40vh;
}
html[data-theme=light] .min-width-40vw {
max-width: 40vw;
}
html[data-theme=light] .max-width-40vw {
max-width: 40vw;
}
html[data-theme=light] .min-height-50vh {
min-height: 50vh;
}
html[data-theme=light] .max-height-50vh {
max-height: 50vh;
}
html[data-theme=light] .min-width-50vw {
max-width: 50vw;
}
html[data-theme=light] .max-width-50vw {
max-width: 50vw;
}
html[data-theme=light] .min-height-60vh {
min-height: 60vh;
}
html[data-theme=light] .max-height-60vh {
max-height: 60vh;
}
html[data-theme=light] .min-width-60vw {
max-width: 60vw;
}
html[data-theme=light] .max-width-60vw {
max-width: 60vw;
}
html[data-theme=light] .min-height-70vh {
min-height: 70vh;
}
html[data-theme=light] .max-height-70vh {
max-height: 70vh;
}
html[data-theme=light] .min-width-70vw {
max-width: 70vw;
}
html[data-theme=light] .max-width-70vw {
max-width: 70vw;
}
html[data-theme=light] .min-height-80vh {
min-height: 80vh;
}
html[data-theme=light] .max-height-80vh {
max-height: 80vh;
}
html[data-theme=light] .min-width-80vw {
max-width: 80vw;
}
html[data-theme=light] .max-width-80vw {
max-width: 80vw;
}
html[data-theme=light] .min-height-90vh {
min-height: 90vh;
}
html[data-theme=light] .max-height-90vh {
max-height: 90vh;
}
html[data-theme=light] .min-width-90vw {
max-width: 90vw;
}
html[data-theme=light] .max-width-90vw {
max-width: 90vw;
}
html[data-theme=light] .min-height-100vh {
min-height: 100vh;
}
html[data-theme=light] .max-height-100vh {
max-height: 100vh;
}
html[data-theme=light] .min-width-100vw {
max-width: 100vw;
}
html[data-theme=light] .max-width-100vw {
max-width: 100vw;
}
html[data-theme=light] .uk-switch {
position: relative;
display: inline-block;
height: 24px;
width: 42px; }
html[data-theme="light"] .uk-switch input {
display: none; }
html[data-theme="light"] .uk-switch-slider {
width: 42px;
}
html[data-theme=light] .uk-switch input {
display: none;
}
html[data-theme=light] .uk-switch-slider {
background-color: rgba(0, 0, 0, 0.22);
position: absolute;
top: 0;
@ -310,89 +440,125 @@ html[data-theme="light"] .uk-switch-slider {
bottom: 0;
cursor: pointer;
transition-property: background-color;
transition-duration: .05s;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07); }
html[data-theme="light"] .uk-switch-slider:before {
content: '';
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: .05s; }
html[data-theme="light"] input:checked + .uk-switch-slider {
background-color: #39f !important; }
html[data-theme="light"] input:checked + .uk-switch-slider:before {
transform: translateX(18px); }
html[data-theme="light"] .uk-switch-slider.uk-switch-on-off {
background-color: #f0506e; }
html[data-theme="light"] input:checked + .uk-switch-slider.uk-switch-on-off {
background-color: #32d296 !important; }
html[data-theme="light"] .uk-switch-slider.uk-switch-big:before {
transition-duration: 0.05s;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
}
html[data-theme=light] .uk-switch-slider:before {
content: "";
background-color: #fff;
position: absolute;
width: 20px;
height: 20px;
left: 2px;
bottom: 2px;
border-radius: 50%;
transition-property: transform, box-shadow;
transition-duration: 0.05s;
}
html[data-theme=light] input:checked + .uk-switch-slider {
background-color: #39f !important;
}
html[data-theme=light] input:checked + .uk-switch-slider:before {
transform: translateX(18px);
}
html[data-theme=light] .uk-switch-slider.uk-switch-on-off {
background-color: #f0506e;
}
html[data-theme=light] input:checked + .uk-switch-slider.uk-switch-on-off {
background-color: #32d296 !important;
}
html[data-theme=light] .uk-switch-slider.uk-switch-big:before {
transform: scale(1.2);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); }
html[data-theme="light"] .uk-switch-slider.uk-switch-small:before {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22); }
html[data-theme="light"] input:checked + .uk-switch-slider.uk-switch-big:before {
transform: translateX(18px) scale(1.2); }
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
html[data-theme=light] .uk-switch-slider.uk-switch-small:before {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}
html[data-theme=light] input:checked + .uk-switch-slider.uk-switch-big:before {
transform: translateX(18px) scale(1.2);
}
html[data-theme=light] .uk-text-muted {
color: #666666 !important;
}
html, body {
font-family: 'Roboto', sans-serif;
transition-duration: .3s; }
html[data-theme="dark"] body {
background-color: #16171a;
color: #e6e6e8; }
html[data-theme="dark"] #app {
min-height: 100vh; }
html[data-theme="dark"] .nav {
z-index: 99;
background-color: #16171a;
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .nav .uk-navbar-nav > li > a {
color: #e6e6e8;
text-transform: none; }
html[data-theme="dark"] .nav .uk-navbar-nav > li > a:hover, html[data-theme="dark"] .nav .uk-navbar-nav > li > a.active {
text-decoration: underline; }
html[data-theme="dark"] .top-wrap-height {
height: 80vh;
min-height: 460px;
transition: height 0.25s; }
html[data-theme="dark"] .subtitle-text {
font-size: 1.2em;
opacity: 0.7; }
html[data-theme="light"] body {
background-color: #E0E5EC;
color: #2c2c2e; }
html[data-theme="light"] #app {
min-height: 100vh; }
html[data-theme="light"] .nav {
z-index: 99;
background-color: #E0E5EC;
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .nav .uk-navbar-nav > li > a {
color: #2c2c2e;
text-transform: none; }
html[data-theme="light"] .nav .uk-navbar-nav > li > a:hover, html[data-theme="light"] .nav .uk-navbar-nav > li > a.active {
text-decoration: underline; }
html[data-theme="light"] .top-wrap-height {
height: 80vh;
min-height: 460px;
transition: height 0.25s; }
html[data-theme="light"] .subtitle-text {
font-size: 1.2em;
opacity: 0.7; }
.uk-label {
background: #0b59a6;
}
.uk-label-success {
background-color: rgb(22, 101, 72);
background-color: #166548;
}
.uk-label-warning {
background-color: rgb(145, 66, 4);
background-color: #914204;
}
:not(pre) > code, :not(pre) > kbd, :not(pre) > samp {
color: #aa0f2c;
background-color: #f8f8f8;
}
html, body {
font-family: "Roboto", sans-serif;
transition-duration: 0.3s;
}
html[data-theme=dark] body {
background-color: #16171a;
color: #e6e6e8;
}
html[data-theme=dark] #app {
min-height: 100vh;
}
html[data-theme=dark] .nav {
z-index: 99;
background-color: #16171a;
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
}
html[data-theme=dark] .nav .uk-navbar-nav > li > a {
color: #e6e6e8;
text-transform: none;
}
html[data-theme=dark] .nav .uk-navbar-nav > li > a:hover, html[data-theme=dark] .nav .uk-navbar-nav > li > a.active {
text-decoration: underline;
}
html[data-theme=dark] .top-wrap-height {
height: 80vh;
min-height: 460px;
transition: height 0.25s;
}
html[data-theme=dark] .subtitle-text {
font-size: 1.2em;
opacity: 0.7;
}
html[data-theme=light] body {
background-color: #E0E5EC;
color: #2c2c2e;
}
html[data-theme=light] #app {
min-height: 100vh;
}
html[data-theme=light] .nav {
z-index: 99;
background-color: #E0E5EC;
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1);
}
html[data-theme=light] .nav .uk-navbar-nav > li > a {
color: #2c2c2e;
text-transform: none;
}
html[data-theme=light] .nav .uk-navbar-nav > li > a:hover, html[data-theme=light] .nav .uk-navbar-nav > li > a.active {
text-decoration: underline;
}
html[data-theme=light] .top-wrap-height {
height: 80vh;
min-height: 460px;
transition: height 0.25s;
}
html[data-theme=light] .subtitle-text {
font-size: 1.2em;
opacity: 0.7;
}
/*# sourceMappingURL=index.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,46 +0,0 @@
.uk-offcanvas .uk-nav > li > a.active {
color: #E0E5EC; }
.uk-logo img {
height: 38px;
border-radius: 50%; }
.uk-button, .uk-input {
border: none;
color: #2c2c2e;
text-transform: none;
border-radius: 5px;
text-decoration: none;
background-color: #E0E5EC;
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1);
font-weight: bolder; }
.uk-button-link {
color: #c0cad9;
font-weight: bolder;
text-decoration: underline; }
.uk-card {
border-radius: 5px;
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1); }
.uk-card .uk-card-header {
border-bottom: 1px solid #c0cad9; }
.uk-card .uk-card-footer {
border-top: 1px solid #c0cad9; }
.uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
.uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(255, 255, 255, 0.5), 5px 5px 12px 0 rgba(0, 0, 0, 0.1); }
.uk-label-success {
background-color: rgb(22, 101, 72);
}
.uk-label-warning {
background-color: rgb(145, 66, 4);
}
/*# sourceMappingURL=uikit_fix.css.map */

View file

@ -1,7 +0,0 @@
{
"version": 3,
"mappings": "AAIQ,qCAAS;EACL,KAAK,ECFP,OAAO;;ADOjB,YAAa;EACT,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,GAAG;;AAGtB,qBAAsB;EAClB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,OAAe;EACtB,cAAc,EAAE,IAAI;EACpB,aAAa,EAAE,GAAG;EAClB,eAAe,EAAE,IAAI;EACrB,gBAAgB,EClBV,OAAO;EDmBb,UAAU,ECtBL,4EAC+B;EDsBpC,WAAW,EAAE,MAAM;;AAGvB,eAAgB;EACZ,KAAK,EAAE,OAAqB;EAC5B,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,SAAS;;AAG9B,QAAS;EACL,aAAa,EAAE,GAAG;EAClB,UAAU,EClCL,4EAC+B;EDmCpC,wBAAgB;IACZ,aAAa,EAAE,iBACnB;EAEA,wBAAgB;IACZ,UAAU,EAAE,iBAChB;EAEA,uBAAe;IACX,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,MAAM;IAChB,WAAW,EAAE,MAAM;;AAI3B,iBAAkB;EACd,UAAU,ECpDL,4EAC+B",
"sources": ["../sass/uikit_fix.scss","../sass/_variables.scss"],
"names": [],
"file": "uikit_fix.css"
}

View file

@ -3,6 +3,7 @@ $themes: (
primary: #E0E5EC,
primary-text: rgb(44, 44, 46),
primary-text-h: rgb(51, 51, 51),
primary-text-muted: rgb(102, 102, 102),
shadow: (-5px -5px 12px 0 rgba(255, 255, 255, .5),
5px 5px 12px 0 rgba(0, 0, 0, .1)),
),
@ -10,6 +11,7 @@ $themes: (
primary: #16171a,
primary-text: rgb(230, 230, 232),
primary-text-h: rgb(204, 204, 204),
primary-text-muted: #999,
shadow: (-5px -5px 12px 0 rgba(41, 41, 41, 0.6),
5px 5px 12px 0 rgba(0, 0, 0, 0.3)),
),

View file

@ -2,6 +2,7 @@
@import "variables";
@import "uikit_fix";
html, body {
font-family: 'Roboto', sans-serif;
transition-duration: .3s;

View file

@ -146,6 +146,10 @@
input:checked + .uk-switch-slider.uk-switch-big:before {
transform: translateX(18px) scale(1.2);
}
.uk-text-muted {
color: map_get(map_get($themes, $theme), 'primary-text-muted') !important;
}
}
html[data-theme="dark"] {
@ -156,10 +160,19 @@ html[data-theme="light"] {
@include render_theme('light')
}
.uk-label {
background: rgb(11, 89, 166);
}
.uk-label-success {
background-color: rgb(22, 101, 72);
}
.uk-label-warning {
background-color: rgb(145, 66, 4);
}
:not(pre) > code, :not(pre) > kbd, :not(pre) > samp {
color: rgb(170, 15, 44);
background-color: rgb(248, 248, 248);
}

View file

@ -35,7 +35,7 @@ mais aussi par <code><a href="https://git.gnous.eu/Romain">Romain J.</a></code>,
<div class="uk-margin-bottom">
<div class="uk-card uk-card-secondary">
<div class="uk-card-media-top">
<img class="uk-align-center" src="{{ partner.photo.url }}" loading="lazy" alt="{{ partner.name }}">
<img class="uk-align-center" src="{{ partner.photo.url }}" loading="lazy" alt="{{ partner.name }}" width="320" height="240">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title uk-margin-remove-bottom">

View file

@ -7,7 +7,7 @@
<div class="uk-navbar-left">
<div class="uk-navbar-item uk-padding-remove-horizontal">
<a class="uk-logo uk-border-rounded" title="Logo" href="{% url 'gnous_eu:index' %}">
<img src="{% static 'images/gnous.svg' %}" alt="Logo">
<img src="{% static 'images/gnous.svg' %}" alt="Logo" width="42" height="42">
</a>
</div>
<ul class="uk-navbar-nav uk-visible@s">

View file

@ -3,7 +3,7 @@
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas" style="display: block">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
<button class="uk-offcanvas-close uk-icon uk-close" type="button">
<button class="uk-offcanvas-close uk-icon uk-close" aria-label="Close" type="button">
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon">
<line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line>
<line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line>
@ -50,11 +50,11 @@
{% get_current_language as LANGUAGE_CODE %}
{% if LANGUAGE_CODE == 'en' %}
<img src="{% static 'images/icons/fr.svg' %}" alt="en"
onclick="window.document.languageForm2.submit()" width="18">
onclick="window.document.languageForm2.submit()" width="18" height="18">
<input type="hidden" name="language" value="fr">
{% else %}
<img src="{% static 'images/icons/en.svg' %}" alt="fr"
onclick="window.document.languageForm2.submit()" width="18">
onclick="window.document.languageForm2.submit()" width="18" height="18">
<input type="hidden" name="language" value="en">
{% endif %}
</form>
@ -67,11 +67,6 @@
</label>
</div>
</div>
</li>
<li>
</li>
</ul>
</div>

View file

@ -14,7 +14,7 @@
<div class="uk-width-1-2@l uk-width-1-1 uk-align-center uk-margin-large-bottom">
<form action="{% url 'gnous_eu:services' %}" method="get" id="searchForm">
<div class="uk-inline uk-width-1-1@l">
<button class="uk-form-icon uk-form-icon-flip uk-icon" data-uk-icon="search" type="submit"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></button>
<button class="uk-form-icon uk-form-icon-flip uk-icon" aria-label="Search" data-uk-icon="search" type="submit"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></button>
<label for="searchInput">
<input class="uk-input" type="search" id="searchInput" name="search"
placeholder="{% trans 'Rechercher...' %}" {% if search %} value="{{ search }}" {% endif %}>
@ -30,7 +30,7 @@
<div class="uk-card uk-card-secondary">
<div class="uk-card-media-top">
<a href="https://{{ service.domain }}" target="_blank">
<img src="{{ service.photo.url }}" loading="lazy" alt="{{ service.name }}">
<img src="{{ service.photo.url }}" loading="lazy" alt="{{ service.name }}" width="320" height="240">
</a>
</div>
<div class="uk-card-body">

View file

@ -1,10 +1,12 @@
@import url(uikit/uikit.min.css);
html[data-theme="dark"] .uk-offcanvas .uk-nav > li > a.active {
color: #16171a; }
html[data-theme="dark"] .uk-logo img {
@import "uikit/uikit.css";
html[data-theme=dark] .uk-offcanvas .uk-nav > li > a.active {
color: #16171a;
}
html[data-theme=dark] .uk-logo img {
height: 38px;
border-radius: 50%; }
html[data-theme="dark"] .uk-button, html[data-theme="dark"] .uk-input {
border-radius: 50%;
}
html[data-theme=dark] .uk-button, html[data-theme=dark] .uk-input {
border: none;
color: #e6e6e8;
text-transform: none;
@ -12,126 +14,182 @@ html[data-theme="dark"] .uk-button, html[data-theme="dark"] .uk-input {
text-decoration: none;
background-color: #16171a;
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
font-weight: bolder; }
html[data-theme="dark"] .uk-button-link {
font-weight: bolder;
}
html[data-theme=dark] .uk-button-link {
color: white;
font-weight: bolder;
text-decoration: underline; }
html[data-theme="dark"] .uk-card {
text-decoration: underline;
}
html[data-theme=dark] .uk-card {
border-radius: 5px;
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .uk-card .uk-card-header {
border-bottom: 1px solid black; }
html[data-theme="dark"] .uk-card .uk-card-footer {
border-top: 1px solid black; }
html[data-theme="dark"] .uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap; }
html[data-theme="dark"] .uk-card-secondary {
background: #23272A; }
html[data-theme="dark"] .uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .uk-h1, html[data-theme="dark"] h1 {
color: #cccccc; }
html[data-theme="dark"] .uk-h2, html[data-theme="dark"] h2 {
color: #cccccc; }
html[data-theme="dark"] .uk-h3, html[data-theme="dark"] h3 {
color: #cccccc; }
html[data-theme="dark"] .uk-h4, html[data-theme="dark"] h4 {
color: #cccccc; }
html[data-theme="dark"] .uk-h5, html[data-theme="dark"] h5 {
color: #cccccc; }
html[data-theme="dark"] .uk-h6, html[data-theme="dark"] h6 {
color: #cccccc; }
html[data-theme="dark"] .min-height-10vh {
min-height: 10vh; }
html[data-theme="dark"] .max-height-10vh {
max-height: 10vh; }
html[data-theme="dark"] .min-width-10vw {
max-width: 10vw; }
html[data-theme="dark"] .max-width-10vw {
max-width: 10vw; }
html[data-theme="dark"] .min-height-20vh {
min-height: 20vh; }
html[data-theme="dark"] .max-height-20vh {
max-height: 20vh; }
html[data-theme="dark"] .min-width-20vw {
max-width: 20vw; }
html[data-theme="dark"] .max-width-20vw {
max-width: 20vw; }
html[data-theme="dark"] .min-height-30vh {
min-height: 30vh; }
html[data-theme="dark"] .max-height-30vh {
max-height: 30vh; }
html[data-theme="dark"] .min-width-30vw {
max-width: 30vw; }
html[data-theme="dark"] .max-width-30vw {
max-width: 30vw; }
html[data-theme="dark"] .min-height-40vh {
min-height: 40vh; }
html[data-theme="dark"] .max-height-40vh {
max-height: 40vh; }
html[data-theme="dark"] .min-width-40vw {
max-width: 40vw; }
html[data-theme="dark"] .max-width-40vw {
max-width: 40vw; }
html[data-theme="dark"] .min-height-50vh {
min-height: 50vh; }
html[data-theme="dark"] .max-height-50vh {
max-height: 50vh; }
html[data-theme="dark"] .min-width-50vw {
max-width: 50vw; }
html[data-theme="dark"] .max-width-50vw {
max-width: 50vw; }
html[data-theme="dark"] .min-height-60vh {
min-height: 60vh; }
html[data-theme="dark"] .max-height-60vh {
max-height: 60vh; }
html[data-theme="dark"] .min-width-60vw {
max-width: 60vw; }
html[data-theme="dark"] .max-width-60vw {
max-width: 60vw; }
html[data-theme="dark"] .min-height-70vh {
min-height: 70vh; }
html[data-theme="dark"] .max-height-70vh {
max-height: 70vh; }
html[data-theme="dark"] .min-width-70vw {
max-width: 70vw; }
html[data-theme="dark"] .max-width-70vw {
max-width: 70vw; }
html[data-theme="dark"] .min-height-80vh {
min-height: 80vh; }
html[data-theme="dark"] .max-height-80vh {
max-height: 80vh; }
html[data-theme="dark"] .min-width-80vw {
max-width: 80vw; }
html[data-theme="dark"] .max-width-80vw {
max-width: 80vw; }
html[data-theme="dark"] .min-height-90vh {
min-height: 90vh; }
html[data-theme="dark"] .max-height-90vh {
max-height: 90vh; }
html[data-theme="dark"] .min-width-90vw {
max-width: 90vw; }
html[data-theme="dark"] .max-width-90vw {
max-width: 90vw; }
html[data-theme="dark"] .min-height-100vh {
min-height: 100vh; }
html[data-theme="dark"] .max-height-100vh {
max-height: 100vh; }
html[data-theme="dark"] .min-width-100vw {
max-width: 100vw; }
html[data-theme="dark"] .max-width-100vw {
max-width: 100vw; }
html[data-theme="dark"] .uk-switch {
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
}
html[data-theme=dark] .uk-card .uk-card-header {
border-bottom: 1px solid black;
}
html[data-theme=dark] .uk-card .uk-card-footer {
border-top: 1px solid black;
}
html[data-theme=dark] .uk-card .uk-card-title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
html[data-theme=dark] .uk-card-secondary {
background: #23272A;
}
html[data-theme=dark] .uk-border-circle {
box-shadow: -5px -5px 12px 0 rgba(41, 41, 41, 0.6), 5px 5px 12px 0 rgba(0, 0, 0, 0.3);
}
html[data-theme=dark] .uk-h1, html[data-theme=dark] h1 {
color: #cccccc;
}
html[data-theme=dark] .uk-h2, html[data-theme=dark] h2 {
color: #cccccc;
}
html[data-theme=dark] .uk-h3, html[data-theme=dark] h3 {
color: #cccccc;
}
html[data-theme=dark] .uk-h4, html[data-theme=dark] h4 {
color: #cccccc;
}
html[data-theme=dark] .uk-h5, html[data-theme=dark] h5 {
color: #cccccc;
}
html[data-theme=dark] .uk-h6, html[data-theme=dark] h6 {
color: #cccccc;
}
html[data-theme=dark] .min-height-10vh {
min-height: 10vh;
}
html[data-theme=dark] .max-height-10vh {
max-height: 10vh;
}
html[data-theme=dark] .min-width-10vw {
max-width: 10vw;
}
html[data-theme=dark] .max-width-10vw {
max-width: 10vw;
}
html[data-theme=dark] .min-height-20vh {
min-height: 20vh;
}
html[data-theme=dark] .max-height-20vh {
max-height: 20vh;
}
html[data-theme=dark] .min-width-20vw {
max-width: 20vw;
}
html[data-theme=dark] .max-width-20vw {
max-width: 20vw;
}
html[data-theme=dark] .min-height-30vh {
min-height: 30vh;
}
html[data-theme=dark] .max-height-30vh {
max-height: 30vh;
}
html[data-theme=dark] .min-width-30vw {
max-width: 30vw;
}
html[data-theme=dark] .max-width-30vw {
max-width: 30vw;
}
html[data-theme=dark] .min-height-40vh {
min-height: 40vh;
}
html[data-theme=dark] .max-height-40vh {
max-height: 40vh;
}
html[data-theme=dark] .min-width-40vw {
max-width: 40vw;
}
html[data-theme=dark] .max-width-40vw {
max-width: 40vw;
}
html[data-theme=dark] .min-height-50vh {
min-height: 50vh;
}
html[data-theme=dark] .max-height-50vh {
max-height: 50vh;
}
html[data-theme=dark] .min-width-50vw {
max-width: 50vw;
}
html[data-theme=dark] .max-width-50vw {
max-width: 50vw;
}
html[data-theme=dark] .min-height-60vh {
min-height: 60vh;
}
html[data-theme=dark] .max-height-60vh {
max-height: 60vh;
}
html[data-theme=dark] .min-width-60vw {
max-width: 60vw;
}
html[data-theme=dark] .max-width-60vw {
max-width: 60vw;