-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolored-span-hex.css
140 lines (117 loc) · 9.52 KB
/
colored-span-hex.css
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Obsidian Template ║ */
/* ╠══════════════════════════╦═════════════════════════════════════════════════════════════════════════════════════════╣ */
/* ║ Name: ║ Colors ║ */
/* ║ Version: ║ 1.0.0 ║ */
/* ║ Author: ║ Corellan ║ */
/* ║ License: ║ MIT ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ Variables ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
[data-callout="colors-4"] {
--colors-columns-4: calc(100% / 4 - 8px);
}
[data-callout="colors-3"] {
--colors-columns-3: calc(100% / 3 - 8px);
}
[data-callout="colors-2"] {
--colors-columns-2: calc(100% / 2 - 8px);
}
[data-callout="colors-1"] {
--colors-columns-1: calc(100% / 1 - 8px);
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ General ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
/* Spacing */
[data-callout="colors-4"] p,
[data-callout="colors-3"] p,
[data-callout="colors-2"] p,
[data-callout="colors-1"] p {
display: flex;
flex-wrap: wrap;
border-radius: 8px;
row-gap: 8px;
column-gap: 4px;
}
/* Background */
[data-callout="colors-4"] span,
[data-callout="colors-3"] span,
[data-callout="colors-2"] span,
[data-callout="colors-1"] span {
display: flex;
align-items: center;
border-radius: 8px;
font-weight: 500;
padding: 0px 6px 0px 6px;
}
/* Text */
[data-callout="colors-4"] span::before,
[data-callout="colors-3"] span::before,
[data-callout="colors-2"] span::before,
[data-callout="colors-1"] span::before {
content: "#";
font-weight: 800;
}
/* Selection */
[data-callout="colors-4"] span,
[data-callout="colors-3"] span,
[data-callout="colors-2"] span,
[data-callout="colors-1"] span {
user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ Remove ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
/* Remove Title */
[data-callout="colors-4"] .callout-title,
[data-callout="colors-3"] .callout-title,
[data-callout="colors-2"] .callout-title,
[data-callout="colors-1"] .callout-title {
display: none;
}
/* Remove Background */
[data-callout="colors-4"],
[data-callout="colors-3"],
[data-callout="colors-2"],
[data-callout="colors-1"] {
background: transparent;
box-shadow: none !important;
padding: 0px;
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ Variables (Column-4) ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
[data-callout="colors-4"] span {
width: var(--colors-columns-4);
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ Variables (Column-3) ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
[data-callout="colors-3"] span {
width: var(--colors-columns-3);
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ Variables (Column-2) ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
[data-callout="colors-2"] span {
width: var(--colors-columns-2);
}
/* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */
/* ║ Colors ║ Variables (Column-1) ║ */
/* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */
[data-callout="colors-1"] span {
width: var(--colors-columns-1);
}
/* Selection */
[data-callout="colors-4"] span,
[data-callout="colors-3"] span,
[data-callout="colors-2"] span,
[data-callout="colors-1"] span {
user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
}