Skip to content

Commit aa571b2

Browse files
lazueelazuee
authored
Updated sidebar-notice
1 parent 922e726 commit aa571b2

File tree

1 file changed

+184
-42
lines changed

1 file changed

+184
-42
lines changed

‎discord/sidebar-notice/import.css

Lines changed: 184 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
--notice-height-join: 145px;
1414
--notice-height-welcome: 155px;
1515
--notice-height-premium: 150px;
16+
--notice-height-warning: 160px;
1617
--notice-height-add: 0px;
1718
--notice-text-heading: "";
1819
--notice-text-join: "";
@@ -43,6 +44,26 @@ html:not(:has(.artwork_d8215a)) {
4344
}
4445

4546
.base_a4d4d9:has(.notice_be03aa) {
47+
&:not(:has(.colorPremium_be03aa), :has(.colorWarning_be03aa)) {
48+
&:has(.notice_dd5a33) {
49+
--notice-height: var(--notice-height-join);
50+
--notice-icon: var(--notice-icon-join);
51+
}
52+
53+
&:has(.notice_a50047) {
54+
--notice-height: var(--notice-height-welcome);
55+
--notice-icon: var(--notice-icon-welcome);
56+
}
57+
}
58+
59+
&:has(.colorPremium_be03aa) {
60+
--notice-height: var(--notice-height-premium);
61+
}
62+
63+
&:has(.colorWarning_be03aa) {
64+
--notice-height: var(--notice-height-warning);
65+
}
66+
4667
@container style(--notice-enable-height-adjust: true) {
4768
.thin_eed6a8>ul {
4869
&:has(> div[style="height: 16px;"]) {
@@ -68,45 +89,32 @@ html:not(:has(.artwork_d8215a)) {
6889
}
6990
}
7091

71-
&:not(:has(.colorPremium_be03aa)) {
72-
&:has(.notice_dd5a33) {
73-
--notice-height: var(--notice-height-join);
74-
--notice-icon: var(--notice-icon-join);
75-
}
76-
77-
&:has(.notice_a50047) {
78-
--notice-height: var(--notice-height-welcome);
79-
--notice-icon: var(--notice-icon-welcome);
80-
}
92+
>div.notice_be03aa {
93+
height: var(--notice-height);
94+
95+
border-radius: 0;
96+
background: var(--notice-background);
97+
padding: 16px 0;
98+
position: absolute;
99+
left: var(--notice-margin-left);
100+
overflow: hidden;
101+
bottom: var(--notice-margin-bottom);
102+
box-shadow: none;
103+
box-sizing: border-box;
104+
right: var(--notice-margin-right);
105+
top: var(--notice-margin-top);
106+
width: 240px;
81107
}
82108

83-
&:has(.colorPremium_be03aa) {
84-
--notice-height: var(--notice-height-premium);
85-
--notice-icon: var(--notice-icon-premium);
86-
}
87-
88-
&:not(:has(.colorPremium_be03aa)) {
109+
&:not(:has(.colorPremium_be03aa), :has(.colorWarning_be03aa)) {
89110
>div.notice_be03aa {
90111
align-content: space-between;
91112
align-items: start;
92-
background: var(--notice-background);
93113
border-bottom: 1px solid var(--background-secondary);
94-
border-radius: 0;
95-
bottom: var(--notice-margin-bottom);
96-
box-shadow: none;
97-
box-sizing: border-box;
98114
display: grid;
99115
gap: 12px 8px;
100116
grid-template-columns: 80px 1fr;
101117
grid-template-rows: auto 32px;
102-
height: var(--notice-height);
103-
left: var(--notice-margin-left);
104-
overflow: hidden;
105-
padding: 16px 0;
106-
position: absolute;
107-
right: var(--notice-margin-right);
108-
top: var(--notice-margin-top);
109-
width: 240px;
110118

111119
&:before {
112120
box-shadow: var(--elevation-low);
@@ -145,8 +153,8 @@ html:not(:has(.artwork_d8215a)) {
145153
margin: 0;
146154
padding: 0 16px;
147155
text-align: left;
148-
font-weight: 400;
149-
font-size: small;
156+
font-weight: 400;
157+
font-size: small;
150158

151159
&:before {
152160
content: var(--notice-text-heading);
@@ -270,20 +278,11 @@ html:not(:has(.artwork_d8215a)) {
270278

271279
&:has(.colorPremium_be03aa) {
272280
>div.notice_be03aa {
273-
background: var(--notice-background);
274-
border-radius: 0;
275-
bottom: var(--notice-margin-bottom);
276-
box-shadow: none;
277-
box-sizing: border-box;
281+
278282
display: grid;
279283
grid-template-columns: 1fr;
280284
grid-template-rows: 27px 50px 32px;
281-
left: var(--notice-margin-left);
282285
padding: 16px;
283-
position: absolute;
284-
right: var(--notice-margin-right);
285-
top: var(--notice-margin-top);
286-
width: 240px;
287286
font-family: var(--font-primary);
288287
font-size: 14px;
289288
line-height: 1.2857142857142858;
@@ -424,5 +423,148 @@ html:not(:has(.artwork_d8215a)) {
424423
}
425424
}
426425
}
426+
427+
&:has(.colorWarning_be03aa) {
428+
>div.notice_be03aa {
429+
display: grid;
430+
padding: 16px;
431+
grid-template-columns: 1fr;
432+
grid-template-rows: 27px 50px 32px;
433+
font-family: var(--font-primary);
434+
font-size: 14px;
435+
line-height: 1.2857142857142858;
436+
font-weight: 400;
437+
color: var(--white-500);
438+
text-align: left;
439+
align-items: start;
440+
441+
442+
&:before {
443+
box-shadow: var(--elevation-low);
444+
content: "";
445+
display: block;
446+
height: 1px;
447+
left: 0;
448+
pointer-events: none;
449+
position: absolute;
450+
right: 0;
451+
top: -1px;
452+
z-index: 1;
453+
}
454+
455+
&:after {
456+
border-bottom: 1px solid var(--background-modifier-accent);
457+
bottom: 0;
458+
content: "";
459+
height: 1px;
460+
left: 8px;
461+
position: absolute;
462+
width: calc(100% - 16px);
463+
}
464+
465+
466+
>[aria-label="Dismiss"] {
467+
position: relative;
468+
height: 100%;
469+
width: 100%;
470+
display: flex;
471+
justify-content: space-between;
472+
473+
&:before {
474+
display: flex;
475+
align-items: center;
476+
content: "Warning";
477+
position: relative;
478+
top: 0;
479+
width: 100%;
480+
height: 100%;
481+
z-index: 10;
482+
text-indent: 0;
483+
font-family: var(--font-primary);
484+
font-size: 12px;
485+
line-height: 1.3333333333333333;
486+
font-weight: 700;
487+
color: var(--white-500);
488+
text-transform: uppercase;
489+
}
490+
491+
&:after {
492+
background: linear-gradient(158deg, transparent 0%, var(--notice-background) 80%), linear-gradient(5deg, transparent 60%, var(--notice-background) 100%), linear-gradient(74deg, transparent 3%, var(--notice-background) 90%), var(--notice-icon);
493+
background-position: top center;
494+
background-repeat: no-repeat;
495+
content: "";
496+
height: 100px;
497+
opacity: 0.5;
498+
position: absolute;
499+
right: 0;
500+
top: 0;
501+
transform: rotate(19deg);
502+
width: 100px;
503+
z-index: -1;
504+
}
505+
506+
>svg {
507+
position: absolute;
508+
right: -2px;
509+
width: 16px !important;
510+
height: 16px !important;
511+
}
512+
513+
path {
514+
fill: var(--header-secondary);
515+
}
516+
}
517+
518+
>button {
519+
margin: 0;
520+
margin-top: 12px;
521+
align-items: center;
522+
border-radius: 3px;
523+
box-sizing: border-box;
524+
color: var(--white-500);
525+
display: flex;
526+
font-size: 14px;
527+
font-weight: 500;
528+
height: 100%;
529+
justify-content: center;
530+
border-width: 0;
531+
background: var(--status-warning-background);
532+
line-height: 16px;
533+
padding: 0 16px;
534+
position: relative;
535+
transition: background var(--custom-button-transition-duration) ease;
536+
user-select: none;
537+
width: 100%;
538+
z-index: 1;
539+
top: 0;
540+
541+
&:hover {
542+
background: transparent;
543+
border-color: var(--white-50);
544+
}
545+
546+
&:before {
547+
position: absolute;
548+
align-items: center;
549+
background-color: var(--brand-500);
550+
border: none;
551+
border-radius: 3px;
552+
box-sizing: border-box;
553+
color: var(--white-500);
554+
display: flex;
555+
font-size: 14px;
556+
font-weight: 500;
557+
height: 100%;
558+
justify-content: center;
559+
line-height: 16px;
560+
margin: 0 16px;
561+
transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease;
562+
user-select: none;
563+
width: 100%;
564+
z-index: 1;
565+
}
566+
}
567+
}
568+
}
427569
}
428-
}
570+
}

0 commit comments

Comments
 (0)