fix(theme): cosmetic changes

clabroche · Feb 20, 2024 · 0da5cee · 0da5cee
1 parent f919066
commit 0da5cee
Show file tree

Hide file tree

Showing 26 changed files with 459 additions and 212 deletions.
diff --git a/fronts/app/src/App.vue b/fronts/app/src/App.vue
@@ -97,108 +97,7 @@ export default {
 <style lang="scss">
 @import '~@fortawesome/fontawesome-free/css/all.min.css';
 @import './assets/fonts/Jost/Jost.css';
-pre {
-    white-space: pre-wrap;       /* Since CSS 2.1 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
-}
-/* width */
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: #e1e1e1;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #aaa;
-  border-radius: 5px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #666;
-}
-body {
-  margin: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: var(--system-backgroundColor);
-  color: var(--system-color);
-  transition: 300ms;
-  font-size: 0.9em;
-  font-family: JOST, sans-serif;
-}
-button {
-  padding: 10px;
-  margin: 3px;
-  border-radius: 4px;
-  $gradient: 50deg, #1d95db 0%, #074971 100%;
-  background: -webkit-linear-gradient($gradient);
-  background: linear-gradient($gradient);
-  color: white;
-  font-weight: bold;
-  border:none;
-  transition: 300ms;
-  cursor: pointer;
-  transition: 300ms;
-  &:hover {
-    $gradient: 50deg, #3e7b9e 0%, #053857 100%;
-    background: -webkit-linear-gradient($gradient);
-    background: linear-gradient($gradient);
-  }
-  &.bordered {
-    border: 1px solid #074971;
-    color: #074971;
-    background: none;
-  }
-  &.small {
-    padding: 5px;
-    font-size: 0.7em;
-    width: 100px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    i {
-      margin-right: 5px;
-    }
-    .text {
-      flex-grow: 1;
-      text-align: center;
-    }
-  }
-}
-
-button.success {
-  background-color: #41d143;
-  &:hover {
-    background-color: #258d27;
-  }
-}
-
-button[disabled] {
-  background: none;
-  color: #a1a1a1;
-  box-shadow: none;
-  border: 1px solid #a1a1a1;
-  &:hover {
-    box-shadow: none;
-  }
-}
-
-input {
-  padding: 3px 5px;
-  border-radius: 10px;
-  border: 1px solid var(--system-border-borderColor);
-  box-sizing: border-box;
-  background-color: var(--system-backgroundColor);
-}
+@import './assets/theme/index.scss'
 </style>
 
 <style lang="scss" scoped> 

diff --git a/fronts/app/src/assets/theme/_button.scss b/fronts/app/src/assets/theme/_button.scss
@@ -0,0 +1,59 @@
+button {
+  padding: 10px;
+  margin: 3px;
+  border-radius: 4px;
+  @include card-darker();
+  color: white;
+  font-weight: bold;
+  border: none;
+  transition: 300ms;
+  cursor: pointer;
+  transition: 300ms;
+
+  &:hover {
+    @include card-darkest();
+  }
+
+  &.bordered {
+    border: 1px solid #074971;
+    color: #074971;
+    background: none;
+  }
+
+  &.small {
+    padding: 5px;
+    font-size: 0.7em;
+    width: 100px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    i {
+      margin-right: 5px;
+    }
+
+    .text {
+      flex-grow: 1;
+      text-align: center;
+    }
+  }
+}
+
+button.success {
+  background-color: #41d143;
+
+  &:hover {
+    background-color: #258d27;
+  }
+}
+
+button[disabled] {
+  background: none;
+  color: #a1a1a1;
+  box-shadow: none;
+  border: 1px solid #a1a1a1;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
diff --git a/fronts/app/src/assets/theme/_font.scss b/fronts/app/src/assets/theme/_font.scss
@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Logo";
+  src: url("./assets/fonts/MuseoModerno.ttf") format("truetype")
+}
diff --git a/fronts/app/src/assets/theme/_input.scss b/fronts/app/src/assets/theme/_input.scss
@@ -0,0 +1,7 @@
+input {
+  padding: 3px 5px;
+  border-radius: 10px;
+  border: 1px solid var(--system-border-borderColor);
+  box-sizing: border-box;
+  background-color: var(--system-backgroundColor);
+}
diff --git a/fronts/app/src/assets/theme/_lib.scss b/fronts/app/src/assets/theme/_lib.scss
diff --git a/fronts/app/src/assets/theme/_mixin.scss b/fronts/app/src/assets/theme/_mixin.scss
@@ -0,0 +1,64 @@
+@mixin backgroundGradient {
+  $gradient: 160deg, rgba(var(--BgColorAccentGradient), 1), rgba(var(--BgColorAccent), 1);
+  background: var(--headerBgColorAccent);
+  background: -webkit-linear-gradient($gradient);
+  background: linear-gradient($gradient);
+  color: white;
+  ion-icon{
+    color: white;
+  }
+}
+@mixin backgroundGradientImage($opacity, $imageUrl) {
+  $gradient: 160deg, rgba(var(--BgColorAccentGradient), $opacity), rgba(var(--BgColorAccent), $opacity);
+  background: var(--headerBgColorAccent);
+  background: -webkit-linear-gradient($gradient);
+  background: linear-gradient($gradient);
+  color: white;
+  position: relative;
+
+  &::before {
+    content: "";
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url($imageUrl);
+    background-size: cover;
+    background-position: right;
+  }
+}
+
+@mixin card-template($color1, $color2, $color3) {
+  background: $color1;
+  background: linear-gradient(93deg, $color1 0%, $color2 100%);
+  color: white;
+  box-shadow:
+    0 0 5px 0 $color3;
+
+  &::before,
+  &::after {
+    box-shadow:
+      inset 0 0 50px $color1,
+      inset -20px 0 300px $color1,
+      0 0 50px #fff,
+      -10px 0 80px $color1,
+      10px 0 80px $color1;
+  }
+}
+@mixin card() {
+  @include card-template(var(--system-accent-backgroundColor1), var(--system-accent-backgroundColor2), var(--system-accent-backgroundColor3-lighter));
+}
+@mixin card-darker() {
+  @include card-template(var(--system-accent-backgroundColor1-darker), var(--system-accent-backgroundColor2-darker), var(--system-accent-backgroundColor3-darkest));
+}
+@mixin card-darkest() {
+  @include card-template(var(--system-accent-backgroundColor1-darkest), var(--system-accent-backgroundColor2-darkest), var(--system-accent-backgroundColor3-darkest));
+}
+@mixin card-secondary() {
+  @include card-template(var(--system-accent-backgroundColor1-secondary), var(--system-accent-backgroundColor2-secondary), var(--system-accent-backgroundColor3-secondary));
+}
+@mixin card-tertiary() {
+  @include card-template(var(--system-accent-backgroundColor1-tertiary), var(--system-accent-backgroundColor2-tertiary), var(--system-accent-backgroundColor3-tertiary));
+}
diff --git a/fronts/app/src/assets/theme/_reset.scss b/fronts/app/src/assets/theme/_reset.scss
@@ -0,0 +1,74 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, input {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+body {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--system-backgroundColor);
+  color: var(--system-color);
+  transition: 300ms;
+  font-size: 0.9em;
+  font-family: JOST, sans-serif;
+}
+ul {
+  margin: 0;
+  padding: 0;
+  li {
+    margin: 0;
+    list-style-type: none;
+  }
+}
+
+pre {
+  white-space: pre-wrap;
+  /* Since CSS 2.1 */
+  white-space: -moz-pre-wrap;
+  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;
+  /* Opera 4-6 */
+  white-space: -o-pre-wrap;
+  /* Opera 7 */
+  word-wrap: break-word;
+  /* Internet Explorer 5.5+ */
+}
diff --git a/fronts/app/src/assets/theme/_scrollbar.scss b/fronts/app/src/assets/theme/_scrollbar.scss
@@ -0,0 +1,21 @@
+/* width */
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #e1e1e1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #aaa;
+  border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #666;
+}
diff --git a/fronts/app/src/assets/theme/_var.scss b/fronts/app/src/assets/theme/_var.scss
@@ -0,0 +1,11 @@
+:root {
+  --fontSize: 1em;
+  --BgColor: 70, 108, 128;
+  --BgColorAccent: 44, 62, 80;
+  --BgColorAccentGradient: 80, 138, 177;
+  --headerBgColor: rgb(var(--BgColor));
+  --headerBgColorAccent: rgb(var(--BgColorAccent));
+  --headerBgColorAccentGradient: rgb(var(--BgColorAccentGradient));
+  --headerTextColor: white;
+  --headerTextColorAccent: white;
+}
diff --git a/fronts/app/src/assets/theme/index.scss b/fronts/app/src/assets/theme/index.scss
@@ -0,0 +1,8 @@
+@import "reset";
+// @import "lib";
+@import "font";
+@import "var";
+@import "mixin";
+@import "input";
+@import "button";
+@import "scrollbar";