@deepgram/styles 0.0.3 → 0.0.4
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/README.md +157 -6
- package/dist/deepgram.css +1 -1
- package/dist/deepgram.expanded.css +543 -87
- package/lib/deepgram.css +360 -31
- package/package.json +1 -1
- package/tailwind.config.js +23 -13
|
@@ -570,10 +570,14 @@ video {
|
|
|
570
570
|
}
|
|
571
571
|
|
|
572
572
|
:root {
|
|
573
|
-
--dg-
|
|
573
|
+
--dg-base-font-size: 16px;
|
|
574
|
+
--dg-border-width: 0.125rem;
|
|
575
|
+
--dg-primary: #13ef95;
|
|
576
|
+
--dg-secondary: #149afb;
|
|
574
577
|
}
|
|
575
578
|
|
|
576
579
|
html {
|
|
580
|
+
font-size: var(--dg-base-font-size, 16px);
|
|
577
581
|
scroll-behavior: smooth;
|
|
578
582
|
}
|
|
579
583
|
|
|
@@ -636,7 +640,7 @@ code, pre {
|
|
|
636
640
|
}
|
|
637
641
|
|
|
638
642
|
a {
|
|
639
|
-
color: #13ef95;
|
|
643
|
+
color: var(--dg-primary, #13ef95);
|
|
640
644
|
transition-property: color;
|
|
641
645
|
transition-duration: 200ms;
|
|
642
646
|
}
|
|
@@ -681,7 +685,6 @@ a:hover {
|
|
|
681
685
|
.dg-btn {
|
|
682
686
|
gap: 0.5rem;
|
|
683
687
|
height: 3rem;
|
|
684
|
-
/* 48px */
|
|
685
688
|
}
|
|
686
689
|
|
|
687
690
|
/* Button Modifier: Small */
|
|
@@ -695,7 +698,6 @@ a:hover {
|
|
|
695
698
|
line-height: 1.25rem;
|
|
696
699
|
font-weight: 700;
|
|
697
700
|
height: 2.25rem;
|
|
698
|
-
/* 36px */
|
|
699
701
|
}
|
|
700
702
|
|
|
701
703
|
/* Button Modifier: Primary - Gradient border with glow effect */
|
|
@@ -706,14 +708,14 @@ a:hover {
|
|
|
706
708
|
position: relative;
|
|
707
709
|
border-width: 1px;
|
|
708
710
|
border-color: transparent;
|
|
709
|
-
background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg,
|
|
711
|
+
background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
|
|
710
712
|
background-origin: padding-box, border-box;
|
|
711
713
|
background-clip: padding-box, border-box;
|
|
712
714
|
background-repeat: no-repeat;
|
|
713
715
|
background-position: center;
|
|
714
716
|
background-size: 100% 100%;
|
|
715
717
|
background-color: rgb(0, 0, 0);
|
|
716
|
-
box-shadow:
|
|
718
|
+
box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
|
|
717
719
|
}
|
|
718
720
|
|
|
719
721
|
.dg-btn--primary:hover {
|
|
@@ -728,7 +730,7 @@ a:hover {
|
|
|
728
730
|
background-repeat: repeat;
|
|
729
731
|
background-position: 0% 0%;
|
|
730
732
|
background-size: auto;
|
|
731
|
-
box-shadow: rgba(38, 44, 52, 0.05) 0
|
|
733
|
+
box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
|
|
732
734
|
}
|
|
733
735
|
|
|
734
736
|
/* Button Modifier: Secondary - White background with black text */
|
|
@@ -775,7 +777,7 @@ a:hover {
|
|
|
775
777
|
background-repeat: repeat;
|
|
776
778
|
background-position: 0% 0%;
|
|
777
779
|
background-size: auto;
|
|
778
|
-
box-shadow: rgba(38, 44, 52, 0.05) 0
|
|
780
|
+
box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
|
|
779
781
|
}
|
|
780
782
|
|
|
781
783
|
/* Button Modifier: Danger Ghost - For destructive actions */
|
|
@@ -897,8 +899,8 @@ a:hover {
|
|
|
897
899
|
border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
|
|
898
900
|
--tw-bg-opacity: 1;
|
|
899
901
|
background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
|
|
900
|
-
--tw-shadow: 0
|
|
901
|
-
--tw-shadow-colored: 0
|
|
902
|
+
--tw-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
|
|
903
|
+
--tw-shadow-colored: 0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color), 0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);
|
|
902
904
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
903
905
|
}
|
|
904
906
|
|
|
@@ -957,8 +959,8 @@ a:hover {
|
|
|
957
959
|
background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
|
|
958
960
|
margin-bottom: 0.75rem;
|
|
959
961
|
padding: 0.75rem;
|
|
960
|
-
--tw-shadow: 0
|
|
961
|
-
--tw-shadow-colored: 0
|
|
962
|
+
--tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
|
|
963
|
+
--tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
|
|
962
964
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
963
965
|
transition-property: box-shadow;
|
|
964
966
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -979,8 +981,8 @@ a:hover {
|
|
|
979
981
|
}
|
|
980
982
|
|
|
981
983
|
.dg-card:hover {
|
|
982
|
-
--tw-shadow: 0
|
|
983
|
-
--tw-shadow-colored: 0
|
|
984
|
+
--tw-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
|
|
985
|
+
--tw-shadow-colored: 0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color), 0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);
|
|
984
986
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
985
987
|
}
|
|
986
988
|
|
|
@@ -1025,6 +1027,217 @@ a:hover {
|
|
|
1025
1027
|
padding: 0px;
|
|
1026
1028
|
}
|
|
1027
1029
|
|
|
1030
|
+
/* Selectable Card */
|
|
1031
|
+
|
|
1032
|
+
.dg-card--selectable {
|
|
1033
|
+
cursor: pointer;
|
|
1034
|
+
transition-property: all;
|
|
1035
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1036
|
+
transition-duration: 200ms;
|
|
1037
|
+
border-width: 2px;
|
|
1038
|
+
--tw-border-opacity: 1;
|
|
1039
|
+
border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
|
|
1040
|
+
padding: 1.25rem;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.dg-card--selectable:hover {
|
|
1044
|
+
--tw-border-opacity: 1;
|
|
1045
|
+
border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
.dg-card--selectable:has(input[type="radio"]:checked) {
|
|
1049
|
+
border-color: var(--dg-primary, #13ef95);
|
|
1050
|
+
background: rgba(19, 239, 149, 0.05);
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
/* Screen reader only utility */
|
|
1054
|
+
|
|
1055
|
+
.dg-sr-only {
|
|
1056
|
+
position: absolute;
|
|
1057
|
+
width: 1px;
|
|
1058
|
+
height: 1px;
|
|
1059
|
+
padding: 0;
|
|
1060
|
+
margin: -1px;
|
|
1061
|
+
overflow: hidden;
|
|
1062
|
+
clip: rect(0, 0, 0, 0);
|
|
1063
|
+
white-space: nowrap;
|
|
1064
|
+
border-width: 0;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
.dg-card--selectable input[type="radio"] {
|
|
1068
|
+
position: absolute;
|
|
1069
|
+
width: 1px;
|
|
1070
|
+
height: 1px;
|
|
1071
|
+
padding: 0;
|
|
1072
|
+
margin: -1px;
|
|
1073
|
+
overflow: hidden;
|
|
1074
|
+
clip: rect(0, 0, 0, 0);
|
|
1075
|
+
white-space: nowrap;
|
|
1076
|
+
border-width: 0;
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.dg-card--selectable__indicator {
|
|
1080
|
+
display: none;
|
|
1081
|
+
}
|
|
1082
|
+
|
|
1083
|
+
.dg-card--selectable__icon {
|
|
1084
|
+
--tw-text-opacity: 1;
|
|
1085
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
1086
|
+
margin-right: 0.5rem;
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
.dg-card--selectable__content {
|
|
1090
|
+
display: flex;
|
|
1091
|
+
flex: 1 1 0%;
|
|
1092
|
+
flex-direction: column;
|
|
1093
|
+
gap: 0.25rem;
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
@media (max-width: 767px) {
|
|
1097
|
+
.dg-card--selectable__content {
|
|
1098
|
+
flex-direction: row;
|
|
1099
|
+
align-items: center;
|
|
1100
|
+
gap: 0.75rem;
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
.dg-card--selectable .dg-item-title {
|
|
1105
|
+
--tw-text-opacity: 1;
|
|
1106
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
1107
|
+
font-size: 1rem;
|
|
1108
|
+
line-height: 1.5rem;
|
|
1109
|
+
font-weight: 600;
|
|
1110
|
+
display: flex;
|
|
1111
|
+
align-items: center;
|
|
1112
|
+
}
|
|
1113
|
+
|
|
1114
|
+
@media (max-width: 767px) {
|
|
1115
|
+
.dg-card--selectable .dg-item-title {
|
|
1116
|
+
margin-bottom: 0;
|
|
1117
|
+
flex-shrink: 0;
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
@media (min-width: 768px) {
|
|
1122
|
+
.dg-card--selectable .dg-item-title {
|
|
1123
|
+
margin-bottom: 0.25rem;
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.dg-card--selectable .dg-prose {
|
|
1128
|
+
--tw-text-opacity: 1;
|
|
1129
|
+
color: rgb(148 148 152 / var(--tw-text-opacity, 1));
|
|
1130
|
+
font-size: 0.875rem;
|
|
1131
|
+
line-height: 1.25rem;
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
@media (max-width: 767px) {
|
|
1135
|
+
.dg-card--selectable .dg-prose {
|
|
1136
|
+
flex: 1;
|
|
1137
|
+
white-space: nowrap;
|
|
1138
|
+
overflow: hidden;
|
|
1139
|
+
text-overflow: ellipsis;
|
|
1140
|
+
}
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
/* File Upload Card */
|
|
1144
|
+
|
|
1145
|
+
.dg-card--file-upload {
|
|
1146
|
+
cursor: pointer;
|
|
1147
|
+
transition-property: all;
|
|
1148
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1149
|
+
transition-duration: 200ms;
|
|
1150
|
+
border-width: 2px;
|
|
1151
|
+
border-style: dashed;
|
|
1152
|
+
--tw-border-opacity: 1;
|
|
1153
|
+
border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
|
|
1154
|
+
padding: 1.25rem;
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
.dg-card--file-upload:hover {
|
|
1158
|
+
--tw-border-opacity: 1;
|
|
1159
|
+
border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
.dg-card--file-upload:has(input[type="checkbox"]:checked) {
|
|
1163
|
+
border-style: solid;
|
|
1164
|
+
border-color: var(--dg-primary, #13ef95);
|
|
1165
|
+
background: rgba(19, 239, 149, 0.05);
|
|
1166
|
+
}
|
|
1167
|
+
|
|
1168
|
+
.dg-card--file-upload input[type="file"],
|
|
1169
|
+
.dg-card--file-upload input[type="checkbox"] {
|
|
1170
|
+
position: absolute;
|
|
1171
|
+
width: 1px;
|
|
1172
|
+
height: 1px;
|
|
1173
|
+
padding: 0;
|
|
1174
|
+
margin: -1px;
|
|
1175
|
+
overflow: hidden;
|
|
1176
|
+
clip: rect(0, 0, 0, 0);
|
|
1177
|
+
white-space: nowrap;
|
|
1178
|
+
border-width: 0;
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1181
|
+
.dg-card--file-upload__icon {
|
|
1182
|
+
--tw-text-opacity: 1;
|
|
1183
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
1184
|
+
margin-right: 0.5rem;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.dg-card--file-upload__content {
|
|
1188
|
+
display: flex;
|
|
1189
|
+
flex: 1 1 0%;
|
|
1190
|
+
flex-direction: column;
|
|
1191
|
+
gap: 0.25rem;
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
@media (max-width: 767px) {
|
|
1195
|
+
.dg-card--file-upload__content {
|
|
1196
|
+
flex-direction: row;
|
|
1197
|
+
align-items: center;
|
|
1198
|
+
gap: 0.75rem;
|
|
1199
|
+
}
|
|
1200
|
+
}
|
|
1201
|
+
|
|
1202
|
+
.dg-card--file-upload .dg-item-title {
|
|
1203
|
+
--tw-text-opacity: 1;
|
|
1204
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
1205
|
+
font-size: 1rem;
|
|
1206
|
+
line-height: 1.5rem;
|
|
1207
|
+
font-weight: 600;
|
|
1208
|
+
display: flex;
|
|
1209
|
+
align-items: center;
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
@media (max-width: 767px) {
|
|
1213
|
+
.dg-card--file-upload .dg-item-title {
|
|
1214
|
+
margin-bottom: 0;
|
|
1215
|
+
flex-shrink: 0;
|
|
1216
|
+
}
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
@media (min-width: 768px) {
|
|
1220
|
+
.dg-card--file-upload .dg-item-title {
|
|
1221
|
+
margin-bottom: 0.25rem;
|
|
1222
|
+
}
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1225
|
+
.dg-card--file-upload .dg-prose {
|
|
1226
|
+
--tw-text-opacity: 1;
|
|
1227
|
+
color: rgb(148 148 152 / var(--tw-text-opacity, 1));
|
|
1228
|
+
font-size: 0.875rem;
|
|
1229
|
+
line-height: 1.25rem;
|
|
1230
|
+
}
|
|
1231
|
+
|
|
1232
|
+
@media (max-width: 767px) {
|
|
1233
|
+
.dg-card--file-upload .dg-prose {
|
|
1234
|
+
flex: 1;
|
|
1235
|
+
white-space: nowrap;
|
|
1236
|
+
overflow: hidden;
|
|
1237
|
+
text-overflow: ellipsis;
|
|
1238
|
+
}
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1028
1241
|
/* Card Image */
|
|
1029
1242
|
|
|
1030
1243
|
.dg-card__image {
|
|
@@ -1046,15 +1259,15 @@ a:hover {
|
|
|
1046
1259
|
/* Card Image Size Modifiers */
|
|
1047
1260
|
|
|
1048
1261
|
.dg-card__image--small {
|
|
1049
|
-
height:
|
|
1262
|
+
height: 7.5rem;
|
|
1050
1263
|
}
|
|
1051
1264
|
|
|
1052
1265
|
.dg-card__image--medium {
|
|
1053
|
-
height:
|
|
1266
|
+
height: 10rem;
|
|
1054
1267
|
}
|
|
1055
1268
|
|
|
1056
1269
|
.dg-card__image--large {
|
|
1057
|
-
height:
|
|
1270
|
+
height: 15rem;
|
|
1058
1271
|
}
|
|
1059
1272
|
|
|
1060
1273
|
.dg-card__image--aspect-4-3 {
|
|
@@ -1089,8 +1302,7 @@ a:hover {
|
|
|
1089
1302
|
|
|
1090
1303
|
.dg-card__icon i,
|
|
1091
1304
|
.dg-card__icon svg {
|
|
1092
|
-
--
|
|
1093
|
-
color: rgb(19 239 149 / var(--tw-text-opacity, 1));
|
|
1305
|
+
color: var(--dg-primary, #13ef95);
|
|
1094
1306
|
font-size: 3rem;
|
|
1095
1307
|
line-height: 1;
|
|
1096
1308
|
}
|
|
@@ -1202,7 +1414,7 @@ a:hover {
|
|
|
1202
1414
|
background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
|
|
1203
1415
|
margin-top: 0.75rem;
|
|
1204
1416
|
margin-bottom: 0.75rem;
|
|
1205
|
-
max-height:
|
|
1417
|
+
max-height: 12.5rem;
|
|
1206
1418
|
padding: 0.5rem;
|
|
1207
1419
|
-webkit-overflow-scrolling: touch;
|
|
1208
1420
|
}
|
|
@@ -1211,14 +1423,14 @@ a:hover {
|
|
|
1211
1423
|
.dg-code-block {
|
|
1212
1424
|
margin-top: 1rem;
|
|
1213
1425
|
margin-bottom: 1rem;
|
|
1214
|
-
max-height:
|
|
1426
|
+
max-height: 15.625rem;
|
|
1215
1427
|
padding: 0.75rem;
|
|
1216
1428
|
}
|
|
1217
1429
|
}
|
|
1218
1430
|
|
|
1219
1431
|
@media (min-width: 1024px) {
|
|
1220
1432
|
.dg-code-block {
|
|
1221
|
-
max-height:
|
|
1433
|
+
max-height: 18.75rem;
|
|
1222
1434
|
}
|
|
1223
1435
|
}
|
|
1224
1436
|
|
|
@@ -1243,30 +1455,30 @@ a:hover {
|
|
|
1243
1455
|
}
|
|
1244
1456
|
|
|
1245
1457
|
.dg-code-block--compact {
|
|
1246
|
-
max-height:
|
|
1458
|
+
max-height: 7.5rem;
|
|
1247
1459
|
padding: 0.25rem;
|
|
1248
1460
|
}
|
|
1249
1461
|
|
|
1250
1462
|
@media (min-width: 640px) {
|
|
1251
1463
|
.dg-code-block--compact {
|
|
1252
|
-
max-height:
|
|
1464
|
+
max-height: 9.375rem;
|
|
1253
1465
|
padding: 0.5rem;
|
|
1254
1466
|
}
|
|
1255
1467
|
}
|
|
1256
1468
|
|
|
1257
1469
|
.dg-code-block--tall {
|
|
1258
|
-
max-height:
|
|
1470
|
+
max-height: 18.75rem;
|
|
1259
1471
|
}
|
|
1260
1472
|
|
|
1261
1473
|
@media (min-width: 640px) {
|
|
1262
1474
|
.dg-code-block--tall {
|
|
1263
|
-
max-height:
|
|
1475
|
+
max-height: 25rem;
|
|
1264
1476
|
}
|
|
1265
1477
|
}
|
|
1266
1478
|
|
|
1267
1479
|
@media (min-width: 1024px) {
|
|
1268
1480
|
.dg-code-block--tall {
|
|
1269
|
-
max-height:
|
|
1481
|
+
max-height: 31.25rem;
|
|
1270
1482
|
}
|
|
1271
1483
|
}
|
|
1272
1484
|
|
|
@@ -1289,10 +1501,10 @@ a:hover {
|
|
|
1289
1501
|
font-weight: 700;
|
|
1290
1502
|
line-height: 1.25;
|
|
1291
1503
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
1292
|
-
--tw-gradient-from: #149afb var(--tw-gradient-from-position);
|
|
1293
|
-
--tw-gradient-to: rgb(
|
|
1504
|
+
--tw-gradient-from: var(--dg-secondary, #149afb) var(--tw-gradient-from-position);
|
|
1505
|
+
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
|
|
1294
1506
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
1295
|
-
--tw-gradient-to: #13ef95 var(--tw-gradient-to-position);
|
|
1507
|
+
--tw-gradient-to: var(--dg-primary, #13ef95) var(--tw-gradient-to-position);
|
|
1296
1508
|
-webkit-background-clip: text;
|
|
1297
1509
|
background-clip: text;
|
|
1298
1510
|
-webkit-text-fill-color: transparent;
|
|
@@ -1357,7 +1569,7 @@ a:hover {
|
|
|
1357
1569
|
margin-left: auto;
|
|
1358
1570
|
margin-right: auto;
|
|
1359
1571
|
display: flex;
|
|
1360
|
-
max-width:
|
|
1572
|
+
max-width: 53.125rem;
|
|
1361
1573
|
flex-direction: column;
|
|
1362
1574
|
gap: 1.5rem;
|
|
1363
1575
|
}
|
|
@@ -1398,10 +1610,9 @@ a:hover {
|
|
|
1398
1610
|
.dg-hero__announcement:hover {
|
|
1399
1611
|
--tw-translate-y: -0.125rem;
|
|
1400
1612
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1401
|
-
|
|
1402
|
-
border-color: rgb(19 239 149 / var(--tw-border-opacity, 1));
|
|
1613
|
+
border-color: var(--dg-primary, #13ef95);
|
|
1403
1614
|
background-color: rgba(19, 239, 149, 0.1);
|
|
1404
|
-
box-shadow: 0
|
|
1615
|
+
box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
|
|
1405
1616
|
}
|
|
1406
1617
|
|
|
1407
1618
|
.dg-hero__announcement-text {
|
|
@@ -1422,8 +1633,7 @@ a:hover {
|
|
|
1422
1633
|
}
|
|
1423
1634
|
|
|
1424
1635
|
.dg-hero__announcement-cta {
|
|
1425
|
-
--
|
|
1426
|
-
color: rgb(20 154 251 / var(--tw-text-opacity, 1));
|
|
1636
|
+
color: var(--dg-secondary, #149afb);
|
|
1427
1637
|
display: inline-flex;
|
|
1428
1638
|
align-items: center;
|
|
1429
1639
|
gap: 0.5rem;
|
|
@@ -1453,7 +1663,7 @@ a:hover {
|
|
|
1453
1663
|
color: rgb(237 237 226 / var(--tw-text-opacity, 1));
|
|
1454
1664
|
margin-left: auto;
|
|
1455
1665
|
margin-right: auto;
|
|
1456
|
-
max-width:
|
|
1666
|
+
max-width: 53.125rem;
|
|
1457
1667
|
text-align: center;
|
|
1458
1668
|
font-size: 1.125rem;
|
|
1459
1669
|
font-weight: 400;
|
|
@@ -1470,7 +1680,7 @@ a:hover {
|
|
|
1470
1680
|
|
|
1471
1681
|
@media (max-width: 640px) {
|
|
1472
1682
|
.dg-hero__body {
|
|
1473
|
-
font-size:
|
|
1683
|
+
font-size: 0.9375rem;
|
|
1474
1684
|
line-height: 1.5;
|
|
1475
1685
|
}
|
|
1476
1686
|
}
|
|
@@ -1595,7 +1805,7 @@ a:hover {
|
|
|
1595
1805
|
|
|
1596
1806
|
@media (max-width: 640px) {
|
|
1597
1807
|
.dg-page-heading__description {
|
|
1598
|
-
font-size:
|
|
1808
|
+
font-size: 0.9375rem;
|
|
1599
1809
|
}
|
|
1600
1810
|
}
|
|
1601
1811
|
|
|
@@ -1738,10 +1948,10 @@ a:hover {
|
|
|
1738
1948
|
transition-property: all;
|
|
1739
1949
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1740
1950
|
transition-duration: 300ms;
|
|
1741
|
-
--tw-shadow: 0
|
|
1742
|
-
--tw-shadow-colored: 0
|
|
1951
|
+
--tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
|
|
1952
|
+
--tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
|
|
1743
1953
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1744
|
-
height:
|
|
1954
|
+
height: 2.75rem;
|
|
1745
1955
|
}
|
|
1746
1956
|
|
|
1747
1957
|
.dg-input::-moz-placeholder {
|
|
@@ -1755,9 +1965,8 @@ a:hover {
|
|
|
1755
1965
|
}
|
|
1756
1966
|
|
|
1757
1967
|
.dg-input:focus {
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
box-shadow: 0 0 0 1px #13ef95;
|
|
1968
|
+
border-color: var(--dg-primary, #13ef95);
|
|
1969
|
+
box-shadow: 0 0 0 0.0625rem var(--dg-primary, #13ef95);
|
|
1761
1970
|
}
|
|
1762
1971
|
|
|
1763
1972
|
.dg-input:disabled {
|
|
@@ -1766,13 +1975,27 @@ a:hover {
|
|
|
1766
1975
|
}
|
|
1767
1976
|
|
|
1768
1977
|
.dg-input--inline {
|
|
1769
|
-
min-width:
|
|
1978
|
+
min-width: 12.5rem;
|
|
1770
1979
|
}
|
|
1771
1980
|
|
|
1772
1981
|
.dg-input--full {
|
|
1773
1982
|
max-width: none;
|
|
1774
1983
|
}
|
|
1775
1984
|
|
|
1985
|
+
/* Select (dropdown) specific */
|
|
1986
|
+
|
|
1987
|
+
.dg-input[type="select"],
|
|
1988
|
+
select.dg-input {
|
|
1989
|
+
-webkit-appearance: none;
|
|
1990
|
+
-moz-appearance: none;
|
|
1991
|
+
appearance: none;
|
|
1992
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
1993
|
+
background-position: right 0.75rem center;
|
|
1994
|
+
background-repeat: no-repeat;
|
|
1995
|
+
background-size: 1.5em 1.5em;
|
|
1996
|
+
padding-right: 2.5rem;
|
|
1997
|
+
}
|
|
1998
|
+
|
|
1776
1999
|
/* Textarea */
|
|
1777
2000
|
|
|
1778
2001
|
.dg-textarea {
|
|
@@ -1797,10 +2020,10 @@ a:hover {
|
|
|
1797
2020
|
transition-property: all;
|
|
1798
2021
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1799
2022
|
transition-duration: 300ms;
|
|
1800
|
-
--tw-shadow: 0
|
|
1801
|
-
--tw-shadow-colored: 0
|
|
2023
|
+
--tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
|
|
2024
|
+
--tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
|
|
1802
2025
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1803
|
-
height:
|
|
2026
|
+
height: 2.75rem;
|
|
1804
2027
|
}
|
|
1805
2028
|
|
|
1806
2029
|
.dg-textarea::-moz-placeholder {
|
|
@@ -1814,9 +2037,8 @@ a:hover {
|
|
|
1814
2037
|
}
|
|
1815
2038
|
|
|
1816
2039
|
.dg-textarea:focus {
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
box-shadow: 0 0 0 1px #13ef95;
|
|
2040
|
+
border-color: var(--dg-primary, #13ef95);
|
|
2041
|
+
box-shadow: 0 0 0 0.0625rem var(--dg-primary, #13ef95);
|
|
1820
2042
|
}
|
|
1821
2043
|
|
|
1822
2044
|
.dg-textarea:disabled {
|
|
@@ -1824,6 +2046,18 @@ a:hover {
|
|
|
1824
2046
|
opacity: 0.5;
|
|
1825
2047
|
}
|
|
1826
2048
|
|
|
2049
|
+
.dg-textarea[type="select"],
|
|
2050
|
+
select.dg-textarea {
|
|
2051
|
+
-webkit-appearance: none;
|
|
2052
|
+
-moz-appearance: none;
|
|
2053
|
+
appearance: none;
|
|
2054
|
+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
2055
|
+
background-position: right 0.75rem center;
|
|
2056
|
+
background-repeat: no-repeat;
|
|
2057
|
+
background-size: 1.5em 1.5em;
|
|
2058
|
+
padding-right: 2.5rem;
|
|
2059
|
+
}
|
|
2060
|
+
|
|
1827
2061
|
.dg-form-field--error .dg-textarea {
|
|
1828
2062
|
--tw-border-opacity: 1;
|
|
1829
2063
|
border-color: rgb(240 68 56 / var(--tw-border-opacity, 1));
|
|
@@ -1835,7 +2069,7 @@ a:hover {
|
|
|
1835
2069
|
}
|
|
1836
2070
|
|
|
1837
2071
|
.dg-textarea {
|
|
1838
|
-
min-height:
|
|
2072
|
+
min-height: 6.25rem;
|
|
1839
2073
|
resize: vertical;
|
|
1840
2074
|
height: auto;
|
|
1841
2075
|
}
|
|
@@ -1863,28 +2097,26 @@ a:hover {
|
|
|
1863
2097
|
}
|
|
1864
2098
|
|
|
1865
2099
|
.dg-checkbox:checked {
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
--tw-bg-opacity: 1;
|
|
1869
|
-
background-color: rgb(19 239 149 / var(--tw-bg-opacity, 1));
|
|
2100
|
+
border-color: var(--dg-primary, #13ef95);
|
|
2101
|
+
background-color: var(--dg-primary, #13ef95);
|
|
1870
2102
|
}
|
|
1871
2103
|
|
|
1872
2104
|
.dg-checkbox:checked::after {
|
|
1873
2105
|
content: "";
|
|
1874
2106
|
position: absolute;
|
|
1875
|
-
left:
|
|
1876
|
-
top:
|
|
1877
|
-
width:
|
|
1878
|
-
height:
|
|
2107
|
+
left: 0.375rem;
|
|
2108
|
+
top: 0.125rem;
|
|
2109
|
+
width: 0.3125rem;
|
|
2110
|
+
height: 0.625rem;
|
|
1879
2111
|
border: solid black;
|
|
1880
|
-
border-width: 0
|
|
2112
|
+
border-width: 0 0.125rem 0.125rem 0;
|
|
1881
2113
|
transform: rotate(45deg);
|
|
1882
2114
|
}
|
|
1883
2115
|
|
|
1884
2116
|
.dg-checkbox:focus {
|
|
1885
2117
|
outline: 2px solid transparent;
|
|
1886
2118
|
outline-offset: 2px;
|
|
1887
|
-
box-shadow: 0 0 0
|
|
2119
|
+
box-shadow: 0 0 0 0.125rem var(--dg-primary, #13ef95);
|
|
1888
2120
|
}
|
|
1889
2121
|
|
|
1890
2122
|
/* Checkbox Label */
|
|
@@ -2020,7 +2252,7 @@ a:hover {
|
|
|
2020
2252
|
gap: 0.75rem;
|
|
2021
2253
|
cursor: pointer;
|
|
2022
2254
|
padding: 3rem 2rem;
|
|
2023
|
-
min-height:
|
|
2255
|
+
min-height: 12.5rem;
|
|
2024
2256
|
}
|
|
2025
2257
|
|
|
2026
2258
|
.dg-drag-drop-zone:hover {
|
|
@@ -2031,8 +2263,7 @@ a:hover {
|
|
|
2031
2263
|
}
|
|
2032
2264
|
|
|
2033
2265
|
.dg-drag-drop-zone.drag-over {
|
|
2034
|
-
|
|
2035
|
-
border-color: rgb(19 239 149 / var(--tw-border-opacity, 1));
|
|
2266
|
+
border-color: var(--dg-primary, #13ef95);
|
|
2036
2267
|
background-color: rgba(0, 0, 0, 0.5);
|
|
2037
2268
|
}
|
|
2038
2269
|
|
|
@@ -2053,8 +2284,7 @@ a:hover {
|
|
|
2053
2284
|
}
|
|
2054
2285
|
|
|
2055
2286
|
.dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
|
|
2056
|
-
--
|
|
2057
|
-
color: rgb(19 239 149 / var(--tw-text-opacity, 1));
|
|
2287
|
+
color: var(--dg-primary, #13ef95);
|
|
2058
2288
|
}
|
|
2059
2289
|
|
|
2060
2290
|
.dg-drag-drop-zone__text {
|
|
@@ -2124,13 +2354,11 @@ a:hover {
|
|
|
2124
2354
|
}
|
|
2125
2355
|
|
|
2126
2356
|
.dg-status--primary {
|
|
2127
|
-
--
|
|
2128
|
-
color: rgb(19 239 149 / var(--tw-text-opacity, 1));
|
|
2357
|
+
color: var(--dg-primary, #13ef95);
|
|
2129
2358
|
}
|
|
2130
2359
|
|
|
2131
2360
|
.dg-status--secondary {
|
|
2132
|
-
--
|
|
2133
|
-
color: rgb(20 154 251 / var(--tw-text-opacity, 1));
|
|
2361
|
+
color: var(--dg-secondary, #149afb);
|
|
2134
2362
|
}
|
|
2135
2363
|
|
|
2136
2364
|
.dg-status--with-icon {
|
|
@@ -2168,9 +2396,9 @@ a:hover {
|
|
|
2168
2396
|
height: 2.5rem;
|
|
2169
2397
|
border-radius: 9999px;
|
|
2170
2398
|
border-width: 3px;
|
|
2171
|
-
border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
|
|
2172
2399
|
--tw-border-opacity: 1;
|
|
2173
|
-
border-
|
|
2400
|
+
border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
|
|
2401
|
+
border-top-color: var(--dg-primary, #13ef95);
|
|
2174
2402
|
margin-left: auto;
|
|
2175
2403
|
margin-right: auto;
|
|
2176
2404
|
margin-bottom: 0.75rem;
|
|
@@ -2227,7 +2455,7 @@ a:hover {
|
|
|
2227
2455
|
|
|
2228
2456
|
.dg-modal-content {
|
|
2229
2457
|
margin: 0.75rem;
|
|
2230
|
-
max-width:
|
|
2458
|
+
max-width: 25rem;
|
|
2231
2459
|
text-align: center;
|
|
2232
2460
|
}
|
|
2233
2461
|
|
|
@@ -2245,7 +2473,7 @@ a:hover {
|
|
|
2245
2473
|
.dg-constrain-width {
|
|
2246
2474
|
margin-left: auto;
|
|
2247
2475
|
margin-right: auto;
|
|
2248
|
-
max-width:
|
|
2476
|
+
max-width: 70rem;
|
|
2249
2477
|
}
|
|
2250
2478
|
}
|
|
2251
2479
|
|
|
@@ -2295,6 +2523,79 @@ a:hover {
|
|
|
2295
2523
|
}
|
|
2296
2524
|
}
|
|
2297
2525
|
|
|
2526
|
+
/* Header */
|
|
2527
|
+
|
|
2528
|
+
.dg-header {
|
|
2529
|
+
width: 100%;
|
|
2530
|
+
background: #050506;
|
|
2531
|
+
/* dg-almost-black */
|
|
2532
|
+
padding: 1rem 1.5rem;
|
|
2533
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
2534
|
+
}
|
|
2535
|
+
|
|
2536
|
+
.dg-header__container {
|
|
2537
|
+
margin-left: auto;
|
|
2538
|
+
margin-right: auto;
|
|
2539
|
+
display: flex;
|
|
2540
|
+
max-width: 1536px;
|
|
2541
|
+
align-items: center;
|
|
2542
|
+
justify-content: space-between;
|
|
2543
|
+
}
|
|
2544
|
+
|
|
2545
|
+
.dg-header__logo {
|
|
2546
|
+
display: flex;
|
|
2547
|
+
align-items: center;
|
|
2548
|
+
gap: 0.75rem;
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
.dg-header__logo-image {
|
|
2552
|
+
height: 2rem;
|
|
2553
|
+
width: auto;
|
|
2554
|
+
}
|
|
2555
|
+
|
|
2556
|
+
.dg-header__logo-text {
|
|
2557
|
+
--tw-text-opacity: 1;
|
|
2558
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
|
2559
|
+
font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
|
2560
|
+
font-size: 1.25rem;
|
|
2561
|
+
line-height: 1.75rem;
|
|
2562
|
+
font-weight: 700;
|
|
2563
|
+
}
|
|
2564
|
+
|
|
2565
|
+
.dg-header__nav {
|
|
2566
|
+
display: flex;
|
|
2567
|
+
align-items: center;
|
|
2568
|
+
gap: 1rem;
|
|
2569
|
+
}
|
|
2570
|
+
|
|
2571
|
+
.dg-header__profile-link {
|
|
2572
|
+
margin: -0.375rem;
|
|
2573
|
+
display: block;
|
|
2574
|
+
padding: 0.375rem;
|
|
2575
|
+
}
|
|
2576
|
+
|
|
2577
|
+
.dg-header__profile-avatar {
|
|
2578
|
+
width: 2rem;
|
|
2579
|
+
height: 2rem;
|
|
2580
|
+
border-radius: 9999px;
|
|
2581
|
+
--tw-bg-opacity: 1;
|
|
2582
|
+
background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
|
|
2583
|
+
outline-style: solid;
|
|
2584
|
+
outline-offset: -1px;
|
|
2585
|
+
outline-color: rgb(255 255 255 / 0.1);
|
|
2586
|
+
}
|
|
2587
|
+
|
|
2588
|
+
@media (max-width: 768px) {
|
|
2589
|
+
.dg-header {
|
|
2590
|
+
padding: 0.75rem 1rem;
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2593
|
+
.dg-header__logo-text {
|
|
2594
|
+
font-size: 1.125rem;
|
|
2595
|
+
line-height: 1.75rem;
|
|
2596
|
+
}
|
|
2597
|
+
}
|
|
2598
|
+
|
|
2298
2599
|
/* Footer */
|
|
2299
2600
|
|
|
2300
2601
|
.dg-footer {
|
|
@@ -2329,13 +2630,11 @@ a:hover {
|
|
|
2329
2630
|
}
|
|
2330
2631
|
|
|
2331
2632
|
.dg-text-primary {
|
|
2332
|
-
--
|
|
2333
|
-
color: rgb(19 239 149 / var(--tw-text-opacity, 1));
|
|
2633
|
+
color: var(--dg-primary, #13ef95);
|
|
2334
2634
|
}
|
|
2335
2635
|
|
|
2336
2636
|
.dg-text-secondary {
|
|
2337
|
-
--
|
|
2338
|
-
color: rgb(20 154 251 / var(--tw-text-opacity, 1));
|
|
2637
|
+
color: var(--dg-secondary, #149afb);
|
|
2339
2638
|
}
|
|
2340
2639
|
|
|
2341
2640
|
.dg-text-muted {
|
|
@@ -2481,6 +2780,165 @@ a:hover {
|
|
|
2481
2780
|
line-height: 1rem;
|
|
2482
2781
|
}
|
|
2483
2782
|
|
|
2783
|
+
/* ==========================================================================
|
|
2784
|
+
MULTI-COLUMN LAYOUT COMPONENTS
|
|
2785
|
+
|
|
2786
|
+
Responsive collapse pattern:
|
|
2787
|
+
- Mobile (< 768px): All columns stacked vertically
|
|
2788
|
+
- Tablet (768px+): Right sidebar moves to side, left stacked on top
|
|
2789
|
+
- Desktop (1024px+): All three columns side-by-side
|
|
2790
|
+
========================================================================== */
|
|
2791
|
+
|
|
2792
|
+
/* Column Container - parent wrapper for all columns */
|
|
2793
|
+
|
|
2794
|
+
.dg-columns {
|
|
2795
|
+
display: flex;
|
|
2796
|
+
width: 100%;
|
|
2797
|
+
flex-direction: column;
|
|
2798
|
+
}
|
|
2799
|
+
|
|
2800
|
+
/* At tablet: show right sidebar on the side */
|
|
2801
|
+
|
|
2802
|
+
@media (min-width: 768px) {
|
|
2803
|
+
.dg-columns {
|
|
2804
|
+
flex-direction: row;
|
|
2805
|
+
}
|
|
2806
|
+
}
|
|
2807
|
+
|
|
2808
|
+
/* Column Wrapper - groups left sidebar and main content together */
|
|
2809
|
+
|
|
2810
|
+
.dg-columns__wrapper {
|
|
2811
|
+
display: flex;
|
|
2812
|
+
min-width: 0px;
|
|
2813
|
+
flex: 1 1 0%;
|
|
2814
|
+
flex-direction: column;
|
|
2815
|
+
}
|
|
2816
|
+
|
|
2817
|
+
/* At desktop: show left sidebar on the side */
|
|
2818
|
+
|
|
2819
|
+
@media (min-width: 1024px) {
|
|
2820
|
+
.dg-columns__wrapper {
|
|
2821
|
+
flex-direction: row;
|
|
2822
|
+
}
|
|
2823
|
+
}
|
|
2824
|
+
|
|
2825
|
+
/* Base Column - padding for all columns */
|
|
2826
|
+
|
|
2827
|
+
.dg-column {
|
|
2828
|
+
min-width: 0px;
|
|
2829
|
+
padding-left: 1rem;
|
|
2830
|
+
padding-right: 1rem;
|
|
2831
|
+
padding-top: 1.5rem;
|
|
2832
|
+
padding-bottom: 1.5rem;
|
|
2833
|
+
}
|
|
2834
|
+
|
|
2835
|
+
@media (min-width: 640px) {
|
|
2836
|
+
.dg-column {
|
|
2837
|
+
padding-left: 1.5rem;
|
|
2838
|
+
padding-right: 1.5rem;
|
|
2839
|
+
}
|
|
2840
|
+
}
|
|
2841
|
+
|
|
2842
|
+
/* Main Content Column - always fills available space */
|
|
2843
|
+
|
|
2844
|
+
.dg-column--main {
|
|
2845
|
+
flex: 1 1 0%;
|
|
2846
|
+
}
|
|
2847
|
+
|
|
2848
|
+
/* Left Sidebar - fixed width on desktop, full width on mobile/tablet */
|
|
2849
|
+
|
|
2850
|
+
.dg-column--sidebar-left {
|
|
2851
|
+
/* Layout only - no colors */
|
|
2852
|
+
}
|
|
2853
|
+
|
|
2854
|
+
@media (min-width: 1024px) {
|
|
2855
|
+
.dg-column--sidebar-left {
|
|
2856
|
+
width: 12rem;
|
|
2857
|
+
flex-shrink: 0;
|
|
2858
|
+
}
|
|
2859
|
+
|
|
2860
|
+
.dg-column--sidebar-left.dg-column--sm {
|
|
2861
|
+
width: 16rem;
|
|
2862
|
+
flex-shrink: 0;
|
|
2863
|
+
}
|
|
2864
|
+
|
|
2865
|
+
.dg-column--sidebar-left.dg-column--lg {
|
|
2866
|
+
width: 24rem;
|
|
2867
|
+
flex-shrink: 0;
|
|
2868
|
+
}
|
|
2869
|
+
|
|
2870
|
+
.dg-column--sidebar-left.dg-column--xl {
|
|
2871
|
+
width: 32rem;
|
|
2872
|
+
flex-shrink: 0;
|
|
2873
|
+
}
|
|
2874
|
+
}
|
|
2875
|
+
|
|
2876
|
+
/* Right Sidebar - fixed width on tablet+, full width on mobile */
|
|
2877
|
+
|
|
2878
|
+
.dg-column--sidebar-right {
|
|
2879
|
+
/* Layout only - no colors */
|
|
2880
|
+
position: relative;
|
|
2881
|
+
}
|
|
2882
|
+
|
|
2883
|
+
/* Between 768px and 1280px: Floating sidebar with toggle */
|
|
2884
|
+
|
|
2885
|
+
@media (min-width: 768px) and (max-width: 1279px) {
|
|
2886
|
+
.dg-column--sidebar-right {
|
|
2887
|
+
position: fixed;
|
|
2888
|
+
top: 65px;
|
|
2889
|
+
/* Account for header height */
|
|
2890
|
+
right: 0;
|
|
2891
|
+
height: calc(100vh - 65px);
|
|
2892
|
+
width: 16rem;
|
|
2893
|
+
flex-shrink: 0;
|
|
2894
|
+
transition: transform 300ms ease;
|
|
2895
|
+
z-index: 20;
|
|
2896
|
+
box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
|
|
2897
|
+
}
|
|
2898
|
+
|
|
2899
|
+
.dg-column--sidebar-right.dg-column--sm {
|
|
2900
|
+
width: 20rem;
|
|
2901
|
+
}
|
|
2902
|
+
|
|
2903
|
+
.dg-column--sidebar-right.dg-column--lg {
|
|
2904
|
+
width: 24rem;
|
|
2905
|
+
}
|
|
2906
|
+
|
|
2907
|
+
.dg-column--sidebar-right.dg-column--xl {
|
|
2908
|
+
width: 32rem;
|
|
2909
|
+
}
|
|
2910
|
+
|
|
2911
|
+
/* Collapsed state - slide mostly off screen but leave button visible */
|
|
2912
|
+
|
|
2913
|
+
.dg-column--sidebar-right.collapsed {
|
|
2914
|
+
transform: translateX(calc(100% - 2rem));
|
|
2915
|
+
}
|
|
2916
|
+
}
|
|
2917
|
+
|
|
2918
|
+
/* Above 1280px: Normal sidebar behavior */
|
|
2919
|
+
|
|
2920
|
+
@media (min-width: 1280px) {
|
|
2921
|
+
.dg-column--sidebar-right {
|
|
2922
|
+
width: 16rem;
|
|
2923
|
+
flex-shrink: 0;
|
|
2924
|
+
}
|
|
2925
|
+
|
|
2926
|
+
.dg-column--sidebar-right.dg-column--sm {
|
|
2927
|
+
width: 20rem;
|
|
2928
|
+
flex-shrink: 0;
|
|
2929
|
+
}
|
|
2930
|
+
|
|
2931
|
+
.dg-column--sidebar-right.dg-column--lg {
|
|
2932
|
+
width: 24rem;
|
|
2933
|
+
flex-shrink: 0;
|
|
2934
|
+
}
|
|
2935
|
+
|
|
2936
|
+
.dg-column--sidebar-right.dg-column--xl {
|
|
2937
|
+
width: 32rem;
|
|
2938
|
+
flex-shrink: 0;
|
|
2939
|
+
}
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2484
2942
|
/* ==========================================================================
|
|
2485
2943
|
LINK COMPONENTS
|
|
2486
2944
|
========================================================================== */
|
|
@@ -2488,8 +2946,7 @@ a:hover {
|
|
|
2488
2946
|
/* Primary Link with hover effect */
|
|
2489
2947
|
|
|
2490
2948
|
.dg-link {
|
|
2491
|
-
--
|
|
2492
|
-
color: rgb(19 239 149 / var(--tw-text-opacity, 1));
|
|
2949
|
+
color: var(--dg-primary, #13ef95);
|
|
2493
2950
|
transition-property: opacity;
|
|
2494
2951
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2495
2952
|
transition-duration: 200ms;
|
|
@@ -2512,12 +2969,11 @@ a:hover {
|
|
|
2512
2969
|
}
|
|
2513
2970
|
|
|
2514
2971
|
.dg-social-link:hover {
|
|
2515
|
-
--
|
|
2516
|
-
color: rgb(19 239 149 / var(--tw-text-opacity, 1));
|
|
2972
|
+
color: var(--dg-primary, #13ef95);
|
|
2517
2973
|
}
|
|
2518
2974
|
|
|
2519
2975
|
.dg-gradient-border {
|
|
2520
|
-
background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg,
|
|
2976
|
+
background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
|
|
2521
2977
|
background-origin: padding-box, border-box;
|
|
2522
2978
|
background-clip: padding-box, border-box;
|
|
2523
2979
|
background-repeat: no-repeat;
|
|
@@ -2536,11 +2992,11 @@ a:hover {
|
|
|
2536
2992
|
}
|
|
2537
2993
|
|
|
2538
2994
|
.dg-glow-cyan-green {
|
|
2539
|
-
box-shadow:
|
|
2995
|
+
box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
|
|
2540
2996
|
}
|
|
2541
2997
|
|
|
2542
2998
|
.dg-shadow-subtle {
|
|
2543
|
-
box-shadow: rgba(38, 44, 52, 0.05) 0
|
|
2999
|
+
box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
|
|
2544
3000
|
}
|
|
2545
3001
|
|
|
2546
3002
|
/* ==========================================================================
|