Client - add missing color variables and update dark mode theme
This commit is contained in:
parent
94fd50d404
commit
3653239022
@ -123,7 +123,7 @@
|
||||
.scroll-button {
|
||||
background-color: var(--scroll-button-bg-color);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 1px 1px 3px lightgrey;
|
||||
box-shadow: 1px 1px 3px var(--app-shadow-color);
|
||||
display: none;
|
||||
padding: 0 $default-padding;
|
||||
|
||||
|
@ -70,14 +70,14 @@
|
||||
|
||||
.dropdown-list {
|
||||
list-style-type: none;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--dropdown-background-color);
|
||||
padding: 0 !important;
|
||||
margin-top: 5px;
|
||||
margin-left: -20px !important;
|
||||
position: absolute;
|
||||
text-align: left;
|
||||
border: solid 1px lightgrey;
|
||||
box-shadow: 2px 2px 5px lightgrey;
|
||||
border: solid 1px var(--dropdown-border-color);
|
||||
box-shadow: 2px 2px 5px var(--app-shadow-color);
|
||||
width: auto !important;
|
||||
|
||||
.dropdown-item {
|
||||
|
@ -69,7 +69,7 @@
|
||||
}
|
||||
|
||||
.map-attribution-text {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
background-color: var(--map-attribution-text);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -34,7 +34,7 @@
|
||||
padding: $default-padding * 0.5;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: var(--app-color-light);
|
||||
color: var(--calendar-day-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -88,11 +88,11 @@
|
||||
padding-left: 40px;
|
||||
|
||||
.more-workouts {
|
||||
background: whitesmoke;
|
||||
background: var(--calendar-workouts-color);
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
||||
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
0 4px 8px 0 var(--calendar-workouts-box-shadow-0),
|
||||
0 6px 20px 0 var(--calendar-workouts-box-shadow-1);
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
left: 0;
|
||||
|
@ -76,14 +76,20 @@
|
||||
{{ $t('user.REGISTER') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<button
|
||||
class="nav-button transparent"
|
||||
@click="toggleTheme"
|
||||
:title="$t('user.TOGGLE_THEME')"
|
||||
>
|
||||
<i class="fa nav-button-fa" :class="themeIcon" aria-hidden="true" />
|
||||
<span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
|
||||
</button>
|
||||
<div class="theme-button">
|
||||
<button
|
||||
class="nav-button transparent"
|
||||
@click="toggleTheme"
|
||||
:title="$t('user.TOGGLE_THEME')"
|
||||
>
|
||||
<i
|
||||
class="fa nav-button-fa"
|
||||
:class="themeIcon"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<Dropdown
|
||||
v-if="availableLanguages && language"
|
||||
class="nav-item"
|
||||
@ -394,6 +400,9 @@
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.theme-button {
|
||||
margin-left: $default-padding * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -92,7 +92,7 @@
|
||||
|
||||
.policy-content {
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid var(--policy-border-color);
|
||||
overflow: auto;
|
||||
margin: $default-margin;
|
||||
border-radius: $border-radius;
|
||||
|
@ -214,11 +214,11 @@
|
||||
line-height: 400px;
|
||||
}
|
||||
.map-control {
|
||||
background: #ffffff;
|
||||
background: var(--map-control-bg-color);
|
||||
padding: 5px 10px;
|
||||
border: 2px solid #bfc0ab;
|
||||
border: 2px solid var(--map-control-border-color);
|
||||
border-radius: 3px;
|
||||
color: #000000;
|
||||
color: var(--map-control-color);
|
||||
}
|
||||
::v-deep(.fullscreen) {
|
||||
display: flex;
|
||||
|
@ -354,7 +354,7 @@
|
||||
}
|
||||
.static-map {
|
||||
display: none;
|
||||
box-shadow: 3px 3px 3px 1px lightgrey;
|
||||
box-shadow: 3px 3px 3px 1px var(--app-shadow-color);
|
||||
}
|
||||
}
|
||||
.workout-title:hover .static-map {
|
||||
|
@ -3,6 +3,10 @@
|
||||
@import 'fonts';
|
||||
@import 'vars';
|
||||
|
||||
html [data-theme='dark'] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow-y: scroll;
|
||||
@ -56,6 +60,7 @@ select {
|
||||
background-color: var(--input-bg-color);
|
||||
border-radius: $border-radius;
|
||||
border: solid 1px var(--input-border-color);
|
||||
color: var(--input-color);
|
||||
padding: $default-padding;
|
||||
|
||||
&:disabled {
|
||||
@ -103,13 +108,13 @@ button {
|
||||
|
||||
&:disabled,
|
||||
&.confirm:disabled {
|
||||
border-color: transparent;
|
||||
border-color: var(--disabled-border-color);
|
||||
color: var(--disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--app-color);
|
||||
background: var( --button-transparent-hover-color);
|
||||
color: var(--button-hover-color);
|
||||
}
|
||||
|
||||
@ -129,7 +134,7 @@ button {
|
||||
background: var(--button-cancel-bg-color);
|
||||
color: var(--button-cancel-color);
|
||||
&:hover {
|
||||
background: var(--app-color);
|
||||
background: var( --button-transparent-hover-color);
|
||||
color: var(--button-hover-color);
|
||||
}
|
||||
}
|
||||
@ -138,7 +143,7 @@ button {
|
||||
background: var(--button-confirm-bg-color);
|
||||
color: var(--button-confirm-color);
|
||||
&:hover {
|
||||
background: var(--app-color);
|
||||
background: var( --button-transparent-hover-color);
|
||||
color: var(--button-hover-color);
|
||||
}
|
||||
}
|
||||
@ -195,7 +200,7 @@ button {
|
||||
}
|
||||
|
||||
.form-info {
|
||||
color: var(--alert-color);
|
||||
color: var(--form-info);
|
||||
font-size: 0.8em;
|
||||
margin-top: -0.2 * $default-margin;
|
||||
padding: 0 $default-padding * 1.5;
|
||||
|
@ -1,69 +1,90 @@
|
||||
:root [data-theme='dark'] {
|
||||
--app-background-color: #090909;
|
||||
--app-color: #ffffff;
|
||||
--dark-blue: #181a1b;
|
||||
--light-blue: #aec2d3;
|
||||
|
||||
--app-background-color: var(--dark-blue);
|
||||
--app-color: var(--light-blue);
|
||||
--app-color-light: #6f7070;
|
||||
--app-a-color: #ffffff;
|
||||
--app-shadow-color: lightgrey;
|
||||
--app-a-color: var(--light-blue);
|
||||
--app-shadow-color: #383d3f;
|
||||
--app-loading-color: #f3f3f3;
|
||||
--app-loading-top-color: var(--app-color);
|
||||
|
||||
--button-hover-color: #090909;
|
||||
--button-cancel-bg-color: #090909;
|
||||
--button-hover-color: var(--app-color);
|
||||
--button-transparent-hover-color: #233240;
|
||||
--button-cancel-bg-color: var(--dark-blue);
|
||||
--button-cancel-color: var(--app-color);
|
||||
--button-confirm-bg-color: #090909;
|
||||
--button-confirm-bg-color: var(--dark-blue);
|
||||
--button-confirm-color: var(--app-color);
|
||||
--button-danger-bg-color: #090909;
|
||||
--button-danger-bg-color: var(--dark-blue);
|
||||
--button-danger-color: #dc3545;
|
||||
--button-danger-hover-bg-color: #dc3545;
|
||||
--button-danger-hover-color: #090909;
|
||||
--button-danger-hover-color: var(--dark-blue);
|
||||
|
||||
--card-border-color: #c4c7cf;
|
||||
--input-border-color: #9da3af;
|
||||
--input-bg-color: #8c8c8c;
|
||||
--card-border-color: #494f52;
|
||||
--input-border-color: #494f52;
|
||||
--input-bg-color: var(--dark-blue);
|
||||
--input-color: var(--app-color);
|
||||
--input-error-color: #dc3545;
|
||||
--dropdown-hover-color: #cacaca;
|
||||
--dropdown-hover-color: #233240;
|
||||
--dropdown-background-color: var(--dark-blue);
|
||||
--dropdown-border-color: var(--input-border-color);
|
||||
--policy-border-color: #ccc;
|
||||
--box-shadow-color: lightgrey;
|
||||
--admin-disabled-input-color: var(--dark-blue);
|
||||
|
||||
--custom-checkbox-border-color: #ffffff;
|
||||
--custom-checkbox-checked-bg-color: #ffffff;
|
||||
--custom-checkbox-checked-color: #090909;
|
||||
--custom-checkbox-border-color: #665f54;
|
||||
--custom-checkbox-checked-bg-color: #575e62;
|
||||
--custom-checkbox-checked-color: #e8e6e3;
|
||||
|
||||
--calendar-border-color: #c4c7cf;
|
||||
--calendar-week-end-color: #f5f5f5;
|
||||
--calendar-today-color: #bec6ce;
|
||||
--calendar-border-color: var(--input-border-color);
|
||||
--calendar-week-end-color: #1e2021;
|
||||
--calendar-day-color: var(--app-color);
|
||||
--calendar-today-color: #202324;
|
||||
--calendar-workouts-color: #233240;
|
||||
--calendar-workouts-box-shadow-0: rgba(0, 0, 0, 0.2);
|
||||
--calendar-workouts-box-shadow-1: rgba(0, 0, 0, 0.19);
|
||||
|
||||
--modal-background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
--nav-bar-background-color: #090909;
|
||||
--nav-bar-background-color: var(--dark-blue);
|
||||
--nav-bar-link-active: #ffffff;
|
||||
--nav-border-color: #c5ccdb;
|
||||
--nav-border-color: var(--input-border-color);
|
||||
|
||||
--mobile-menu-selected-color: #090909;
|
||||
--mobile-menu-selected-color: var(--dark-blue);
|
||||
--mobile-menu-selected-bgcolor: #9da3af;
|
||||
|
||||
--footer-background-color: #090909;
|
||||
--footer-border-color: #ebeef3;
|
||||
--footer-color: #6f7070;
|
||||
--footer-background-color: var(--dark-blue);
|
||||
--footer-border-color: var(--input-border-color);
|
||||
--footer-color: #9f968a;
|
||||
|
||||
--form-info: var(--app-color);
|
||||
|
||||
--alert-background-color: #d6dde3;
|
||||
--alert-color: #3f3f3f;
|
||||
--info-background-color: #33353a;
|
||||
--info-color: var(--app-color);
|
||||
--error-background-color: #ffd2d2;
|
||||
--error-color: #db1924;
|
||||
--success-background-color: #d9ecd9;
|
||||
--success-color: #306430;
|
||||
--error-background-color: #4e0000;
|
||||
--error-color: #ea464f;
|
||||
--success-background-color: #24391c;
|
||||
--success-color: #97cd97;
|
||||
|
||||
--disabled-background-color: #e0e0e0;
|
||||
--disabled-background-color: var(--dark-blue);
|
||||
--disabled-border-color: transparent;
|
||||
--disabled-color: #727272;
|
||||
--disabled-sport-color: #616161;
|
||||
|
||||
--scroll-button-bg-color: rgba(255, 255, 255, 0.7);
|
||||
--scroll-button-bg-color: var(--dark-blue);
|
||||
|
||||
--workout-trophy-color: #daa520;
|
||||
--workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg)
|
||||
brightness(97%) contrast(96%);
|
||||
--workout-no-map-bg-color: #eaeaea;
|
||||
--workout-no-map-color: #585959;
|
||||
--map-control-color: #000000;
|
||||
--map-control-bg-color: #ffffff;
|
||||
--map-control-border-color: #bfc0ab;
|
||||
--map-attribution-text: rgba(255, 255, 255, 0.7);
|
||||
|
||||
--cell-heading-bg-color: #eeeeee;
|
||||
--cell-heading-color: #696969;
|
||||
@ -71,10 +92,10 @@
|
||||
--svg-filter: drop-shadow(10px 10px 10px var(--app-shadow-color));
|
||||
|
||||
--password-bg-color: #d7dadf;
|
||||
--password-color-weak: #e46d6e;
|
||||
--password-color-medium: #f8bc4a;
|
||||
--password-color-good: #acc578;
|
||||
--password-color-strong: #57c255;
|
||||
--password-color-weak: #831819;
|
||||
--password-color-medium: #9e6906;
|
||||
--password-color-good: #4b5826;
|
||||
--password-color-strong: #4a8c32;
|
||||
|
||||
--scroll-thumb-color: #949697;
|
||||
}
|
||||
|
@ -8,6 +8,7 @@
|
||||
--app-loading-top-color: var(--app-color);
|
||||
|
||||
--button-hover-color: #ffffff;
|
||||
--button-transparent-hover-color: var(--app-color);
|
||||
--button-cancel-bg-color: #ffffff;
|
||||
--button-cancel-color: var(--app-color);
|
||||
--button-confirm-bg-color: #ffffff;
|
||||
@ -20,8 +21,14 @@
|
||||
--card-border-color: #c4c7cf;
|
||||
--input-border-color: #9da3af;
|
||||
--input-bg-color: #ffffff;
|
||||
--input-color: var(--app-color);
|
||||
--input-error-color: #dc3545;
|
||||
--dropdown-hover-color: #eff0f5;
|
||||
--dropdown-background-color: #ffffff;
|
||||
--dropdown-border-color: lightgrey;
|
||||
--policy-border-color: #ccc;
|
||||
--box-shadow-color: lightgrey;
|
||||
--admin-disabled-input-color: #ffffff;
|
||||
|
||||
--custom-checkbox-border-color: #6d797a;
|
||||
--custom-checkbox-checked-bg-color: #6d797a;
|
||||
@ -29,7 +36,11 @@
|
||||
|
||||
--calendar-border-color: #c4c7cf;
|
||||
--calendar-week-end-color: #f5f5f5;
|
||||
--calendar-day-color: var(--app-color-light);
|
||||
--calendar-today-color: #eff1f3;
|
||||
--calendar-workouts-color: whitesmoke;
|
||||
--calendar-workouts-box-shadow-0: rgba(0, 0, 0, 0.2);
|
||||
--calendar-workouts-box-shadow-1: rgba(0, 0, 0, 0.19);
|
||||
|
||||
--modal-background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
@ -44,6 +55,8 @@
|
||||
--footer-border-color: #ebeef3;
|
||||
--footer-color: #6f7070;
|
||||
|
||||
--form-info: var(--alert-color);
|
||||
|
||||
--alert-background-color: #d6dde3;
|
||||
--alert-color: #3f3f3f;
|
||||
--info-background-color: #e5e7ea;
|
||||
@ -54,6 +67,7 @@
|
||||
--success-color: #306430;
|
||||
|
||||
--disabled-background-color: #e0e0e0;
|
||||
--disabled-border-color: transparent;
|
||||
--disabled-color: #727272;
|
||||
--disabled-sport-color: #616161;
|
||||
|
||||
@ -64,6 +78,10 @@
|
||||
brightness(97%) contrast(96%);
|
||||
--workout-no-map-bg-color: #eaeaea;
|
||||
--workout-no-map-color: #585959;
|
||||
--map-control-color: #000000;
|
||||
--map-control-bg-color: #ffffff;
|
||||
--map-control-border-color: #bfc0ab;
|
||||
--map-attribution-text: rgba(255, 255, 255, 0.7);
|
||||
|
||||
--cell-heading-bg-color: #eeeeee;
|
||||
--cell-heading-color: #696969;
|
||||
|
@ -72,8 +72,8 @@
|
||||
&:disabled {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: textfield;
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
background-color: var(--admin-disabled-input-color);
|
||||
border-color: var(--admin-disabled-input-color);
|
||||
color: var(--app-color);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user