BetterDiscordAddons/Themes/SettingsModal/SettingsModal.css

218 lines
8.5 KiB
CSS

@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/_res/ThemeDevBadge.css);
:root {
--settingswidth: 960;
--settingsheight: 80;
--settingsbackground: transparent;
--settingswidth_v: min(calc(1px * var(--settingswidth_s, var(--settingswidth))), 99vw);
--settingsheight_v: min(calc(1vh * var(--settingsheight_s, var(--settingsheight))), 99vh);
--settingsbackground_v: var(--settingsbackground_s, var(--settingsbackground));
}
#app-mount .baseLayer__2b890 {
opacity: 1 !important;
transform: unset !important;
will-change: unset !important;
}
#app-mount .stop-animations * {
transition-property: inherit !important;
animation: inherit !important;
}
#app-mount .layer_f7d46a.stop-animations:first-child::after {
content: "" !important;
position: fixed !important;
background: rgb(0, 0, 0) !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0.85 !important;
z-index: 999 !important;
pointer-events: none !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background: var(--settingsbackground_v) !important;
border-radius: 5px !important;
box-shadow: var(--elevation-high) !important;
width: var(--settingswidth_v) !important;
height: var(--settingsheight_v) !important;
margin: auto !important;
padding: 0 !important;
overflow: hidden !important;
contain: unset !important;
z-index: 1000 !important;
--settingsiconsadditionalsize: var(--use-settingsicons, 0) * (var(--settingsicons-size, 0px) + var(--settingsicons-gap, 0px));
}
#app-mount .layer_f7d46a ~ .layer_f7d46a > div,
#app-mount .layer_f7d46a ~ .layer_f7d46a .standardSidebarView__12528 {
position: static !important;
border-radius: unset !important;
width: 100% !important;
height: 100% !important;
margin: unset !important;
padding: unset !important;
overflow: hidden !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .sidebarRegion__36437,
#app-mount .layer_f7d46a ~ .layer_f7d46a .sidebarRegionScroller__8113e {
flex: 0 0 auto !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .sidebar__02e8d {
width: 218px !important;
padding: 20px 6px 20px 20px !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .contentColumnDefault__78de3,
#app-mount .layer_f7d46a ~ .layer_f7d46a .contentColumnWide__146ec {
padding: 20px 40px !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .wrapper_e5073f {
width: calc(var(--settingswidth_v) - 420px - var(--settingsiconsadditionalsize)) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .repo_k8F4Sd {
max-width: calc(var(--settingswidth_v) - 226px - var(--settingsiconsadditionalsize)) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .repoHeader_2KfNvH {
padding-bottom: 0 !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .repoHeader_2KfNvH .tabBar__35f81 {
gap: 30px !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .repoHeader_2KfNvH .quickSelectLabel__79774 {
font-size: 12px !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .repoScroller_9JnAPs {
padding-top: 0 !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .sidebar__37984 {
height: var(--settingsheight_v) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .standardSidebarView__12528 .editor {
height: calc(var(--settingsheight_v) - 120px) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .toolsContainer__4e6ad,
#app-mount .layer_f7d46a ~ .layer_f7d46a .toolsContainer__4e6ad .tools_c0ff70,
#app-mount .layer_f7d46a ~ .layer_f7d46a .toolsContainer__4e6ad .container__3529f,
#app-mount .layer_f7d46a ~ .layer_f7d46a .toolsContainer__4e6ad .closeButton__8177f {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
width: 100% !important;
max-width: unset !important;
height: 100% !important;
max-height: unset !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
cursor: default !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .toolsContainer__4e6ad {
position: fixed !important;
top: 22px !important;
z-index: -1 !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .settingsToolbar_wu4yfQ {
display: none !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .accountProfileCard__744d8 {
max-width: calc(var(--settingswidth_v) - 332px - var(--settingsiconsadditionalsize)) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd {
gap: 30px !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .sectionsContainer_d2a766,
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .sectionsContainer__45b62,
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .editor_bca4e3,
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .preview_de6062 {
min-width: calc((var(--settingswidth_v) - 352px - var(--settingsiconsadditionalsize)) / 2) !important;
max-width: calc((var(--settingswidth_v) - 352px - var(--settingsiconsadditionalsize)) / 2) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd.tryItOutLayout_f54a16 .sectionsContainer_d2a766,
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd.tryItOutLayout_f54a16 .sectionsContainer__45b62,
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd.tryItOutLayout_f54a16 .editor_bca4e3,
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd.tryItOutLayout_f54a16 .preview_de6062 {
min-width: calc((var(--settingswidth_v) - 364px - var(--settingsiconsadditionalsize)) / 2) !important;
max-width: calc((var(--settingswidth_v) - 364px - var(--settingsiconsadditionalsize)) / 2) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .preview_de6062 .userPopoutOuter_d67f56 {
width: calc((var(--settingswidth_v) - 352px - var(--settingsiconsadditionalsize)) / 2) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .baseLayout_a5adfd.tryItOutLayout_f54a16 .preview_de6062 .userPopoutOuter_d67f56 {
width: calc((var(--settingswidth_v) - 352px - var(--settingsiconsadditionalsize)) / 2) !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .preview_de6062 .userPopoutOuter_d67f56,
#app-mount .layer_f7d46a ~ .layer_f7d46a .baseLayout_a5adfd.tryItOutLayout_f54a16 .preview_de6062 .userPopoutOuter_d67f56 {
min-width: unset !important;
max-width: 340px !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .profileCustomizationSection_c4a87a .baseLayout_a5adfd .preview_de6062 .userPopoutInner_e90432 {
overflow: hidden !important;
}
#app-mount .layer_f7d46a ~ .layer_f7d46a .guildsSection__337a8 {
max-width: calc(var(--settingswidth_v) - 352px - var(--settingsiconsadditionalsize)) !important;
}
#app-mount .root__6d24f {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
background: var(--settingsbackground_v) !important;
border-radius: 5px !important;
box-shadow: var(--elevation-high) !important;
width: var(--settingswidth_v) !important;
height: var(--settingsheight_v) !important;
margin: auto !important;
padding: 0 !important;
overflow: hidden !important;
contain: unset !important;
z-index: 1000 !important;
}
#app-mount .root__6d24f.enterDone__88d24 {
transform: unset !important;
}
#app-mount .root__6d24f .closeIconWrapper_bf90ba,
#app-mount .root__6d24f .closeIconWrapper_bf90ba .container__3529f,
#app-mount .root__6d24f .closeIconWrapper_bf90ba .closeButton__8177f,
#app-mount .shop_b31ed2 .container__3529f,
#app-mount .shop_b31ed2 .closeButton__8177f {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: -1 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
width: 100% !important;
max-width: unset !important;
height: 100% !important;
max-height: unset !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
cursor: default !important;
animation: unset !important;
transition: unset !important;
}
#app-mount .root__6d24f .closeIconWrapper_bf90ba {
top: 22px !important;
}