maccounter

1
/* Свойства для темных и светлых режимов */
2

3
.app[data-theme="light"] {
4
    --color-bg-body: #F5F5F5;
5
    --color-bg-component: white;
6
    --color-txt: #313131;
7
    --color-main: #0E91EE;
8
    --color-addition-access: #00F083;
9
    --color-addition-warn: #FF9000;
10
    --color-addition-err: #FF4500;
11
    --color-disable: #E5E5E5;
12
    --color-side: #AEAEAE;
13
    --color-overlay: rgba(255, 255, 255, 0.7);
14
    --color-shadow: rgba(187, 187, 187, 0.25);
15
    --shadow-component: 0 10px 20px var(--color-shadow);
16
}
17

18
.app {
19
    color: var(--color-txt);
20
    background-color: var(--color-bg-body);
21
    width: 100vw;
22
    height: 100vh;
23
    overflow-x: hidden;
24
    display: flex;
25
    flex-direction: column;
26
}
27

28
/* Общие свойства */
29

30
.app-wrap {
31
    padding: 30px;
32
}
33

34
span {
35
    color: var(--color-main);
36
}
37

38
.txt--orange {
39
    color: var(--color-addition-warn);
40
}
41

42
.txt--logo {
43
    font-size: var(--size-font-logo);
44
}
45

46
.txt--title-small {
47
    font-size: var(--size-font-title-small);
48
}
49

50
.component {
51
    box-shadow: var(--shadow-component);
52
    border-radius: var(--size-border-rad-component);
53
    padding: var(--size-padding-component);
54
    background-color: var(--color-bg-component);
55
    height: fit-content;
56
}
57

58
/* Локальные свойства */
59

60
.app section {
61
    display: flex;
62
    padding-top: 20px;
63
    padding-bottom: 0;
64
    flex-grow: 1;
65
}
66