diff --git a/discord/sidebar-notice/README.md b/discord/sidebar-notice/README.md index c074570..e572515 100644 --- a/discord/sidebar-notice/README.md +++ b/discord/sidebar-notice/README.md @@ -13,3 +13,5 @@ - `--notice-icon-welcome: url("https://discord.com/assets/7f809e89e310c87b2e3f.svg");` : sets the welcome icon. ### Preview +![圖片](https://github.com/user-attachments/assets/be28f656-584a-4015-8793-61bd1957b033) +![圖片](https://github.com/user-attachments/assets/53b907e4-74c1-443b-b6b8-ccd2e6bb5a43) diff --git a/discord/sidebar-notice/import.css b/discord/sidebar-notice/import.css index 5680210..7936685 100644 --- a/discord/sidebar-notice/import.css +++ b/discord/sidebar-notice/import.css @@ -1,582 +1,587 @@ :root { - /* root variables */ - --notice-margin-top: 48px; - --notice-margin-bottom: auto; - --notice-margin-left: 0px; - --notice-margin-right: auto; - --notice-background: var(--background-secondary); - --notice-enable-height-adjust: true; - --notice-icon-join: transparent; - --notice-icon-welcome: ""; - /* url("https://discord.com/assets/7f809e89e310c87b2e3f.svg") */ - --notice-icon-premium: ""; - --notice-height-join: 145px; - --notice-height-welcome: 155px; - --notice-height-premium: 150px; - --notice-height-warning: 157px; - --notice-height-add: 0px; - --notice-text-heading: ""; - --notice-text-join: ""; + /* root variables */ + --notice-margin-top: 48px; + --notice-margin-bottom: auto; + --notice-margin-left: 0px; + --notice-margin-right: auto; + --notice-background: var(--background-secondary); + --notice-enable-height-adjust: true; + --notice-icon-join: transparent; + --notice-icon-welcome: ""; + /* url("https://discord.com/assets/7f809e89e310c87b2e3f.svg") */ + --notice-icon-premium: ""; + --notice-height-join: 145px; + --notice-height-welcome: 155px; + --notice-height-premium: 150px; + --notice-height-warning: 157px; + --notice-height-add: 0px; + --notice-text-heading: ""; + --notice-text-join: ""; } html:not(:has(.artwork_d8215a)) { - &:is([lang="en-GB"]), - &:is([lang="en-US"]) { - --notice-text-heading: "Notice"; - --notice-text-join: "Join Server"; - } - - &:is([lang="de"]) { - --notice-text-heading: "Hinweis"; - --notice-text-join: "Server beitreten"; - } - - &:is([lang="es-ES"]) { - --notice-text-heading: "Aviso"; - --notice-text-join: "Unirse al servidor"; - } - - &:is([lang="fr"]) { - --notice-text-heading: "Avis"; - --notice-text-join: "Rejoindre le serveur"; - } - - .base_a4d4d9:has(.notice_be03aa) { - &:not(:has(.colorPremium_be03aa), :has(.colorWarning_be03aa)) { - &:has(.notice_dd5a33) { - --notice-height: var(--notice-height-join); - --notice-icon: var(--notice-icon-join); - } - - &:has(.notice_a50047) { - --notice-height: var(--notice-height-welcome); - --notice-icon: var(--notice-icon-welcome); - } - } - - &:has(.colorPremium_be03aa) { - --notice-height: var(--notice-height-premium); - } - - &:has(.colorWarning_be03aa) { - --notice-height: var(--notice-height-warning); - } - - @container style(--notice-enable-height-adjust: true) { - .thin_eed6a8>ul { - &:has(> div[style="height: 16px;"]) { - margin-top: -17px; - } - - &:has(> div[style="height: 84px;"]) { - margin-top: -85px; - } - } - - .container_fa295b:before { - content: ""; - display: flex; - height: calc(var(--notice-height) + var(--notice-height-add)); - position: relative; - width: 100%; - } - - .header_fd6364 { - background: var(--background-secondary); - box-shadow: none; - } - } - - >div.notice_be03aa { - height: var(--notice-height); - border-radius: 0; - background: var(--notice-background); - padding: 16px; - position: absolute; - left: var(--notice-margin-left); - overflow: hidden; - bottom: var(--notice-margin-bottom); - box-shadow: none; - box-sizing: border-box; - right: var(--notice-margin-right); - top: var(--notice-margin-top); - width: 240px; - } - - &:not(:has(.colorPremium_be03aa), :has(.colorWarning_be03aa)) { - >div.notice_be03aa { - align-content: space-between; - align-items: start; - border-bottom: 1px solid var(--background-secondary); - display: grid; - padding: 16px 0; - column-gap: 8px; - grid-template-columns: 80px 1fr; - grid-template-rows: auto 32px; - - &:before { - box-shadow: var(--elevation-low); - content: ""; - display: block; - height: 1px; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: -1px; - z-index: 1; - } - - &:after { - border-bottom: 1px solid var(--background-modifier-accent); - bottom: 0; - content: ""; - height: 1px; - left: 8px; - position: absolute; - width: calc(100% - 8px); - } - - >* { - align-self: stretch; - box-sizing: border-box; - width: 100%; - } - - >div { - align-items: flex-start; - display: flex; - flex-direction: column; - grid-column: 1 / -1; - margin: 0; - padding: 0 16px; - text-align: left; - font-weight: 400; - font-size: small; - - &:before { - content: var(--notice-text-heading); - font-family: var(--font-primary); - font-size: 16px; - font-weight: 600; - line-height: 1.25; - padding-bottom: 4px; - position: relative; - top: 0; - z-index: 2; - } - - &:after { - background: linear-gradient(158deg, transparent 0%, var(--notice-background) 80%), linear-gradient(5deg, transparent 60%, var(--notice-background) 90%), linear-gradient(74deg, transparent 3%, var(--notice-background) 85%), var(--notice-icon); - background-position: top center; - background-repeat: no-repeat; - content: ""; - height: 100px; - opacity: 0.5; - position: absolute; - right: 0; - top: 0; - transform: rotate(19deg); - width: 100px; - z-index: -1; - } - } - - >button { - border: 0 solid transparent; - box-sizing: border-box; - grid-row: 2; - height: var(--custom-button-button-sm-height); - left: 0; - min-height: var(--custom-button-button-sm-height); - padding: 0px; - position: relative; - right: 0; - top: 0; - - &:first-of-type { - grid-column: 1 / 2; - padding-left: 16px; - - >div>svg { - display: none; - } - } - - &:last-of-type:not(:first-of-type) { - grid-column: 2 / 3; - padding-right: 16px; - - &:not(:has([aria-label="Loading"])):before { - align-items: center; - content: var(--notice-text-join); - display: flex; - font-family: var(--font-primary); - font-size: 14px; - font-weight: 500; - height: 100%; - line-height: 16px; - position: absolute; - top: 0; - user-select: none; - z-index: 2; - } - - >* { - overflow: hidden; - text-indent: -9999px; - white-space: nowrap; - } - } - - &:only-of-type { - grid-column: 1 / -1; - padding: 0 16px; - } - - &:hover { - background: transparent; - } - - >* { - align-items: center; - background-color: var(--brand-500); - border: none; - border-radius: 3px; - box-sizing: border-box; - color: var(--white-500); - display: flex; - font-size: 14px; - font-weight: 500; - height: 100%; - justify-content: center; - line-height: 16px; - padding: 0 16px; - position: relative; - transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease; - user-select: none; - width: 100%; - z-index: 1; - - &:hover { - background-color: var(--brand-560); - } - - &:has([class^="spinner"]) { - background: var(--brand-560); - } - } - - &:has([class^="spinner"]) { - display: block; - } - } - } - } - - &:has(.colorPremium_be03aa) { - >div.notice_be03aa { - - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 27px 50px 32px; - font-family: var(--font-primary); - font-size: 14px; - line-height: 1.2857142857142858; - font-weight: 400; - color: var(--white-500); - text-align: left; - align-items: start; - - - &:before { - box-shadow: var(--elevation-low); - content: ""; - display: block; - height: 1px; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: -1px; - z-index: 1; - } - - &:after { - border-bottom: 1px solid var(--background-modifier-accent); - bottom: 0; - content: ""; - height: 1px; - left: 8px; - position: absolute; - width: calc(100% - 16px); - } - - >svg { - display: none; - } - - >[aria-label="Dismiss"] { - position: relative; - height: 100%; - width: 100%; - display: flex; - justify-content: space-between; - - &:before { - display: flex; - align-items: center; - content: "Nitro"; - position: relative; - top: 0; - width: 100%; - height: 100%; - z-index: 10; - text-indent: 0; - font-family: var(--font-primary); - font-size: 12px; - line-height: 1.3333333333333333; - font-weight: 700; - color: var(--white-500); - text-transform: uppercase; - } - - &:after { - 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); - background-position: top center; - background-repeat: no-repeat; - content: ""; - height: 100px; - opacity: 0.5; - position: absolute; - right: 0; - top: 0; - transform: rotate(19deg); - width: 100px; - z-index: -1; - } - - >svg { - position: absolute; - right: -2px; - width: 16px !important; - height: 16px !important; - } - - path { - fill: var(--header-secondary); - } - } - - >button { - margin: 0; - align-items: center; - background: var(--premium-tier-2-purple); - border: 1px solid transparent; - border-color: transparent; - border-radius: 3px; - box-sizing: border-box; - color: var(--white-500); - display: flex; - font-size: 14px; - font-weight: 500; - height: 100%; - justify-content: center; - line-height: 16px; - padding: 0 16px; - position: relative; - transition: background var(--custom-button-transition-duration) ease, border-color var(--custom-button-transition-duration) ease; - user-select: none; - width: 100%; - z-index: 1; - top: 0; - - &:hover { - background: transparent; - border-color: var(--white-50); - } - - &:before { - - position: absolute; - align-items: center; - background-color: var(--brand-500); - border: none; - border-radius: 3px; - box-sizing: border-box; - color: var(--white-500); - display: flex; - font-size: 14px; - font-weight: 500; - height: 100%; - justify-content: center; - line-height: 16px; - margin: 0 16px; - transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease; - user-select: none; - width: 100%; - z-index: 1; - } - } - } - } - - &:has(.colorWarning_be03aa) { - >div.notice_be03aa { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 27px 50px 32px; - font-family: var(--font-primary); - font-size: 14px; - line-height: 1.2857142857142858; - font-weight: 400; - color: var(--white-500); - text-align: left; - align-items: start; - - - &:before { - box-shadow: var(--elevation-low); - content: ""; - display: block; - height: 1px; - left: 0; - pointer-events: none; - position: absolute; - right: 0; - top: -1px; - z-index: 1; - } - - &:after { - border-bottom: 1px solid var(--background-modifier-accent); - bottom: 0; - content: ""; - height: 1px; - left: 8px; - position: absolute; - width: calc(100% - 16px); - } - - - >[aria-label="Dismiss"] { - position: relative; - height: 100%; - width: 100%; - display: flex; - justify-content: space-between; - - &:before { - display: flex; - align-items: center; - content: "Warning"; - position: relative; - top: 0; - width: 100%; - height: 100%; - z-index: 10; - text-indent: 0; - font-family: var(--font-primary); - font-size: 12px; - line-height: 1.3333333333333333; - font-weight: 700; - color: var(--white-500); - text-transform: uppercase; - } - - &:after { - 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); - background-position: top center; - background-repeat: no-repeat; - content: ""; - height: 100px; - opacity: 0.5; - position: absolute; - right: 0; - top: 0; - transform: rotate(19deg); - width: 100px; - z-index: -1; - } - - >svg { - position: absolute; - right: -2px; - width: 16px !important; - height: 16px !important; - } - - path { - fill: var(--header-secondary); - } - } - - >button { - margin: 0; - margin-top: 16px; - align-items: center; - border-radius: 3px; - box-sizing: border-box; - color: var(--white-500); - display: flex; - font-size: 14px; - font-weight: 500; - height: 100%; - justify-content: center; - border-width: 0; - background: var(--status-warning-background); - line-height: 16px; - padding: 0 16px; - position: relative; - transition: background var(--custom-button-transition-duration) ease; - user-select: none; - width: 100%; - z-index: 1; - top: 0; - - &:hover { - background: transparent; - border-color: var(--white-50); - } - - &:before { - position: absolute; - align-items: center; - background-color: var(--brand-500); - border: none; - border-radius: 3px; - box-sizing: border-box; - color: var(--white-500); - display: flex; - font-size: 14px; - font-weight: 500; - height: 100%; - justify-content: center; - line-height: 16px; - margin: 0 16px; - transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease; - user-select: none; - width: 100%; - z-index: 1; - } - } - } - } - - .sidebar_a4d4d9.hasNotice_a4d4d9>*:has(.discoverHeader_b992d4)>h2, - .searchBar_f0963d, - .header_f1c462 { - margin-bottom: var(--notice-height); - } - } + &:is([lang="en-GB"]), + &:is([lang="en-US"]) { + --notice-text-heading: "Notice"; + --notice-text-join: "Join Server"; + } + + &:is([lang="de"]) { + --notice-text-heading: "Hinweis"; + --notice-text-join: "Server beitreten"; + } + + &:is([lang="es-ES"]) { + --notice-text-heading: "Aviso"; + --notice-text-join: "Unirse al servidor"; + } + + &:is([lang="fr"]) { + --notice-text-heading: "Avis"; + --notice-text-join: "Rejoindre le serveur"; + } + + &:is([lang="zh-TW"]) { + --notice-text-heading: "注意"; + --notice-text-join: "加入伺服器"; + } + + .base_a4d4d9:has(.notice_be03aa) { + &:not(:has(.colorPremium_be03aa), :has(.colorWarning_be03aa)) { + &:has(.notice_dd5a33) { + --notice-height: var(--notice-height-join); + --notice-icon: var(--notice-icon-join); + } + + &:has(.notice_a50047) { + --notice-height: var(--notice-height-welcome); + --notice-icon: var(--notice-icon-welcome); + } + } + + &:has(.colorPremium_be03aa) { + --notice-height: var(--notice-height-premium); + } + + &:has(.colorWarning_be03aa) { + --notice-height: var(--notice-height-warning); + } + + @container style(--notice-enable-height-adjust: true) { + .thin_eed6a8>ul { + &:has(> div[style="height: 16px;"]) { + margin-top: -17px; + } + + &:has(> div[style="height: 84px;"]) { + margin-top: -85px; + } + } + + .container_fa295b:before { + content: ""; + display: flex; + height: calc(var(--notice-height) + var(--notice-height-add)); + position: relative; + width: 100%; + } + + .header_fd6364 { + background: var(--background-secondary); + box-shadow: none; + } + } + + >div.notice_be03aa { + height: var(--notice-height); + border-radius: 0; + background: var(--notice-background); + padding: 16px; + position: absolute; + left: var(--notice-margin-left); + overflow: hidden; + bottom: var(--notice-margin-bottom); + box-shadow: none; + box-sizing: border-box; + right: var(--notice-margin-right); + top: var(--notice-margin-top); + width: 240px; + } + + &:not(:has(.colorPremium_be03aa), :has(.colorWarning_be03aa)) { + >div.notice_be03aa { + align-content: space-between; + align-items: start; + border-bottom: 1px solid var(--background-secondary); + display: grid; + padding: 16px 0; + column-gap: 8px; + grid-template-columns: 80px 1fr; + grid-template-rows: auto 32px; + + &:before { + box-shadow: var(--elevation-low); + content: ""; + display: block; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: -1px; + z-index: 1; + } + + &:after { + border-bottom: 1px solid var(--background-modifier-accent); + bottom: 0; + content: ""; + height: 1px; + left: 8px; + position: absolute; + width: calc(100% - 8px); + } + + >* { + align-self: stretch; + box-sizing: border-box; + width: 100%; + } + + >div { + align-items: flex-start; + display: flex; + flex-direction: column; + grid-column: 1 / -1; + margin: 0; + padding: 0 16px; + text-align: left; + font-weight: 400; + font-size: small; + + &:before { + content: var(--notice-text-heading); + font-family: var(--font-primary); + font-size: 16px; + font-weight: 600; + line-height: 1.25; + padding-bottom: 4px; + position: relative; + top: 0; + z-index: 2; + } + + &:after { + background: linear-gradient(158deg, transparent 0%, var(--notice-background) 80%), linear-gradient(5deg, transparent 60%, var(--notice-background) 90%), linear-gradient(74deg, transparent 3%, var(--notice-background) 85%), var(--notice-icon); + background-position: top center; + background-repeat: no-repeat; + content: ""; + height: 100px; + opacity: 0.5; + position: absolute; + right: 0; + top: 0; + transform: rotate(19deg); + width: 100px; + z-index: -1; + } + } + + >button { + border: 0 solid transparent; + box-sizing: border-box; + grid-row: 2; + height: var(--custom-button-button-sm-height); + left: 0; + min-height: var(--custom-button-button-sm-height); + padding: 0px; + position: relative; + right: 0; + top: 0; + + &:first-of-type { + grid-column: 1 / 2; + padding-left: 16px; + + >div>svg { + display: none; + } + } + + &:last-of-type:not(:first-of-type) { + grid-column: 2 / 3; + padding-right: 16px; + + &:not(:has([aria-label="Loading"])):before { + align-items: center; + content: var(--notice-text-join); + display: flex; + font-family: var(--font-primary); + font-size: 14px; + font-weight: 500; + height: 100%; + line-height: 16px; + position: absolute; + top: 0; + user-select: none; + z-index: 2; + } + + >* { + overflow: hidden; + text-indent: -9999px; + white-space: nowrap; + } + } + + &:only-of-type { + grid-column: 1 / -1; + padding: 0 16px; + } + + &:hover { + background: transparent; + } + + >* { + align-items: center; + background-color: var(--brand-500); + border: none; + border-radius: 3px; + box-sizing: border-box; + color: var(--white-500); + display: flex; + font-size: 14px; + font-weight: 500; + height: 100%; + justify-content: center; + line-height: 16px; + padding: 0 16px; + position: relative; + transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease; + user-select: none; + width: 100%; + z-index: 1; + + &:hover { + background-color: var(--brand-560); + } + + &:has([class^="spinner"]) { + background: var(--brand-560); + } + } + + &:has([class^="spinner"]) { + display: block; + } + } + } + } + + &:has(.colorPremium_be03aa) { + >div.notice_be03aa { + + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 27px 50px 32px; + font-family: var(--font-primary); + font-size: 14px; + line-height: 1.2857142857142858; + font-weight: 400; + color: var(--white-500); + text-align: left; + align-items: start; + + + &:before { + box-shadow: var(--elevation-low); + content: ""; + display: block; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: -1px; + z-index: 1; + } + + &:after { + border-bottom: 1px solid var(--background-modifier-accent); + bottom: 0; + content: ""; + height: 1px; + left: 8px; + position: absolute; + width: calc(100% - 16px); + } + + >svg { + display: none; + } + + >[aria-label="Dismiss"] { + position: relative; + height: 100%; + width: 100%; + display: flex; + justify-content: space-between; + + &:before { + display: flex; + align-items: center; + content: "Nitro"; + position: relative; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + text-indent: 0; + font-family: var(--font-primary); + font-size: 12px; + line-height: 1.3333333333333333; + font-weight: 700; + color: var(--white-500); + text-transform: uppercase; + } + + &:after { + 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); + background-position: top center; + background-repeat: no-repeat; + content: ""; + height: 100px; + opacity: 0.5; + position: absolute; + right: 0; + top: 0; + transform: rotate(19deg); + width: 100px; + z-index: -1; + } + + >svg { + position: absolute; + right: -2px; + width: 16px !important; + height: 16px !important; + } + + path { + fill: var(--header-secondary); + } + } + + >button { + margin: 0; + align-items: center; + background: var(--premium-tier-2-purple); + border: 1px solid transparent; + border-color: transparent; + border-radius: 3px; + box-sizing: border-box; + color: var(--white-500); + display: flex; + font-size: 14px; + font-weight: 500; + height: 100%; + justify-content: center; + line-height: 16px; + padding: 0 16px; + position: relative; + transition: background var(--custom-button-transition-duration) ease, border-color var(--custom-button-transition-duration) ease; + user-select: none; + width: 100%; + z-index: 1; + top: 0; + + &:hover { + background: transparent; + border-color: var(--white-50); + } + + &:before { + + position: absolute; + align-items: center; + background-color: var(--brand-500); + border: none; + border-radius: 3px; + box-sizing: border-box; + color: var(--white-500); + display: flex; + font-size: 14px; + font-weight: 500; + height: 100%; + justify-content: center; + line-height: 16px; + margin: 0 16px; + transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease; + user-select: none; + width: 100%; + z-index: 1; + } + } + } + } + + &:has(.colorWarning_be03aa) { + >div.notice_be03aa { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 27px 50px 32px; + font-family: var(--font-primary); + font-size: 14px; + line-height: 1.2857142857142858; + font-weight: 400; + color: var(--white-500); + text-align: left; + align-items: start; + + + &:before { + box-shadow: var(--elevation-low); + content: ""; + display: block; + height: 1px; + left: 0; + pointer-events: none; + position: absolute; + right: 0; + top: -1px; + z-index: 1; + } + + &:after { + border-bottom: 1px solid var(--background-modifier-accent); + bottom: 0; + content: ""; + height: 1px; + left: 8px; + position: absolute; + width: calc(100% - 16px); + } + + + >[aria-label="Dismiss"] { + position: relative; + height: 100%; + width: 100%; + display: flex; + justify-content: space-between; + + &:before { + display: flex; + align-items: center; + content: "Warning"; + position: relative; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + text-indent: 0; + font-family: var(--font-primary); + font-size: 12px; + line-height: 1.3333333333333333; + font-weight: 700; + color: var(--white-500); + text-transform: uppercase; + } + + &:after { + 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); + background-position: top center; + background-repeat: no-repeat; + content: ""; + height: 100px; + opacity: 0.5; + position: absolute; + right: 0; + top: 0; + transform: rotate(19deg); + width: 100px; + z-index: -1; + } + + >svg { + position: absolute; + right: -2px; + width: 16px !important; + height: 16px !important; + } + + path { + fill: var(--header-secondary); + } + } + + >button { + margin: 0; + margin-top: 16px; + align-items: center; + border-radius: 3px; + box-sizing: border-box; + color: var(--white-500); + display: flex; + font-size: 14px; + font-weight: 500; + height: 100%; + justify-content: center; + border-width: 0; + background: var(--status-warning-background); + line-height: 16px; + padding: 0 16px; + position: relative; + transition: background var(--custom-button-transition-duration) ease; + user-select: none; + width: 100%; + z-index: 1; + top: 0; + + &:hover { + background: transparent; + border-color: var(--white-50); + } + + &:before { + position: absolute; + align-items: center; + background-color: var(--brand-500); + border: none; + border-radius: 3px; + box-sizing: border-box; + color: var(--white-500); + display: flex; + font-size: 14px; + font-weight: 500; + height: 100%; + justify-content: center; + line-height: 16px; + margin: 0 16px; + transition: background-color var(--custom-button-transition-duration) ease, color var(--custom-button-transition-duration) ease; + user-select: none; + width: 100%; + z-index: 1; + } + } + } + } + + .sidebar_a4d4d9.hasNotice_a4d4d9>*:has(.discoverHeader_b992d4)>h2, + .searchBar_f0963d, + .header_f1c462 { + margin-bottom: var(--notice-height); + } + } } html:has(.artwork_d8215a) { - .base_a4d4d9:has(.notice_be03aa) { - >.notice_be03aa { - display: none; - } - } -} \ No newline at end of file + .base_a4d4d9:has(.notice_be03aa) { + >.notice_be03aa { + display: none; + } + } +}