Input and Output field titles styled to have higher contrast

SDFIdk · Jan 12, 2024 · f0367b2 · f0367b2
1 parent 0357a0b
commit f0367b2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/coordinatetransformation/InputCard.vue b/src/components/coordinatetransformation/InputCard.vue
@@ -1,7 +1,7 @@
 <template >
     <div class="input-card">
         <section>
-            <h3>Input</h3>
+            <h3 class="InputTitle">Input</h3>
 
             <CrsSelector :inOrOut="'in'" @crs-selected="inputCrsChanged"/>
 
@@ -425,6 +425,9 @@ input:focus {
     display: inline-flex;
     align-items: center;
 }
+.InputTitle{
+    color: var(--sort)
+}
 @media screen and (max-width: 1180px) {
     .footer {
         display: inline-flex;

diff --git a/src/components/coordinatetransformation/OutputCard.vue b/src/components/coordinatetransformation/OutputCard.vue
@@ -1,6 +1,6 @@
 <template>
     <section class="output-card">
-        <h3>Output</h3>
+        <h3 class="OutputTitle">Output</h3>
         <CrsSelector :inOrOut="'out'" @crsSelected="onCrsSelect"/>
 
         <div class="transformed-coordinates"  :class="{ hasTransformed: hasTransformed }">
@@ -302,6 +302,9 @@ input[type='radio'] {
     display: inline-flex;
     flex-grow: 1;
 }
+.OutputTitle{
+    color: var(--sort)
+}
 .radiogroup {
     display: inline-flex;
     flex-wrap: nowrap;