notes/elements.css at main · ale-9d8ce9/notes · GitHub

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

input[type="text"], input[type="password"], button{
    padding: var(--ui-elements-padding);
    border-radius: var(--ui-elements-roundness);
    border: var(--ui-elements-border-width) solid var(--clr-desat);
    background-color: var(--clr-desat);
    color: var(--clr-text);
}
input[type="text"], input[type="password"]{
    width: 100%;
}
input[type="text"]:hover, input[type="password"]:hover{
    border-color: var(--clr);
}
input[type="text"]:focus, input[type="password"]:focus{
    border-color: var(--clr-accent);
    background-color: var(--clr-accent-desat);
}
input[type="text"]::placeholder, input[type="password"]::placeholder{
    color: oklch(100% 0.00011 271.152 / 0.625);
}

input[type="range"]{
    appearance: none;
    width: 100%;
    height: 1rem;
    min-width: 8rem;
    background-color: var(--clr-desat);
    border-radius: var(--ui-elements-roundness);
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--clr-accent);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-duration-button) ease;
}
input[type="range"]:hover::-webkit-slider-thumb {
    scale: 1.2;
}
input[type="range"]:active::-webkit-slider-thumb {
    scale: 0.9;
}


button{
    cursor: pointer;
    background-color: transparent;
    border: var(--ui-elements-border-width) solid var(--clr-desat);
    transition: all var(--transition-duration-button) ease;
}
button:hover{
    border-color: var(--clr);
    background-color: var(--clr-desat);
    scale: 1.05;
}
button:active, button:focus-visible{
    background-color: var(--clr);
    border-color: transparent;
    scale: 0.95;
    color: var(--clr-text-alt);
}
button.primary{
    background-color: var(--clr-accent-desat);
    border-color: transparent;
}
button.primary:hover{
    border-color: var(--clr-accent);
}
button.primary:active, button.primary:focus-visible{
    background-color: var(--clr-accent);
    border-color: var(--clr-accent);
}


.table-container{
    border-radius: var(--ui-elements-roundness);
    border: var(--ui-elements-border-width) solid var(--clr-desat);
    overflow: hidden;
}
table{
    border-collapse: collapse;
}
td{
    border-top: var(--ui-elements-border-width) solid var(--clr-desat);
    border-left: none;
    border-right: none;
}
tr:last-child td{border-bottom: none;}
table:has(th) > *:nth-of-type(2) td{border-top: none;}
table:not(:has(th)) > *:nth-of-type(1) td{border-top: none;}
th{
    background-color: var(--clr-desat);
    color: var(--clr-text);
    font-weight: bold;
    text-align: left;
    font-size: 1.1rem;
}
td, th{
    padding: var(--ui-elements-padding);
}
.noteTitle{
    min-width: 8rem;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dateCell, th{
    white-space: nowrap;
}