src/scss/_theme.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

:root {
    --font-family                   : initial;
    --font-size                     : 11pt;

    /**
     * Generic content elements
     */
    --element-bg-color              : #fff;
    --element-fg-color              : #000;
    --element-hover-bg-color        : #ededed;
    --element-hover-fg-color        : #000;
    --element-active-bg-color       : #fff;
    --element-active-fg-color       : #0996f8;
    --element-active-hover-bg-color : #ededed;
    --element-active-hover-fg-color : #0670cc;

    /**
     * Tab buttons
     */
    --button-bg-color               : inherit;
    --button-fg-color               : inherit;
    --button-hover-bg-color         : #0996f8;
    --button-hover-fg-color         : #fff;

    /**
     * Tab borders (box-shadow)
     */
    --tab-border                    : 0 -1px 0 var(--element-hover-bg-color) inset;
    --tab-active-border             : 0 -1px 0 var(--element-active-hover-fg-color) inset, 0 -4px 0 var(--element-active-fg-color) inset;
    --mobile-active-border          : 0 -1px 0 var(--element-hover-bg-color) inset, 1px 0 0 var(--element-active-hover-fg-color) inset, 4px 0 0 var(--element-active-fg-color) inset;

    /**
     * Transition effects
     */
    --element-transition            : color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    --button-transition             : color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
    --popup-tab-transition          : color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out, width .15s ease-in-out;
    --fade-transition               : opacity .15s ease-in-out;

    /**
     * Toasts
     */
    --info-bg-color                 : #0652dd;
    --info-fg-color                 : #fff;
    --info-hv-color                 : #ffffff40;
    --warning-bg-color              : #ffc312;
    --warning-fg-color              : #fff;
    --warning-hv-color              : #ffffff40;
    --error-bg-color                : #ff3f34;
    --error-fg-color                : #fff;
    --error-hv-color                : #ffffff40;
    --success-bg-color              : #05c46b;
    --success-fg-color              : #fff;
    --success-hv-color              : #ffffff40;
}