wip

Author: thisconnect

frontends/web/src/components/actionable-item/actionable-item.module.css

@@ -1,5 +1,4 @@
 .container {
-  --size-default: min(1.4rem, 24px);
   align-items: center;
   background-color: var(--background-secondary);
   border: none;

frontends/web/src/components/dialog/dialog.module.css

@@ -33,15 +33,9 @@
 }
 /* guard dialog and wait-dialog from view styles */
 @media (min-width: 1200px) {
-    .header .title {
-        --size-subheader: 1.6rem;
-    }
     .modal {
         margin-left: var(--sidebar-width-large);
     }
-    .modal .contentContainer p {
-        --size-default: 1.4rem;
-    }
 }
 
 .modal.small {
@@ -101,8 +95,6 @@
 }
 
 .contentContainer {
-    font-size: var(--size-default);
-    font-weight: 400;
     padding: var(--space-half);
 }
 

frontends/web/src/components/forms/radio.module.css

@@ -1,5 +1,4 @@
 .radio {
-    --size-default: 1.4rem;
     line-height: 1.5;
 }
 

frontends/web/src/style/base.css

@@ -6,6 +6,10 @@ body {
     font-size: 1.6rem; /* 16px base for body, this will be overwritten on Android  */
 }
 
+.app {
+    font-size: var(--size-default); /* for components that do not define font-size */
+}
+
 html,
 body {
     background-color: var(--background);

frontends/web/src/style/variables.css

@@ -48,10 +48,10 @@
     --color-error-border: rgba(227, 6, 19, .33);
 
     /* font sizes */
-    --size-large: 3.2rem;
-    --size-header: 2.4rem;
+    --size-large: min(3.2rem, 36px);
+    --size-header: min(2.4rem, 36px);
     --size-subheader: min(1.8rem, 36px);
-    --size-default: 1.4rem;
+    --size-default: min(1.6rem, 28px); /* was 14px now 16px*/
     --size-small:  min(1.2rem, 20px);
     --size-xsmall: 1.1rem;
     --size-title: min(3.2rem, 36px);
@@ -206,6 +206,6 @@
         --size-header: min(2rem, 36px);
         --size-subheader: min(1.6rem, 36px);
         --size-title: min(1.6rem, 36px);
-        --size-default: min(1.6rem, 36px);
+        --size-default: min(1.6rem, 28px);
     }
 }