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 { .scroll-button {
background-color: var(--scroll-button-bg-color); background-color: var(--scroll-button-bg-color);
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: 1px 1px 3px lightgrey; box-shadow: 1px 1px 3px var(--app-shadow-color);
display: none; display: none;
padding: 0 $default-padding; padding: 0 $default-padding;

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

@ -70,14 +70,14 @@
.dropdown-list { .dropdown-list {
list-style-type: none; list-style-type: none;
background-color: #ffffff; background-color: var(--dropdown-background-color);
padding: 0 !important; padding: 0 !important;
margin-top: 5px; margin-top: 5px;
margin-left: -20px !important; margin-left: -20px !important;
position: absolute; position: absolute;
text-align: left; text-align: left;
border: solid 1px lightgrey; border: solid 1px var(--dropdown-border-color);
box-shadow: 2px 2px 5px lightgrey; box-shadow: 2px 2px 5px var(--app-shadow-color);
width: auto !important; width: auto !important;
.dropdown-item { .dropdown-item {

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

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

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

@ -34,7 +34,7 @@
padding: $default-padding * 0.5; padding: $default-padding * 0.5;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: var(--app-color-light); color: var(--calendar-day-color);
} }
} }
</style> </style>

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

@ -88,11 +88,11 @@
padding-left: 40px; padding-left: 40px;
.more-workouts { .more-workouts {
background: whitesmoke; background: var(--calendar-workouts-color);
border-radius: 4px; border-radius: 4px;
box-shadow: box-shadow:
0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 var(--calendar-workouts-box-shadow-0),
0 6px 20px 0 rgba(0, 0, 0, 0.19); 0 6px 20px 0 var(--calendar-workouts-box-shadow-1);
position: absolute; position: absolute;
top: 52px; top: 52px;
left: 0; left: 0;

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

@ -76,14 +76,20 @@
{{ $t('user.REGISTER') }} {{ $t('user.REGISTER') }}
</router-link> </router-link>
</div> </div>
<button <div class="theme-button">
class="nav-button transparent" <button
@click="toggleTheme" class="nav-button transparent"
:title="$t('user.TOGGLE_THEME')" @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> <i
</button> class="fa nav-button-fa"
:class="themeIcon"
aria-hidden="true"
/>
<span class="nav-button-text">{{ $t('user.TOGGLE_THEME') }}</span>
</button>
</div>
<Dropdown <Dropdown
v-if="availableLanguages && language" v-if="availableLanguages && language"
class="nav-item" class="nav-item"
@ -394,6 +400,9 @@
padding: 0; padding: 0;
} }
} }
.theme-button {
margin-left: $default-padding * 2;
}
} }
} }
</style> </style>

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

