re meta#300 tweaket bøyningsknappen

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;
 }