Auf die Schnelle, Nova to Proton => Ein umfassendes CSS

Mira_Belle

Habe etwas länger gebraucht, aber nun ist das CSS fertig.

Es sollten alle wichtigen und richtigen Selektoren abgedeckt sein.
Den "Code" einfach in die userChrome.css und in die userContent.css kopieren.

CSS

@charset "UTF-8";

@-moz-document url-prefix("about:"), url-prefix("chrome:") {
    :root {

        --border-radius-xsmall: 2px !important;	/* Nova: 4px, Proton: 2px */
		--border-radius-small: 4px !important;	/* Nova: 8px, Proton: 4px */
		--border-radius-medium: 8px !important;	/* Nova: 12px, Proton: 8px */
		--border-radius-large: 16px !important;	/* Nova: undefined, Proton: 16px */
		--border-radius-xlarge: 8px !important;	/* Nova: 24px, Proton: undefined */
        --border-radius-circle: 8px !important;	/* Nova: undefined, Proton: 9999px */

        --button-border-radius: 8px !important;         /* Nova: var(-border-radius-xlarge), Proton: var(--border-radius-medium) */
        --card-border-radius: 8px !important;           /* Nova: undefined, Proton: var(--border-radius-large) */
        --card-border-radius-compact: 8px !important;   /* Nova: undefined, Proton: var(--border-radius-medium) */
        --checkbox-border-radius: 0px !important;       /* Nova: undefined, Proton: undefined */
        --input-text-border-radius: 8px !important;     /* Nova: undefined, Proton: var(--border-radius-medium) */
        --input-search-border-radius: 8px !important;   /* Nova: var(--border-radius-circle), Proton: var(var(--input-text-border-radius) */
        --panel-border-radius: 8px !important;          /* Nova: var(--popup-border-radius), Proton: var(--border-radius-medium) */
        --panel-menuitem-border-radius: 0px !important; /* Nova: var(--border-radius-large), Proton: var(--border-radius-small) */
        --popup-border-radius: 8px !important;          /* Nova: var(--border-radius-xlarge), Proton: var(--border-radius-medium) */

        --color-gray-0: #fbfbfe !important;
        --color-gray-20: #f0f0f4 !important;
        --color-gray-30: #bac2ca !important;
        --color-gray-50: #bfbfc9 !important;
        --color-gray-60: #8f8f9d !important;
        --color-gray-70: #5b5b66 !important;
        --color-gray-80: #23222b !important;
        --color-gray-90: #1c1b22 !important;
        --color-blue-0: oklch(97% 0.05 260) !important;
        --color-blue-10: oklch(90% 0.13 260) !important;
        --color-blue-20: oklch(83% 0.17 260) !important;
        --color-blue-30: oklch(76% 0.2 260) !important;
        --color-blue-40: oklch(69% 0.22 260) !important;
        --color-blue-50: oklch(62% 0.24 260) !important;
        --color-blue-60: oklch(55% 0.24 260) !important;
        --color-blue-70: oklch(48% 0.2 260) !important;
        --color-blue-80: oklch(41% 0.17 260) !important;
        --color-blue-90: oklch(34% 0.14 260) !important;
        --color-cyan-0: oklch(97% 0.05 205) !important;
        --color-cyan-10: oklch(90% 0.07 205) !important;
        --color-cyan-20: oklch(83% 0.11 205) !important;
        --color-cyan-30: oklch(76% 0.14 205) !important;
        --color-cyan-40: oklch(69% 0.19 205) !important;
        --color-cyan-50: oklch(62% 0.21 205) !important;
        --color-cyan-60: oklch(55% 0.21 205) !important;
        --color-cyan-70: oklch(48% 0.2 205) !important;
        --color-cyan-80: oklch(41% 0.17 205) !important;
        --color-cyan-90: oklch(34% 0.14 205) !important;
        --color-green-0: oklch(97% 0.05 145) !important;
        --color-green-10: oklch(90% 0.1 145) !important;
        --color-green-20: oklch(83% 0.14 145) !important;
        --color-green-30: oklch(76% 0.17 145) !important;
        --color-green-40: oklch(69% 0.19 145) !important;
        --color-green-50: oklch(62% 0.21 145) !important;
        --color-green-60: oklch(55% 0.21 145) !important;
        --color-green-70: oklch(48% 0.2 145) !important;
        --color-green-80: oklch(41% 0.17 145) !important;
        --color-green-90: oklch(34% 0.14 145) !important;
        --color-orange-0: oklch(97% 0.05 50) !important;
        --color-orange-10: oklch(90% 0.1 50) !important;
        --color-orange-20: oklch(86% 0.14 50) !important;
        --color-orange-30: oklch(79% 0.17 50) !important;
        --color-orange-40: oklch(72% 0.19 50) !important;
        --color-orange-50: oklch(65% 0.21 50) !important;
        --color-orange-60: oklch(58% 0.21 50) !important;
        --color-orange-70: oklch(48% 0.2 50) !important;
        --color-orange-80: oklch(41% 0.17 50) !important;
        --color-orange-90: oklch(34% 0.14 50) !important;
        --color-pink-0: oklch(97% 0.05 360) !important;
        --color-pink-10: oklch(90% 0.1 360) !important;
        --color-pink-20: oklch(83% 0.14 360) !important;
        --color-pink-30: oklch(76% 0.17 360) !important;
        --color-pink-40: oklch(69% 0.19 360) !important;
        --color-pink-50: oklch(62% 0.21 360) !important;
        --color-pink-60: oklch(55% 0.21 360) !important;
        --color-pink-70: oklch(48% 0.2 360) !important;
        --color-pink-80: oklch(41% 0.17 360) !important;
        --color-pink-90: oklch(34% 0.14 360) !important;
        --color-purple-0: oklch(97% 0.05 315) !important;
        --color-purple-10: oklch(90% 0.1 315) !important;
        --color-purple-20: oklch(83% 0.14 315) !important;
        --color-purple-30: oklch(76% 0.17 315) !important;
        --color-purple-40: oklch(69% 0.19 315) !important;
        --color-purple-50: oklch(62% 0.21 315) !important;
        --color-purple-60: oklch(55% 0.21 315) !important;
        --color-purple-70: oklch(48% 0.2 315) !important;
        --color-purple-80: oklch(41% 0.17 315) !important;
        --color-purple-90: oklch(34% 0.14 315) !important;
        --color-red-0: oklch(97% 0.05 15) !important;
        --color-red-10: oklch(90% 0.1 15) !important;
        --color-red-20: oklch(83% 0.14 15) !important;
        --color-red-30: oklch(76% 0.17 15) !important;
        --color-red-40: oklch(69% 0.19 15) !important;
        --color-red-50: oklch(62% 0.21 15) !important;
        --color-red-60: oklch(55% 0.21 15) !important;
        --color-red-70: oklch(48% 0.2 15) !important;
        --color-red-80: oklch(41% 0.17 15) !important;
        --color-red-90: oklch(34% 0.14 15) !important;
        --color-violet-0: oklch(97% 0.05 290) !important;
        --color-violet-10: oklch(90% 0.13 290) !important;
        --color-violet-20: oklch(83% 0.17 290) !important;
        --color-violet-30: oklch(76% 0.2 290) !important;
        --color-violet-40: oklch(69% 0.22 290) !important;
        --color-violet-50: oklch(62% 0.24 290) !important;
        --color-violet-60: oklch(55% 0.24 290) !important;
        --color-violet-70: oklch(48% 0.2 290) !important;
        --color-violet-80: oklch(41% 0.17 290) !important;
        --color-violet-90: oklch(34% 0.14 290) !important;
        --color-yellow-0: oklch(97% 0.05 90) !important;
        --color-yellow-10: oklch(93% 0.1 90) !important;
        --color-yellow-20: oklch(86% 0.14 90) !important;
        --color-yellow-30: oklch(79% 0.2 90) !important;
        --color-yellow-40: oklch(72% 0.22 90) !important;
        --color-yellow-50: oklch(65% 0.24 90) !important;
        --color-yellow-60: oklch(58% 0.24 90) !important;
        --color-yellow-70: oklch(51% 0.23 90) !important;
        --color-yellow-80: oklch(41% 0.2 90) !important;
        --color-yellow-90: oklch(34% 0.14 90) !important;

        /** color **/
        --color-accent-primary: light-dark(oklch(55% 0.24 260), oklch(76% 0.14 205)) !important;
        /* Nova:    --color-accent-primary: light-dark(var(--color-violet-50), var(--color-violet-30)); */
        /* Proton:  --color-accent-primary: light-dark(var(--color-blue-60), var(--color-cyan-30));     */
        --color-accent-primary-hover: light-dark(oklch(48% 0.2 260), oklch(83% 0.11 205)) !important;
        /* Nova:    --color-accent-primary: light-dark(var(--color-violet-60), var(--color-violet-20)); */
        /* Proton:  --color-accent-primary: light-dark(var(--color-blue-70), var(--color-cyan-20));     */
        --color-accent-primary-active: light-dark(oklch(41% 0.17 260), oklch(90% 0.07 205)) !important;
        /* Nova:    --color-accent-primary-active: light-dark(var(--color-violet-70), var(--color-violet-10)); */
        /* Proton:  --color-accent-primary-active: light-dark(var(--color-blue-80), var(--color-cyan-10)); */ 
        --color-accent-primary-selected: light-dark(oklch(55% 0.24 260), oklch(76% 0.14 205)) !important;
        /* Nova:    --color-accent-primary-selected: var(--button-background-color-primary-active); */
        /* Proton:  --color-accent-primary-selected: light-dark(var(--color-blue-60), var(--color-cyan-30)); */
        --color-accent-attention: light-dark(#2ac3a2, #54ffbd) !important;
        /* Nova:    --color-accent-attention: light-dark(var(--color-green-50), var(--color-green-20)); */
        /* Proton:  --color-accent-attention: light-dark(#2ac3a2, #54ffbd); */

        /** focus-outline **/
        --focus-outline: 2px solid var(--focus-outline-color) !important;
        /* Nova:    undefined */
        /* Proton:  --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color); */        
        --focus-outline-color: light-dark(oklch(55% 0.24 260), oklch(76% 0.14 205)) !important;
        /* Nova:    undefined */
        /* Proton:  --focus-outline-color: var(--color-accent-primary); */
        --focus-outline-color: var(--color-accent-primary) !important;
        /* Nova:    undefined */
        /* Proton:  --color-accent-primary: light-dark(var(--color-blue-60), var(--color-cyan-30)); */
        --focus-outline-inset: calc(-1 * 2px) !important;
        /* Nova:    undefined */
        /* Proton:  calc(-1 * var(--focus-outline-width)); */
        --focus-outline-offset: 2px !important;
        /* Nova:    undefined */
        /* Proton:  2px */        
        --focus-outline-width: 2px !important;
        /* Nova:    undefined */
        /* Proton:  2px */

        /** text-color **/
        --text-color: light-dark(#15141a, #fbfbfe) !important;
        /* Nova:    --text-color: light-dark(var(--color-violet-desaturated-90), var(--color-violet-desaturated-0)); */
        /* Proton:  CanvasText; */
        --text-color-accent-primary-selected: light-dark(#ffffff, #15141a) !important;
        /* Nova:    SelectedItemText; */
        /* Proton:  SelectedItemText; */
        --text-color-error: light-dark(oklch(48% 0.2 15), oklch(83% 0.14 15)) !important;
        /* Nova:    --text-color-error: light-dark(var(--color-red-50), var(--color-red-20)); */
        /* Proton:  --text-color-error: light-dark(var(--color-red-70), var(--color-red-20)); */

        /** background-color **/
        --background-color-box: light-dark(#ffffff, #23222b) !important;
        /* Nova:    undefined */
        /* Proton:  --background-color-box: var(--background-color-canvas); */
        --background-color-box-info: light-dark(var(--color-gray-20), var(--color-gray-80)) !important;
        /* Nova:    undefined */
        /* Proton:  --background-color-box-info: var(--background-color-canvas); */
        --background-color-canvas: light-dark(#ffffff, #1c1b22) !important;
        /* Nova:    undefined */
        /* Proton:  --background-color-canvas: Canvas; */
        --background-color-critical: light-dark(var(--color-red-0), var(--color-red-90)) !important;
        /* Nova:    --background-color-critical: light-dark(var(--color-red-10), var(--color-red-70)); */
        /* Proton:  --background-color-critical: var(--background-color-canvas); */
        --background-color-information: light-dark(var(--color-blue-0), var(--color-blue-90)) !important;
        /* Nova:    --background-color-information: light-dark(var(--color-violet-10), var(--color-violet-70)); */
        /* Proton:  --background-color-canvas: Canvas; */
        --background-color-success: light-dark(var(--color-green-0), var(--color-green-90)) !important;
        /* Nova:    --background-color-success: light-dark(var(--color-green-10), var(--color-green-70)); */
        /* Proton:  --background-color-success: var(--background-color-canvas); */
        --background-color-warning: light-dark(var(--color-yellow-0), var(--color-yellow-90)) !important;
        /* Nova:    --background-color-warning: light-dark(var(--color-yellow-10), var(--color-yellow-70)); */
        /* Proton:  --background-color-warning: var(--background-color-canvas); */

        /** table **/
        --table-row-background-color-alternate: light-dark(#f0f0f4, var(--color-gray-80)) !important;
        /* Nova:    undefined */
        /* Proton:  --table-row-background-color-alternate: var(--background-color-canvas); */

        /** border **/
        --border-color: light-dark(var(--color-gray-50), var(--color-gray-70)) !important;
        /* Nova:    undefined */
        /* Proton:  undefined */        
        --border-color-deemphasized: light-dark(var(--color-gray-30), var(--color-gray-70)) !important;
        /* Nova:    --border-color-deemphasized: color-mix(in srgb, currentColor 24%, transparent); */
        /* Proton:  --border-color-deemphasized: color-mix(in srgb, currentColor 24%, transparent); */        
        --border-color-interactive: light-dark(var(--color-gray-60), var(--color-gray-50)) !important;
        /* Nova:    --border-color-interactive: light-dark(var(--color-gray-45), var(--color-gray-40)); */
        /* Proton:  --border-color-interactive: var(--text-color); */
        --border-color-interactive-hover: var(--border-color-interactive) !important;
        /* Nova:    --border-color-interactive-hover: light-dark(var(--color-gray-50), var(--color-gray-20)); */
        /* Proton:  --border-color-interactive-hover: var(--border-color-interactive); */
        --border-color-interactive-active: var(--border-color-interactive) !important;
        /* Nova:    --border-color-interactive-active: light-dark(var(--color-gray-50), var(--color-gray-15)); */
        /* Proton:  --border-color-interactive-active: var(--border-color-interactive); */
        --border-color-interactive-disabled: var(--border-color-interactive) !important;
        /* Nova:    --border-color-interactive-disabled: light-dark(var(--color-gray-25), var(--color-gray-55)); */
        /* Proton:  --border-color-interactive-disabled: var(--border-color-interactive); */
        --border-color-error: light-dark(var(--color-red-70), var(--color-red-20)) !important;
        /* Nova:    --border-color-error: light-dark(var(--color-red-50), var(--color-red-20)); */
        /* Proton:  --border-color-error: light-dark(var(--color-red-70), var(--color-red-20)); */
        --border-color-selected: light-dark(#0062f9, #00cadb) !important;
        /* Nova:    undefined */
        /* Proton:  --border-color-selected: var(--color-accent-primary); */

        /** box-shadow **/
        --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2)) !important;
        /* Nova:    --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2)); */
        /* Proton:  --box-shadow-color-darker-layer-1: light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.2)); */
        --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)) !important;
        /* Nova:    --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)); */
        /* Proton:  --box-shadow-color-darker-layer-2: light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)); */
        --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.15)) !important;
        /* Nova:    --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.06)); */
        /* Proton:  --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.15)); */
        --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)) !important;
        /* Nova:    --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12)); */
        /* Proton:  --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2)); */        

        /** button **/
        --button-background-color: color-mix(in srgb, currentColor 7%, transparent) !important;
        /* Nova:    --button-background-color: transparent; */
        /* Proton:  --button-background-color: ButtonFace; */        
        --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent) !important;
        /* Nova:    --button-background-color-hover: SelectedItemText; */
        /* Proton:  --button-background-color-hover: SelectedItemText; */        
        --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent) !important;
        /* Nova:    --button-background-color-active: SelectedItemText; */
        /* Proton:  --button-background-color-active: SelectedItemText; */         
        --button-background-color-ghost: transparent !important;
        /* Nova:    --button-background-color-ghost: var(--button-background-color); */
        /* Proton:  --button-background-color-ghost: ButtonFace; */ 
        --button-background-color-ghost-hover: var(--button-background-color-hover) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-ghost-hover: var(--button-background-color-hover); */
        --button-background-color-ghost-active: var(--button-background-color-active) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-ghost-active: var(--button-background-color-active); */
        --button-background-color-ghost-selected: var(--button-background-color-ghost-active) !important;
        /* Nova:    --button-background-color-ghost-selected: var(--button-background-color-selected); */
        /* Proton:  --button-background-color-ghost-selected: var(--button-background-color-ghost-active); */
        --button-background-color-muted: var(--button-background-color) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-muted: var(--button-background-color); */
        --button-background-color-muted-hover: var(--button-background-color-hover) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-muted-hover: var(--button-background-color-hover); */
        --button-background-color-muted-active: var(--button-background-color-active) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-muted-active: var(--button-background-color-active); */
        --button-background-color-muted-disabled: var(--button-background-color-disabled) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-muted-disabled: var(--button-background-color-disabled); */
        --button-background-color-muted-selected: var(--button-background-color-muted-active) !important;
        /* Nova:    --button-background-color-muted-selected: var(--button-background-color-muted-active); */
        /* Proton:  --button-background-color-muted-selected: var(--button-background-color-muted-active); */
        --button-background-color-primary-disabled: var(--button-background-color-primary) !important;
        /* Nova:    --button-background-color-primary-disabled: light-dark(var(--color-violet-desaturated-50), var(--color-violet-desaturated-40)); */
        /* Proton:  --button-background-color-primary-disabled: var(--button-background-color-primary); */
        --button-background-color-destructive: light-dark(var(--color-red-60), var(--color-red-30)) !important;
        /* Nova:    --button-background-color-destructive: var(--button-background-color-primary); */
        /* Proton:  --button-background-color-destructive: var(--button-background-color-primary); */
        --button-background-color-destructive-hover: light-dark(var(--color-red-70), var(--color-red-20)) !important;
        /* Nova:    --button-background-color-destructive-hover: var(--button-background-color-primary-hover); */
        /* Proton:  --button-background-color-destructive-hover: var(--button-background-color-primary-hover); */
        --button-background-color-destructive-active: light-dark(var(--color-red-80), var(--color-red-10)) !important;
        /* Nova:    --button-background-color-destructive-active: var(--button-background-color-primary-active); */
        /* Proton:  --button-background-color-destructive-active: var(--button-background-color-primary-active); */
        --button-background-color-destructive-disabled: light-dark(var(--color-red-90), var(--color-red-10)) !important;
        /* Nova:    undefined */
        /* Proton:  --button-background-color-destructive-disabled: var(--button-background-color-primary-disabled); */
        --button-border-color: transparent !important;
        /* Nova:    --button-border-color: var(--color-accent-primary); */
        /* Proton:  --button-border-color: transparent; */
        --button-border-color-destructive: transparent !important;
        /* Nova:    --button-border-color-destructive: var(--button-border-color-ghost); */
        /* Proton:  --button-border-color-destructive: var(--button-border-color-primary); */
        --button-border-color-destructive-selected: var(--button-border-color-destructive-active) !important;
        /* Nova:    --button-border-color-destructive-selected: var(--button-border-color-destructive); */
        /* Proton:  --button-border-color-destructive-selected: var(--button-border-color-destructive-active); */
        --button-border-color-ghost: var(--button-border-color) !important;
        /* Nova:    --button-border-color-ghost: transparent; */
        /* Proton:  --button-border-color-ghost: var(--button-border-color); */
        --button-border-color-ghost-hover: var(--button-border-color-hover) !important;
        /* Nova:    --button-border-color-ghost-hover: var(--button-border-color-ghost); */
        /* Proton:  --button-border-color-ghost-hover: var(--button-border-color-hover); */
        --button-border-color-ghost-active: var(--button-border-color-active) !important;
        /* Nova:    --button-border-color-ghost-active: var(--button-border-color-ghost); */
        /* Proton:  --button-border-color-ghost-active: var(--button-border-color-active); */
        --button-border-color-ghost-disabled: var(--button-border-color-disabled) !important;
        /* Nova:    --button-border-color-ghost-disabled: var(--button-border-color-ghost); */
        /* Proton:  --button-border-color-ghost-disabled: var(--button-border-color-disabled); */
        --button-border-color-ghost-selected: var(--button-border-color-ghost-active) !important;
        /* Nova:    --button-border-color-ghost-selected: var(--button-border-color-ghost); */
        /* Proton:  --button-border-color-ghost-selected: var(--button-border-color-ghost-active); */
        --button-border-color-muted: var(--button-border-color) !important;
        /* Nova:    --button-border-color-muted: var(--button-border-color); */
        /* Proton:  --button-border-color-muted: var(--button-border-color); */
        --button-border-color-muted-hover: var(--button-border-color-hover) !important;
        /* Nova:    --button-border-color-muted-hover: var(--button-border-color-hover); */
        /* Proton:  --button-border-color-muted-hover: var(--button-border-color-hover); */
        --button-border-color-muted-active: var(--button-border-color-active) !important;
        /* Nova:    --button-border-color-muted-active: var(--button-border-color-active); */
        /* Proton:  --button-border-color-muted-active: var(--button-border-color-active); */
        --button-border-color-muted-disabled: var(--button-border-color-disabled) !important;
        /* Nova:    --button-border-color-muted-disabled: var(--button-border-color-disabled); */
        /* Proton:  --button-border-color-muted-disabled: var(--button-border-color-disabled); */
        --button-border-color-muted-selected: var(--button-border-color-muted-active) !important;
        /* Nova:    --button-border-color-muted-selected: var(--button-border-color-ghost-active); */
        /* Proton:  --button-border-color-muted-selected: var(--button-border-color-muted-active); */
        --button-border-color-primary: transparent !important;
        /* Nova:    --button-border-color-primary: var(--button-border-color-ghost); */
        /* Proton:  --button-border-color-primary: transparent; */
        --button-border-color-primary-selected: var(--button-border-color-primary-active) !important;
        /* Nova:    --button-border-color-primary-selected: var(--button-border-color-primary-active); */
        /* Proton:  --button-border-color-primary-selected: var(--button-border-color-primary-active); */
        --button-border-color-selected: var(--button-border-color-active) !important;
        /* Nova:    --button-border-color-selected: var(--button-border-color-active); */
        /* Proton:  --button-border-color-selected: var(--button-border-color-active); */
        --button-border-width-split: var(--border-width) !important;
        /* Nova:    --button-border-width-split: 0; */
        /* Proton:  --button-border-width-split: var(--border-width); */
        --button-gap-split: var(--space-xxsmall) !important;
        /* Nova:    --button-gap-split: 0; */
        /* Proton:  --button-gap-split: var(--space-xxsmall); */
        --button-padding-inline-small: var(--button-padding-inline) !important;
        /* Nova:    --button-padding-inline-small: var(--space-medium); */
        /* Proton:  --button-padding-inline-small: var(--button-padding-inline); */
        --button-split-separator-background-color: transparent !important;
        /* Nova:    --button-split-separator-background-color: var(--button-border-color); */
        /* Proton:  --button-split-separator-background-color: transparent; */
        --button-text-color: light-dark(#15141a, #fbfbfe) !important;
        /* Nova:    undefined */
        /* Proton:  undefined */
        --button-text-color-primary: light-dark(#ffffff, #15141a) !important;
        /* Nova:    --button-text-color-primary: light-dark(var(--color-white), var(--color-gray-70)); */
        /* Proton:  undefined */
        --button-text-color-primary-hover: var(--button-text-color-primary);
        /* Nova:    --button-text-color-primary-active: var(--button-text-color-primary-hover); */
        /* Proton:  --button-text-color-primary-hover: var(--button-text-color-primary); */
        --button-text-color-primary-active: var(--button-text-color-primary-hover) !important;
        /* Nova:    --button-text-color-primary-active: var(--button-text-color-primary); */
        /* Proton:  --button-text-color-primary-active: var(--button-text-color-primary-hover); */
        --button-text-color-ghost: inherit !important;
        /* Nova:    undefined */
        /* Proton:  --button-text-color-ghost: inherit; */
        --button-text-color-ghost-hover: inherit !important;
        /* Nova:    --button-text-color-ghost-hover: var(--button-text-color-ghost); */
        /* Proton:  --button-text-color-ghost-hover: inherit; */
        --button-text-color-ghost-active: inherit !important;
        /* Nova:    --button-text-color-ghost-active: var(--button-text-color-ghost); */
        /* Proton:  --button-text-color-ghost-active: inherit; */
        --button-text-color-ghost-disabled: inherit !important;
        /* Nova:    undefined */
        /* Proton:  --button-text-color-ghost-disabled: inherit; */
        --button-text-color-menu-hover: var(--button-text-color-ghost-hover) !important;
        /* Nova:    --button-text-color-menu-hover: -moz-menuhovertext; */
        /* Proton:  --button-text-color-menu-hover: var(--button-text-color-ghost-hover); */
        --button-text-color-menu-active: var(--button-text-color-ghost-active) !important;
        /* Nova:    --button-text-color-menu-active: light-dark(var(--button-text-color-ghost-active), var(--button-text-color-active)); */
        /* Proton:  --button-text-color-menu-active: var(--button-text-color-ghost-active); */
        --button-text-color-menu-disabled: var(--button-text-color-ghost-disabled) !important;
        /* Nova:    --button-text-color-menu-disabled: light-dark(var(--button-text-color-ghost-disabled), var(--button-text-color-disabled)); */
        /* Proton:  --button-text-color-menu-disabled: var(--button-text-color-ghost-disabled); */
        --button-text-color-menu-selected: var(--button-text-color-ghost-selected) !important;
        /* Nova:    --button-text-color-menu-selected: light-dark(var(--button-text-color-ghost-selected), var(--button-text-color-selected)); */
        /* Proton:  --button-text-color-menu-selected: var(--button-text-color-ghost-selected); */
        --button-text-color-muted-hover: var(--button-text-color-hover) !important;
        /* Nova:    --button-text-color-muted-hover: var(--button-text-color-muted); */
        /* Proton:  --button-text-color-muted-hover: var(--button-text-color-hover); */
        --button-text-color-muted-active: var(--button-text-color-active) !important;
        /* Nova:    --button-text-color-muted-active: var(--button-text-color-muted); */
        /* Proton:  --button-text-color-muted-active: var(--button-text-color-active); */
        --button-text-color-muted-disabled: var(--button-text-color-disabled) !important;
        /* Nova:    --button-text-color-muted-disabled: var(--button-text-color-muted); */
        /* Proton:  --button-text-color-muted-disabled: var(--button-text-color-disabled); */
        --button-text-color-selected: var(--button-text-color-active) !important;
        /* Nova:    --button-text-color-selected: var(--button-text-color); */
        /* Proton:  --button-text-color-selected: var(--button-text-color-active); */
        --button-text-color-destructive: light-dark(#ffffff, #15141a) !important;
        /* Nova:    --button-text-color-destructive: light-dark(var(--color-white), var(--button-text-color-primary)); */
        /* Proton:  --button-text-color-destructive: light-dark(var(--color-white), var(--color-gray-100)); */
        --button-text-color-destructive-selected: var(--button-text-color-destructive-active) !important;
        /* Nova:    --button-text-color-destructive-selected: light-dark(var(--button-text-color-destructive), var(--button-text-color-destructive-active)); */
        /* Proton:  --button-text-color-destructive-selected: var(--button-text-color-destructive-active); */
        --button-border: transparent;
        /* Nova:    undefined */
        /* Proton:  --button-border: var(--border-width) solid var(--button-border-color); */

        /** card **/
        --card-gap: var(--card-padding) !important;
        /* Nova:    --card-gap: var(--space-medium); */
        /* Proton:  --card-gap: var(--card-padding); */
        --card-header-background-color: initial !important;
        /* Nova:    --card-header-background-color: var(--button-background-color); */
        /* Proton:  --card-header-background-color: initial; */
        --card-header-background-color-hover: var(--button-background-color-hover) !important;
        /* Nova:    undefined */
        /* Proton:  --card-header-background-color-hover: var(--button-background-color-hover); */
        --card-header-background-color-active: var(--button-background-color-active) !important;
        /* Nova:    undefined */
        /* Proton:  --card-header-background-color-active: var(--button-background-color-active); */
        --card-header-border-color: transparent !important;
        /* Nova:    --card-header-border-color: transparent; */
        /* Proton:  --card-header-border-color: transparent; */               
        --card-header-border-color-hover: transparent !important;
        /* Nova:    undefined */
        /* Proton:  --card-header-border-color-hover: transparent; */
        --card-header-border-color-active: transparent !important;
        /* Nova:    undefined */
        /* Proton:  --card-header-border-color-active: transparent; */

        /** icon **/
        --icon-color: light-dark(var(--color-gray-70), var(--color-gray-0)) !important;
        /* Nova:    --icon-color: var(--text-color); */
        /* Proton:  --icon-color: light-dark(var(--color-gray-70), var(--color-gray-0)); */
        --icon-color-critical: light-dark(var(--color-red-60), var(--color-red-20)) !important;
        /* Nova:    --icon-color-critical: light-dark(var(--color-red-50), var(--color-red-20)); */
        /* Proton:  --icon-color-critical: light-dark(var(--color-red-60), var(--color-red-20)); */
        --icon-color-information: light-dark(var(--color-blue-60), var(--color-blue-20)) !important;
        /* Nova:    --icon-color-information: light-dark(var(--color-violet-50), var(--color-violet-20)); */
        /* Proton:  --icon-color-information: light-dark(var(--color-blue-60), var(--color-blue-20)); */
        --icon-color-success: light-dark(var(--color-green-60), var(--color-green-20)) !important;
        /* Nova:    --icon-color-success: light-dark(var(--color-green-50), var(--color-green-20)); */
        /* Proton:  --icon-color-success: light-dark(var(--color-green-60), var(--color-green-20)); */
        --icon-color-warning: light-dark(var(--color-yellow-60), var(--color-yellow-20)) !important;
        /* Nova:    --icon-color-warning: light-dark(var(--color-yellow-50), var(--color-yellow-20)); */
        /* Proton:  --icon-color-warning: light-dark(var(--color-yellow-60), var(--color-yellow-20)); */

        /** info-bar **/
        --info-bar-border-color: var(--border-color-deemphasized) !important;
        /* Nova:    --info-bar-border-color: light-dark(var(--color-violet-desaturated-20), var(--color-gray-60)); */
        /* Proton:  --info-bar-border-color: var(--border-color-deemphasized); */
        --info-bar-margin: 4px !important;
        /* Nova:    --info-bar-margin: 0; */
        /* Proton:  --info-bar-margin: 4px; */

        /** input **/
        --input-search-icon-size: var(--input-text-icon-size) !important;
        /* Nova:    --input-search-icon-size: var(--icon-size-small); */
        /* Proton:  --input-search-icon-size: var(--input-text-icon-size); */
        --input-text-background-color: light-dark(#ffffff, #42414d) !important;
        /* Nova:    --input-text-background-color: var(--background-color-box); */
        /* Proton:  undefined */
        --input-text-background-color-disabled: var(--button-background-color-disabled) !important;
        /* Nova:    --input-text-background-color-disabled: var(--button-background-color-ghost-disabled); */
        /* Proton:  --input-text-background-color-disabled: var(--button-background-color-disabled); */

        /** panel **/
        --panel-background-color: light-dark(#ffffff, rgb(66, 65, 77)) !important;
        /* Nova:    --panel-background-color: var(--popup-background-color); */
        /* Proton:  --panel-background-color: light-dark(var(--color-white), rgb(66, 65, 77)); */
        --panel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)) !important;
        /* Nova:    --panel-border-color: var(--popup-border-color); */
        /* Proton:  --panel-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); */
        --panel-text-color: light-dark(#000000, rgb(251, 251, 254)) !important;
        /* Nova:    --panel-text-color: var(--text-color); */
        /* Proton:  --panel-text-color: light-dark(var(--color-black), rgb(251, 251, 254)); */

        /** popup **/
        --popup-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)) !important;
        /* Nova:    --popup-border-color: var(--border-color-deemphasized); */
        /* Proton:  --popup-border-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94)); */
        /** popup **/
        --popup-background-color: var(--background-color-box) !important;
        /* Nova:    undefined */
        /* Proton:  --popup-background-color: var(--background-color-box); */

        /** popup **/
        --sidebar-border-color: var(--card-border-color) !important;
        /* Nova:    --sidebar-border-color: var(--chrome-content-separator-color); */
        /* Proton:  --sidebar-border-color: var(--card-border-color); */
        --sidebar-background-color: light-dark(white, rgb(28, 27, 34));
        /* Nova:    undefined */
        /* Proton:  --sidebar-background-color: light-dark(white, rgb(28, 27, 34)); */ 
        --sidebar-text-color: light-dark(rgb(21, 20, 26), rgb(249, 249, 250));
        /* Nova:    undefined */
        /* Proton:  --sidebar-text-color: light-dark(rgb(21, 20, 26), rgb(249, 249, 250)); */ 
    }

    button {
        border-color: transparent !important;
        /* Nova:    undefined */
        /* Proton:  undefined */        
    }

    button:not(:focus-visible) {
        outline: none !important;
        /* Nova:    undefined */
        /* Proton:  undefined */        
    }
}