@ -92,7 +92,7 @@
.policy-content { .policy-content {
height: 500px; height: 500px;
border: 1px solid #ccc; border: 1px solid var(--policy-border-color);
overflow: auto; overflow: auto;
margin: $default-margin; margin: $default-margin;
border-radius: $border-radius; border-radius: $border-radius;

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

@ -214,11 +214,11 @@
line-height: 400px; line-height: 400px;
} }
.map-control { .map-control {
background: #ffffff; background: var(--map-control-bg-color);
padding: 5px 10px; padding: 5px 10px;
border: 2px solid #bfc0ab; border: 2px solid var(--map-control-border-color);
border-radius: 3px; border-radius: 3px;
color: #000000; color: var(--map-control-color);
} }
::v-deep(.fullscreen) { ::v-deep(.fullscreen) {
display: flex; display: flex;

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

@ -354,7 +354,7 @@
} }
.static-map { .static-map {
display: none; display: none;
box-shadow: 3px 3px 3px 1px lightgrey; box-shadow: 3px 3px 3px 1px var(--app-shadow-color);
} }
} }
.workout-title:hover .static-map { .workout-title:hover .static-map {

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

@ -3,6 +3,10 @@
@import 'fonts'; @import 'fonts';
@import 'vars'; @import 'vars';
html [data-theme='dark'] {
color-scheme: dark;
}
body { body {
margin: 0; margin: 0;
overflow-y: scroll; overflow-y: scroll;
@ -56,6 +60,7 @@ select {
background-color: var(--input-bg-color); background-color: var(--input-bg-color);
border-radius: $border-radius; border-radius: $border-radius;
border: solid 1px var(--input-border-color); border: solid 1px var(--input-border-color);
color: var(--input-color);
padding: $default-padding; padding: $default-padding;
&:disabled { &:disabled {
@ -103,13 +108,13 @@ button {
&:disabled, &:disabled,
&.confirm:disabled { &.confirm:disabled {
border-color: transparent; border-color: var(--disabled-border-color);
color: var(--disabled-color); color: var(--disabled-color);
} }
} }
&:hover { &:hover {
background: var(--app-color); background: var( --button-transparent-hover-color);
color: var(--button-hover-color); color: var(--button-hover-color);
} }
@ -129,7 +134,7 @@ button {
background: var(--button-cancel-bg-color); background: var(--button-cancel-bg-color);
color: var(--button-cancel-color); color: var(--button-cancel-color);
&:hover { &:hover {
background: var(--app-color); background: var( --button-transparent-hover-color);
color: var(--button-hover-color); color: var(--button-hover-color);
} }
} }
@ -138,7 +143,7 @@ button {
background: var(--button-confirm-bg-color); background: var(--button-confirm-bg-color);
color: var(--button-confirm-color); color: var(--button-confirm-color);
&:hover { &:hover {
background: var(--app-color); background: var( --button-transparent-hover-color);
color: var(--button-hover-color); color: var(--button-hover-color);
} }
} }
@ -195,7 +200,7 @@ button {
} }
.form-info { .form-info {
color: var(--alert-color); color: var(--form-info);
font-size: 0.8em; font-size: 0.8em;
margin-top: -0.2 * $default-margin; margin-top: -0.2 * $default-margin;
padding: 0 $default-padding * 1.5; padding: 0 $default-padding * 1.5;

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

@ -1,69 +1,90 @@
:root [data-theme='dark'] { :root [data-theme='dark'] {
--app-background-color: #090909; --dark-blue: #181a1b;
--app-color: #ffffff; --light-blue: #aec2d3;
--app-background-color: var(--dark-blue);
--app-color: var(--light-blue);
--app-color-light: #6f7070; --app-color-light: #6f7070;
--app-a-color: #ffffff; --app-a-color: var(--light-blue);
--app-shadow-color: lightgrey; --app-shadow-color: #383d3f;
--app-loading-color: #f3f3f3; --app-loading-color: #f3f3f3;
--app-loading-top-color: var(--app-color); --app-loading-top-color: var(--app-color);
--button-hover-color: #090909; --button-hover-color: var(--app-color);
--button-cancel-bg-color: #090909; --button-transparent-hover-color: #233240;
--button-cancel-bg-color: var(--dark-blue);
--button-cancel-color: var(--app-color); --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-confirm-color: var(--app-color);
--button-danger-bg-color: #090909; --button-danger-bg-color: var(--dark-blue);
--button-danger-color: #dc3545; --button-danger-color: #dc3545;
--button-danger-hover-bg-color: #dc3545; --button-danger-hover-bg-color: #dc3545;
--button-danger-hover-color: #090909; --button-danger-hover-color: var(--dark-blue);
--card-border-color: #c4c7cf; --card-border-color: #494f52;
--input-border-color: #9da3af; --input-border-color: #494f52;
--input-bg-color: #8c8c8c; --input-bg-color: var(--dark-blue);
--input-color: var(--app-color);
--input-error-color: #dc3545; --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-border-color: #665f54;
--custom-checkbox-checked-bg-color: #ffffff; --custom-checkbox-checked-bg-color: #575e62;
--custom-checkbox-checked-color: #090909; --custom-checkbox-checked-color: #e8e6e3;
--calendar-border-color: #c4c7cf; --calendar-border-color: var(--input-border-color);
--calendar-week-end-color: #f5f5f5; --calendar-week-end-color: #1e2021;
--calendar-today-color: #bec6ce; --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); --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-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; --mobile-menu-selected-bgcolor: #9da3af;
--footer-background-color: #090909; --footer-background-color: var(--dark-blue);
--footer-border-color: #ebeef3; --footer-border-color: var(--input-border-color);
--footer-color: #6f7070; --footer-color: #9f968a;
--form-info: var(--app-color);
--alert-background-color: #d6dde3; --alert-background-color: #d6dde3;
--alert-color: #3f3f3f; --alert-color: #3f3f3f;
--info-background-color: #33353a; --info-background-color: #33353a;
--info-color: var(--app-color); --info-color: var(--app-color);
--error-background-color: #ffd2d2; --error-background-color: #4e0000;
--error-color: #db1924; --error-color: #ea464f;
--success-background-color: #d9ecd9; --success-background-color: #24391c;
--success-color: #306430; --success-color: #97cd97;
--disabled-background-color: #e0e0e0; --disabled-background-color: var(--dark-blue);
--disabled-border-color: transparent;
--disabled-color: #727272; --disabled-color: #727272;
--disabled-sport-color: #616161; --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-trophy-color: #daa520;
--workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg) --workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg)
brightness(97%) contrast(96%); brightness(97%) contrast(96%);
--workout-no-map-bg-color: #eaeaea; --workout-no-map-bg-color: #eaeaea;
--workout-no-map-color: #585959; --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-bg-color: #eeeeee;
--cell-heading-color: #696969; --cell-heading-color: #696969;
@ -71,10 +92,10 @@
--svg-filter: drop-shadow(10px 10px 10px var(--app-shadow-color)); --svg-filter: drop-shadow(10px 10px 10px var(--app-shadow-color));
--password-bg-color: #d7dadf; --password-bg-color: #d7dadf;
--password-color-weak: #e46d6e; --password-color-weak: #831819;
--password-color-medium: #f8bc4a; --password-color-medium: #9e6906;
--password-color-good: #acc578; --password-color-good: #4b5826;
--password-color-strong: #57c255; --password-color-strong: #4a8c32;
--scroll-thumb-color: #949697; --scroll-thumb-color: #949697;
} }

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

@ -8,6 +8,7 @@
--app-loading-top-color: var(--app-color); --app-loading-top-color: var(--app-color);
--button-hover-color: #ffffff; --button-hover-color: #ffffff;
--button-transparent-hover-color: var(--app-color);
--button-cancel-bg-color: #ffffff; --button-cancel-bg-color: #ffffff;
--button-cancel-color: var(--app-color); --button-cancel-color: var(--app-color);
--button-confirm-bg-color: #ffffff; --button-confirm-bg-color: #ffffff;
@ -20,8 +21,14 @@
--card-border-color: #c4c7cf; --card-border-color: #c4c7cf;
--input-border-color: #9da3af; --input-border-color: #9da3af;
--input-bg-color: #ffffff; --input-bg-color: #ffffff;
--input-color: var(--app-color);
--input-error-color: #dc3545; --input-error-color: #dc3545;
--dropdown-hover-color: #eff0f5; --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-border-color: #6d797a;
--custom-checkbox-checked-bg-color: #6d797a; --custom-checkbox-checked-bg-color: #6d797a;
@ -29,7 +36,11 @@
--calendar-border-color: #c4c7cf; --calendar-border-color: #c4c7cf;
--calendar-week-end-color: #f5f5f5; --calendar-week-end-color: #f5f5f5;
--calendar-day-color: var(--app-color-light);
--calendar-today-color: #eff1f3; --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); --modal-background-color: rgba(0, 0, 0, 0.3);
@ -44,6 +55,8 @@
--footer-border-color: #ebeef3; --footer-border-color: #ebeef3;
--footer-color: #6f7070; --footer-color: #6f7070;
--form-info: var(--alert-color);
--alert-background-color: #d6dde3; --alert-background-color: #d6dde3;
--alert-color: #3f3f3f; --alert-color: #3f3f3f;
--info-background-color: #e5e7ea; --info-background-color: #e5e7ea;
@ -54,6 +67,7 @@
--success-color: #306430; --success-color: #306430;
--disabled-background-color: #e0e0e0; --disabled-background-color: #e0e0e0;
--disabled-border-color: transparent;
--disabled-color: #727272; --disabled-color: #727272;
--disabled-sport-color: #616161; --disabled-sport-color: #616161;
@ -64,6 +78,10 @@
brightness(97%) contrast(96%); brightness(97%) contrast(96%);
--workout-no-map-bg-color: #eaeaea; --workout-no-map-bg-color: #eaeaea;
--workout-no-map-color: #585959; --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-bg-color: #eeeeee;
--cell-heading-color: #696969; --cell-heading-color: #696969;

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

@ -72,8 +72,8 @@
&:disabled { &:disabled {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: textfield; -moz-appearance: textfield;
background-color: white; background-color: var(--admin-disabled-input-color);
border-color: white; border-color: var(--admin-disabled-input-color);
color: var(--app-color); color: var(--app-color);
} }
} }