Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - add missing color variables and update dark mode theme

Browse Source
This commit is contained in:
Sam 2023-12-16 20:14:05 +01:00
parent 94fd50d404
commit 3653239022
13 changed files with 117 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fittrackee_client/src/App.vue
View File

@ -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;

6
fittrackee_client/src/components/Common/Dropdown.vue
View File

@ -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 {

2
fittrackee_client/src/components/Common/StaticMap.vue
View File

@ -69,7 +69,7 @@
}
.map-attribution-text {
background-color: rgba(255, 255, 255, 0.7);
background-color: var(--map-attribution-text);
}
}
</style>

2
fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue
View File

@ -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>

6
fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue
View File

@ -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;

25
fittrackee_client/src/components/NavBar.vue
View File

@ -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>

2
fittrackee_client/src/components/User/ProfileEdition/UserPrivacyPolicyValidation.vue
View File

@ -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;

6
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
View File

@ -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;

2
fittrackee_client/src/components/Workouts/WorkoutsList.vue
View File

@ -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 {

15
fittrackee_client/src/scss/base.scss
View File

@ -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;

91
fittrackee_client/src/scss/colors-dark.scss
View File

@ -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;
}

18
fittrackee_client/src/scss/colors.scss
View File

@ -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;

4
fittrackee_client/src/views/AdminView.vue
View File

@ -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);
}
}