Alles anzeigen

Sören Hentzschel

Okay, aber wozu? Du hast halt die Variablen aus dem Quellcode geholt. Wofür welche Variable genutzt wird, geht daraus auch nicht hervor. Wieso sollte man sich also die, wenn man es wie angewiesen in beide Dateien kopiert, über 1.000 (!) Zeilen CSS einfügen? Der Teil ist obsolete, siehe mein nächster Kommentar.

Abgesehen davon sehe ich auch einen offensichtlichen Fehler:

CSS

--border-radius-circle: 8px !important;	/* Nova: undefined, Proton: 9999px */

--border-radius-circle ist auch in Nova mit 9999px definiert. Und ein Kreis mit nur 8px Rundung ergibt wohl kaum Sinn.

Mira_Belle

Zitat von Sören Hentzschel

Okay, aber wozu? Du hast halt die Variablen aus dem Quellcode geholt. Wofür welche Variable genutzt wird, geht daraus auch nicht hervor. Wieso sollte man sich also die, wenn man es wie angewiesen in beide Dateien kopiert, über 1.000 (!) Zeilen CSS einfügen?

Auf die Schnelle!!
Für die, die einfach nur wieder zum alten Design wollen.

Wer nur spezielle Elemente der Oberfläche geändert haben möchte, muss weiterhin das Board bemühen!

Und wer sich mit CSS und der Werkzeuge ein wenig auskennt, kann es als Vorlage, oder nur Auszüge daraus nutzen.

Aber mal davon abgesehen.
Bis zu der Zeile 22 sind ja nur die Radien angegeben!

Genau so, wie das hier im Board auch schon "rumfliegt"!
Ich hab's halt nur zusammen geführt.

Danach kommt eine "Farbtabelle" und danach die Farben für die verschiedenen Elemente.
Wer mit z.B. /** button **/ nichts anfangen kann, kann fragen
oder soll ganz einfach das CSS meiden.

Auf die Schnelle, Nova to Proton => Ein umfassendes CSS

Ähnliche Themen

Firefox-Theme und Profil

Neuer Firefox 157 Nova - alte userChrome.css

Border-radien in NOVA global ändern

Das Script searchEngineIcon.uc.js liefert zusammengedrängte Beschriftung

Scaling/display problems

html:moz-page-nav-button wie bearbeiten