150 lines
6.4 KiB
CSS
150 lines
6.4 KiB
CSS
/*
|
|
* ╭───────────────────────────────────────────────╮
|
|
* │ GTK Theme Colours │
|
|
* ╰───────────────────────────────────────────────╯
|
|
*/
|
|
|
|
|
|
|
|
/*
|
|
* Replace the colours with variable names
|
|
*/
|
|
|
|
/*
|
|
* ┌ ┐
|
|
* │ Foreground │
|
|
* └ ┘
|
|
*/
|
|
|
|
/*
|
|
* ── Foreground color, main interface text colour ─────────────────────
|
|
*/
|
|
@define-color fg #C8DCFF;
|
|
@define-color fg_rgba_07 rgba( 200, 220, 255, 0.7 );
|
|
@define-color fg_rgba_06 rgba( 200, 220, 255, 0.6 );
|
|
@define-color fg_rgba_05 rgba( 200, 220, 255, 0.5 );
|
|
@define-color fg_rgba_03 rgba( 200, 220, 255, 0.3 );
|
|
@define-color fg_rgba_02 rgba( 200, 220, 255, 0.2 );
|
|
@define-color fg_rgba_01 rgba( 200, 220, 255, 0.1 );
|
|
|
|
/*
|
|
* ── Foreground accent, usually brighter or darker than default ───────
|
|
*/
|
|
@define-color fg_accent #FFFFFF;
|
|
@define-color fg_accent_rgba_07 rgba( 255, 255, 255, 0.7 );
|
|
@define-color fg_accent_rgba_06 rgba( 255, 255, 255, 0.6 );
|
|
@define-color fg_accent_rgba_05 rgba( 255, 255, 255, 0.5 );
|
|
@define-color fg_accent_rgba_03 rgba( 255, 255, 255, 0.3 );
|
|
@define-color fg_accent_rgba_02 rgba( 255, 255, 255, 0.2 );
|
|
|
|
/*
|
|
* ── Accent colour ────────────────────────────────────────────────────
|
|
*/
|
|
@define-color accent #0B0B0B;
|
|
@define-color accent_rgba_05 rgba( 11, 11, 11, 0.5 );
|
|
@define-color accent_rgba_03 rgba( 11, 11, 11, 0.3 );
|
|
@define-color accent_rgba_02 rgba( 11, 11, 11, 0.2 );
|
|
@define-color accent_rgba_015 rgba( 11, 11, 11, 0.15 );
|
|
@define-color accent_rgba_011 rgba( 11, 11, 11, 0.11 );
|
|
@define-color accent_rgba_007 rgba( 11, 11, 11, 0.07 );
|
|
|
|
/*
|
|
* ── Accent Gradient ──────────────────────────────────────────────────
|
|
*/
|
|
@define-color accent_gradient_1 #090909;
|
|
@define-color accent_gradient_2 #080808;
|
|
@define-color accent_gradient_3 #070707;
|
|
@define-color accent_gradient_4 #060606;
|
|
@define-color accent_gradient_5 #060606;
|
|
@define-color accent_gradient_inverse_1 #0E0E0E;
|
|
@define-color accent_gradient_inverse_2 #0E0E0E;
|
|
@define-color accent_gradient_inverse_3 #0E0E0E;
|
|
|
|
/*
|
|
* ── Secondary accent colour ──────────────────────────────────────────
|
|
*/
|
|
@define-color accent2 #F0F4F5;
|
|
@define-color accent2_rgba_05 rgba( 240, 244, 245, 0.5 );
|
|
@define-color accent2_rgba_03 rgba( 240, 244, 245, 0.3 );
|
|
@define-color accent2_rgba_02 rgba( 240, 244, 245, 0.2 );
|
|
@define-color accent2_rgba_015 rgba( 240, 244, 245, 0.15 );
|
|
@define-color accent2_rgba_01 rgba( 240, 244, 245, 0.1 );
|
|
|
|
/*
|
|
* ── Tertiary accent colour ───────────────────────────────────────────
|
|
*/
|
|
@define-color accent3 #52595D;
|
|
|
|
/*
|
|
* ── Inactive Colour ──────────────────────────────────────────────────
|
|
*/
|
|
@define-color inactive #C8C8C8;
|
|
@define-color inactive_rgba_07 rgba( 200, 200, 200, 0.7 );
|
|
@define-color inactive_rgba_05 rgba( 200, 200, 200, 0.5 );
|
|
@define-color inactive_rgba_03 rgba( 200, 200, 200, 0.3 );
|
|
@define-color inactive_rgba_02 rgba( 200, 200, 200, 0.2 );
|
|
@define-color inactive_rgba_015 rgba( 200, 200, 200, 0.15 );
|
|
|
|
|
|
|
|
|
|
/*
|
|
* ┌ ┐
|
|
* │ Background │
|
|
* └ ┘
|
|
*/
|
|
|
|
/*
|
|
* ── Background color, main interface background ──────────────────────
|
|
*/
|
|
@define-color bg #0A0A0F;
|
|
@define-color bg_rgba_07 rgba( 10, 10, 15, 0.7 );
|
|
@define-color bg_rgba_05 rgba( 10, 10, 15, 0.5 );
|
|
@define-color bg_rgba_03 rgba( 10, 10, 15, 0.3 );
|
|
@define-color bg_rgba_02 rgba( 10, 10, 15, 0.2 );
|
|
@define-color bg_rgba_015 rgba( 10, 10, 15, 0.15 );
|
|
@define-color bg_rgba_011 rgba( 10, 10, 15, 0.11 );
|
|
|
|
/*
|
|
* ── Accent background color ──────────────────────────────────────────
|
|
*/
|
|
@define-color bg_accent #141419;
|
|
@define-color bg_accent_rgba_07 rgba( 20, 20, 25, 0.7 );
|
|
@define-color bg_accent_rgba_06 rgba( 20, 20, 25, 0.6 );
|
|
@define-color bg_accent_rgba_05 rgba( 20, 20, 25, 0.5 );
|
|
@define-color bg_accent_rgba_04 rgba( 20, 20, 25, 0.4 );
|
|
@define-color bg_accent_rgba_03 rgba( 20, 20, 25, 0.3 );
|
|
@define-color bg_accent_rgba_02 rgba( 20, 20, 25, 0.2 );
|
|
@define-color bg_accent_rgba_015 rgba( 20, 20, 25, 0.15 );
|
|
@define-color bg_accent_rgba_01 rgba( 20, 20, 25, 0.1 );
|
|
|
|
/*
|
|
* ── Tertiary background colour ───────────────────────────────────────
|
|
*/
|
|
@define-color bg_tertiary #000000;
|
|
@define-color bg_tertiary_rgba_05 rgba( 0, 0, 0, 0.5 );
|
|
@define-color bg_tertiary_rgba_02 rgba( 0, 0, 0, 0.2 );
|
|
|
|
/*
|
|
* ── Inactive background colour ───────────────────────────────────────
|
|
*/
|
|
@define-color bg_inactive #000000;
|
|
@define-color bg_inactive_rgba_07 rgba( 0, 0, 0, 0.7 );
|
|
@define-color bg_inactive_rgba_05 rgba( 0, 0, 0, 0.5 );
|
|
@define-color bg_inactive_rgba_04 rgba( 0, 0, 0, 0.4 );
|
|
@define-color bg_inactive_rgba_03 rgba( 0, 0, 0, 0.3 );
|
|
@define-color bg_inactive_rgba_02 rgba( 0, 0, 0, 0.2 );
|
|
@define-color bg_inactive_rgba_015 rgba( 0, 0, 0, 0.15 );
|
|
@define-color bg_inactive_rgba_01 rgba( 0, 0, 0, 0.1 );
|
|
|
|
/*
|
|
* ── Shadow colours ───────────────────────────────────────────────────
|
|
*/
|
|
@define-color shadow #000002;
|
|
@define-color shadow_rgba_07 rgba( 0, 0, 2, 0.7 );
|
|
@define-color shadow_rgba_05 rgba( 0, 0, 2, 0.5 );
|
|
@define-color shadow_rgba_03 rgba( 0, 0, 2, 0.3 );
|
|
@define-color shadow_rgba_02 rgba( 0, 0, 2, 0.2 );
|
|
@define-color shadow_rgba_015 rgba( 0, 0, 2, 0.15 );
|
|
@define-color shadow_rgba_011 rgba( 0, 0, 2, 0.11 );
|