[ivette] Dark mode completed (almost)

Dive still needs some work.

ivette/src/colors/dark-code.css

@@ -49,6 +49,9 @@
 
 .cm-s-dark-code .CodeMirror-activeline-background { background: var(--background); }
 .cm-s-dark-code .CodeMirror-matchingbracket { background: #928374; color:#282828 !important; }
+.cm-s-dark-code .CodeMirror-scrollbar-filler {
+  background-color: var(--background-profound);
+}
 
 .cm-s-dark-code span.cm-builtin { color: #fe8039; }
 .cm-s-dark-code span.cm-tag { color: #fe8039; }

ivette/src/colors/dark.css

@@ -4,14 +4,14 @@
     --text-discrete: #879da0;
     --disabled-text: #506679;
     --info-text: #748a8d;
-    --info-text-discrete: #778d90;
+    --info-text-discrete: #778d94;
 
     --code-hover: #005137;
     --code-select: #4f3d24;
     --code-select-hover: #5f4d34;
-    --dead-code: #bbb;
-    --non-terminating: #bbb;
-    --highlighted-marker: #ffff66;
+    --dead-code: #666;
+    --non-terminating: #666;
+    --highlighted-marker: #778822;
     --code-bullet: #0a2234;
 
     --splitter: #708294;
@@ -23,14 +23,19 @@
     --background-profound-hover: #0e2638;
     --background-disabled: #525f71;
     --background-disabled-hover: #4c596b;
-    --background-intense: #132b3d;
+    --background-intense: #132b41;
     --background-softer: #364455;
     --background-sidebar: #183042;
     --background-button-hover: #c0c0c0;
     --background-alterning-odd: #354154;
     --background-alterning-even: #475366;
     --selected-element: #082032;
+    --background-interaction: #5c697b;
 
+    --lcd-button-color: #21211a;
+    --lcd-button-background: #727798;
+
+    --default-led-img: radial-gradient(circle at center, #5f92b9, #4189bf);
     --default-button-img: linear-gradient(to bottom, #3c495b 0%, #455164 100%);
     --default-button-hover: #364355;
     --default-button-active: #303d4f;
@@ -39,14 +44,20 @@
     --primary-button-hover: #0e65b9;
     --primary-button-active: #085fb3;
 
+    --positive-button-color: #327024;
+    --positive-led-img: radial-gradient(circle at center, #20a110, #177c16);
     --positive-button-img: linear-gradient(to bottom, #327024 0%, #2e6c20 100%);
     --positive-button-hover: #28661a;
     --positive-button-active: #226014;
 
+    --negative-button-color: #bc150e;
+    --negative-led-img: radial-gradient(circle at center, #df3b36, #c72a25c7);
     --negative-button-img: linear-gradient(to bottom, #bc150e 0%, #cf1c17 100%);
     --negative-button-hover: #b60f08;
     --negative-button-active: #b00903;
 
+    --warning-button-color: #a4601a;
+    --warning-led-img: radial-gradient(circle at center, #efa739, #ccb41f);
     --warning-button-img: linear-gradient(to bottom, #a4601a 0%, #a6571c 100%);
     --warning-button-hover: #9e5114;
     --warning-button-active: #984b0e;
@@ -58,10 +69,29 @@
     --selected-button-img: #355174;
     --selected-button-hover: #456184;
 
+    --activated-button-color: #348bdf;
+    --activated-button-hover: #b53d9e;
+
     --grid-layout-holder: #266475;
     --grid-layout-target: #34b4c0;
 
     --error: darkorange;
     --warning: darkorange;
+
+    --meter-optimum:  linear-gradient(to bottom, #170 0%, #5c0 20%, #170 100%);
+    --meter-subopti:  linear-gradient(to bottom, #770 0%, #cc0 20%, #770 100%);
+    --meter-evenless: linear-gradient(to bottom, #710 0%, #c50 20%, #710 100%);
+
+    --eva-state-before: #082032;
+    --eva-state-after: #321428;
+    --eva-state-then: #98a02e;
+    --eva-state-else: #8f030e;
+    --eva-probes-pinned: #1f493f;
+    --eva-probes-pinned-focused: #025d22;
+    --eva-probes-transient: #bfb095;
+    --eva-probes-transient-focused: #9f3c20
+    --eva-alarms-true: green;
+    --eva-alarms-false: #fb4e4a;
+    --eva-alarms-unknown: darkorange;
   }
 }

ivette/src/colors/light.css

@@ -30,7 +30,12 @@
     --background-alterning-odd: #fdfdfd;
     --background-alterning-even: #efefef;
     --selected-element: #8ce0fb;
+    --background-interaction: white;
 
+    --lcd-button-color: #61611a;
+    --lcd-button-background: #b2b798;
+
+    --default-led-img: radial-gradient(circle at center, #9fd2f9, #81c9ff);
     --default-button-img: linear-gradient(to bottom, #e8e8e8 0%, #f1f1f1 100%);
     --default-button-hover: #ffffff;
     --default-button-active: #f9f9f9;
@@ -39,14 +44,20 @@
     --primary-button-hover: #00b6ff;
     --primary-button-active: #ddd;
 
+    --positive-button-color: #34ff52;
+    --positive-led-img: radial-gradient(circle at center, #50c140, #279c16);
     --positive-button-img: linear-gradient(to bottom, #34ff52 0%, #48fd64 100%);
     --positive-button-hover: #ffffff;
     --positive-button-active: #ffffff;
 
+    --negative-button-color: #ec453e;
+    --negative-led-img: radial-gradient(circle at center, #ff5b56, #f75a55c7);
     --negative-button-img: linear-gradient(to bottom, #ec453e 0%, #ff4c47 100%);
     --negative-button-hover: red;
     --negative-button-active: #ffffff;
 
+    --warning-button-color: #fece72;
+    --warning-led-img: radial-gradient(circle at center, #ffc749, #ecd44f);
     --warning-button-img: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
     --warning-button-hover: orange;
     --warning-button-active: #ffffff;
@@ -58,10 +69,29 @@
     --selected-button-img: #afafaf;
     --selected-button-hover: #a9a9a9;
 
+    --activated-button-color: #449bef;
+    --activated-button-hover: #c54dae;
+
     --grid-layout-holder: lightblue;
     --grid-layout-target: #64b4f0;
 
     --error: darkorange;
     --warning: darkorange;
+
+    --meter-optimum:  linear-gradient(to bottom, #4a0 0%, #8f0 20%, #4a0 100%);
+    --meter-subopti:  linear-gradient(to bottom, #aa0 0%, #ff0 20%, #aa0 100%);
+    --meter-evenless: linear-gradient(to bottom, #a40 0%, #f80 20%, #a40 100%);
+
+    --eva-state-before: #95f5ff;
+    --eva-state-after: #fff819;
+    --eva-state-then: #c8e06e;
+    --eva-state-else: #ff834e;
+    --eva-probes-pinned: #cbe4cb;
+    --eva-probes-pinned-focused: #02da02;
+    --eva-probes-transient: #fff0d5;
+    --eva-probes-transient-focused: orange
+    --eva-alarms-true: green;
+    --eva-alarms-false: #fb4e4a;
+    --eva-alarms-unknown: darkorange;
   }
 }

ivette/src/dome/renderer/controls/style.css

@@ -39,19 +39,19 @@
     margin: 1px ;
     padding: 1px 6px 1px 6px ;
     height: 16px ;
-    fill: #dedede ;
-    color: #dedede ;
+    fill: var(--background-intense) ;
+    color: var(--background-intense) ;
     font-family: sans-serif ;
     font-size: smaller ;
     font-weight: bold ;
     border-radius: 8px ;
-    background: #777 ;
+    background: var(--info-text) ;
 }
 
 .dome-disabled .dome-xBadge {
-    background: #ccc ;
-    color: #eee ;
-    fill: #eee ;
+    background: var(--background-profound) ;
+    color: var(--background-intense) ;
+    fill: var(--background-intense) ;
 }
 
 .dome-xBadge label {
@@ -67,8 +67,8 @@
 }
 
 .dome-control-disabled {
-    color: #b0b0b0 ;
-    fill: #b0b0b0 ;
+    color: var(--disabled-text) ;
+    fill: var(--disabled-text) ;
     font-weight: lighter ;
 }
 
@@ -257,16 +257,16 @@
 
 .dome-xButton-lcd {
     text-align: right ;
-    color: #61611a ;
-    background-color: #b2b798 ;
-    border-color: #c2c0c2 ;
+    color: var(--lcd-button-color) ;
+    background-color: var(--lcd-button-background) ;
+    border-color: var(--border) ;
 }
 
 .dome-xButton-led {
     display: inline ;
     position: relative ;
     bottom: -2px ;
-    border-color: #999 ;
+    border-color: var(--border) ;
     border-style: solid ;
     border-width: 1px ;
     border-radius: 50% ;
@@ -281,51 +281,44 @@
 }
 
 .dome-xButton-led-active {
-    background: radial-gradient( circle at center , #9fd2f9 , #81c9ff );
+    background: var(--default-led-img);
 }
 
 .dome-xButton-led-positive {
-    background: radial-gradient( circle at center , #50c140, #279c16 );
+    background: var(--positive-led-img);
 }
 
 .dome-xButton-led-negative {
-    background: radial-gradient( circle at center , #ff5b56 , #f75a55c7 );
+    background: var(--negative-led-img);
 }
 
 .dome-xButton-led-warning {
-    background: radial-gradient( circle at center , #ffc749 , #ecd44f );
+    background: var(--warning-led-img);
 }
 
 /* -------------------------------------------------------------------------- */
 /* --- Styling Meters                                                     --- */
 /* -------------------------------------------------------------------------- */
 
-
-meter.dome-xMeter {
-    background: white;
-    border-radius: 5px;
-    box-shadow:
-        0 0 4px 4px rgba(0,0,0,0.15) inset;
-    height: 16px;
-    width: 70px;
-}
-
-meter.dome-xMeter::-webkit-meter-bar {
-    background: transparent;
-    border-radius: 5px;
-    height: 14px;
+meter::-webkit-meter-bar {
+  height: 14px;
+  width: 70px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  background: none;
+  box-shadow: 0px 3px 2px -3px var(--text) inset;
 }
 
-meter.dome-xMeter::-webkit-meter-optimum-value {
-    background: linear-gradient(to bottom, #4a0 0%, #8f0 20%, #4a0 100%);
+meter::-webkit-meter-optimum-value {
+  background: var(--meter-optimum);
 }
 
-meter.dome-xMeter::-webkit-meter-suboptimum-value {
-    background: linear-gradient(to bottom, #aa0 0%, #ff0 20%, #aa0 100%);
+meter::-webkit-meter-suboptimum-value {
+  background: var(--meter-subopti);
 }
 
-meter.dome-xMeter::-webkit-meter-even-less-good-value  {
-    background: linear-gradient(to bottom, #a40 0%, #f80 20%, #a40 100%);
+meter::-webkit-meter-even-less-good-value  {
+  background: var(--meter-evenless);
 }
 
 /* -------------------------------------------------------------------------- */
@@ -361,22 +354,25 @@ meter.dome-xMeter::-webkit-meter-even-less-good-value  {
     background: transparent ;
 }
 
-.dome-xIconButton:hover { fill: #000 ; background: #c0c0c0 ; }
+.dome-xIconButton:hover {
+  fill: var(--text) ;
+  background: var(--background-profound-hover) ;
+}
 
-.dome-xIconButton-default { fill: #777 ; }
+.dome-xIconButton-default { fill: var(--info-text) ; }
 
-.dome-xIconButton-selected:not(:hover) { fill: #449bef ; }
-.dome-xIconButton-selected:hover { fill: #c54dae ; }
+.dome-xIconButton-selected:not(:hover) { fill: var(--activated-button-color) ; }
+.dome-xIconButton-selected:hover { fill: var(--activated-button-hover) ; }
 
-.dome-xIconButton-positive { fill: #279c16 ; }
+.dome-xIconButton-positive { fill: var(--positive-button-color) ; }
 
-.dome-xIconButton-negative { fill: #fb3832 ; }
+.dome-xIconButton-negative { fill: var(--negative-button-color) ; }
 
-.dome-xIconButton-warning { fill: orange ; }
+.dome-xIconButton-warning { fill: var(--warning-button-color) ; }
 
 .dome-xIconButton.dome-control-disabled,
 .dome-xIconButton.dome-control-disabled:hover {
-    fill: #aeafae ;
+    fill: var(--disabled-text) ;
     background: inherit ;
 }
 

ivette/src/dome/renderer/frame/style.css

@@ -494,9 +494,7 @@
 }
 
 .dome-xSwitch input {
-  opacite: 0;
-  width: 0;
-  height: 0;
+  visibility: hidden;
 }
 
 .dome-xSwitch-slider {
@@ -526,14 +524,6 @@
   border-radius: 50%;
 }
 
-/* input:checked + .dome-xSwitch-slider { */
-/*   background-color: #2196F3; */
-/* } */
-
-/* input:focus + .dome-xSwitch-slider { */
-/*   box-shadow: 0 0 1px #2196F3; */
-/* } */
-
 input:checked + .dome-xSwitch-slider:before {
   -webkit-transform: translateX(13px);
   -ms-transform: translateX(13px);

ivette/src/dome/renderer/frame/toolbars.tsx

@@ -164,12 +164,8 @@ export function Switch(props: SwitchProps) {
   const checked = position ? position === 'right' : undefined;
   return (
     <label className={'dome-xSwitch'}>
-      <input type={'checkbox'} checked={checked}/>
-      <span
-        className={'dome-xSwitch-slider'}
-        title={title}
-        onClick={onClick}
-      />
+      <input type={'checkbox'} checked={checked} onChange={onClick} />
+      <span className={'dome-xSwitch-slider'} title={title} />
     </label>
   );
 }

ivette/src/dome/renderer/layout/style.css

@@ -35,8 +35,6 @@
 /* --- Extensibility                                                      --- */
 /* -------------------------------------------------------------------------- */
 
-/* TODO: Find why it does not work on my computer */
-
 .dome-xBoxes-pack
 {
     flex: 0 0 auto ;
@@ -59,16 +57,6 @@
     overflow: auto ;
 }
 
-.dome-xBoxes-scroll::-webkit-scrollbar-track {
-  background: orange;
-}
-
-.dome-xBoxes-scroll::-webkit-scrollbar-thumb {
-  background-color: blue;
-  border-radius: 20px;
-  border: 3px solid orange;
-}
-
 .dome-container > .dome-xBoxes-fill
 {
     width:  100% ;

ivette/src/dome/renderer/style.css

@@ -53,19 +53,19 @@ body {
 }
 
 .dome-color-dragzone:hover {
-    background: #808080 ;
-    opacity: 0.2 ;
+    background: var(--grid-layout-holder) ;
+    opacity: 0.4 ;
     transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
 }
 
 .dome-color-dragging {
-    background: #64b4f0 ;
+    background: var(--grid-layout-target) ;
     opacity: 0.5 ;
     transition: opacity .1s linear 0.1s , background .1s linear 0.1s ;
 }
 
 div.dome-dragged {
-    background: lightblue ;
+    background: var(--grid-layout-holder) ;
     border: none ;
 }
 

ivette/src/frama-c/kernel/ASTinfo.tsx

@@ -27,6 +27,7 @@
 import React from 'react';
 import * as States from 'frama-c/states';
 import * as Utils from 'frama-c/utils';
+import * as Preferences from 'ivette/prefs';
 
 import { Vfill } from 'dome/layout/boxes';
 import { RichTextBuffer } from 'dome/text/buffers';
@@ -65,7 +66,7 @@ export default function ASTinfo(): JSX.Element {
         <Text
           buffer={buffer}
           mode="text"
-          theme="default"
+          theme={Preferences.useThemeColors()}
           onSelection={onTextSelection}
           readOnly
         />

ivette/src/frama-c/kernel/style.css

@@ -66,15 +66,6 @@
     display: none; /* Hide label, only use placeholder */
 }
 
-.message-search input::placeholder {
-    font-style: italic;
-}
-
-.message-search input {
-    vertical-align: middle;
-    margin: 2px 4px 2px 0px;
-}
-
 .message-search .dome-xForm-field {
     margin: 0px 4px;
     display: inline-block;

ivette/src/frama-c/plugins/eva/style.css

@@ -2,55 +2,13 @@
 /* --- Probe Panel                                                        --- */
 /* -------------------------------------------------------------------------- */
 
-.light-theme {
-
-  --eva-info-text: #777;
-  --eva-info-background: #ccc;
-
-  --eva-stmt-label: grey;
-  --eva-code-background: lightgrey;
-
-  --eva-callsite-background: #eee;
-  --eva-callsite-fill: #7cacbb;
-
-  --eva-focused: #cbe4cb;
-  --eva-focused-transient: #f9dca6;
-
-  --eva-state-before: #95f5ff;
-  --eva-state-after: #fff819;
-  --eva-state-then: #c8e06e;
-  --eva-state-else: #ff834e;
-
-}
-
-.dark-theme {
-
-  --eva-info-text: #748a8d;
-  --eva-info-background: #082032;
-
-  --eva-stmt-label: #849a9d;
-  --eva-code-background: #334756;
-
-  --eva-callsite-background: #eee;
-  --eva-callsite-fill: #7cacbb;
-
-  --eva-focused: #cbe4cb;
-  --eva-focused-transient: #f9dca6;
-
-  --eva-state-before: #95f5ff;
-  --eva-state-after: #fff819;
-  --eva-state-then: #c8e06e;
-  --eva-state-else: #ff834e;
-
-}
-
 .eva-probeinfo {
     min-height: 32px;
     padding-left: 6px;
     padding-top: 2px;
     padding-bottom: 4px;
     width: 100%;
-    background: var(--eva-info-background);
+    background: var(--background-profound);
     display: flex;
 }
 
@@ -63,10 +21,10 @@
 .eva-probeinfo-code {
     flex: 0 1 auto;
     height: fit-content;
-    background: var(--eva-code-background);
+    background: var(--background-intense);
     min-width: 120px;
     width: auto;
-    border: thin solid black;
+    border: thin solid var(--border);
     padding-left: 6px;
     padding-right: 6px;
     border-radius: 4px;
@@ -98,7 +56,7 @@
 .eva-info {
     width: 100%;
     flex-wrap: wrap;
-    background: var(--eva-info-background);
+    background: var(--background-profound);
     padding-top: 3px;
     padding-left: 12px;
     padding-bottom: 2px;
@@ -106,19 +64,19 @@
 
 .eva-callsite {
     flex: 0 0 auto;
-    fill: var(--eva-callsite-fill);
-    background: var(--eva-callsite-background);
+    fill: var(--selected-element);
+    background: var(--background-softer);
     border-radius: 4px;
-    border: thin solid black;
+    border: thin solid var(--border);
     padding-right: 7px;
 }
 
 .eva-callsite.eva-focused {
-    background: var(--eva-focused);
+    background: var(--warning-button-color);
 }
 
 .eva-callsite.eva-focused.eva-transient {
-    background: var(--eva-focused-transient);
+    background: var(--code-select);
 }
 
 /* -------------------------------------------------------------------------- */
@@ -140,16 +98,16 @@
 }
 
 .eva-alarm-none { display: none; }
-.eva-alarm-True { fill: green; }
-.eva-alarm-False { fill: #fb4e4a; }
-.eva-alarm-Unknown { fill: darkorange; }
+.eva-alarm-True { fill: var(--eva-alarms-true); }
+.eva-alarm-False { fill: var(--eva-alarms-false); }
+.eva-alarm-Unknown { fill: var(--eva-alarms-unknown); }
 
 /* -------------------------------------------------------------------------- */
 /* --- Styling Values                                                     --- */
 /* -------------------------------------------------------------------------- */
 
 .eva-stmt {
-    color: var(--eva-stmt-label);
+    color: var(--info-text);
     text-select: none;
 }
 
@@ -177,19 +135,19 @@
 
 .eva-function {
     padding-top: 0px;
-    background: var(--eva-info-background);
+    background: var(--background-profound);
 }
 
 .eva-head {
     padding-top: 2px;
-    color: var(--eva-info-text);
+    color: var(--info-text);
     text-align: center;
-    border-left: thin solid black;
-    border-bottom: thin solid black;
+    border-left: thin solid var(--border);
+    border-bottom: thin solid var(--border);
 }
 
 .eva-probes .eva-head {
-    border-top: thin solid black;
+    border-top: thin solid var(--border);
 }
 
 .eva-phantom {
@@ -214,8 +172,8 @@
 
 .eva-cell {
     flex: 1 1 auto;
-    border-right: thin solid black;
-    border-bottom: thin solid black;
+    border-right: thin solid var(--border);
+    border-bottom: thin solid var(--border);
     overflow: hidden;
     display: flex;
     justify-content: center;
@@ -236,13 +194,13 @@
 }
 
 .eva-cell:nth-child(2) {
-    border-left: thin solid black;
+    border-left: thin solid var(--border);
 }
 
 .eva-probes .eva-cell {
     padding: 2px 4px;
     text-align: center;
-    border-top: thin solid black;
+    border-top: thin solid var(--border);
 }
 
 .eva-cell * {
@@ -275,50 +233,42 @@
 /* --- Probes --- */
 
 .eva-probes .eva-cell {
-    background: #cbe4cb;
+    background: var(--eva-probes-pinned);
 }
 
 .eva-probes .eva-focused {
-    background: #02da02;
+    background: var(--eva-probes-pinned-focused);
 }
 
 .eva-probes .eva-transient {
-    background: #fff0d5;
+    background: var(--eva-probes-transient);
 }
 
 .eva-probes .eva-transient.eva-focused {
-    background: orange;
+    background: var(--eva-probes-transient-focused);
 }
 
 
 /* --- Values / Callstacks --- */
 
 .eva-values .eva-cell {
-    background: #eee;
-}
-
-.eva-values .eva-focused {
-    background: #e1e8f7;
-}
-
-.eva-values .eva-transient.eva-focused {
-    background: #fff0d5;
+    background: var(--background-alterning-odd);
 }
 
 .eva-callstack.eva-row-odd .eva-cell {
-    background: #eee;
+    background: var(--background-alterning-odd);
 }
 
 .eva-callstack.eva-row-even .eva-cell {
-    background: #e2e8e8;
+    background: var(--background-alterning-even);
 }
 
 .eva-callstack.eva-row-aligned {
-    background: lightblue;
+    background: var(--grid-layout-holder);
 }
 
 .eva-callstack.eva-row-selected {
-    background: #f9dca6;
+    background: var(--code-select);
 }
 
 /* -------------------------------------------------------------------------- */

ivette/src/ivette/prefs.tsx

@@ -78,9 +78,14 @@ export interface ThemeControls {
   wrapText: boolean;
 }
 
-export function useThemeButtons(props: ThemeProps): ThemeControls {
+export function useThemeColors() {
   const [themeColors] = Settings.useGlobalSettings(ColorTheme);
-  const theme = themeColors === 'dark' ? 'dark-code' : 'default';
+  return themeColors === 'dark' ? 'dark-code' : 'default';
+}
+
+export function useThemeButtons(props: ThemeProps): ThemeControls {
+  // const [themeColors] = Settings.useGlobalSettings(ColorTheme);
+  // const theme = themeColors === 'dark' ? 'dark-code' : 'default';
   const [fontSize, setFontSize] = Settings.useGlobalSettings(props.fontSize);
   const [wrapText, setWrapText] = Settings.useGlobalSettings(props.wrapText);
   const zoomIn = () => fontSize < 48 && setFontSize(fontSize + 2);
@@ -88,7 +93,7 @@ export function useThemeButtons(props: ThemeProps): ThemeControls {
   const flipWrapText = () => setWrapText(!wrapText);
   const { disabled = false } = props;
   return {
-    theme,
+    theme: useThemeColors(),
     fontSize,
     wrapText,
     buttons: [

ivette/src/renderer/Controller.tsx

@@ -37,6 +37,7 @@ import { LED, LEDstatus } from 'dome/controls/displays';
 import { Label, Code } from 'dome/controls/labels';
 import { RichTextBuffer } from 'dome/text/buffers';
 import { Text } from 'dome/text/editors';
+import * as Preferences from 'ivette/prefs';
 
 import * as Ivette from 'ivette';
 import * as Server from 'frama-c/server';
@@ -330,7 +331,7 @@ const RenderConsole = () => {
         buffer={edited ? editor : Server.buffer}
         mode="text"
         readOnly={!edited}
-        theme="ambiance"
+        theme={Preferences.useThemeColors()}
       />
     </>
   );

ivette/src/renderer/style.css

@@ -59,7 +59,7 @@
 
 .labview-close:hover
 {
-    fill: red ;
+    fill: var(--negative-button-color) ;
 }
 
 .labview-icon {
@@ -67,3 +67,67 @@
 }
 
 /* -------------------------------------------------------------------------- */
+/* --- Styling all scrollbars                                             --- */
+/* -------------------------------------------------------------------------- */
+
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background-intense);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--info-text-discrete);
+  border-radius: 20px;
+  border: 3px solid var(--background-intense);
+}
+
+::-webkit-scrollbar-corner {
+  background-color: var(--background-profound);
+  background: var(--background-profound);
+  color: var(--background-profound);
+}
+
+/* -------------------------------------------------------------------------- */
+/* --- Styling all inputs                                                 --- */
+/* -------------------------------------------------------------------------- */
+
+input[type="text"]::placeholder {
+  font-style: italic;
+  color: var(--text-discrete);
+}
+
+input[type="text"] {
+  vertical-align: middle;
+  margin: 2px 4px 2px 0px;
+  background-color: var(--background-interaction);
+  border: var(--border);
+  border-radius: 2px;
+}
+
+input:focus-visible {
+  outline: none;
+  box-shadow: 0px 0px 1px 1px var(--border);
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  width: 13px;
+  height: 13px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  content: "";
+  font-size: 12px;
+  color: var(--text);
+  background-clip: content-box;
+  padding: 1px;
+}
+
+input[type="checkbox"]:checked {
+  background-color: var(--selected-element);
+}
+
+/* -------------------------------------------------------------------------- */