Adjust styles

Author: obulat

src/components/CopyTools.vue

@@ -98,10 +98,12 @@ export default {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border: 2px solid #d8d8d8;
+    border: 0.125rem solid #d8d8d8;
     border-top: none;
     background-color: white;
     padding: 0 1.5rem 1.5rem;
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
 }
 .button.donate.small {
     justify-content: center;

src/components/CopyTypeSwitch.vue

@@ -99,7 +99,8 @@ export default {
 }
 
 .toggle-label {
-    font-size: 13px;
+    font-size: 0.8125rem;
+    font-weight: 600;
     color: #d8d8d8;
     &.selected {
         color: #333;

src/components/LicenseUseCard.vue

@@ -9,16 +9,20 @@
         <p class="license-use-instructions">
             {{ $t('license-use.common-instructions') }}
         </p>
-        <tabs ref="alltabs">
+        <tabs
+            ref="alltabs"
+            class="top-tabs"
+        >
             <!-- Website: Richtext, HTML, XMP -->
             <tab
                 ref="web"
+                class="main-tabs"
                 :title="$t('license-use.web-tab-heading')"
             >
                 {{ $t('license-use.web-instructions') }}
                 <tabs
                     ref="web"
-                    class="attribution-tab"
+                    class="sub-tabs"
                     :boxed="true"
                 >
                     <tab
@@ -98,13 +102,27 @@ export default {
 </script>
 <style lang="scss">
 .license-use-card {
-    margin-bottom: 24px;
+    margin-bottom: 1.5rem;
+    h3 {
+        margin-bottom: 0.5rem;
+    }
+}
+
+.top-tabs > .tabs:not(:last-child) {
+    margin: 2rem 0 1rem;
+}
+.sub-tabs {
+    margin-top: 1.25rem;
+    .tabs-content.is-boxed {
+        padding: 1.5rem !important;
+        border-bottom: none;
+        border-top-right-radius: 0.25rem;
+    }
 }
-.tabs {
-    margin-top: 2rem;
+.tabs.is-boxed li:first-child a {
+    border-top-left-radius: 0.25rem;
 }
-.attribution-tab .tabs-content.is-boxed {
-    padding: 1.5rem!important;
-    border-bottom: none;
+.tabs.is-boxed li:last-child a {
+    border-top-right-radius: 0.25rem;
 }
 </style>