fikser meta#276

src/App.vue

@@ -12,17 +12,17 @@
             <template v-slot:label>
               <span>VIS TREFF PÅ</span>
             </template>
-            <v-radio value="bob,nob" color="rgb(188, 71, 123)">
+            <v-radio value="bob,nob" color="secondary">
               <template v-slot:label>
                 <span>Begge ordbøker</span>
               </template>
             </v-radio>
-            <v-radio value="bob" color="rgb(188, 71, 123)">
+            <v-radio value="bob" color="secondary">
               <template v-slot:label>
                 <span>Bokmål</span>
               </template>
             </v-radio>
-            <v-radio value="nob" label="Nynorsk" color="rgb(188, 71, 123)">
+            <v-radio value="nob" color="secondary">
               <template v-slot:label>
                 <span>Nynorsk</span>
               </template>
@@ -33,7 +33,7 @@
         </Autocomplete>
       </div>
       <div id="spinner">
-        <v-progress-circular indeterminate color="rgb(188, 71, 123)" size="120" v-show="waiting"></v-progress-circular>
+        <v-progress-circular indeterminate color="secondary" size="120" v-show="waiting"></v-progress-circular>
       </div>
       <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-show="! waiting" />
       <div id="single_article_container">
@@ -324,10 +324,11 @@ h1 {
 }
 
 
-header > h1 {
-  color: #BC477B;
+header > h1 > a {
+  color: #BC477B !important;
   font-size: 40px;
   margin: 0px;
+  text-decoration: none;
 }
 
 p.about-link {
@@ -336,8 +337,8 @@ p.about-link {
   float: right;
 }
 
-header a {
-  color: inherit;
+header > p > a {
+  color: #FDF4F5   !important;
   text-decoration: none;
 }
 
@@ -376,7 +377,7 @@ header, #search_results, #spinner, #single_article_container, footer, div.welcom
 header {
   padding-top: 20px;
   padding-bottom: 20px;
-  background-color: #560027;
+  background-color: var(--v-primary-base);
 }
 
 div.monthly {
@@ -398,31 +399,16 @@ div.monthly article.nob .dict-label::before {
   content: "månadens ";
 }
 
-.top {
-  color: #560027;
-  font-weight: bold;
-  font-size: smaller;
-  border-bottom: solid;
-  border-color: #BC477B;
-}
-
-.mission-statement {
-  font-size: 16px;
-  margin: 0px;
-  color: #FDF4F5;
-}
-
 .sub-title {
   font-size: 20px;
   margin: 0px;
-  color: #FDF4F5;
 }
 
 footer {
   font-size: smaller;
   display: table;
   flex-direction: row;
-  background-color: #570B27;
+  background-color: var(--v-primary-base);
   color: #ffffff;
 }
 
@@ -432,7 +418,7 @@ footer {
 }
 
 .v-label span {
-  color: rgba(86, 0, 39, 1)
+  color: var(--v-primary-base);
 }
 
 li.suggestion {
@@ -458,27 +444,8 @@ footer > div {
   height: 60px;
 }
 
-select.lang_select {
-  appearance: none;
-  background-color: #EEEEEE;
-  border: none;
-  padding: 0 1em 0 0;
-  width: 100%;
-  height: 100%;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: bold;
-  cursor: inherit;
-  line-height: inherit;
-  background-image: url('./assets/down_arrow.png');
-	background-position: 98% center;
-	background-repeat: no-repeat;
-  background-size: 10%;
-  border-bottom: solid  #BC477B;
-}
-
 ::selection {
-  background: rgb(188, 71, 123);
+  background: var(--v-secondary-base);
   color: white;
 }
 

src/components/Article.vue

@@ -70,10 +70,6 @@ h3 {
   color: #560027;
 }
 
-a {
-  color: #560027;
-}
-
 li {
   padding-bottom: 4px;
 }
@@ -100,7 +96,7 @@ li.definition.level1, li.definition.level2 {
 
 ::marker {
   font-weight: bold;
-  color: #560027;
+  color: var(--v-primary-base);
 }
 
 ol > li:only-child.level1, li:only-child.level2, li:only-child.level3 {

src/components/Autocomplete.vue

@@ -18,7 +18,7 @@
         auto-select-first
         placeholder="Søk..."
         ref="autocomplete"
-        color="rgb(188, 71, 123)"
+        color="secondary"
         dense
       >
       <template v-slot:item="data">

src/components/Definition.vue

@@ -87,7 +87,7 @@ q {
 }
 
 .highlighted {
-  background-color: #FDF4F5;
+  background-color: var(--v-tertiary-base);
   border-radius: 5px;
 }
 </style>

src/components/Header.vue

@@ -118,7 +118,7 @@ article h1 {
 }
 
 .dict-label {
-  color: #560027;
+  color: var(--v-primary-base)  ;
   font-weigth: bold;
   padding-left: 5px;
   position: absolute;
@@ -138,10 +138,10 @@ details > summary {
   position: relative;
   max-width: 90px;
   list-style: none;
-  border: solid 2px #BC477B;
+  border: solid 2px var(--v-secondary-base);
   border-radius: 4px;
   padding: 3px;
-  color: #BC477B;
+  color: var(--v-secondary-base);
   cursor: pointer;
 }
 

src/components/SearchResults.vue

@@ -50,7 +50,7 @@ export default {
 </script>
 <style >
   h2 {
-    color: #560027;
+    color: var(--v-primary-base);
     margin: 0px;
     padding: 20px 0px 20px 0px;
   }
@@ -69,6 +69,6 @@ export default {
 
   .flex-container  h4 {
     margin: 0px;
-    color: #560027;
+    color: var(--v-primary-base);
   }
 </style>

src/plugins/vuetify.js

@@ -5,7 +5,19 @@ import Vuetify from 'vuetify/lib/framework';
 Vue.use(Vuetify);
 
 export default new Vuetify({
-  theme: { disable: true },
+  theme: {
+    options: {
+      customProperties: true
+    },
+    themes: {
+      light: {
+        primary: '#560027',
+        secondary: '#BC477B',
+        tertiary: '#FDF4F5',
+        anchor: '#560027'
+      }
+    }
+   },
   defaultAssets: {
     font: true,
     icons: 'md'