@dialpad/dialtone 6.35.0 → 6.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/build/less/components/card.less +70 -0
- package/lib/build/less/dialtone.less +1 -0
- package/lib/build/less/themes/default.less +55 -16
- package/lib/build/less/utilities/colors.less +2 -0
- package/lib/dist/css/dialtone.css +351 -4
- package/lib/dist/css/dialtone.min.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
//@import (reference) '../utilities/spacing.less';
|
|
2
|
+
|
|
3
|
+
//
|
|
4
|
+
// DIALTONE
|
|
5
|
+
// COMPONENTS: CARD
|
|
6
|
+
//
|
|
7
|
+
// These are card classes for Dialpad's design system Dialtone.
|
|
8
|
+
// For further documentation of these and other classes,
|
|
9
|
+
// visit https://dialpad.design/components/card
|
|
10
|
+
//
|
|
11
|
+
// TABLE OF CONTENTS
|
|
12
|
+
// • BASE STYLE
|
|
13
|
+
// • HEADER
|
|
14
|
+
// • CONTENT
|
|
15
|
+
// • FOOTER
|
|
16
|
+
//
|
|
17
|
+
// ============================================================================
|
|
18
|
+
// $ BASE STYLE
|
|
19
|
+
// ============================================================================
|
|
20
|
+
// $$ WRAPPER
|
|
21
|
+
// ----------------------------------------------------------------------------
|
|
22
|
+
.d-card {
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-items: flex-start;
|
|
26
|
+
justify-content: flex-start;
|
|
27
|
+
// Component CSS Vars
|
|
28
|
+
// ------------------------------------------------------------------------
|
|
29
|
+
width: 100%;
|
|
30
|
+
max-width: var(--size264);
|
|
31
|
+
max-height: 100%;
|
|
32
|
+
background: var(--white);
|
|
33
|
+
border-radius: var(--su4);
|
|
34
|
+
box-shadow: var(--bs-card);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
// ============================================================================
|
|
39
|
+
// $ CARD AREAS
|
|
40
|
+
// ----------------------------------------------------------------------------
|
|
41
|
+
// $$ HEADER
|
|
42
|
+
// ----------------------------------------------------------------------------
|
|
43
|
+
.d-card__header {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: row;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: space-between;
|
|
48
|
+
width: 100%;
|
|
49
|
+
padding: var(--su8) var(--su8) 0 var(--su16);
|
|
50
|
+
color: var(--black-400);
|
|
51
|
+
font-weight: var(--fw-semibold);
|
|
52
|
+
font-size: var(--fs16);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// $$ CONTENT
|
|
56
|
+
// ----------------------------------------------------------------------------
|
|
57
|
+
.d-card__content {
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
padding: var(--su16);
|
|
60
|
+
overflow-y: auto;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// $$ FOOTER
|
|
64
|
+
// ----------------------------------------------------------------------------
|
|
65
|
+
.d-card__footer {
|
|
66
|
+
display: flex;
|
|
67
|
+
flex-direction: row-reverse;
|
|
68
|
+
align-items: center;
|
|
69
|
+
padding: var(--su8);
|
|
70
|
+
}
|
|
@@ -34,26 +34,65 @@
|
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
@theme-vars: {
|
|
37
|
-
primary-color-h:
|
|
38
|
-
primary-color-s:
|
|
39
|
-
primary-color-l:
|
|
40
|
-
primary-color-hsl:
|
|
41
|
-
primary-color:
|
|
42
|
-
primary-color-hover:
|
|
43
|
-
nav-background-color-h: var(--purple-800-h);
|
|
44
|
-
nav-background-color-s: var(--purple-800-s);
|
|
45
|
-
nav-background-color-l: var(--purple-800-l);
|
|
46
|
-
nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
|
|
37
|
+
primary-color-h: var(--purple-500-h);
|
|
38
|
+
primary-color-s: var(--purple-500-s);
|
|
39
|
+
primary-color-l: var(--purple-500-l);
|
|
40
|
+
primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
|
|
41
|
+
primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
|
|
42
|
+
primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
|
|
47
43
|
|
|
48
|
-
topbar-height:
|
|
44
|
+
topbar-height: var(--su64);
|
|
49
45
|
|
|
50
|
-
base--font-size:
|
|
51
|
-
base--font-family:
|
|
52
|
-
base--font-feature-settings:
|
|
53
|
-
base--line-height:
|
|
54
|
-
base--corner-radius:
|
|
46
|
+
base--font-size: var(--fs16);
|
|
47
|
+
base--font-family: @ff-custom;
|
|
48
|
+
base--font-feature-settings: 'calt' 0;
|
|
49
|
+
base--line-height: var(--lh-normal);
|
|
50
|
+
base--corner-radius: 0.25em;
|
|
51
|
+
|
|
52
|
+
theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
|
|
53
|
+
theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
|
|
54
|
+
theme-topbar-color-background: #f9f9f9; // DT7 TBD, possibly black-100?
|
|
55
|
+
|
|
56
|
+
theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
|
|
57
|
+
theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
|
|
58
|
+
theme-sidebar-color-background: #f9f9f9; // DT7 TBD, possibly black-100?
|
|
59
|
+
|
|
60
|
+
// theme-sidebar-row-color-background: {UNUSED}
|
|
61
|
+
theme-sidebar-row-color-background-hover: var(--purple-100);
|
|
62
|
+
theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
|
|
63
|
+
theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l); // Use with d-fco[##] Opacity utility
|
|
64
|
+
theme-sidebar-active-row-color-background: #e9e9e9; // DT7 TBD, possibly black-100?
|
|
65
|
+
|
|
66
|
+
theme-presence-color-background-available: var(--green-500);
|
|
67
|
+
theme-presence-color-background-busy-unavailable: var(--red-500);
|
|
68
|
+
theme-presence-color-background-busy: var(--yellow-500);
|
|
69
|
+
|
|
70
|
+
theme-mention-color-background: var(--purple-500);
|
|
55
71
|
}
|
|
56
72
|
|
|
73
|
+
// ============================================================================
|
|
74
|
+
// $ THEME CLASSES
|
|
75
|
+
// ============================================================================
|
|
76
|
+
|
|
77
|
+
.d-theme-topbar-fc {
|
|
78
|
+
--fco: 75%;
|
|
79
|
+
|
|
80
|
+
color: hsla(var(--theme-topbar-color-hsl) / var(--fco)) !important;
|
|
81
|
+
|
|
82
|
+
&:hover {
|
|
83
|
+
--fco: 100%;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
.d-theme-topbar-bgc { background-color: var(--theme-topbar-color-background) !important; }
|
|
87
|
+
.d-theme-sidebar-fc { color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important; }
|
|
88
|
+
.d-theme-sidebar-bgc { background-color: var(--theme-sidebar-color-background) !important; }
|
|
89
|
+
.d-theme-sidebar-row-bgc:hover { background-color: var(--theme-sidebar-row-color-background-hover) !important; }
|
|
90
|
+
.d-theme-sidebar-row-active-fc { color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important; }
|
|
91
|
+
.d-theme-sidebar-row-active-bgc { background-color: var(--theme-sidebar-active-row-color-background) !important; }
|
|
92
|
+
.d-theme-presence-available { background-color: var(--theme-presence-color-background-available) !important; }
|
|
93
|
+
.d-theme-presence-busy-unavailable { background-color: var(--theme-presence-color-background-busy-unavailable) !important; }
|
|
94
|
+
.d-theme-presence-busy { background-color: var(--theme-presence-color-background-busy) !important; }
|
|
95
|
+
.d-theme-mention { background-color: var(--theme-mention-color-background) !important; }
|
|
57
96
|
|
|
58
97
|
// ============================================================================
|
|
59
98
|
// $ OUTPUT VARIABLES
|
|
@@ -121,9 +121,11 @@
|
|
|
121
121
|
|
|
122
122
|
// $ OPACITY CLASSES
|
|
123
123
|
// ----------------------------------------------------------------------------
|
|
124
|
+
#d-internals #opacity-classes(100);
|
|
124
125
|
#d-internals #opacity-classes(99);
|
|
125
126
|
#d-internals #opacity-classes(95);
|
|
126
127
|
#d-internals #opacity-classes(90);
|
|
128
|
+
#d-internals #opacity-classes(85);
|
|
127
129
|
#d-internals #opacity-classes(75);
|
|
128
130
|
#d-internals #opacity-classes(50);
|
|
129
131
|
#d-internals #opacity-classes(25);
|
|
@@ -1057,6 +1057,40 @@ body {
|
|
|
1057
1057
|
.d-btn-group.d-btn-group--space-between {
|
|
1058
1058
|
justify-content: space-between;
|
|
1059
1059
|
}
|
|
1060
|
+
.d-card {
|
|
1061
|
+
display: flex;
|
|
1062
|
+
flex-direction: column;
|
|
1063
|
+
align-items: flex-start;
|
|
1064
|
+
justify-content: flex-start;
|
|
1065
|
+
width: 100%;
|
|
1066
|
+
max-width: var(--size264);
|
|
1067
|
+
max-height: 100%;
|
|
1068
|
+
background: var(--white);
|
|
1069
|
+
border-radius: var(--su4);
|
|
1070
|
+
box-shadow: var(--bs-card);
|
|
1071
|
+
}
|
|
1072
|
+
.d-card__header {
|
|
1073
|
+
display: flex;
|
|
1074
|
+
flex-direction: row;
|
|
1075
|
+
align-items: center;
|
|
1076
|
+
justify-content: space-between;
|
|
1077
|
+
width: 100%;
|
|
1078
|
+
padding: var(--su8) var(--su8) 0 var(--su16);
|
|
1079
|
+
color: var(--black-400);
|
|
1080
|
+
font-weight: var(--fw-semibold);
|
|
1081
|
+
font-size: var(--fs16);
|
|
1082
|
+
}
|
|
1083
|
+
.d-card__content {
|
|
1084
|
+
max-width: 100%;
|
|
1085
|
+
padding: var(--su16);
|
|
1086
|
+
overflow-y: auto;
|
|
1087
|
+
}
|
|
1088
|
+
.d-card__footer {
|
|
1089
|
+
display: flex;
|
|
1090
|
+
flex-direction: row-reverse;
|
|
1091
|
+
align-items: center;
|
|
1092
|
+
padding: var(--su8);
|
|
1093
|
+
}
|
|
1060
1094
|
.d-chip {
|
|
1061
1095
|
position: relative;
|
|
1062
1096
|
display: inline-flex;
|
|
@@ -13179,6 +13213,127 @@ body.theme-dark .d\:d-bgc-red-700 {
|
|
|
13179
13213
|
.fv\:d-bc-unset:focus-visible {
|
|
13180
13214
|
border-color: unset !important;
|
|
13181
13215
|
}
|
|
13216
|
+
.d-fco100,
|
|
13217
|
+
.h\:d-fco100:hover,
|
|
13218
|
+
.f\:d-fco100:focus {
|
|
13219
|
+
--fco: 100% !important;
|
|
13220
|
+
}
|
|
13221
|
+
.f\:d-fco100:focus-within {
|
|
13222
|
+
--fco: 100% !important;
|
|
13223
|
+
}
|
|
13224
|
+
.fv\:d-fco100.focus-visible {
|
|
13225
|
+
--fco: 100% !important;
|
|
13226
|
+
}
|
|
13227
|
+
.fv\:d-fco100:focus-visible {
|
|
13228
|
+
--fco: 100% !important;
|
|
13229
|
+
}
|
|
13230
|
+
@media (prefers-color-scheme: dark) {
|
|
13231
|
+
body.theme-system .d\:d-fco100 {
|
|
13232
|
+
--fco: 100% !important;
|
|
13233
|
+
}
|
|
13234
|
+
}
|
|
13235
|
+
body.theme-dark .d\:d-fco100 {
|
|
13236
|
+
--fco: 100% !important;
|
|
13237
|
+
}
|
|
13238
|
+
.d-bco100,
|
|
13239
|
+
.h\:d-bco100:hover,
|
|
13240
|
+
.f\:d-bco100:focus {
|
|
13241
|
+
--bco: 100% !important;
|
|
13242
|
+
}
|
|
13243
|
+
.f\:d-bco100:focus-within {
|
|
13244
|
+
--bco: 100% !important;
|
|
13245
|
+
}
|
|
13246
|
+
.fv\:d-bco100.focus-visible {
|
|
13247
|
+
--bco: 100% !important;
|
|
13248
|
+
}
|
|
13249
|
+
.fv\:d-bco100:focus-visible {
|
|
13250
|
+
--bco: 100% !important;
|
|
13251
|
+
}
|
|
13252
|
+
@media (prefers-color-scheme: dark) {
|
|
13253
|
+
body.theme-system .d\:d-bco100 {
|
|
13254
|
+
--bco: 100% !important;
|
|
13255
|
+
}
|
|
13256
|
+
}
|
|
13257
|
+
body.theme-dark .d\:d-bco100 {
|
|
13258
|
+
--bco: 100% !important;
|
|
13259
|
+
}
|
|
13260
|
+
.d-dco100 > * + * {
|
|
13261
|
+
--dco: 100% !important;
|
|
13262
|
+
}
|
|
13263
|
+
@media (prefers-color-scheme: dark) {
|
|
13264
|
+
body.theme-system .d\:d-dco100 > * + * {
|
|
13265
|
+
--dco: 100% !important;
|
|
13266
|
+
}
|
|
13267
|
+
}
|
|
13268
|
+
body.theme-dark .d\:d-dco100 > * + * {
|
|
13269
|
+
--dco: 100% !important;
|
|
13270
|
+
}
|
|
13271
|
+
.d-bgo100,
|
|
13272
|
+
.h\:d-bgo100:hover,
|
|
13273
|
+
.f\:d-bgo100:focus {
|
|
13274
|
+
--bgo: 100% !important;
|
|
13275
|
+
}
|
|
13276
|
+
.f\:d-bgo100:focus-within {
|
|
13277
|
+
--bgo: 100% !important;
|
|
13278
|
+
}
|
|
13279
|
+
.fv\:d-bgo100.focus-visible {
|
|
13280
|
+
--bgo: 100% !important;
|
|
13281
|
+
}
|
|
13282
|
+
.fv\:d-bgo100:focus-visible {
|
|
13283
|
+
--bgo: 100% !important;
|
|
13284
|
+
}
|
|
13285
|
+
@media (prefers-color-scheme: dark) {
|
|
13286
|
+
body.theme-system .d\:d-bgo100 {
|
|
13287
|
+
--bgo: 100% !important;
|
|
13288
|
+
}
|
|
13289
|
+
}
|
|
13290
|
+
body.theme-dark .d\:d-bgo100 {
|
|
13291
|
+
--bgo: 100% !important;
|
|
13292
|
+
}
|
|
13293
|
+
.d-bgg-from-o100,
|
|
13294
|
+
.h\:d-bgg-from-100:hover,
|
|
13295
|
+
.f\:d-bgg-from-100:focus {
|
|
13296
|
+
--bgg-from-opacity: 100% !important;
|
|
13297
|
+
}
|
|
13298
|
+
.f\:d-bgg-from-100:focus-within {
|
|
13299
|
+
--bgg-from-opacity: 100% !important;
|
|
13300
|
+
}
|
|
13301
|
+
.fv\:d-bgg-from-100.focus-visible {
|
|
13302
|
+
--bgg-from-opacity: 100% !important;
|
|
13303
|
+
}
|
|
13304
|
+
.fv\:d-bgg-from-100:focus-visible {
|
|
13305
|
+
--bgg-from-opacity: 100% !important;
|
|
13306
|
+
}
|
|
13307
|
+
@media (prefers-color-scheme: dark) {
|
|
13308
|
+
body.theme-system .d\:d-bgg-from-100 {
|
|
13309
|
+
--bgg-from-opacity: 100% !important;
|
|
13310
|
+
}
|
|
13311
|
+
}
|
|
13312
|
+
body.theme-dark .d\:d-bgg-from-100 {
|
|
13313
|
+
--bgg-from-opacity: 100% !important;
|
|
13314
|
+
}
|
|
13315
|
+
.d-bgg-to-o100,
|
|
13316
|
+
.h\:d-bgg-to-100:hover,
|
|
13317
|
+
.f\:d-bgg-to-100:focus {
|
|
13318
|
+
--bgg-to-opacity: 100% !important;
|
|
13319
|
+
}
|
|
13320
|
+
.f\:d-bgg-to-100:focus-within {
|
|
13321
|
+
--bgg-to-opacity: 100% !important;
|
|
13322
|
+
}
|
|
13323
|
+
.fv\:d-bgg-to-100.focus-visible {
|
|
13324
|
+
--bgg-to-opacity: 100% !important;
|
|
13325
|
+
}
|
|
13326
|
+
.fv\:d-bgg-to-100:focus-visible {
|
|
13327
|
+
--bgg-to-opacity: 100% !important;
|
|
13328
|
+
}
|
|
13329
|
+
@media (prefers-color-scheme: dark) {
|
|
13330
|
+
body.theme-system .d\:d-bgg-to-100 {
|
|
13331
|
+
--bgg-to-opacity: 100% !important;
|
|
13332
|
+
}
|
|
13333
|
+
}
|
|
13334
|
+
body.theme-dark .d\:d-bgg-to-100 {
|
|
13335
|
+
--bgg-to-opacity: 100% !important;
|
|
13336
|
+
}
|
|
13182
13337
|
.d-fco99,
|
|
13183
13338
|
.h\:d-fco99:hover,
|
|
13184
13339
|
.f\:d-fco99:focus {
|
|
@@ -13542,6 +13697,127 @@ body.theme-dark .d\:d-bgg-from-90 {
|
|
|
13542
13697
|
body.theme-dark .d\:d-bgg-to-90 {
|
|
13543
13698
|
--bgg-to-opacity: 90% !important;
|
|
13544
13699
|
}
|
|
13700
|
+
.d-fco85,
|
|
13701
|
+
.h\:d-fco85:hover,
|
|
13702
|
+
.f\:d-fco85:focus {
|
|
13703
|
+
--fco: 85% !important;
|
|
13704
|
+
}
|
|
13705
|
+
.f\:d-fco85:focus-within {
|
|
13706
|
+
--fco: 85% !important;
|
|
13707
|
+
}
|
|
13708
|
+
.fv\:d-fco85.focus-visible {
|
|
13709
|
+
--fco: 85% !important;
|
|
13710
|
+
}
|
|
13711
|
+
.fv\:d-fco85:focus-visible {
|
|
13712
|
+
--fco: 85% !important;
|
|
13713
|
+
}
|
|
13714
|
+
@media (prefers-color-scheme: dark) {
|
|
13715
|
+
body.theme-system .d\:d-fco85 {
|
|
13716
|
+
--fco: 85% !important;
|
|
13717
|
+
}
|
|
13718
|
+
}
|
|
13719
|
+
body.theme-dark .d\:d-fco85 {
|
|
13720
|
+
--fco: 85% !important;
|
|
13721
|
+
}
|
|
13722
|
+
.d-bco85,
|
|
13723
|
+
.h\:d-bco85:hover,
|
|
13724
|
+
.f\:d-bco85:focus {
|
|
13725
|
+
--bco: 85% !important;
|
|
13726
|
+
}
|
|
13727
|
+
.f\:d-bco85:focus-within {
|
|
13728
|
+
--bco: 85% !important;
|
|
13729
|
+
}
|
|
13730
|
+
.fv\:d-bco85.focus-visible {
|
|
13731
|
+
--bco: 85% !important;
|
|
13732
|
+
}
|
|
13733
|
+
.fv\:d-bco85:focus-visible {
|
|
13734
|
+
--bco: 85% !important;
|
|
13735
|
+
}
|
|
13736
|
+
@media (prefers-color-scheme: dark) {
|
|
13737
|
+
body.theme-system .d\:d-bco85 {
|
|
13738
|
+
--bco: 85% !important;
|
|
13739
|
+
}
|
|
13740
|
+
}
|
|
13741
|
+
body.theme-dark .d\:d-bco85 {
|
|
13742
|
+
--bco: 85% !important;
|
|
13743
|
+
}
|
|
13744
|
+
.d-dco85 > * + * {
|
|
13745
|
+
--dco: 85% !important;
|
|
13746
|
+
}
|
|
13747
|
+
@media (prefers-color-scheme: dark) {
|
|
13748
|
+
body.theme-system .d\:d-dco85 > * + * {
|
|
13749
|
+
--dco: 85% !important;
|
|
13750
|
+
}
|
|
13751
|
+
}
|
|
13752
|
+
body.theme-dark .d\:d-dco85 > * + * {
|
|
13753
|
+
--dco: 85% !important;
|
|
13754
|
+
}
|
|
13755
|
+
.d-bgo85,
|
|
13756
|
+
.h\:d-bgo85:hover,
|
|
13757
|
+
.f\:d-bgo85:focus {
|
|
13758
|
+
--bgo: 85% !important;
|
|
13759
|
+
}
|
|
13760
|
+
.f\:d-bgo85:focus-within {
|
|
13761
|
+
--bgo: 85% !important;
|
|
13762
|
+
}
|
|
13763
|
+
.fv\:d-bgo85.focus-visible {
|
|
13764
|
+
--bgo: 85% !important;
|
|
13765
|
+
}
|
|
13766
|
+
.fv\:d-bgo85:focus-visible {
|
|
13767
|
+
--bgo: 85% !important;
|
|
13768
|
+
}
|
|
13769
|
+
@media (prefers-color-scheme: dark) {
|
|
13770
|
+
body.theme-system .d\:d-bgo85 {
|
|
13771
|
+
--bgo: 85% !important;
|
|
13772
|
+
}
|
|
13773
|
+
}
|
|
13774
|
+
body.theme-dark .d\:d-bgo85 {
|
|
13775
|
+
--bgo: 85% !important;
|
|
13776
|
+
}
|
|
13777
|
+
.d-bgg-from-o85,
|
|
13778
|
+
.h\:d-bgg-from-85:hover,
|
|
13779
|
+
.f\:d-bgg-from-85:focus {
|
|
13780
|
+
--bgg-from-opacity: 85% !important;
|
|
13781
|
+
}
|
|
13782
|
+
.f\:d-bgg-from-85:focus-within {
|
|
13783
|
+
--bgg-from-opacity: 85% !important;
|
|
13784
|
+
}
|
|
13785
|
+
.fv\:d-bgg-from-85.focus-visible {
|
|
13786
|
+
--bgg-from-opacity: 85% !important;
|
|
13787
|
+
}
|
|
13788
|
+
.fv\:d-bgg-from-85:focus-visible {
|
|
13789
|
+
--bgg-from-opacity: 85% !important;
|
|
13790
|
+
}
|
|
13791
|
+
@media (prefers-color-scheme: dark) {
|
|
13792
|
+
body.theme-system .d\:d-bgg-from-85 {
|
|
13793
|
+
--bgg-from-opacity: 85% !important;
|
|
13794
|
+
}
|
|
13795
|
+
}
|
|
13796
|
+
body.theme-dark .d\:d-bgg-from-85 {
|
|
13797
|
+
--bgg-from-opacity: 85% !important;
|
|
13798
|
+
}
|
|
13799
|
+
.d-bgg-to-o85,
|
|
13800
|
+
.h\:d-bgg-to-85:hover,
|
|
13801
|
+
.f\:d-bgg-to-85:focus {
|
|
13802
|
+
--bgg-to-opacity: 85% !important;
|
|
13803
|
+
}
|
|
13804
|
+
.f\:d-bgg-to-85:focus-within {
|
|
13805
|
+
--bgg-to-opacity: 85% !important;
|
|
13806
|
+
}
|
|
13807
|
+
.fv\:d-bgg-to-85.focus-visible {
|
|
13808
|
+
--bgg-to-opacity: 85% !important;
|
|
13809
|
+
}
|
|
13810
|
+
.fv\:d-bgg-to-85:focus-visible {
|
|
13811
|
+
--bgg-to-opacity: 85% !important;
|
|
13812
|
+
}
|
|
13813
|
+
@media (prefers-color-scheme: dark) {
|
|
13814
|
+
body.theme-system .d\:d-bgg-to-85 {
|
|
13815
|
+
--bgg-to-opacity: 85% !important;
|
|
13816
|
+
}
|
|
13817
|
+
}
|
|
13818
|
+
body.theme-dark .d\:d-bgg-to-85 {
|
|
13819
|
+
--bgg-to-opacity: 85% !important;
|
|
13820
|
+
}
|
|
13545
13821
|
.d-fco75,
|
|
13546
13822
|
.h\:d-fco75:hover,
|
|
13547
13823
|
.f\:d-fco75:focus {
|
|
@@ -19710,6 +19986,43 @@ body {
|
|
|
19710
19986
|
.js-focus-visible :focus:not(.focus-visible) {
|
|
19711
19987
|
outline: none;
|
|
19712
19988
|
}
|
|
19989
|
+
.d-theme-topbar-fc {
|
|
19990
|
+
--fco: 75%;
|
|
19991
|
+
color: hsla(var(--theme-topbar-color-hsl) / var(--fco)) !important;
|
|
19992
|
+
}
|
|
19993
|
+
.d-theme-topbar-fc:hover {
|
|
19994
|
+
--fco: 100%;
|
|
19995
|
+
}
|
|
19996
|
+
.d-theme-topbar-bgc {
|
|
19997
|
+
background-color: var(--theme-topbar-color-background) !important;
|
|
19998
|
+
}
|
|
19999
|
+
.d-theme-sidebar-fc {
|
|
20000
|
+
color: hsla(var(--theme-sidebar-color-hsl) / var(--fco)) !important;
|
|
20001
|
+
}
|
|
20002
|
+
.d-theme-sidebar-bgc {
|
|
20003
|
+
background-color: var(--theme-sidebar-color-background) !important;
|
|
20004
|
+
}
|
|
20005
|
+
.d-theme-sidebar-row-bgc:hover {
|
|
20006
|
+
background-color: var(--theme-sidebar-row-color-background-hover) !important;
|
|
20007
|
+
}
|
|
20008
|
+
.d-theme-sidebar-row-active-fc {
|
|
20009
|
+
color: hsla(var(--theme-sidebar-active-row-color-hsl) / var(--fco)) !important;
|
|
20010
|
+
}
|
|
20011
|
+
.d-theme-sidebar-row-active-bgc {
|
|
20012
|
+
background-color: var(--theme-sidebar-active-row-color-background) !important;
|
|
20013
|
+
}
|
|
20014
|
+
.d-theme-presence-available {
|
|
20015
|
+
background-color: var(--theme-presence-color-background-available) !important;
|
|
20016
|
+
}
|
|
20017
|
+
.d-theme-presence-busy-unavailable {
|
|
20018
|
+
background-color: var(--theme-presence-color-background-busy-unavailable) !important;
|
|
20019
|
+
}
|
|
20020
|
+
.d-theme-presence-busy {
|
|
20021
|
+
background-color: var(--theme-presence-color-background-busy) !important;
|
|
20022
|
+
}
|
|
20023
|
+
.d-theme-mention {
|
|
20024
|
+
background-color: var(--theme-mention-color-background) !important;
|
|
20025
|
+
}
|
|
19713
20026
|
body {
|
|
19714
20027
|
--bgo: 100%;
|
|
19715
20028
|
--bco: 100%;
|
|
@@ -20196,16 +20509,26 @@ body {
|
|
|
20196
20509
|
--primary-color-hsl: var(--primary-color-h) var(--primary-color-s) var(--primary-color-l);
|
|
20197
20510
|
--primary-color: hsl(var(--primary-color-h) var(--primary-color-s) var(--primary-color-l));
|
|
20198
20511
|
--primary-color-hover: hsl(var(--primary-color-h) var(--primary-color-s) calc(var(--primary-color-l) - 10%));
|
|
20199
|
-
--nav-background-color-h: var(--purple-800-h);
|
|
20200
|
-
--nav-background-color-s: var(--purple-800-s);
|
|
20201
|
-
--nav-background-color-l: var(--purple-800-l);
|
|
20202
|
-
--nav-background-color: hsl(var(--nav-background-color-h) var(--nav-background-color-s) var(--nav-background-color-l));
|
|
20203
20512
|
--topbar-height: var(--su64);
|
|
20204
20513
|
--base--font-size: var(--fs16);
|
|
20205
20514
|
--base--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
20206
20515
|
--base--font-feature-settings: 'calt' 0;
|
|
20207
20516
|
--base--line-height: var(--lh-normal);
|
|
20208
20517
|
--base--corner-radius: 0.25em;
|
|
20518
|
+
--theme-topbar-color: hsl(var(--theme-topbar-color-hsl));
|
|
20519
|
+
--theme-topbar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
|
|
20520
|
+
--theme-topbar-color-background: #f9f9f9;
|
|
20521
|
+
--theme-sidebar-color: hsl(var(--theme-sidebar-color-hsl));
|
|
20522
|
+
--theme-sidebar-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
|
|
20523
|
+
--theme-sidebar-color-background: #f9f9f9;
|
|
20524
|
+
--theme-sidebar-row-color-background-hover: var(--purple-100);
|
|
20525
|
+
--theme-sidebar-active-row-color: hsl(var(--theme-sidebar-active-row-color-hsl));
|
|
20526
|
+
--theme-sidebar-active-row-color-hsl: var(--black-900-h) var(--black-900-s) var(--black-900-l);
|
|
20527
|
+
--theme-sidebar-active-row-color-background: #e9e9e9;
|
|
20528
|
+
--theme-presence-color-background-available: var(--green-500);
|
|
20529
|
+
--theme-presence-color-background-busy-unavailable: var(--red-500);
|
|
20530
|
+
--theme-presence-color-background-busy: var(--yellow-500);
|
|
20531
|
+
--theme-mention-color-background: var(--purple-500);
|
|
20209
20532
|
}
|
|
20210
20533
|
body.theme-dark {
|
|
20211
20534
|
--white-h: 260;
|
|
@@ -20777,6 +21100,9 @@ body.theme-dark {
|
|
|
20777
21100
|
--dco: 100%;
|
|
20778
21101
|
border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
|
|
20779
21102
|
}
|
|
21103
|
+
.sm\:d-dco100 > * + * {
|
|
21104
|
+
--dco: 100% !important;
|
|
21105
|
+
}
|
|
20780
21106
|
.sm\:d-dco99 > * + * {
|
|
20781
21107
|
--dco: 99% !important;
|
|
20782
21108
|
}
|
|
@@ -20786,6 +21112,9 @@ body.theme-dark {
|
|
|
20786
21112
|
.sm\:d-dco90 > * + * {
|
|
20787
21113
|
--dco: 90% !important;
|
|
20788
21114
|
}
|
|
21115
|
+
.sm\:d-dco85 > * + * {
|
|
21116
|
+
--dco: 85% !important;
|
|
21117
|
+
}
|
|
20789
21118
|
.sm\:d-dco75 > * + * {
|
|
20790
21119
|
--dco: 75% !important;
|
|
20791
21120
|
}
|
|
@@ -22238,6 +22567,9 @@ body.theme-dark {
|
|
|
22238
22567
|
--dco: 100%;
|
|
22239
22568
|
border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
|
|
22240
22569
|
}
|
|
22570
|
+
.md\:d-dco100 > * + * {
|
|
22571
|
+
--dco: 100% !important;
|
|
22572
|
+
}
|
|
22241
22573
|
.md\:d-dco99 > * + * {
|
|
22242
22574
|
--dco: 99% !important;
|
|
22243
22575
|
}
|
|
@@ -22247,6 +22579,9 @@ body.theme-dark {
|
|
|
22247
22579
|
.md\:d-dco90 > * + * {
|
|
22248
22580
|
--dco: 90% !important;
|
|
22249
22581
|
}
|
|
22582
|
+
.md\:d-dco85 > * + * {
|
|
22583
|
+
--dco: 85% !important;
|
|
22584
|
+
}
|
|
22250
22585
|
.md\:d-dco75 > * + * {
|
|
22251
22586
|
--dco: 75% !important;
|
|
22252
22587
|
}
|
|
@@ -23699,6 +24034,9 @@ body.theme-dark {
|
|
|
23699
24034
|
--dco: 100%;
|
|
23700
24035
|
border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
|
|
23701
24036
|
}
|
|
24037
|
+
.lg\:d-dco100 > * + * {
|
|
24038
|
+
--dco: 100% !important;
|
|
24039
|
+
}
|
|
23702
24040
|
.lg\:d-dco99 > * + * {
|
|
23703
24041
|
--dco: 99% !important;
|
|
23704
24042
|
}
|
|
@@ -23708,6 +24046,9 @@ body.theme-dark {
|
|
|
23708
24046
|
.lg\:d-dco90 > * + * {
|
|
23709
24047
|
--dco: 90% !important;
|
|
23710
24048
|
}
|
|
24049
|
+
.lg\:d-dco85 > * + * {
|
|
24050
|
+
--dco: 85% !important;
|
|
24051
|
+
}
|
|
23711
24052
|
.lg\:d-dco75 > * + * {
|
|
23712
24053
|
--dco: 75% !important;
|
|
23713
24054
|
}
|
|
@@ -25160,6 +25501,9 @@ body.theme-dark {
|
|
|
25160
25501
|
--dco: 100%;
|
|
25161
25502
|
border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important;
|
|
25162
25503
|
}
|
|
25504
|
+
.xl\:d-dco100 > * + * {
|
|
25505
|
+
--dco: 100% !important;
|
|
25506
|
+
}
|
|
25163
25507
|
.xl\:d-dco99 > * + * {
|
|
25164
25508
|
--dco: 99% !important;
|
|
25165
25509
|
}
|
|
@@ -25169,6 +25513,9 @@ body.theme-dark {
|
|
|
25169
25513
|
.xl\:d-dco90 > * + * {
|
|
25170
25514
|
--dco: 90% !important;
|
|
25171
25515
|
}
|
|
25516
|
+
.xl\:d-dco85 > * + * {
|
|
25517
|
+
--dco: 85% !important;
|
|
25518
|
+
}
|
|
25172
25519
|
.xl\:d-dco75 > * + * {
|
|
25173
25520
|
--dco: 75% !important;
|
|
25174
25521
|
}
|