Files
DiscordClone/discord-html-copy/css/4851cc625502983d.css

2483 lines
44 KiB
CSS

.collapsed_d77896 {
-webkit-mask: linear-gradient(#000 240px,transparent);
mask: linear-gradient(#000 240px,transparent);
max-height: 300px;
overflow: hidden
}
.blurb_d77896 {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text
}
.description_d77896 {
color: var(--text-muted);
font-size: 15px;
line-height: 1.4;
margin-top: 20px
}
.toggleCollapseButton_d77896 {
margin-top: 20px;
width: 100%
}
.assetWrapper_d77896 {
border-radius: 3px;
margin: 20px 0;
overflow: hidden;
transform: translateZ(0)
}
.assetWrapper_d77896 img {
border-radius: 0
}
.asset_d77896 {
display: block;
margin: 0 auto;
max-width: 100%
}
@media (min-width: 640px) {
.toggleCollapseButton_d77896 {
width:inherit
}
}
@value headerBarHeight 60px;.headerBar__8a7fc {
align-items: center;
box-sizing: border-box;
display: flex;
gap: 20px;
height: var(--custom-channel-header-height);
padding: 0 16px;
width: 100%;
z-index: 100
}
.overlay__8a7fc,.overlay__8a7fc:after {
position: absolute
}
.overlay__8a7fc:after {
background-color: var(--border-subtle);
bottom: 0;
content: "";
height: 1px;
inset-inline-start: 0;
width: 100%;
z-index: 0
}
.relative__8a7fc {
background: var(--background-gradient-chat,var(--background-base-low));
box-shadow: var(--shadow-low);
clip-path: inset(0 0 -4px 0);
position: relative
}
.backdrop__8a7fc {
background: var(--background-gradient-low,var(--background-base-lower));
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1
}
.background__8a7fc {
background: var(--background-gradient-lower,var(--background-base-lower))
}
.icon__8a7fc {
height: 24px;
width: 24px
}
.iconButton__8a7fc {
align-items: center;
background-color: var(--control-secondary-background-default);
border-radius: 4px;
color: var(--control-secondary-text-default);
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
width: 32px
}
.iconButton__8a7fc:hover {
background-color: var(--control-secondary-background-hover)
}
.iconButton__8a7fc:active {
background-color: var(--control-secondary-background-active)
}
.floatingSearchTabsMask__8a7fc {
-webkit-mask-image: linear-gradient(90deg,#000 calc(100% - 340px),transparent calc(100% - 240px));
mask-image: linear-gradient(90deg,#000 calc(100% - 340px),transparent calc(100% - 240px))
}
.refresh-fast-follow-distinct-borders .overlay__8a7fc:after {
background-color: var(--app-frame-border);
mix-blend-mode: luminosity
}
.container__26669 {
display: flex;
flex: 1;
height: 100%;
margin-inline-start:44px;position: relative
}
.measurements__26669 {
inset-inline: 0;
bottom: 0;
pointer-events: none;
position: absolute;
top: 60px;
visibility: hidden
}
.measurements__26669,.tabs__26669 {
align-items: center;
display: flex;
gap: 24px
}
.tabs__26669 {
flex: 1;
flex-direction: row;
height: 100%
}
.tabWrapper__26669 {
justify-content: center
}
.tab__26669,.tabWrapper__26669 {
align-items: center;
display: flex;
height: 100%
}
.tab__26669 {
box-sizing: border-box;
cursor: pointer;
margin-top: 0
}
.tab__26669:hover {
border-bottom: 2px solid var(--brand-500);
margin-bottom: -2px
}
.more__26669 {
cursor: pointer!important;
display: flex
}
.selected__26669 {
border-bottom: 2px solid var(--icon-strong)!important;
margin-bottom: -2px
}
.headerBar__1a9ce {
background-color: var(--background-base-lower);
border-bottom: 1px solid var(--border-subtle);
height: var(--custom-channel-header-height);
padding-bottom: 0;
padding-inline-end:var(--space-12);padding-top: 0;
position: sticky;
top: 0
}
.headerBarInner__1a9ce {
overflow: visible
}
.fullscreenHeaderBar__1a9ce {
border: none;
box-sizing: border-box;
display: flex;
height: calc(64px + var(--custom-app-top-bar-height));
justify-content: center;
margin: 0 auto;
padding: 0 72px;
padding-top: var(--custom-app-top-bar-height)
}
.headerBarContent__1a9ce {
align-items: center;
display: flex;
gap: 24px;
justify-content: end;
padding-inline-end:36px}
.discordLogoContainer__1a9ce {
align-items: center;
display: flex;
margin-top: 12px
}
.discordLogo__1a9ce {
color: var(--text-default);
height: 20px;
margin-inline-end:-6px}
.headerBarSearchContent__1a9ce {
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
z-index: 1
}
.closeIcon__1a9ce {
margin-top: 24px
}
.back__1a9ce {
cursor: pointer
}
@value headerBarHeight 60px;.container__65d41 {
display: flex;
flex: 1;
height: 60px;
position: relative
}
.measurements__65d41 {
align-items: center;
inset-inline: 0;
bottom: 0;
display: flex;
gap: 20px;
pointer-events: none;
position: absolute;
top: 60px;
visibility: hidden
}
.tabs__65d41 {
border-bottom: none;
flex: 1;
flex-direction: row;
gap: 0;
height: 60px
}
.tab__65d41,.tabs__65d41 {
display: flex
}
.tab__65d41 {
align-items: center;
box-sizing: border-box;
cursor: pointer;
height: var(--custom-channel-header-height);
margin-top: 0;
padding-top: 16px;
--selected-tab-item-color: var(--text-default)!important
}
.tab__65d41:hover,.tab__65d41[aria-selected=true] {
--selected-tab-item-color: var(--text-default)
}
.container__65d41,.tabs__65d41 {
height: var(--custom-channel-header-height)
}
.more__65d41 {
cursor: pointer!important;
display: flex;
gap: 4px
}
.selected__65d41 {
border-bottom-color: var(--brand-500)!important
}
@value searchBarWidth 240px;@value searchBarIcon 24px;.search__1ac1c {
display: flex;
justify-content: flex-end
}
.searchBar__1ac1c {
flex: 1 1 240px;
max-width: 240px;
min-width: 240px
}
.platform-osx .searchBar__1ac1c {
-webkit-app-region: no-drag
}
.searchIcon__1ac1c {
cursor: pointer;
flex: 0 1 24px;
max-width: 24px;
min-width: 24px
}
.searchFloating__1ac1c {
inset-inline-end: 16px;
position: absolute
}
@value headerBarHeight 60px;@value imageHeight 288px;.container_e9ef78 {
display: grid;
grid-template-areas: "layer";
grid-template-columns: 100%;
grid-template-rows: 348px;
justify-items: center
}
.content_e9ef78 {
align-items: center;
display: flex;
grid-area: layer;
margin-top: 60px;
max-width: 1300px;
width: 100%;
z-index: 1
}
.textContainer_e9ef78 {
display: flex;
flex-direction: column;
justify-content: center;
padding-inline-start:32px}
.buttonContainer_e9ef78 {
display: flex;
margin-top: 16px;
max-height: 44px;
min-height: 44px
}
.title_e9ef78 {
max-width: 740px
}
.title_e9ef78 p {
margin: 0
}
.uppercase_e9ef78 {
text-transform: uppercase
}
.description_e9ef78 {
margin-top: 16px;
max-width: 600px
}
.description_e9ef78 p {
margin: 0
}
.betaTag_e9ef78 {
display: inline-block;
margin-inline-start:8px;vertical-align: middle
}
.theme-dark .gradient_e9ef78 {
background: radial-gradient(130.66% 324.98% at -3.95% 0,#2f72c1 0,rgba(37,34,154,.8) 35.73%,rgba(25,23,92,0) 100%),#000
}
.theme-dark .gradient_e9ef78.clientThemes_e9ef78 {
background: none
}
.theme-dark .gradient_e9ef78.clientThemes_e9ef78:after {
background-color: var(--border-strong);
bottom: 0;
content: "";
height: 1px;
position: absolute;
width: 100%
}
.theme-dark .gradientBackground_e9ef78 {
opacity: .7
}
.theme-dark .gradientBackground_e9ef78.clientThemes_e9ef78 {
opacity: 1
}
.theme-light .gradient_e9ef78 {
background: radial-gradient(122.23% 351.84% at -4.04% 0,#eff8ff 0,#d7dcff 30.28%,#fdfdff 100%),#fff
}
.theme-light .gradient_e9ef78.clientThemes_e9ef78 {
background: none
}
.theme-light .gradient_e9ef78.clientThemes_e9ef78:after {
background-color: var(--border-strong);
bottom: 0;
content: "";
height: 1px;
position: absolute;
width: 100%
}
.theme-light .gradientBackground_e9ef78 {
opacity: .8
}
.theme-light .gradientBackground_e9ef78.clientThemes_e9ef78 {
opacity: 1
}
.gradient_e9ef78,.gradientBackground_e9ef78 {
height: 100%;
width: 100%
}
.gradientBackground_e9ef78 {
grid-area: layer
}
.contentSection_b6bcee {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
width: 100%;
z-index: 1
}
.content_b6bcee {
height: 100%;
max-width: 1300px;
width: 100%
}
.scroller__23746 {
background: var(--background-gradient-chat,var(--background-base-lower));
display: flex;
flex: 1;
flex-direction: column
}
.container__2abba {
align-items: center;
flex: 1;
flex-direction: column
}
.container__2abba,.imageContainer__2abba {
display: flex;
justify-content: center
}
.imageContainer__2abba {
margin-bottom: 16px;
width: 100%
}
.image__2abba {
max-width: 500px;
min-width: min(100%,300px);
width: 40%;
-webkit-user-drag: none
}
.full-motion .image__2abba {
animation: wiggling__2abba 2s linear infinite;
animation-play-state: paused
}
.full-motion .image__2abba:hover {
animation-play-state: running
}
.header__2abba {
margin-bottom: 8px;
text-align: center
}
@keyframes wiggling__2abba {
0% {
animation-timing-function: linear;
transform: rotate(0deg)
}
7% {
animation-timing-function: linear;
transform: rotate(-16deg)
}
20% {
animation-timing-function: ease-in-out;
transform: rotate(14deg)
}
32% {
animation-timing-function: ease-in-out;
transform: rotate(-16deg)
}
44% {
animation-timing-function: ease-in-out;
transform: rotate(12deg)
}
56% {
animation-timing-function: ease-in-out;
transform: rotate(-10deg)
}
68% {
animation-timing-function: ease-in-out;
transform: rotate(14deg)
}
81% {
animation-timing-function: ease-in-out;
transform: rotate(-16deg)
}
93% {
animation-timing-function: linear;
transform: rotate(14deg)
}
to {
animation-timing-function: linear;
transform: rotate(0deg)
}
}
.container__00b64 {
min-height: 150px;
min-width: 150px;
position: relative
}
.spinnerContainer__00b64 {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex
}
.spinner__00b64 {
align-self: center;
justify-self: center
}
.loading__00b64 {
opacity: .2
}
.card__84e3e {
border-radius: 8px;
overflow: hidden
}
.full-motion .card__84e3e {
transition: box-shadow .2s ease-out,transform .2s ease-out,background .2s ease-out,border .2s ease-out,opacity .2s ease-in
}
.full-motion .card__84e3e:focus,.full-motion .card__84e3e:hover {
box-shadow: var(--shadow-border),var(--shadow-high);
transform: translateY(-1px)
}
.enable-forced-colors .card__84e3e {
border: 1px solid CanvasText
}
.theme-dark .card__84e3e {
background-color: var(--card-background-default);
border: 1px solid var(--border-subtle)
}
.theme-dark .card__84e3e:hover {
background-color: var(--background-base-lowest)
}
.theme-light .card__84e3e {
background-color: var(--background-base-lower);
box-shadow: var(--legacy-elevation-border),var(--elevation-medium)
}
.theme-light .card__84e3e:focus,.theme-light .card__84e3e:hover {
background-color: var(--background-base-lowest);
box-shadow: var(--shadow-border),var(--shadow-high)
}
&.theme-dark .card__84e3e,&.theme-light .card__84e3e {
background-color: var(--background-base-low);
border: 1px solid transparent;
border-color: var(--border-subtle);
box-shadow: none
}
&.theme-dark .card__84e3e:focus,&.theme-dark .card__84e3e:hover,&.theme-light .card__84e3e:focus,&.theme-light .card__84e3e:hover {
background-color: var(--background-surface-high);
border-color: var(--border-strong);
box-shadow: var(--shadow-low);
transform: none
}
.clickable__84e3e {
cursor: pointer
}
.disabled__84e3e {
cursor: auto;
opacity: .5;
pointer-events: none
}
@keyframes placeholderPulse__84e3e {
0% {
opacity: .6
}
50% {
opacity: .8
}
to {
opacity: .6
}
}
.cardPlaceholder__84e3e {
animation: placeholderPulse__84e3e 1.8s ease-in-out infinite;
background-color: var(--background-base-lowest)
}
.transitionItem__84e3e {
bottom: 0;
position: absolute;
top: 0;
inset-inline: 0
}
.bannerContainer_b76d57 {
display: block;
overflow: hidden;
position: relative;
width: 100%
}
.bannerContent_b76d57 {
background-color: transparent;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
-webkit-user-drag: none
}
.bannerGradient_b76d57.loaded_b76d57 {
animation: fadeIn_b76d57 .7s forwards
}
.bannerImage_b76d57 {
-webkit-user-drag: none;
opacity: 0
}
.bannerImage_b76d57.loaded_b76d57 {
animation: fadeIn_b76d57 .7s forwards
}
.bannerAnimatedContainer_b76d57 {
height: 100%;
opacity: 0;
position: absolute;
top: 0;
width: 100%
}
.bannerAnimatedContainer_b76d57.videoFadeIn_b76d57 {
animation: fadeIn_b76d57 .5s forwards
}
.bannerAnimatedContainer_b76d57.videoFadeOut_b76d57 {
animation: fadeOut_b76d57 .5s;
animation-fill-mode: forwards
}
@keyframes fadeIn_b76d57 {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeOut_b76d57 {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.container_f215b9 {
min-width: 0;
position: relative
}
.card_f215b9 {
flex-direction: column;
height: 100%
}
.card_f215b9,.card_f215b9:hover .contextMenu_f215b9 {
display: flex
}
.avatarContainer_f215b9,.header_f215b9 {
position: relative
}
.avatar_f215b9 {
-webkit-user-drag: none;
background: var(--background-base-low);
border: solid;
border-color: var(--background-base-low);
border-radius: var(--radius-md);
transform: translateY(-50%)
}
.appDetails_f215b9 {
flex: 1;
flex-direction: column;
padding: 4px 16px 16px
}
.appDetails_f215b9,.titleContainer_f215b9 {
display: flex
}
.title_f215b9 {
align-items: center;
display: flex;
gap: 4px;
overflow: hidden;
text-overflow: ellipsis
}
.infoContainer_f215b9 {
display: flex;
gap: 4px;
margin-top: 4px
}
.appName_f215b9 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.appCategory_f215b9 {
white-space: pre
}
.description_f215b9 {
margin-top: 8px;
min-height: 0;
overflow: hidden;
text-overflow: ellipsis
}
.memberDetails_f215b9 {
align-items: flex-end;
display: flex;
flex: 1
}
.theme-dark .avatar_f215b9 {
background: var(--background-base-lowest);
border-color: var(--background-base-low)
}
.theme-light .avatar_f215b9 {
background: var(--background-base-lower);
border-color: var(--background-base-lower)
}
@value minCardWidth 254px;.content__87ce6 {
-moz-column-gap: 16px;
column-gap: 16px;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill,minmax(254px,1fr));
padding: 16px 32px;
row-gap: 16px
}
.errorContainer__87ce6 {
display: flex;
height: 100%
}
.error__87ce6 {
padding: 16px 32px
}
.paginationInput__87ce6 {
margin: 0;
padding: 16px 0
}
.errorContainer__7b60c {
display: flex;
height: 100%
}
.error__7b60c {
padding: 16px 32px
}
.firstChildSpacingFix_c9a59b {
margin-inline-start:0!important}
.tabItem_c9a59b {
align-items: center;
display: flex;
flex-direction: row
}
.alignCenter__31873 {
margin: 0 auto
}
.alignLeft__31873 {
margin: 0
}
.horizontalPaginationItemContainer__31873 {
align-items: center;
display: flex;
flex: initial;
overflow-x: auto;
overflow-y: hidden
}
.verticalPaginationItemContainer__31873 {
overflow-y: hidden
}
.arrow__31873 {
height: 26px;
width: 26px
}
.arrow__31873,.arrowContainer__31873 {
box-sizing: border-box;
pointer-events: all
}
.arrowContainer__31873 {
color: var(--white);
cursor: pointer;
font-size: 0;
height: 50px;
line-height: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px
}
.prevButtonContainer__31873 {
inset-inline-start: 4px
}
.nextButtonContainer__31873 {
inset-inline-end: 4px
}
@media (max-width: 600px) {
.prevButtonContainer__31873 {
inset-inline-start:5%
}
.nextButtonContainer__31873 {
inset-inline-end: 5%
}
}
.item_cf6769 {
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
font-size: 3em;
height: 100%;
overflow: hidden;
transform: translateZ(0);
transition: filter .2s ease;
width: 100%
}
.currentItem_cf6769 {
cursor: default
}
.itemImage_cf6769 {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%
}
.currentImage_cf6769 {
cursor: zoom-in
}
.itemImageWrapper_cf6769 {
height: 100%;
width: 100%
}
.itemVideo_cf6769 {
cursor: pointer
}
.paginationItem_cf6769 {
height: 73px;
margin-inline-end:20px;opacity: .6;
position: relative;
touch-action: manipulation;
width: 130px
}
.paginationItem_cf6769:last-child {
margin-inline-end:0}
.storePaginationImg_cf6769 {
border-radius: 3px;
height: 73px;
-o-object-fit: cover;
object-fit: cover;
width: 130px
}
.selectedStorePaginationItem_cf6769 {
opacity: 1
}
.unselectedStorePaginationItem_cf6769:hover {
cursor: pointer;
opacity: .8;
transition: opacity .3s ease
}
.overlappingBorder_cf6769 {
border: 3px solid var(--brand-500);
border-radius: 3px;
inset: 0;
position: absolute
}
.paginationVideoOverlay_cf6769 {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
position: absolute
}
.paginationVideoPlayPill_cf6769 {
border-radius: 50%;
height: 40px;
padding: 8px
}
.pagination_cf6769 {
box-sizing: border-box;
margin: 20px auto;
max-width: 920px;
padding: 0 20px
}
.carouselButtonsContainer_cf6769 {
color: var(--primary-100);
position: relative
}
.arrow_cf6769 {
background-color: var(--primary-800);
border-radius: 50%;
opacity: .4;
padding: 12px;
transition: opacity .2s ease-in-out
}
.arrow_cf6769:hover,.arrowHovered_cf6769 {
opacity: .6
}
.scroller_cf6769 {
padding-bottom: 24px
}
.video_cf6769 {
background: var(--black)
}
.mediaPlayer_cf6769,.video_cf6769,.videoWrapper_cf6769 {
height: 100%!important;
width: 100%!important
}
.item_cf6769 {
background-color: var(--black)
}
.wrapper__21d85 {
align-content: stretch;
align-items: stretch;
bottom: 60px;
cursor: zoom-out;
display: flex;
top: 60px;
inset-inline: 110px;
justify-content: center
}
.slide__21d85,.wrapper__21d85 {
position: absolute
}
.slide__21d85 {
height: 100%;
inset-inline-start: 0;
-o-object-fit: scale-down;
object-fit: scale-down;
top: 0;
width: 100%;
z-index: 0
}
.nav__21d85 {
opacity: .6;
z-index: 1
}
.nav__21d85:hover {
opacity: 1
}
.nav__21d85:active {
margin-top: 1px
}
.navPrev__21d85 {
margin-inline-start:-100px}
.navNext__21d85 {
margin-inline-end:-100px}
.root__00dfb {
position: relative
}
.carouselContainer__00dfb {
overflow: hidden
}
.carousel__00dfb {
height: 100%;
z-index: 0
}
.carouselItem__00dfb {
inset-inline: 0;
bottom: 0;
position: absolute;
top: 0
}
.pagination__00dfb {
height: 64px;
pointer-events: none
}
.themedPagination__00dfb {
}
.controls__00dfb {
align-items: center;
display: flex;
justify-content: space-between
}
.arrowHitbox__00dfb {
pointer-events: all
}
.arrowHitboxPadding__00dfb {
padding: 0 12px
}
.arrow__00dfb {
color: #fff;
opacity: .5;
position: relative;
transition: opacity .2s ease-in-out
}
.dots__00dfb {
display: flex;
flex-direction: row;
flex-grow: 0
}
.dot__00dfb+.dot__00dfb {
margin-inline-start:8px}
.dot__00dfb {
background-color: var(--white);
border-radius: 4px;
cursor: pointer;
height: 8px;
padding: 0;
pointer-events: all;
transform: translateZ(0);
width: 8px
}
.dotNormal__00dfb {
opacity: .6
}
.dotNormal__00dfb:hover {
opacity: .8
}
.dotSelected__00dfb {
opacity: 1
}
.theme-dark .themedPagination__00dfb .arrow__00dfb {
color: var(--white)
}
.theme-dark .themedPagination__00dfb .dot__00dfb {
background-color: var(--white)
}
.theme-light .themedPagination__00dfb .arrow__00dfb {
color: var(--primary-500)
}
.theme-light .themedPagination__00dfb .dot__00dfb {
background-color: var(--primary-500)
}
.smallCarousel__03498,.smallCarouselItem__03498 {
border-radius: 5px 5px 0 0;
overflow: hidden
}
.smallCarousel__03498 {
background-color: var(--black)
}
.smallCarouselItem__03498 {
height: 100%
}
.smallCarouselImage__03498 {
cursor: zoom-in;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: 100%
}
.embedContainer__03498 {
background-color: var(--primary-800);
display: flex;
height: 100%;
justify-content: center;
width: 100%
}
.hidden__03498 {
display: none
}
.spinner__03498 {
align-self: center;
margin-top: 64px
}
.errorContainer__03498 {
align-items: center;
background-color: var(--background-base-lower);
border-radius: 8px;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center
}
.sizedToParent__03498 {
height: 100%!important;
width: 100%!important
}
.sizedToParent__03498,.sizedToParent__03498>video {
border-radius: 0
}
.errorImage_d389c2 {
width: 33%
}
.carousel_d389c2 {
background: transparent
}
.sectionContainer_c6b177 {
display: flex;
flex-direction: column;
gap: 12px
}
.contentContainer_c6b177 {
background-color: var(--background-base-lower);
border: 1px solid var(--border-subtle);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px
}
.commandContainer_c6b177 {
align-items: baseline;
display: flex;
flex-direction: row;
gap: 16px
}
.commandName_c6b177 {
background-color: var(--background-base-lowest);
border: 1px solid var(--border-subtle);
border-radius: 4px;
font-size: 14px;
font-weight: 400;
padding: 2px 4px
}
.sectionContainer__8f46b {
display: flex;
flex-direction: column;
gap: 12px
}
.contentContainer__8f46b {
background-color: var(--background-base-lower);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 16px
}
.privacyPolicy__8f46b {
margin-top: 8px
}
.intentsList__8f46b {
border-bottom: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px
}
.intentContainer__8f46b {
color: var(--text-default);
display: flex;
gap: 16px
}
.intentTextContainer__8f46b {
display: flex;
flex-direction: column;
gap: 4px
}
.wrapper_bb856d {
align-items: flex-start
}
.icons_bb856d,.wrapper_bb856d {
display: flex;
flex-direction: row
}
.icons_bb856d {
align-items: center;
margin-inline-end:4px}
.iconMask_bb856d {
margin-inline-end:-4px}
.icon_bb856d {
border-radius: 50%
}
.iconSmall_bb856d {
height: var(--custom-guild-count-small-icon-size);
width: var(--custom-guild-count-small-icon-size)
}
.iconLarge_bb856d {
height: var(--custom-guild-count-large-icon-size);
width: var(--custom-guild-count-large-icon-size)
}
.moreGuilds_bb856d {
background-color: var(--background-base-lowest);
box-sizing: border-box;
color: var(--text-default);
font-weight: var(--font-weight-medium);
padding: 0 4px;
text-align: center
}
.moreGuildsSmall_bb856d {
border-radius: var(--custom-guild-count-small-icon-size);
font-size: 10px;
height: var(--custom-guild-count-small-icon-size);
line-height: var(--custom-guild-count-small-icon-size);
min-width: var(--custom-guild-count-small-icon-size)
}
.moreGuildsLarge_bb856d {
border-radius: var(--custom-guild-count-large-icon-size);
font-size: 12px;
height: var(--custom-guild-count-large-icon-size);
line-height: var(--custom-guild-count-large-icon-size);
min-width: var(--custom-guild-count-large-icon-size)
}
.defaultIcon_bb856d {
color: var(--interactive-text-default)
}
.categories_ed45d7 {
display: flex;
flex-wrap: wrap;
gap: 8px
}
.category_ed45d7 {
align-items: center;
border: 1px solid var(--border-strong);
border-radius: 4px;
display: flex;
justify-content: center;
padding: 6px 12px
}
.category_ed45d7:hover {
background-color: var(--interactive-background-hover);
cursor: pointer;
transition: background-color .2s ease
}
.container__8a003,.list__8a003 {
display: flex;
gap: 12px
}
.list__8a003 {
flex-direction: column
}
.listItem__8a003 {
align-items: center;
display: flex;
flex-direction: row
}
.listItem__8a003.linkItem__8a003:hover {
cursor: pointer
}
.listItem__8a003.linkItem__8a003:hover .listIcon__8a003,.listItem__8a003.linkItem__8a003:hover .listText__8a003 {
color: var(--interactive-text-active)
}
.listText__8a003 {
flex: 1
}
.listIcon__8a003 {
color: var(--interactive-text-default)
}
.listIcon__8a003,.listImage__8a003 {
margin-inline-end:8px}
.listImage__8a003 {
height: 20px;
width: 20px
}
@use postcss-pxtorem;.card_c59071 {
background-color: var(--background-mod-normal);
border-radius: 8px;
display: flex;
flex-direction: column;
min-height: 248px
}
.card_c59071:hover {
cursor: pointer
}
.cardHeader_c59071 {
display: block;
height: 108px;
margin-bottom: 33px;
overflow: visible;
position: relative
}
.splashImage_c59071 {
border-start-end-radius: 8px;
border-start-start-radius: 8px;
height: 100%;
inset-inline-start: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
width: 100%
}
.guildIcon_c59071 {
bottom: -32px;
inset-inline-start: 12px;
position: absolute
}
.iconMask_c59071 {
background-color: var(--background-mod-normal);
padding: 4px
}
.cardDetails_c59071 {
align-content: stretch;
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
padding: 0 16px 16px
}
.guildNameWrapper_c59071 {
align-items: center;
display: flex;
font-weight: var(--font-weight-semibold);
margin-bottom: 4px
}
.guildBadge_c59071 {
flex: 0 0 16px;
height: 16px;
margin-inline:-2px 4px;width: 16px
}
.guildName_c59071 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.guildDescription_c59071 {
flex: 1 1 auto;
margin-bottom: 16px
}
.memberInfo_c59071 {
align-items: center;
display: flex;
flex: 0
}
.memberCountWrapper_c59071 {
align-items: center;
display: flex;
flex-direction: row
}
.memberCountIcon_c59071 {
color: var(--text-default);
margin-inline-end:4px}
.outerContainer__5a77b {
clip-path: inset(0 0 0 16px);
line-height: 16px;
margin-inline-start:-16px;row-gap: 4px
}
.innerContainer__5a77b,.outerContainer__5a77b {
align-items: flex-start;
display: flex;
flex-direction: row;
flex-wrap: wrap
}
.languageItem__5a77b {
padding-inline-start:4px}
.languageItem__5a77b:before {
color: var(--text-muted);
content: "•";
display: inline-block;
margin-inline-end:4px;text-align: center;
width: 1ch
}
.sideContainer_de3a16 {
display: flex;
flex-direction: column;
gap: 32px
}
.gridContainer_de3a16 {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit,minmax(180px,1fr))
}
.guildCountContainer_de3a16 {
display: flex;
gap: 4px
}
.guildsIconContainer_de3a16 {
height: 18px;
justify-self: center
}
.sectionContainer_de3a16 {
display: flex;
flex-direction: column;
gap: 32px
}
.sectionContainer_de3a16.reducedGap_de3a16 {
gap: 24px
}
.infoSection_de3a16 {
display: flex;
flex-direction: column;
gap: 12px
}
.infoSection_de3a16:empty {
display: none
}
.linkGrid_de3a16 {
display: grid;
gap: 8px;
grid-template-columns: 1fr 1fr
}
.overviewContainer_c4b47c {
display: flex;
flex-direction: column;
gap: 8px
}
.descriptionClamp_c4b47c {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 12;
overflow: hidden
}
.descriptionClampSafari_c4b47c {
max-height: 300px
}
.detailedDescription_c4b47c {
color: var(--text-default)!important;
font-size: 16px;
line-height: 20px!important
}
.detailedDescription_c4b47c>div {
margin-bottom: 24px
}
.detailedDescription_c4b47c blockquote,.detailedDescription_c4b47c pre,.detailedDescription_c4b47c table {
margin: 24px 0!important
}
.detailedDescription_c4b47c blockquote,.detailedDescription_c4b47c ol,.detailedDescription_c4b47c ul {
margin-inline-start:24px!important}
.detailedDescription_c4b47c img {
max-width: 100%
}
.showMoreButton_c4b47c {
cursor: pointer;
gap: 16px;
margin: 8px 0
}
.showMoreButton_c4b47c,.showMoreContent_c4b47c {
align-items: center;
display: flex;
flex-direction: row
}
.showMoreContent_c4b47c {
gap: 8px
}
.showMoreButtonInner_c4b47c {
align-items: center;
display: flex;
justify-content: center
}
.showMoreButtonIcon_c4b47c {
color: var(--text-default);
height: 18px;
width: 18px
}
.divider_c4b47c {
background: var(--border-strong,hsla(229,7%,45%,.22));
flex: 1;
height: 1px
}
.list__83c7c {
display: flex;
flex-direction: column;
gap: 12px
}
.container__83c7c {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr
}
.header__83c7c {
text-transform: capitalize
}
.permission__83c7c {
display: flex
}
.check__83c7c {
color: var(--status-positive)
}
.check__83c7c,.cross__83c7c {
flex-shrink: 0;
margin-inline-end:8px}
.cross__83c7c {
color: var(--icon-feedback-critical)
}
.sectionContainer_f8758b {
display: flex;
flex-direction: column;
gap: 12px
}
.contentContainer_f8758b {
background-color: var(--background-base-lower);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 16px
}
.aboutContainer__17a6d {
display: flex;
flex-direction: column;
gap: 32px
}
.divider__17a6d {
border-top: 1px solid var(--border-strong);
margin: 16px 0
}
.informationContainer__17a6d {
display: none
}
@container apps-root-container (max-width: 700px) {
.informationContainer__17a6d {
display: flex;
flex-direction: column;
gap: 12px
}
}
.actionContainer_adfd31 {
flex-direction: row;
gap: 8px;
height: -moz-fit-content;
height: fit-content
}
.iconButton_adfd31 {
box-sizing: border-box;
height: 38px;
width: 38px
}
.iconButton_adfd31.small_adfd31 {
height: 32px;
width: 32px
}
.actionContainer_adfd31.wide_adfd31,.innerIconButton_adfd31 {
display: flex
}
.actionContainer_adfd31.small_adfd31,.actionContainer_adfd31.tiny_adfd31 {
display: none
}
@container apps-root-container (max-width: 700px) {
.actionContainer_adfd31.wide_adfd31 {
display: none
}
.actionContainer_adfd31.small_adfd31 {
display: flex
}
.actionContainer_adfd31.tiny_adfd31 {
display: none
}
}
@container apps-root-container (max-width: 455px) {
.actionContainer_adfd31.small_adfd31,.actionContainer_adfd31.wide_adfd31 {
display: none
}
.actionContainer_adfd31.tiny_adfd31 {
display: flex
}
}
.avatarContainer_efaad4 {
position: relative
}
.avatar_efaad4 {
-webkit-user-drag: none;
background: var(--background-gradient-chat,var(--background-base-low));
border: solid;
border-color: var(--background-gradient-chat,var(--background-base-low));
border-radius: var(--radius-xl);
transform: translateY(-50%)
}
.infoContainer_efaad4 {
display: flex;
flex-direction: row;
gap: 24px;
justify-content: space-between;
padding: 20px 32px 16px
}
.metadataContainer_efaad4 {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0
}
.disclosuresContainer_efaad4 {
display: flex;
flex-direction: row;
gap: 8px
}
.disclosuresText_efaad4 {
white-space: pre
}
.sectionContainer__5a4b6 {
display: flex;
flex-direction: column;
gap: 16px
}
.divider__5a4b6 {
border-top: 1px solid var(--border-strong);
margin: 16px 0
}
.sectionHeader__5a4b6 {
text-transform: capitalize
}
.contentContainer__5a4b6 {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit,minmax(230px,1fr))
}
.appContainer__5a4b6 {
background-color: var(--background-base-lower);
border: 1px solid var(--border-subtle);
border-radius: 8px;
cursor: pointer;
display: flex;
flex: 1;
flex-direction: column;
gap: 16px;
min-width: 0;
padding: 16px
}
.full-motion .appContainer__5a4b6 {
transition: box-shadow .2s ease-out,transform .2s ease-out,background .2s ease-out
}
.appContainer__5a4b6:focus,.appContainer__5a4b6:hover {
background-color: var(--background-base-lowest)
}
.full-motion .appContainer__5a4b6:focus,.full-motion .appContainer__5a4b6:hover {
box-shadow: var(--shadow-border),var(--shadow-high);
transform: translateY(-1px)
}
.appHeader__5a4b6 {
align-items: center;
display: flex;
flex-direction: row;
gap: 16px
}
.avatar__5a4b6 {
-webkit-user-drag: none;
border-radius: var(--radius-md)
}
.titleContainer__5a4b6 {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0
}
.appName__5a4b6 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.appCategory__5a4b6 {
white-space: pre
}
.appDescription__5a4b6 {
min-height: 0;
overflow: hidden;
text-overflow: ellipsis
}
.wrapper_a4e118 {
align-items: center;
background-color: var(--background-base-lowest);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
gap: 24px;
height: 200px;
overflow: hidden;
padding: 16px 24px;
position: relative;
width: 100%
}
.wrapper_a4e118:hover .image_a4e118 {
background-image: var(--custom-background-animated,var(--custom-background-static))
}
.content_a4e118 {
align-items: center;
display: flex;
gap: 16px;
max-width: 304px;
min-width: 260px;
z-index: 1
}
@value iconSize: 64px;.icon_a4e118 {
border-radius: var(--radius-md);
flex-shrink: 0;
overflow: hidden
}
.icon_a4e118,.icon_a4e118 img {
height: 64px;
width: 64px
}
.image_a4e118 {
background-image: var(--custom-background-static);
border-radius: var(--radius-sm);
flex: 1;
height: 100%;
transition: background-image .2s ease;
z-index: 1
}
.background_a4e118,.image_a4e118 {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover
}
.background_a4e118 {
--custom-overlay-color: hsl(var(--primary-730-hsl)/0.8);
background-image: linear-gradient(var(--custom-overlay-color),var(--custom-overlay-color)),var(--custom-background-url);
filter: blur(4px);
height: 120%;
left: 50%;
position: absolute;
top: 50%;
transform: translate3d(-50%,-50%,0);
width: 120%
}
.theme-light .background_a4e118 {
--custom-overlay-color: hsl(var(--white-500-hsl)/0.3)
}
.wrapper__5c108 {
background-color: var(--card-background-default);
border: 1px solid var(--border-subtle);
border-radius: 8px;
overflow: hidden;
width: 100%
}
.cardHeaderImg__5c108 {
align-items: center;
background-color: var(--brand-400);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
display: flex;
height: 187px;
justify-content: center;
width: 100%
}
.cardHeaderImg__5c108 img {
border-radius: 100%;
box-shadow: 0 0 4px 0 var(--brand-500);
overflow: hidden
}
.details__5c108 {
align-items: flex-start;
align-self: stretch;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px
}
.description__5c108 {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
height: 36px;
overflow: hidden;
width: 100%
}
.cardPrice__5c108 {
box-sizing: border-box
}
.cardPrice__5c108,.footer__5c108 {
align-items: center;
display: flex;
justify-content: space-between;
padding: 16px
}
.footer__5c108 {
align-self: stretch;
border-top: 1px solid var(--border-subtle)
}
.buttonGroup__5c108 {
align-items: center;
display: flex;
gap: 8px
}
.heading__66230 {
align-items: center;
display: flex;
gap: 10px
}
.wrapper__29f4e {
padding: 16px 0
}
.productsContainer__29f4e,.wrapper__29f4e {
display: flex;
flex-direction: column;
gap: 40px
}
@value gridSize: 287px;.productSection__29f4e {
display: grid;
gap: 16px;
grid-template-columns: 287px;
justify-items: center;
padding-top: 16px
}
@media (min-width: 760px) {
.productSection__29f4e {
grid-template-columns:287px 287px
}
}
@media (min-width: 1220px) {
.productSection__29f4e {
grid-template-columns:287px 287px 287px
}
}
@media (min-width: 1600px) {
.productSection__29f4e {
grid-template-columns:287px 287px 287px 287px
}
}
.subscriptionCardSubtext__29f4e {
align-items: center;
display: flex;
gap: 5px
}
.storeContainer_c79ea3 {
display: flex;
flex-direction: column;
gap: 32px
}
.header_c79ea3 {
color: var(--text-strong)
}
.productSection_c79ea3 {
display: flex;
flex-direction: column;
gap: 16px
}
.products_c79ea3 {
display: grid;
gap: 16px 24px;
grid-template-columns: repeat(auto-fill,minmax(230px,1fr))
}
.legalContainer_c79ea3 {
display: flex;
justify-content: center;
width: 100%
}
.detailContainer__871ff {
min-width: 320px;
width: 100%
}
.contentContainer__871ff {
display: flex;
flex-direction: row;
gap: 48px;
padding: 0 32px
}
.contentTabsContainer__871ff {
display: flex;
flex: 1;
flex-direction: column;
gap: 16px;
min-width: 0;
padding: 0 0 32px
}
.contentTabs__871ff {
flex-direction: row;
justify-content: space-between
}
.centerContainer__871ff,.contentTabs__871ff {
align-items: center;
display: flex
}
.centerContainer__871ff {
height: 100%;
justify-content: center;
min-height: 0;
width: 100%
}
.error__871ff {
padding: 16px 32px
}
.sidebar__871ff {
padding-bottom: 32px;
width: 240px
}
@container apps-root-container (max-width: 700px) {
.sidebar__871ff {
display: none
}
}
.sectionTitle_d2a5f7 {
padding-top: 16px;
padding-inline-start:32px;z-index: 1
}
.titleExtraPadding_d2a5f7 {
padding-top: 24px
}
.content_d2a5f7 {
-moz-column-gap: 16px;
column-gap: 16px;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(1,minmax(200px,1fr));
padding: 16px 32px;
row-gap: 16px
}
@media (min-width: 800px) {
.content_d2a5f7 {
grid-template-columns:repeat(2,1fr)
}
}
@media (min-width: 1200px) {
.content_d2a5f7 {
grid-template-columns:repeat(4,1fr)
}
}
.errorContainer_d2a5f7 {
display: flex;
flex: 1
}
.error_d2a5f7 {
padding: 16px 32px
}
.contentContainer__77062 {
display: flex;
flex-direction: column;
gap: 16px;
min-height: 100%;
width: 100%
}
.filter__72086 {
cursor: pointer;
display: flex;
gap: 8px
}
.filterBackground__72086 {
background-color: var(--background-mod-subtle);
border-radius: 4px;
padding: 4px 8px
}
.filterBackground__72086:hover {
background-color: var(--interactive-background-hover)
}
.filterBackground__72086:active {
background-color: var(--interactive-background-active)
}
.menu__72086 {
max-height: 300px
}
.categoryLabel__72086 {
display: flex;
gap: 16px;
justify-content: space-between
}
.categories__97499 {
display: flex;
flex-direction: column;
gap: 2px
}
.category__97499 {
align-items: center;
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: space-between;
padding: 8px
}
.category__97499:hover {
background-color: var(--interactive-background-hover)
}
.name__97499 {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.count__97499 {
margin-inline-start:8px}
.selected__97499 {
background-color: var(--interactive-background-active)
}
.container__97499 {
align-items: center;
display: flex;
gap: 8px
}
.container__5682d {
align-items: center;
background: var(--background-gradient-low,var(--background-base-lower));
border-radius: 8px;
display: flex;
flex-direction: column;
height: 400px;
justify-content: center;
padding: 16px
}
.image__5682d {
background-repeat: no-repeat;
background-size: contain;
height: 145px;
margin-bottom: 16px;
width: 314px
}
.header__5682d {
margin-bottom: 8px
}
@value minCardWidth 254px;@value sidebarWidth 170px;.container__1eae0 {
display: flex;
flex: 1;
min-height: 0;
position: relative
}
.innerContainer__1eae0 {
display: flex;
flex-direction: row
}
.centeringBuffer__1eae0 {
width: 158px
}
.contentContainer__1eae0 {
padding: 32px 32px 16px;
padding-inline-end:194px}
.content__1eae0 {
-moz-column-gap: 16px;
column-gap: 16px;
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill,minmax(254px,1fr));
row-gap: 16px
}
.paginationInput__1eae0 {
margin: 0
}
.topFilterContainer__1eae0 {
display: none;
margin-bottom: 16px
}
.sideFilterContainer__1eae0 {
height: 100%;
inset-inline-end: 0;
margin-top: 32px;
padding-inline-end:16px;position: absolute;
top: 0;
width: 170px;
z-index: 1
}
.sideFilterContent__1eae0 {
position: sticky;
top: 0
}
@media (max-width: 1336px) {
.centeringBuffer__1eae0 {
display:none
}
.contentContainer__1eae0 {
padding-inline-end:32px;padding-top: 24px
}
.topFilterContainer__1eae0 {
display: block
}
.sideFilterContainer__1eae0 {
display: none
}
}
.outerContainer_e1147e {
display: flex;
flex-direction: column;
height: 100%
}
.loggedOutContainer_e1147e {
height: 100vh
}
.innerContainer_e1147e {
container-name: apps-root-container;
container-type: inline-size;
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
position: relative
}
.detailHeaderContainer_e1147e {
align-items: center;
display: grid;
flex: 1;
gap: 20px;
grid-template-columns: 1fr auto 1fr;
height: 100%
}
.detailHeaderSection_e1147e {
align-items: center;
display: flex;
height: 100%
}
.detailHeaderButtonsContainer_e1147e {
justify-content: flex-end;
transition: opacity .2s
}
.detailHeaderButtonsContainer_e1147e.hidden_e1147e {
opacity: 0;
visibility: hidden
}
.detailHeaderButtonsContainer_e1147e.hide_e1147e {
opacity: 0
}
.detailHeaderButtonsContainer_e1147e.visible_e1147e {
opacity: 1;
visibility: visible
}
.detailHeader_e1147e,.searchHeader_e1147e {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.searchHeader_e1147e {
flex: 1;
min-width: 0
}
.nagbar_e1147e {
padding-inline:28px}
.nagbarActionContainer_e1147e {
display: inline-block
}
.logo_e1147e {
height: 22px;
margin-inline-end:8px;position: relative;
top: 6px;
width: 22px
}
/*# sourceMappingURL=4851cc625502983d.css.map*/