From 20426b90c36854344e3f370eee987ad47e6d2f37 Mon Sep 17 00:00:00 2001
From: Pierre-Jean CHANCELLIER <paidge_cs@hotmail.com>
Date: Thu, 17 Feb 2022 17:06:49 +0100
Subject: [PATCH] improve themes colors
---
assets/css/style.scss | 51 +++++++++++++++-----------
components/btn/Clipboard.vue | 2 +-
components/btn/Pagination.vue | 10 ++---
components/btn/Sort.vue | 6 +--
components/btn/Theme.vue | 5 ++-
components/certif/List.vue | 6 +--
components/member/Card.vue | 2 +-
components/member/List.vue | 6 +--
components/navigation/Bar.vue | 12 +++---
components/navigation/Breadcrumb.vue | 2 +-
components/navigation/Loader.vue | 2 +-
components/navigation/menu/Group.vue | 8 +++-
components/navigation/menu/Sidebar.vue | 20 +++++-----
layouts/default.vue | 33 +++++++++--------
pages/lexique.vue | 4 +-
pages/parametres.vue | 2 +-
pages/previsions/index.vue | 6 +--
17 files changed, 96 insertions(+), 81 deletions(-)
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 1e73309..764c6f8 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,44 +1,58 @@
// Bootstrap variables customisation
// Fonts & Typo
$link-decoration: none;
-$text-muted: var(--text-secondary-color);
+$text-muted: var(--txt-muted-color);
$font-family-base: Montserrat, Helvetica, Arial, serif;
$small-font-size: 70%;
+// Forms
+$form-check-input-checked-bg-color: var(--txt-secondary-color);
+
// Badges
$badge-font-size: 0.7em;
$badge-font-weight: 500;
// Tables;
-$table-border-color: var(--background-color-primary);
-$table-bg: var(--background-color-primary);
-$table-color: var(--text-primary-color);
+$table-th-font-weight: 500;
+$table-bg: var(--bg-primary-color);
+$table-color: var(--txt-primary-color);
$table-hover-bg: rgba(0, 0, 255, 0.075);
+$table-striped-bg: var(--bg-menu-color);
// Breadcrumb
-$breadcrumb-bg: var(--background-color-secondary);
-$breadcrumb-active-color: var(--text-primary-color);
-$breadcrumb-divider-color: var(--text-primary-color);
+$breadcrumb-bg: var(--bg-menu-color);
+$breadcrumb-active-color: var(--txt-primary-color);
+$breadcrumb-divider-color: var(--txt-primary-color);
// List-groups
-$list-group-bg: var(--background-color-secondary);
+$list-group-bg: transparent;
+$list-group-color: var(--txt-secondary-color);
$list-group-active-bg: rgba(0, 0, 255, 0.075);
-$list-group-active-color: var(--text-primary-color);
-$list-group-color: var(--text-primary-color);
+$list-group-active-color: var(--txt-secondary-color);
+$list-group-border-color: var(--border-color);
// Cards
-$card-bg: var(--background-color-secondary);
+$card-bg: var(--bg-secondary-color);
// Mark
$mark-padding: 0.2em 0;
$mark-bg: yellow;
// Colors
-$info: #0a8299;
+$border-color: var(--border-color);
@import "font";
@import "bootstrap";
+body {
+ background: var(--bg-primary-color);
+ color: var(--txt-primary-color);
+}
+
+.txt-secondary {
+ color: var(--txt-secondary-color);
+}
+
.badge.bg-warning {
color: var(--bs-dark);
}
@@ -50,14 +64,9 @@ $info: #0a8299;
&.sortable {
thead {
- tr {
- border-left: 1px solid var(--text-primary-color);
- }
-
- th {
- border-right: 1px solid;
- border-top: 1px solid;
- border-bottom: 1px solid;
+ th:not(:last-child) {
+ border-right: 1px solid var(--border-color);
+ border-bottom: 1px solid var(--border-color);
}
}
@@ -86,7 +95,7 @@ $info: #0a8299;
&-action:not(.active) {
&:hover {
background: rgba(0, 0, 255, 0.075);
- color: var(--text-primary-color);
+ color: var(--txt-secondary-color);
}
}
diff --git a/components/btn/Clipboard.vue b/components/btn/Clipboard.vue
index 361bf39..46f3266 100644
--- a/components/btn/Clipboard.vue
+++ b/components/btn/Clipboard.vue
@@ -2,7 +2,7 @@
<div class="clipboard input-group mb-3 mx-auto">
<button
id="btncopy"
- class="btn btn-info px-4 py-1"
+ class="btn btn-secondary px-4 py-1"
type="button"
v-tooltip="$t('copie') + ' !'"
@click="copyText">
diff --git a/components/btn/Pagination.vue b/components/btn/Pagination.vue
index ae53984..6dc4293 100644
--- a/components/btn/Pagination.vue
+++ b/components/btn/Pagination.vue
@@ -1,10 +1,9 @@
<template>
<div class="text-center" v-if="arrayLength > pageSize">
<button
- class="btn"
+ class="btn btn-secondary"
:class="{
- 'btn-info': currentPage > 1,
- 'btn-secondary': currentPage == 1
+ 'opacity-25': currentPage == 1
}"
@click="prevPage"
:disabled="currentPage == 1">
@@ -14,10 +13,9 @@
>{{ currentPage }} / {{ Math.ceil(arrayLength / pageSize) }}</span
>
<button
- class="btn"
+ class="btn btn-secondary"
:class="{
- 'btn-info': currentPage * pageSize < arrayLength,
- 'btn-secondary': currentPage * pageSize >= arrayLength
+ 'opacity-25': currentPage * pageSize >= arrayLength
}"
@click="nextPage"
:disabled="currentPage * pageSize >= arrayLength">
diff --git a/components/btn/Sort.vue b/components/btn/Sort.vue
index 97a0b41..71cedae 100644
--- a/components/btn/Sort.vue
+++ b/components/btn/Sort.vue
@@ -43,12 +43,12 @@ export default {
align-items: center;
min-height: 50px;
cursor: pointer;
- background: var(--bs-info);
- color: white;
+ background: var(--bg-secondary-color);
+ color: var(--txt-secondary-color);
&:focus,
&:hover {
- background: #086375;
+ filter: brightness(90%);
}
}
</style>
diff --git a/components/btn/Theme.vue b/components/btn/Theme.vue
index aeda1e5..6638e0d 100644
--- a/components/btn/Theme.vue
+++ b/components/btn/Theme.vue
@@ -62,7 +62,8 @@ export default {
}
.switch-label {
- background: var(--text-primary-color);
+ --element-size: 4rem;
+ background: var(--txt-primary-color);
border-radius: var(--element-size);
cursor: pointer;
font-size: calc(var(--element-size) * 0.3);
@@ -74,7 +75,7 @@ export default {
}
.switch-toggle {
- background-color: var(--background-color-primary);
+ background-color: var(--bg-primary-color);
top: calc(var(--element-size) * 0.07);
left: calc(var(--element-size) * 0.07);
height: calc(var(--element-size) * 0.4);
diff --git a/components/certif/List.vue b/components/certif/List.vue
index 29ac12e..0783047 100644
--- a/components/certif/List.vue
+++ b/components/certif/List.vue
@@ -1,7 +1,7 @@
<template>
<div class="table-responsive" v-if="certifs.length > 0">
<BtnSearch v-model="search" class="px-2 pt-2" v-if="certifs.length > 5" />
- <table class="table table-striped table-hover table-fixed sortable">
+ <table class="table table-striped table-hover table-fixed sortable border">
<thead class="thead-light">
<tr>
<th class="p-0" @click="sort('uid')">
@@ -33,7 +33,7 @@
})
)
">
- <th scope="row" class="py-1">
+ <td class="py-1">
<div class="d-flex">
<span v-if="$favourites.list.includes(certif.uid)">★ </span>
<div class="text-truncate">{{ certif.uid }}</div>
@@ -51,7 +51,7 @@
:dateDispo="certif.minDate"
:certifs="certif.sent_certifications"
v-if="certif.status == 'MEMBER'" />
- </th>
+ </td>
<td class="text-right py-1">
<BadgeDate :date="certif.expires_on" styleDate="short" />
<span class="badge bg-secondary" v-if="certif.pending">{{
diff --git a/components/member/Card.vue b/components/member/Card.vue
index e4dd746..19efd13 100644
--- a/components/member/Card.vue
+++ b/components/member/Card.vue
@@ -11,7 +11,7 @@
</h2>
<button
id="favori"
- class="btn btn-info"
+ class="btn btn-secondary"
v-tooltip="
$favourites.list.includes(hash.uid)
? $t('favoris.enregistre')
diff --git a/components/member/List.vue b/components/member/List.vue
index 4c9d291..353a796 100644
--- a/components/member/List.vue
+++ b/components/member/List.vue
@@ -1,7 +1,7 @@
<template>
<div class="table-responsive pb-3">
<table
- class="table table-striped table-hover table-fixed sortable text-center">
+ class="table table-striped table-hover table-fixed sortable border text-center">
<thead class="thead-light">
<tr>
<th
@@ -66,7 +66,7 @@
</thead>
<tbody>
<tr v-for="member in membersSorted" :key="member.uid">
- <th scope="row" @click="redirect(member.hash)">
+ <td @click="redirect(member.hash)">
<div class="d-flex justify-content-center">
<span v-if="$favourites.list.includes(member.uid)">★ </span>
<div class="text-truncate">{{ member.uid }}</div>
@@ -87,7 +87,7 @@
<div v-if="['adhesion', 'certif'].includes(type)" class="d-sm-none">
<BadgeDate :date="getDate(member)" styleDate="short" />
</div>
- </th>
+ </td>
<td
class="d-none d-lg-table-cell"
v-if="['search', 'favoris'].includes(type)"
diff --git a/components/navigation/Bar.vue b/components/navigation/Bar.vue
index cb91b1d..fc7b3c4 100644
--- a/components/navigation/Bar.vue
+++ b/components/navigation/Bar.vue
@@ -47,7 +47,7 @@ $btn-width: 50px;
--menu-width: 0px;
width: 100%;
z-index: 100;
- background: var(--background-color-primary);
+ background: var(--bg-primary-color);
transition: width 0.5s ease-in-out;
.open & {
@@ -66,10 +66,10 @@ nav.breadcrumb-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
- background: var(--background-color-secondary);
+ background: var(--bg-menu-color);
a {
- color: var(--text-primary-color);
+ color: var(--txt-primary-color);
}
.breadcrumb-item.active {
@@ -87,7 +87,7 @@ nav.breadcrumb-wrapper {
display: block;
height: 4px;
width: 0.8 * $btn-width;
- background: var(--text-primary-color);
+ background: var(--txt-primary-color);
content: "";
position: absolute;
transition-property: transform;
@@ -138,17 +138,15 @@ nav.breadcrumb-wrapper {
}
.menu {
- background: var(--background-color-primary);
width: var(--menu-size);
top: 0;
z-index: 1200;
height: 100%;
- padding: 1.1rem 0.5rem 0;
transition: left 0.5s ease-in-out;
left: -400px;
h1 {
- color: var(--text-primary-color);
+ color: var(--txt-primary-color);
}
.open & {
diff --git a/components/navigation/Breadcrumb.vue b/components/navigation/Breadcrumb.vue
index 76dff42..760e214 100644
--- a/components/navigation/Breadcrumb.vue
+++ b/components/navigation/Breadcrumb.vue
@@ -1,5 +1,5 @@
<template>
- <nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded">
+ <nav aria-label="Fil d'Ariane" class="breadcrumb-wrapper rounded border">
<ol class="breadcrumb m-0 p-0 d-none d-sm-flex">
<li
class="breadcrumb-item"
diff --git a/components/navigation/Loader.vue b/components/navigation/Loader.vue
index 50314b6..5aa3db5 100644
--- a/components/navigation/Loader.vue
+++ b/components/navigation/Loader.vue
@@ -23,6 +23,6 @@ export default {
left: 50%;
transform: translateX(-50%);
--color: #391855;
- color: var(--text-primary-color);
+ color: var(--txt-primary-color);
}
</style>
diff --git a/components/navigation/menu/Group.vue b/components/navigation/menu/Group.vue
index 4fa32b5..9d6056a 100644
--- a/components/navigation/menu/Group.vue
+++ b/components/navigation/menu/Group.vue
@@ -1,6 +1,6 @@
<template>
<div class="mb-4">
- <h2 class="small text-muted text-uppercase ms-4 mb-0 pb-2 border-bottom">
+ <h2 class="small text-muted text-uppercase ms-4 mb-0 pb-2">
{{ $t(menu.title) }}
</h2>
<div class="nav navbar-nav list-group list-group-flush">
@@ -30,3 +30,9 @@ export default {
}
}
</script>
+
+<style lang="scss" scoped>
+h2 {
+ letter-spacing: 0.02rem;
+}
+</style>
diff --git a/components/navigation/menu/Sidebar.vue b/components/navigation/menu/Sidebar.vue
index 19b038d..be3e415 100644
--- a/components/navigation/menu/Sidebar.vue
+++ b/components/navigation/menu/Sidebar.vue
@@ -1,15 +1,15 @@
<template>
- <aside class="menu shadow-sm position-fixed d-flex flex-column">
- <div class="pb-3">
- <nuxt-link :to="localePath('/')" class="d-flex">
+ <aside class="menu position-fixed d-flex flex-column border-end">
+ <div class="mb-4">
+ <nuxt-link :to="localePath('/')" class="d-flex px-3 pt-3">
<img :src="$icon(512)" alt="Accueil" class="logo" />
<div>
<h1 class="h3">Wotwizard</h1>
<small class="text-muted">{{ $t("slogan") }}</small>
</div>
</nuxt-link>
- <div class="text-info small mt-2">API graphQL v{{ version }}</div>
- <div class="text-info">
+ <div class="p-3 border-bottom border-2 text-muted">
+ <div class="small mt-2">API graphQL v{{ version }}</div>
<div class="small" v-if="countMax">
{{ $t("bloc.title") }} n°<span class="font-weight-bold">{{
countMax.number
@@ -24,7 +24,7 @@
aria-label="Close"
@click="toggleMenu"></button>
</div>
- <nav class="pt-4 rounded flex-grow-1">
+ <nav class="py-2 rounded flex-grow-1">
<NavigationMenuGroup
v-for="menu in menus"
:key="menu.title"
@@ -32,7 +32,7 @@
@toggleMenu="toggleMenu" />
</nav>
<div class="font-weight-bold text-center" style="font-size: 75%">
- <NuxtLink :to="localePath('a-propos')" class="d-block py-3 text-info"
+ <NuxtLink :to="localePath('a-propos')" class="d-block py-3 txt-secondary"
>v{{ $config.clientVersion }} | {{ $t("apropos.title") }}</NuxtLink
>
</div>
@@ -64,11 +64,13 @@ export default {
</script>
<style lang="scss" scoped>
+aside {
+ background: var(--bg-menu-color);
+}
+
nav {
overflow-x: hidden;
overflow-y: auto;
- scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
- background: var(--background-color-secondary);
}
</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index bfdc5ce..86da2f6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,7 +3,7 @@
<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
<Nuxt />
<a
- class="scrollToTop fade bg-info position-fixed text-white d-flex align-items-center justify-content-center rounded"
+ class="scrollToTop fade bg-secondary position-fixed text-white d-flex align-items-center justify-content-center rounded"
href="#"
@click="scrollToTop($event)">
<outline-chevron-double-up-icon class="icon" />
@@ -70,31 +70,32 @@ export default {
<style lang="scss">
/* Define styles for the default root window element */
:root {
- --text-primary-color: var(--bs-dark);
- --text-secondary-color: #8a8a8a;
- --background-color-primary: var(--bs-white);
- --background-color-secondary: #e9ecef;
- --element-size: 4rem;
- --menu-size: 320px;
+ --txt-primary-color: #000;
+ --txt-secondary-color: #435770;
+ --txt-muted-color: #5e7690;
+ --bg-primary-color: #fff;
+ --bg-secondary-color: #e9ecef;
+ --bg-menu-color: #fafafa;
+ --border-color: #d8d8d8;
}
/* Define styles for the root window with dark - mode preference */
:root.dark-theme {
- --bs-body-bg: var(--bs-dark);
- --bs-body-color: var(--bs-white);
- --text-primary-color: var(--bs-white);
- --text-secondary-color: #c9c9c9;
- --background-color-primary: var(--bs-dark);
- --background-color-secondary: #5d6164;
- .text-info {
- color: #22b2c2 !important;
- }
+ --txt-primary-color: #fff;
+ --txt-secondary-color: #c4cbd3;
+ --txt-muted-color: #9fa2a4;
+ --bg-primary-color: #111828;
+ --bg-secondary-color: #202938;
+ --bg-menu-color: #323949;
+ --border-color: #394050;
}
.app {
+ --menu-size: 320px;
transition: margin 0.5s ease-in-out;
scroll-behavior: smooth;
}
+
main {
--paddingTop: 96px;
padding-top: var(--paddingTop);
diff --git a/pages/lexique.vue b/pages/lexique.vue
index c71a3a8..9061987 100644
--- a/pages/lexique.vue
+++ b/pages/lexique.vue
@@ -7,7 +7,7 @@
</div>
</div>
<div class="table-responsive mt-1">
- <table class="table table-striped">
+ <table class="table table-striped table-bordered">
<thead>
<tr class="d-none d-sm-table-row">
<th>{{ $t("mot") }}</th>
@@ -141,7 +141,7 @@ export default {
.rech-lexique {
position: sticky;
top: var(--paddingTop);
- background: var(--background-color-primary);
+ background: var(--bg-primary-color);
h2 {
margin: 3rem 0;
diff --git a/pages/parametres.vue b/pages/parametres.vue
index 48cc61a..ed8afe4 100644
--- a/pages/parametres.vue
+++ b/pages/parametres.vue
@@ -7,7 +7,7 @@
</transition>
<transition name="fade">
<div class="table-responsive" v-if="allParameters">
- <table class="table table-striped">
+ <table class="table table-striped table-bordered">
<thead>
<tr>
<th>{{ $t("nom") }}</th>
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index f00d526..8331085 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -46,7 +46,7 @@
<div v-if="display == 'forecastsByNames'">
<h3>{{ $t("previsions.parmembre") }}</h3>
<div class="table-responsive">
- <table class="table table-striped table-hover">
+ <table class="table table-striped table-hover border">
<tbody>
<tr
v-for="forecast in wwResult.forecastsByNames"
@@ -96,7 +96,7 @@
<div v-if="display == 'forecastsByDates'">
<h3>{{ $t("previsions.pardate") }}</h3>
<div class="table-responsive">
- <table class="table table-striped">
+ <table class="table table-striped border">
<tbody>
<tr
v-for="forecast in wwResult.forecastsByDates"
@@ -275,7 +275,7 @@ export default {
background: transparent;
&:hover {
background: rgba(0, 0, 255, 0.075);
- color: var(--text-primary-color);
+ color: var(--txt-primary-color);
}
}
--
GitLab