Fix size-changes and diff-view styling

css/area_forms.less

@@ -240,13 +240,11 @@ button[readonly],
 select[readonly],
 textarea[readonly] {
     cursor: auto;
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-color: var(--color-background);
-    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
-    background-color: #eee;
     opacity: .5;
     border: 1px solid @ini_border;
     border-radius: @fix_border-radius;
-    color: #333;
+    color: var(--color-shade-4);
     font-weight: normal;
     padding: .3em @grid;
     transition: @transition background-color, @transition color;

css/area_recent.less

@@ -11,11 +11,13 @@
                 color: @color-editBox;
 
                 &.positive {
-                    background-color: #cfc;
+                    background-color: var(--color-success);
+                    color: var(--color-background);
                 }
 
                 &.negative {
-                    background-color: #fdd;
+                    background-color: var(--color-error);
+                    color: var(--color-foreground);
                 }
             }
         }
@@ -69,9 +71,8 @@
         a {
             background-color: var(--color-background);
             border: solid 1px var(--color-background);
-            border-radius: @ini_default_border_radius;
+            border-radius: 0.5rem;
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
-            transition: @transition background-color, @transition color, @transition border-color;
 
             &::before {
                 background-color: inherit;
@@ -82,9 +83,11 @@
             &:hover,
             &:focus,
             &:active {
-                background-color: @ini_nav_menu_color;
+                background-color: transparent;
-                border: solid 1px @ini_nav_menu_color;
+                border-color: var(--color-glow-primary);
-                color: var(--color-background);
+                color: var(--color-glow-primary);
+                transition: var(--transition-glow);
+                filter: var(--filter-glow-primary);
 
                 &::before {
                     background-color: inherit;
@@ -95,10 +98,8 @@
     }
 
     table.diff {
-        background-color: #fff;
+        background-color: var(--color-background);
-        border: solid 1px #fff;
+        border: none;
-        border-top-width: 10px;
-        border-bottom-width: 10px;
 
         &.diff_inline {
             border-top-width: 0;
@@ -111,7 +112,7 @@
 
         th {
             background-color: var(--color-background);
-            color: @ini_text;
+            color: var(--color-foreground);
             padding-top: 10px;
             padding-bottom: 10px;
 
@@ -121,30 +122,33 @@
         }
 
         td {
+            background-color: transparent;
+            color: var(--color-text-1);
+
             &.diff-blockheader {
-                background-color: #cfc;
+                background-color: transparent;
-                color: @color-editBox;
+                color: var(--color-foreground);
             }
 
             &.diff-context {
-                background-color: #eee;
+                background-color: transparent;
-                color: @color-editBox;
+                color: var(--color-text-1);
             }
         }
 
         .diff-addedline {
-            background-color: #cfc;
+            background-color: var(--color-success-highlight);
-            color: @color-editBox;
+            color: var(--color-foreground);
 
             strong {
                 background-color: transparent;
-                color: #f00;
+                color: var(--color-success) !important;
             }
         }
 
         .diff-deletedline {
-            background-color: #fdd;
+            background-color: var(--color-error-highlight);
-            color: @color-editBox;
+            color: var(--color-foreground);
 
             * {
                 color: inherit;
@@ -152,8 +156,12 @@
 
             strong {
                 background-color: transparent;
-                color: #f00;
+                color: var(--color-error) !important;
             }
         }
+
+        .diff-lineheader {
+            background-color: transparent;
+        }
     }
 }

css/base.less

@@ -458,7 +458,9 @@ nav > ul {
     --color-dark-primary: var(--color-argon-400);
     --color-dark-secondary: var(--color-krypton-300);
     --color-dark-error: var(--color-red-500);
+    --color-dark-error-highlight: var(--color-red-950);
     --color-dark-success: var(--color-green-500);
+    --color-dark-success-highlight: var(--color-green-950);
     --color-dark-warning: #efb100;
     --color-dark-highlight: #efb10060;
     --color-dark-accent-1: #60a5f9;
@@ -478,7 +480,9 @@ nav > ul {
     --color-light-primary: var(--color-argon-600);
     --color-light-secondary: var(--color-krypton-500);
     --color-light-error: var(--color-red-600);
+    --color-light-error-highlight: var(--color-red-50);
     --color-light-success: var(--color-green-600);
+    --color-light-success-highlight: var(--color-green-50);
     --color-light-warning: #d08700;
     --color-light-highlight: #d0870060;
     --color-light-accent-1: #303EC0;
@@ -575,7 +579,9 @@ nav > ul {
         --color-primary: var(--color-dark-primary);
         --color-secondary: var(--color-dark-secondary);
         --color-error: var(--color-dark-error);
+        --color-error-highlight: var(--color-dark-error-highlight);
         --color-success: var(--color-dark-success);
+        --color-success-highlight: var(--color-dark-success-highlight);
         --color-warning: var(--color-dark-warning);
         --color-highlight: var(--color-dark-highlight);
         --color-accent-1: var(--color-dark-accent-1);
@@ -616,7 +622,9 @@ nav > ul {
         --color-primary: var(--color-light-primary);
         --color-secondary: var(--color-light-secondary);
         --color-error: var(--color-light-error);
+        --color-error-highlight: var(--color-light-error-highlight);
         --color-success: var(--color-light-success);
+        --color-success-highlight: var(--color-light-success-highlight);
         --color-warning: var(--color-light-warning);
         --color-highlight: var(--color-light-highlight);
         --color-accent-1: var(--color-light-accent-1);