rendering styles; view order; i18n

assets/package.json

@@ -14,8 +14,7 @@
     "core-js": "^3.8.3",
     "lodash": "^4.17.21",
     "v-calendar": "^3.1.2",
-    "vue": "^3.2.13",
-    "vue3-carousel": "^0.3.1"
+    "vue": "^3.2.13"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

assets/src/app.js

@@ -1,18 +1,11 @@
 import {Calendar, DatePicker} from 'v-calendar';
 import components from './components'
 
-import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'
-
-
 const App = {
     el: '#app',
     delimiters: ['[[', ']]'],
     components: {
         ...components,
-        Slide,
-        Carousel,
-        Pagination,
-        Navigation,
         ...{
             VCalendar: Calendar,
             VDatepicker: DatePicker

assets/src/assets/common.scss

@@ -25,8 +25,14 @@ input.half-field:not(:active):not(:hover) {
     --highlight-color-2-alpha: rgb(0, 0, 254, 0.7);
     --highlight-color-2-grey: rgba(50, 200, 200, 1);
 
-    --nav-primary-height: 4rem;
-    --nav-secondary-height: 3rem;
+    --nav-primary-height: 3rem;
+    --nav-secondary-height: 2.5rem;
+    --nav-bg: var(--highlight-color);
+    --nav-fg: var(--highlight-color-2);
+    --nav-active-bg: var(--highlight-color-2);
+    --nav-active-fg: var(--highlight-color);
+    --nav-fs: 1rem;
+    --nav-2-fs: 0.8rem;
 
     --button-fg: var(--text-color);
     --button-bg: var(--highlight-color);

assets/src/assets/components.scss

@@ -640,10 +640,10 @@
     }
 
     .button {
-        font-size: v.$text-size-bigger;
+        font-size: v.$text-size-medium;
         height: 100%;
-        padding: 0.2em !important;
-        min-width: 3em;
+        padding: v.$mp-2 !important;
+        min-width: calc(var(--a-player-bar-height) + v.$mp-2 * 2);
         border-radius: 0px;
         transition: background-color 0.5s;
 
@@ -655,9 +655,15 @@
 }
 
     .a-player-bar-content {
+        display: flex;
+        flex-direction: vertical;
+        align-items: center;
         flex-grow: 1;
-        padding-top: v.$mp-3;
-        padding-left: v.$mp-3;
-        padding-right: v.$mp-3;
+        padding: 0 v.$mp-3;
         border-right: 1px black solid;
+
+        .title {
+            max-height: calc( var(--a-player-bar-height) - v.$mp-3 );
+            overflow: hidden;
+        }
     }

assets/src/assets/public.scss

@@ -9,10 +9,8 @@
     padding-bottom: 5rem;
 
     a {
-        background-color: var(--highlight-color-alpha);
         color: var(--highlight-color-2);
         text-decoration: none;
-        padding: v.$mp-2;
 
         &:hover {
             color: var(--text-color);
@@ -93,9 +91,23 @@
     font-size: v.$text-size;
 }
 
+.field.is-horizontal {
+    display: flex;
+    flex-direction: horizontal;
+
+    .label { min-width: 7rem }
+    .control {
+        flex: 1;
+        > * {
+            width: 100%;
+        }
+
+    }
+}
+
 @media screen and (min-width: v.$screen-small) {
     textarea {
-        height: calc( v.$text-size * 10 ) !important;
+        height: calc( v.$text-size * 7 ) !important;
     }
 }
 
@@ -115,6 +127,7 @@
 
 }
 
+
 // ---- main navigation
 .navs {
     position: relative;
@@ -122,7 +135,7 @@
 
 .nav {
     display: flex;
-    background-color: var(--highlight-color);
+    background-color: var(--nav-bg);
 
     &:empty {
         display: none;
@@ -130,11 +143,11 @@
 
     .burger {
         display: none;
-        background-color: var(--highlight-color);
+        background-color: var(--nav-bg);
     }
 
     .nav-item {
-        padding: v.$mp-3;
+        padding: v.$mp-2;
         flex-grow: 1;
         flex-shrink: 1;
         text-align: center;
@@ -154,15 +167,15 @@
         }
 
         &.active {
-            background-color: var(--highlight-color-2);
-            color: var(--highlight-color);
+            background-color: var(--nav-active-bg);
+            color: var(--nav-active-fg);
         }
     }
 
     .nav-menu {
         display: flex;
         flex-grow: 1;
-        background-color: var(--highlight-color);
+        background-color: var(--nav-bg);
 
 
         .dropdown-content {
@@ -190,14 +203,14 @@
         }
 
         .nav-item {
-            font-size: v.$text-size-2;
+            font-size: var(--nav-fs);
             font-weight: v.$weight-bold;
             white-space: nowrap;
         }
     }
 
     &.secondary {
-        background-color: var(--highlight-color-alpha);
+        background-color: var(--nav-bg);
         //position: absolute;
         //width: 100%;
         //box-shadow: 0em 0.5em 0.5em rgba(0, 0, 0, 0.05);
@@ -213,7 +226,7 @@
         }
 
         .nav-item {
-            font-size: v.$text-size;
+            font-size: var(--nav-2-fs);
         }
     }
 }
@@ -226,9 +239,13 @@
 
     &:empty { display: none; }
 
-    a + a:before {
-        content: "/";
-        margin: 0 v.$mp-2;
+    a + a {
+        padding-left: 0;
+
+        &:before {
+            content: "/";
+            margin: 0 v.$mp-2;
+        }
     }
 }
 
@@ -273,7 +290,6 @@
 
             .nav-item {
                 display: block;
-                font-size: v.$text-size-medium;
                 font-weight: v.$weight-normal;
 
                 &:hover {