diff --git a/vaultwarden/cwchristerw/custom.css b/vaultwarden/cwchristerw/custom.css new file mode 100644 index 0000000..6bf2791 --- /dev/null +++ b/vaultwarden/cwchristerw/custom.css @@ -0,0 +1,217 @@ +/* +Christer Warén - Themes +https://git.waren.io/cwchristerw/themes +*/ + +:root { + --color-transparent-hover: rgb(255 255 255 / 0.02); + --color-shadow: 0 0 0; + + --color-background: 32 39 51; + --color-background-alt: 18 26 39; + --color-background-alt2: 47 52 61; + --color-background-alt3: 48 57 70; + --color-background-alt4: 18 26 39; + + --color-primary-100: 29 46 99; + --color-primary-300: 26 65 172; + --color-primary-600: 101 171 255; + --color-primary-700: 170 195 239; + + --color-secondary-100: 48 57 70; + --color-secondary-300: 82 91 106; + --color-secondary-500: 121 128 142; + --color-secondary-600: 143 152 166; + --color-secondary-700: 158 167 181; + + --color-success-100: 8 81 15; + --color-success-600: 107 241 120; + --color-success-700: 213 243 216; + + --color-danger-100: 149 27 42; + --color-danger-600: 255 78 99; + --color-danger-700: 255 236 239; + + --color-warning-100: 142 64 0; + --color-warning-600: 255 191 0; + --color-warning-700: 255 244 212; + + --color-info-100: 13 36 123; + --color-info-600: 121 161 233; + --color-info-700: 219 229 246; + + --color-notification-100: 117 37 83; + --color-notification-600: 255 143 208; + + --color-text-main: 243 246 249; + --color-text-muted: 136 152 181; + --color-text-contrast: 18 26 39; + --color-text-alt2: 255 255 255; + --color-text-code: 255 143 208; + + --color-hover-default: rgb(170 195 239 / 0.1); + --color-hover-contrast: rgb(0 0 0 / 0.15); + + --color-marketing-logo: 255 255 255; + --color-bw-blue: 23 93 220; + + --tw-ring-offset-color: #1f242e; + + --color-illustration-outline: 23 93 220; + --color-illustration-bg-primary: 170 195 239; + --color-illustration-bg-secondary: 121 161 233; + --color-illustration-bg-tertiary: 243 246 249; + --color-illustration-tertiary: 255 191 0; + --color-illustration-logo: 255 255 255; + + /* ======================================== + * SEMANTIC FOREGROUND COLORS (Dark Mode Overrides) + * ======================================== */ + + /* Neutral Foreground */ + --color-fg-contrast: var(--color-gray-900); + --color-fg-heading: var(--color-gray-050); + --color-fg-body: var(--color-gray-200); + --color-fg-body-subtle: var(--color-gray-400); + --color-fg-disabled: var(--color-gray-600); + + /* Brand Foreground */ + --color-fg-brand-soft: var(--color-brand-500); + --color-fg-brand: var(--color-brand-400); + --color-fg-brand-strong: var(--color-brand-200); + + /* Status Foreground */ + --color-fg-success: var(--color-green-400); + --color-fg-success-strong: var(--color-green-100); + --color-fg-danger: var(--color-red-400); + --color-fg-danger-strong: var(--color-red-100); + --color-fg-warning: var(--color-orange-400); + --color-fg-warning-strong: var(--color-orange-100); + --color-fg-sensitive: var(--color-pink-300); + + /* Accent Foreground */ + --color-fg-accent-primary-soft: var(--color-teal-400); + --color-fg-accent-primary: var(--color-teal-300); + --color-fg-accent-primary-strong: var(--color-teal-100); + --color-fg-accent-secondary-soft: var(--color-coral-500); + --color-fg-accent-secondary: var(--color-coral-400); + --color-fg-accent-secondary-strong: var(--color-coral-100); + --color-fg-accent-tertiary-soft: var(--color-purple-500); + --color-fg-accent-tertiary: var(--color-purple-400); + --color-fg-accent-tertiary-strong: var(--color-purple-100); + + /* ======================================== + * SEMANTIC BACKGROUND COLORS (Dark Mode Overrides) + * ======================================== */ + + /* Neutral Background */ + --color-bg-contrast: var(--color-gray-050); + --color-bg-contrast-strong: var(--color-gray-050); + --color-bg-primary: var(--color-gray-900); + --color-bg-secondary: var(--color-gray-800); + --color-bg-tertiary: var(--color-gray-950); + --color-bg-quaternary: var(--color-gray-700); + --color-bg-gray: var(--color-gray-600); + --color-bg-disabled: var(--color-gray-950); + + /* Brand Background */ + --color-bg-brand-softer: var(--color-brand-950); + --color-bg-brand-soft: var(--color-brand-900); + --color-bg-brand-medium: var(--color-brand-800); + --color-bg-brand: var(--color-brand-400); + --color-bg-brand-strong: var(--color-brand-300); + + /* Status Background */ + --color-bg-success-soft: var(--color-green-950); + --color-bg-success-medium: var(--color-green-900); + --color-bg-success: var(--color-green-400); + --color-bg-success-strong: var(--color-green-300); + --color-bg-danger-soft: var(--color-red-950); + --color-bg-danger-medium: var(--color-red-900); + --color-bg-danger: var(--color-red-400); + --color-bg-danger-strong: var(--color-red-300); + --color-bg-warning-soft: var(--color-orange-950); + --color-bg-warning-medium: var(--color-orange-900); + --color-bg-warning: var(--color-orange-400); + --color-bg-warning-strong: var(--color-orange-300); + + /* Accent Background */ + --color-bg-accent-primary-soft: var(--color-teal-950); + --color-bg-accent-primary-medium: var(--color-teal-900); + --color-bg-accent-primary: var(--color-teal-400); + --color-bg-accent-secondary-soft: var(--color-coral-950); + --color-bg-accent-secondary-medium: var(--color-coral-900); + --color-bg-accent-secondary: var(--color-coral-400); + --color-bg-accent-tertiary-soft: var(--color-purple-950); + --color-bg-accent-tertiary-medium: var(--color-purple-900); + --color-bg-accent-tertiary: var(--color-purple-600); + + /* Hover & Overlay */ + --color-bg-hover: rgba(var(--color-white-rgb), 0.05); + --color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.85); + + /* ======================================== + * SEMANTIC BORDER COLORS (Dark Mode Overrides) + * ======================================== */ + + /* Neutral Border */ + --color-border-muted: var(--color-gray-900); + --color-border-light: var(--color-gray-800); + --color-border-base: var(--color-gray-700); + --color-border-strong: var(--color-gray-400); + --color-border-buffer: var(--color-gray-950); + + /* Brand Border */ + --color-border-brand-soft: var(--color-brand-800); + --color-border-brand: var(--color-brand-400); + --color-border-brand-strong: var(--color-brand-200); + + /* Status Border */ + --color-border-success-soft: var(--color-green-800); + --color-border-success: var(--color-green-400); + --color-border-success-strong: var(--color-green-200); + --color-border-danger-soft: var(--color-red-800); + --color-border-danger: var(--color-red-400); + --color-border-danger-strong: var(--color-red-200); + --color-border-warning-soft: var(--color-orange-800); + --color-border-warning: var(--color-orange-400); + --color-border-warning-strong: var(--color-orange-200); + + /* Accent Border */ + --color-border-accent-primary-soft: var(--color-teal-800); + --color-border-accent-secondary-soft: var(--color-coral-800); + --color-border-accent-secondary: var(--color-coral-500); + --color-border-accent-tertiary-soft: var(--color-purple-800); + --color-border-accent-tertiary: var(--color-purple-500); + + /* Focus Border */ + --color-border-focus: var(--color-white); + + /**======================================== + * SIDENAV BACKGROUND COLORS (Dark mode) + * ======================================== */ + --color-sidenav-background: var(--color-gray-800); + --color-sidenav-text: var(--color-white); + --color-sidenav-active-item: var(--color-gray-900); + --color-sidenav-item-hover: var(--color-gray-900); + + --color-admin-sidenav-background: var(--color-gray-800); + --color-admin-sidenav-text: var(--color-white); + --color-admin-sidenav-active-item: var(--color-gray-900); + --color-admin-sidenav-item-hover: var(--color-gray-900); +} + +body { + background-image: linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)), url(https://christerwaren.fi/assets/images/galaxy-2643089-low.jpg); + background-attachment: fixed; + background-size: cover; + background-position: center; +} + +.tw-bg-background-alt { + background-color: transparent !important; +} + +bit-landing-footer { + display: none; +}