From a77be56d8a09e681a595d7ea647cfa591fb0bdfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no>
Date: Mon, 15 Feb 2021 15:24:31 +0100
Subject: [PATCH] fikser meta#276
---
src/App.vue | 59 +++++++-------------------------
src/components/Article.vue | 6 +---
src/components/Autocomplete.vue | 2 +-
src/components/Definition.vue | 2 +-
src/components/Header.vue | 6 ++--
src/components/SearchResults.vue | 4 +--
src/plugins/vuetify.js | 14 +++++++-
7 files changed, 34 insertions(+), 59 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 12b5b19c..7e138460 100644
--- a/src/App.vue
+++ b/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;
}
diff --git a/src/components/Article.vue b/src/components/Article.vue
index d17ed317..ccadb5ff 100644
--- a/src/components/Article.vue
+++ b/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 {
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index b2dbbe8f..2d5acbbd 100644
--- a/src/components/Autocomplete.vue
+++ b/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">
diff --git a/src/components/Definition.vue b/src/components/Definition.vue
index 1d8d1574..6774036e 100644
--- a/src/components/Definition.vue
+++ b/src/components/Definition.vue
@@ -87,7 +87,7 @@ q {
}
.highlighted {
- background-color: #FDF4F5;
+ background-color: var(--v-tertiary-base);
border-radius: 5px;
}
</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index a311ed1a..59b2767a 100644
--- a/src/components/Header.vue
+++ b/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;
}
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 01917db3..a040a75c 100644
--- a/src/components/SearchResults.vue
+++ b/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>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 5c8db531..888f4067 100644
--- a/src/plugins/vuetify.js
+++ b/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'
--
GitLab