philipp/hacky-ruadat
1
0
Fork 0
forked from Ruderverein-Donau-Linz/rowt
Code Issues Pull Requests Actions Activity

[TASK] support dark mode first draft

Browse Source
This commit is contained in:
Marie Birner
2023-11-04 00:19:46 +01:00
parent 5ac3ae348c
commit 5f494dc9e9
12 changed files with 36 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/scss/components/_btns.scss
View File

@ -6,11 +6,11 @@
}
&-dark {
@apply bg-primary-900 hover:bg-primary-950 focus-visible:outline-primary-950;
@apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-950 focus-visible:outline-primary-950;
}
&-gray {
@apply bg-gray-400 hover:bg-gray-500 focus-visible:outline-primary-500;
@apply bg-gray-400 hover:bg-gray-500 dark:bg-primary-600 focus-visible:outline-primary-500;
}
&-attention {

4
frontend/scss/components/_headlines.scss
View File

@ -1,7 +1,7 @@
.h1 {
@apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900;
@apply text-center text-3xl uppercase tracking-wide font-bold text-primary-900 dark:text-white;
}
.h2 {
@apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 bg-gray-200 bg-opacity-80 text-lg px-3 py-3;
@apply font-bold uppercase tracking-wide text-center rounded-t-md text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-lg px-3 py-3;
}

22
frontend/scss/components/_input.scss
View File

@ -1,5 +1,5 @@
.input {
@apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
@apply relative block w-full bg-white dark:bg-black border-0 py-1.5 px-2 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
}
select {
@ -7,7 +7,7 @@ select {
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
background-color: white;
@apply bg-white dark:bg-black;
-webkit-appearance: none;
appearance: none;
}
@ -32,7 +32,7 @@ select {
}
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
background-color: #eaeaea;
@apply bg-white dark:bg-black;
cursor: not-allowed;
-webkit-user-select: none;
user-select: none;
@ -52,8 +52,7 @@ select {
display: block;
width: 100%;
padding: 10px;
@apply border-0 ring-1 ring-inset ring-gray-300;
background-color: #fff;
@apply bg-white dark:bg-black border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
margin: 0;
}
.choices[data-type*=select-one] .choices__button {
@ -93,7 +92,7 @@ select {
pointer-events: none;
}
.choices[data-type*=select-one].is-open::after {
@apply border-0 ring-1 ring-inset ring-gray-300;
@apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
margin-top: -7.5px;
}
.choices[data-type*=select-one][dir=rtl]::after {
@ -135,10 +134,10 @@ select {
}
.choices__inner {
@apply input rounded-md bg-white;
@apply input rounded-md bg-white dark:bg-black;
}
.is-focused .choices__inner, .is-open .choices__inner {
@apply border-0 ring-1 ring-inset ring-gray-300;
@apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
}
.is-open .choices__inner {
border-radius: 0;
@ -190,7 +189,7 @@ select {
@apply bg-primary-900;
}
.is-disabled .choices__list--multiple .choices__item {
@apply bg-gray-600;
@apply bg-gray-600 dark:bg-primary-900;
}
.choices__list--dropdown, .choices__list[aria-expanded] {
@ -198,8 +197,7 @@ select {
z-index: 1;
position: absolute;
width: 100%;
background-color: #fff;
@apply border;
@apply border bg-white dark:bg-black dark:text-white;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
@ -212,7 +210,7 @@ select {
visibility: visible;
}
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
@apply border-0 ring-1 ring-inset ring-gray-300;
@apply border-0 ring-1 ring-inset ring-gray-300 dark:ring-primary-600;
}
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
top: auto;

2
frontend/scss/components/_sidebar.scss
View File

@ -3,14 +3,12 @@
position: fixed;
overflow-y: scroll;
top: 0;
background: white;
z-index: 2000;
width: 0;
max-width: 0;
box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
&.open {
background-color: rgba(255, 255, 255, 100%);
display: block;
height: 100vh;
right: 0;