diff --git a/src/components/Header.vue b/src/components/Header.vue index 275c06c4384ec86be8200159bccd7e300bcf082e..11cc3123c12d4ac5f3c1a03d5b9685623b468502 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -4,7 +4,7 @@ <h2 class="article_header">{{header_text}}</h2> {{group_list}} <details :title="inflect_tooltip" @toggle="toggle()" v-if="group_list"> - <summary>Bøying</summary> + <summary :class="dictionary">bøying</summary> <div class="inflection"> <div v-for="(lemma, index) in inflection_groups_by_lemma" :key="index"> <h4>{{lemma.lemma}}</h4> @@ -137,15 +137,20 @@ details { details > summary { position: relative; - max-width: 80px; + max-width: 130px; list-style: none; border: solid 2px var(--v-primary-base); - border-radius: 4px; - padding: 3px; + border-radius: 30px; + padding: 6px; color: var(--v-primary-base); + background-color: #ffffff; cursor: pointer; } +details[open] > summary { + box-shadow: 5px 5px 0px var(--v-primary-base) +} + details > summary:after { content: "⌄"; font-weight: bold; @@ -155,6 +160,27 @@ details > summary:after { margin-right: 3px; } +details > summary.bob:before { + content: "Se "; +} + +details > summary.nob:before { + content: "Sjå "; +} + +details[open] > summary.bob:before, details[open] > summary.nob:before { + content: "Skjul "; +} + +details[open] > summary:after { + content: "⌃"; + font-weight: bold; + position: absolute; + right: 0; + top: 8px; + margin-right: 3px; +} + @keyframes open { 0% { opacity: 0; @@ -169,6 +195,9 @@ details[open] summary ~ * { } .inflection { + color: var(--v-primary-base); + background-color: #ffffff; + margin-top: 5px; overflow: scroll; }