add style for both dark and light themes
This commit is contained in:
parent
b82548e52e
commit
775cca3475
|
@ -1,9 +1,8 @@
|
|||
@import 'colors';
|
||||
@import 'spacing';
|
||||
@import 'fontsize';
|
||||
|
||||
.messageBox {
|
||||
border: 1px solid $colors_yellow;
|
||||
border: 1px solid var(--primary);
|
||||
text-align: center;
|
||||
padding: $spacing_8;
|
||||
border-radius: $spacing_4;
|
||||
|
|
|
@ -1,10 +1,9 @@
|
|||
@import 'spacing';
|
||||
@import 'colors';
|
||||
@import 'breakpoints';
|
||||
|
||||
.text {
|
||||
font-size: 12px;
|
||||
color: $colors_yellow;
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
|
||||
display: none;
|
||||
|
@ -28,7 +27,7 @@
|
|||
}
|
||||
|
||||
.imgPlaceholder {
|
||||
background-color: $colors_yellow_focus;
|
||||
background-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
.thumbnailContainer {
|
||||
|
|
|
@ -6,6 +6,11 @@
|
|||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary-focus);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: $tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
@import 'spacing';
|
||||
@import 'colors';
|
||||
|
||||
.searchForm {
|
||||
display: flex;
|
||||
|
@ -12,19 +11,27 @@
|
|||
margin-right: $spacing_16;
|
||||
}
|
||||
|
||||
.query:hover {
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.query:focus {
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.submitBtn{
|
||||
flex: 1;
|
||||
background-color: $colors_yellow;
|
||||
border-color: $colors_yellow;
|
||||
color: $colors_yellow_inverse;
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary-inverse);
|
||||
}
|
||||
|
||||
.submitBtn:hover {
|
||||
background-color: $colors_yellow_hover;
|
||||
border-color: $colors_yellow_hover;
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.submitBtn:focus {
|
||||
background-color: $colors_yellow_focus;
|
||||
border-color: $colors_yellow_focus;
|
||||
background-color: var(--primary-focus);
|
||||
border-color: var(--primary-focus);
|
||||
}
|
|
@ -1,5 +0,0 @@
|
|||
// primaries
|
||||
$colors_yellow: #fdd835;
|
||||
$colors_yellow_hover: #fbc02d;
|
||||
$colors_yellow_focus: rgba(253, 216, 53, 0.125);
|
||||
$colors_yellow_inverse: rgba(0, 0, 0, 0.75);
|
|
@ -0,0 +1,37 @@
|
|||
/* light scheme (Default) */
|
||||
/* Can be forced with data-theme="light" */
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--primary: #d81b60;
|
||||
--primary-hover: #e91e63;
|
||||
--primary-focus: rgba(216, 27, 96, 0.25);
|
||||
--primary-inverse: #FFF;
|
||||
}
|
||||
|
||||
/* Pink Dark scheme (Auto) */
|
||||
/* Automatically enabled if user has Dark mode enabled */
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--primary: #fdd835;
|
||||
--primary-hover: #fbc02d;
|
||||
--primary-focus: rgba(253, 216, 53, 0.125);
|
||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
/* Pink Dark scheme (Forced) */
|
||||
/* Enabled if forced with data-theme="dark" */
|
||||
[data-theme="dark"] {
|
||||
--primary: #fdd835;
|
||||
--primary-hover: #fbc02d;
|
||||
--primary-focus: rgba(253, 216, 53, 0.125);
|
||||
--primary-inverse: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
/* Pink (Common styles) */
|
||||
:root {
|
||||
--form-element-active-border-color: var(--primary);
|
||||
--form-element-focus-color: var(--primary-focus);
|
||||
--switch-color: var(--primary-inverse);
|
||||
--switch-checked-background-color: var(--primary);
|
||||
}
|
|
@ -1,3 +1,4 @@
|
|||
@use "@picocss/pico";
|
||||
|
||||
@import "./font"
|
||||
@import "./font";
|
||||
@import "./theme";
|
Loading…
Reference in New Issue