mirror of https://github.com/vizality/vizality
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1793 lines
52 KiB
1793 lines
52 KiB
/**
|
|
* Truncates text and adds an ellipsis to represent overflow.
|
|
* @param {number} [$max-width=100%] Max width for the string to respect before being truncated
|
|
* @param {string} [$display=inline-block] Display property of the element
|
|
* @example
|
|
* // SCSS
|
|
* .element {
|
|
* @include ellipsis;
|
|
* }
|
|
* // CSS
|
|
* .element {
|
|
* overflow: hidden;
|
|
* text-overflow: ellipsis;
|
|
* white-space: nowrap;
|
|
* word-wrap: normal;
|
|
* }
|
|
*/
|
|
/**
|
|
* Makes using masks simpler and automates the browser prefixing.
|
|
* @param {url} $image Image to mask
|
|
* @param {color} [$background-color] Mask color
|
|
* @param {string} [$size] Mask image size in pixels or percent
|
|
* @param {string} [$extras=no-repeat center] Mask image options
|
|
* @param {boolean} [$important=false] Whether the masking rule should be marked with !important
|
|
*/
|
|
/**
|
|
* Adds an ellipsis to overflow text exceeding a certain number of lines.
|
|
* Only works in webkit browsers.
|
|
* @param {number} $how-many-lines Max amount of lines a text can be.
|
|
*/
|
|
@keyframes backgroundPositionMoveDiagonal {
|
|
0%, 100% {
|
|
background-position: 0% 0%;
|
|
}
|
|
50% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
@keyframes blurFadeIn {
|
|
0% {
|
|
filter: blur(10px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
filter: blur(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes blurFadeOut {
|
|
0% {
|
|
filter: blur(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
filter: blur(10px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes blurIn {
|
|
0% {
|
|
filter: blur(10px);
|
|
}
|
|
100% {
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
@keyframes blurOut {
|
|
0% {
|
|
filter: blur(0);
|
|
}
|
|
100% {
|
|
filter: blur(10px);
|
|
}
|
|
}
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3) translate3d(0, 0, 0);
|
|
}
|
|
50% {
|
|
opacity: 0.9;
|
|
transform: scale(1.1) translate3d(0, 0, 0);
|
|
}
|
|
80% {
|
|
opacity: 1;
|
|
transform: scale(0.89) translate3d(0, 0, 0);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1) translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@keyframes fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideInFromBottom {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideInFromLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideInFromRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideInFromTop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideOutToBottom {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideOutToLeft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-20px);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideOutToRight {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
@keyframes fadeShortSlideOutToTop {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
}
|
|
@keyframes fadeSlideInFromBottom {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(1000%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeSlideInFromLeft {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-1000%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes fadeSlideInFromRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(1000%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes fadeSlideInFromTop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-1000%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeSlideOutToBottom {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(1000%);
|
|
}
|
|
}
|
|
@keyframes fadeSlideOutToLeft {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(-1000%);
|
|
}
|
|
}
|
|
@keyframes fadeSlideOutToRight {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateX(1000%);
|
|
}
|
|
}
|
|
@keyframes fadeSlideOutToTop {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-1000%);
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(2);
|
|
}
|
|
}
|
|
@keyframes rotate360 {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
@keyframes scaleIn {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes scaleOut {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
@keyframes shake {
|
|
10%, 90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
20%, 80% {
|
|
transform: translate3d(2px, 0, 0);
|
|
}
|
|
30%, 50%, 70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
40%, 60% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
}
|
|
@keyframes slideInFromBottom {
|
|
0% {
|
|
transform: translateY(1000%);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes slideInFromLeft {
|
|
0% {
|
|
transform: translateX(-1000%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes slideInFromRight {
|
|
0% {
|
|
transform: translateX(1000%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes slideInFromTop {
|
|
0% {
|
|
transform: translateY(-1000%);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes slideOutToBottom {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(1000%);
|
|
}
|
|
}
|
|
@keyframes slideOutToLeft {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-1000%);
|
|
}
|
|
}
|
|
@keyframes slideOutToRight {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(1000%);
|
|
}
|
|
}
|
|
@keyframes fadeSlideOutToTop {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(-1000%);
|
|
}
|
|
}
|
|
@keyframes fillSVG {
|
|
0% {
|
|
color: transparent;
|
|
}
|
|
100% {
|
|
color: inherit;
|
|
}
|
|
}
|
|
@keyframes strokeSVG {
|
|
0% {
|
|
stroke-dashoffset: 150;
|
|
color: transparent;
|
|
stroke: transparent;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 0;
|
|
color: transparent;
|
|
stroke-width: 0;
|
|
}
|
|
}
|
|
:root {
|
|
--vz-color-black: 0 0% 0%;
|
|
--vz-color-white: 0 0% 100%;
|
|
--vz-color-blurple: 227, 58%, 65%;
|
|
--vz-color-info: 212, 72%, 59%;
|
|
--vz-color-success: 153, 46%, 49%;
|
|
--vz-color-warning: 38, 96%, 54%;
|
|
--vz-color-danger: 0, 85%, 61%;
|
|
--vz-color-theme: 263, 100%, 77%;
|
|
--vz-color-plugin: 152, 71%, 55%;
|
|
}
|
|
:root[vz-theme=light] {
|
|
--vz-color-contrast: var(--vz-color-white);
|
|
}
|
|
:root[vz-theme=dark] {
|
|
--vz-color-contrast: var(--vz-color-black);
|
|
}
|
|
|
|
/**
|
|
* Truncates text and adds an ellipsis to represent overflow.
|
|
* @param {number} [$max-width=100%] Max width for the string to respect before being truncated
|
|
* @param {string} [$display=inline-block] Display property of the element
|
|
* @example
|
|
* // SCSS
|
|
* .element {
|
|
* @include ellipsis;
|
|
* }
|
|
* // CSS
|
|
* .element {
|
|
* overflow: hidden;
|
|
* text-overflow: ellipsis;
|
|
* white-space: nowrap;
|
|
* word-wrap: normal;
|
|
* }
|
|
*/
|
|
/**
|
|
* Makes using masks simpler and automates the browser prefixing.
|
|
* @param {url} $image Image to mask
|
|
* @param {color} [$background-color] Mask color
|
|
* @param {string} [$size] Mask image size in pixels or percent
|
|
* @param {string} [$extras=no-repeat center] Mask image options
|
|
* @param {boolean} [$important=false] Whether the masking rule should be marked with !important
|
|
*/
|
|
/**
|
|
* Adds an ellipsis to overflow text exceeding a certain number of lines.
|
|
* Only works in webkit browsers.
|
|
* @param {number} $how-many-lines Max amount of lines a text can be.
|
|
*/
|
|
:root {
|
|
--vz-icon-activity: url("vizality://assets/svgs/Activity.svg");
|
|
--vz-icon-add-circle: url("vizality://assets/svgs/AddCircle.svg");
|
|
--vz-icon-add-photo: url("vizality://assets/svgs/AddPhoto.svg");
|
|
--vz-icon-add-reaction: url("vizality://assets/svgs/AddReaction.svg");
|
|
--vz-icon-alert: url("vizality://assets/svgs/Alert.svg");
|
|
--vz-icon-alien-head: url("vizality://assets/svgs/AlienHead.svg");
|
|
--vz-icon-analytics-bubble: url("vizality://assets/svgs/AnalyticsBubble.svg");
|
|
--vz-icon-application-command: url("vizality://assets/svgs/ApplicationCommand.svg");
|
|
--vz-icon-arrow-back: url("vizality://assets/svgs/ArrowBack.svg");
|
|
--vz-icon-arrow-corner: url("vizality://assets/svgs/ArrowCorner.svg");
|
|
--vz-icon-arrow-drop-down: url("vizality://assets/svgs/ArrowDropDown.svg");
|
|
--vz-icon-arrow-drop-up: url("vizality://assets/svgs/ArrowDropUp.svg");
|
|
--vz-icon-arrow-left: url("vizality://assets/svgs/ArrowLeft.svg");
|
|
--vz-icon-arrow-up: url("vizality://assets/svgs/ArrowUp.svg");
|
|
--vz-icon-at: url("vizality://assets/svgs/At.svg");
|
|
--vz-icon-ballot-checkbox: url("vizality://assets/svgs/BallotCheckbox.svg");
|
|
--vz-icon-bell: url("vizality://assets/svgs/Bell.svg");
|
|
--vz-icon-bell-off: url("vizality://assets/svgs/BellOff.svg");
|
|
--vz-icon-bin: url("vizality://assets/svgs/Bin.svg");
|
|
--vz-icon-block-quote: url("vizality://assets/svgs/BlockQuote.svg");
|
|
--vz-icon-bold: url("vizality://assets/svgs/Bold.svg");
|
|
--vz-icon-book-close: url("vizality://assets/svgs/BookClose.svg");
|
|
--vz-icon-book-close-alt: url("vizality://assets/svgs/BookCloseAlt.svg");
|
|
--vz-icon-book-library: url("vizality://assets/svgs/BookLibrary.svg");
|
|
--vz-icon-book-open: url("vizality://assets/svgs/BookOpen.svg");
|
|
--vz-icon-bowling: url("vizality://assets/svgs/Bowling.svg");
|
|
--vz-icon-bug: url("vizality://assets/svgs/Bug.svg");
|
|
--vz-icon-bulb: url("vizality://assets/svgs/Bulb.svg");
|
|
--vz-icon-calendar: url("vizality://assets/svgs/Calendar.svg");
|
|
--vz-icon-call: url("vizality://assets/svgs/Call.svg");
|
|
--vz-icon-call-join: url("vizality://assets/svgs/CallJoin.svg");
|
|
--vz-icon-call-leave: url("vizality://assets/svgs/CallLeave.svg");
|
|
--vz-icon-call-videocamera: url("vizality://assets/svgs/CallVideoCamera.svg");
|
|
--vz-icon-call-videocamera-disabled: url("vizality://assets/svgs/CallVideoCameraDisabled.svg");
|
|
--vz-icon-call-videocamera-limited: url("vizality://assets/svgs/CallVideoCameraLimited.svg");
|
|
--vz-icon-carousel: url("vizality://assets/svgs/Carousel.svg");
|
|
--vz-icon-certificate: url("vizality://assets/svgs/Certificate.svg");
|
|
--vz-icon-change-down: url("vizality://assets/svgs/ChangeDown.svg");
|
|
--vz-icon-change-up: url("vizality://assets/svgs/ChangeUp.svg");
|
|
--vz-icon-channelcategory: url("vizality://assets/svgs/ChannelCategory.svg");
|
|
--vz-icon-channel-text: url("vizality://assets/svgs/ChannelText.svg");
|
|
--vz-icon-channel-text-limited: url("vizality://assets/svgs/ChannelTextLimited.svg");
|
|
--vz-icon-channel-text-nsfw: url("vizality://assets/svgs/ChannelTextNsfw.svg");
|
|
--vz-icon-channel-thread: url("vizality://assets/svgs/ChannelThread.svg");
|
|
--vz-icon-plugin: url("vizality://assets/svgs/Plugin.svg");
|
|
--vz-icon-theme: url("vizality://assets/svgs/Theme.svg");
|
|
}
|
|
|
|
:root {
|
|
--vz-logo-discord: url("vizality://assets/logos/Discord.svg");
|
|
--vz-logo-spotify: url("vizality://assets/logos/Spotify.svg");
|
|
--vz-logo-twitter: url("vizality://assets/logos/Twitter.svg");
|
|
--vz-logo-vizality: url("vizality://assets/logos/Vizality.svg");
|
|
--vz-logo-xbox: url("vizality://assets/logos/Xbox.svg");
|
|
}
|
|
|
|
:root {
|
|
--vz-editor-background: var(--background-secondary);
|
|
--vz-editor-border-radius: 0 0 8px 8px;
|
|
--vz-editor-context-menu-box-shadow: var(--elevation-high);
|
|
--vz-editor-context-menu-background: var(--background-floating);
|
|
--vz-editor-context-menu-border-radius: 4px;
|
|
--vz-editor-context-menu-font-family: var(--font-primary);
|
|
--vz-editor-context-menu-item-color: var(--interactive-normal);
|
|
--vz-editor-context-menu-item-padding: 8px 12px;
|
|
--vz-editor-context-menu-item-border-radius: 2px;
|
|
--vz-editor-context-menu-separator-height: 1px;
|
|
--vz-editor-context-menu-separator-style: solid;
|
|
--vz-editor-context-menu-separator-color: var(--background-modifier-accent);
|
|
--vz-editor-context-menu-item-focus-background: #5c6fb1;
|
|
--vz-editor-context-menu-item-focus-background-active: #4e5d94;
|
|
--vz-editor-context-menu-item-focus-color: hsl(var(--vz-color-white));
|
|
--vz-editor-line-numbers-color: var(--text-muted);
|
|
--vz-editor-minimap-background: var(--vz-editor-background);
|
|
--vz-editor-current-line-indicator-border-color: var(--background-secondary-alt);
|
|
--vz-editor-current-line-indicator-border-width: 2px;
|
|
--vz-editor-current-line-indicator-border-style: solid;
|
|
}
|
|
|
|
.vz-editor-wrapper {
|
|
height: 100%;
|
|
background: var(--vz-editor-background);
|
|
border-radius: var(--vz-editor-border-radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vz-popup-content-wrapper .vz-editor-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/**
|
|
* Editor code content area
|
|
*/
|
|
.monaco-scrollable-element.editor-scrollable {
|
|
margin-left: 20px;
|
|
}
|
|
.monaco-scrollable-element.editor-scrollable > .monaco-editor-background {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.monaco-editor {
|
|
height: 100% !important;
|
|
background: none !important;
|
|
/**
|
|
* Little color boxes
|
|
*/
|
|
/**
|
|
* Line numbers gutter
|
|
*/
|
|
/**
|
|
* Current line indecator
|
|
*/
|
|
}
|
|
.monaco-editor > div {
|
|
height: 100% !important;
|
|
}
|
|
.monaco-editor .line-numbers {
|
|
color: var(--vz-editor-line-numbers-color) !important;
|
|
}
|
|
.monaco-editor [class*=ced-colorBox] {
|
|
vertical-align: middle;
|
|
}
|
|
.monaco-editor [class*=ced-colorBox]::before {
|
|
border: none !important;
|
|
border-radius: 2px;
|
|
box-shadow: var(--elevation-medium);
|
|
}
|
|
.monaco-editor .margin {
|
|
padding: 20px 0 0;
|
|
background: var(--background-message-hover) !important;
|
|
opacity: 0.5;
|
|
}
|
|
.monaco-editor-background,
|
|
.monaco-editor .inputarea.ime-input {
|
|
background: none !important;
|
|
}
|
|
.monaco-editor .scroll-decoration {
|
|
display: none;
|
|
}
|
|
.monaco-editor .view-overlays .current-line {
|
|
border: var(--vz-editor-current-line-indicator-border-width) var(--vz-editor-current-line-indicator-border-style) var(--vz-editor-current-line-indicator-border-color) !important;
|
|
}
|
|
|
|
.monaco-menu .monaco-action-bar {
|
|
background: red !important;
|
|
}
|
|
|
|
/**
|
|
* Overview ruler
|
|
*/
|
|
.decorationsOverviewRuler {
|
|
opacity: 0.5 !important;
|
|
right: 4px !important;
|
|
}
|
|
|
|
.monaco-custom-checkbox.checked {
|
|
background: var(--vz-editor-item-focus-background) !important;
|
|
color: hsl(var(--vz-color-white)) !important;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
:root {
|
|
--vz-editor-scrollbar-thumb-background: hsl(var(--vz-color-black) / 0.3);
|
|
--vz-editor-scrollbar-thumb-border-radius: 4px;
|
|
--vz-editor-scrollbar-thumb-size: 8px;
|
|
}
|
|
|
|
.monaco-scrollable-element > .invisible.fade,
|
|
.monaco-scrollable-element > .visible {
|
|
transition: none;
|
|
}
|
|
.monaco-scrollable-element > .scrollbar.vertical > .slider {
|
|
width: var(--vz-editor-scrollbar-thumb-size) !important;
|
|
}
|
|
.monaco-scrollable-element > .scrollbar.horizontal > .slider {
|
|
height: var(--vz-editor-scrollbar-thumb-size) !important;
|
|
}
|
|
.monaco-scrollable-element > .scrollbar > .slider {
|
|
border-radius: var(--vz-editor-scrollbar-thumb-border-radius);
|
|
background-color: var(--vz-editor-scrollbar-thumb-background) !important;
|
|
}
|
|
|
|
.monaco-editor .monaco-hover {
|
|
background-color: hsl(var(--vz-color-black)) !important;
|
|
box-shadow: var(--elevation-high);
|
|
color: var(--interactive-hover) !important;
|
|
padding: 0 12px;
|
|
border: none !important;
|
|
font-family: "Whitney" !important;
|
|
border-radius: 4px;
|
|
animation: editor-tooltip 0.1s ease forwards;
|
|
}
|
|
.monaco-editor .monaco-hover a {
|
|
color: var(--text-link) !important;
|
|
pointer-events: none;
|
|
}
|
|
.monaco-editor .monaco-hover a::after {
|
|
content: "- " attr(data-href);
|
|
color: hsl(var(--vz-color-white) / 0.6);
|
|
margin-left: 10px;
|
|
display: inline-block;
|
|
}
|
|
.monaco-editor .monaco-hover .hover-contents {
|
|
padding: 10px 0;
|
|
}
|
|
.monaco-editor .monaco-hover .hover-row.status-bar {
|
|
display: none;
|
|
}
|
|
.monaco-editor .monaco-hover .hover-row:not(:first-child):not(:empty) {
|
|
border-top: 1px solid hsl(var(--vz-color-white) / 0.1) !important;
|
|
}
|
|
.monaco-editor .monaco-hover * {
|
|
font-family: "Whitney" !important;
|
|
}
|
|
|
|
.monaco-hover-content {
|
|
max-height: 400px !important;
|
|
}
|
|
|
|
@keyframes editor-tooltip {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.colorpicker-header {
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.colorpicker-widget {
|
|
margin: 10px 2px;
|
|
overflow: visible;
|
|
}
|
|
|
|
.colorpicker-body {
|
|
padding: 10px 0;
|
|
}
|
|
.colorpicker-body .saturation-box {
|
|
width: 100%;
|
|
}
|
|
.colorpicker-body .saturation-wrap {
|
|
border-radius: 3px;
|
|
}
|
|
.colorpicker-body .opacity-strip {
|
|
margin-left: 10px;
|
|
}
|
|
.colorpicker-body .hue-strip {
|
|
border-radius: 3px;
|
|
margin-left: 10px;
|
|
}
|
|
.colorpicker-body .strip .overlay {
|
|
border-radius: 3px;
|
|
}
|
|
.colorpicker-body .slider,
|
|
.colorpicker-body .saturation-selection {
|
|
background: hsl(var(--vz-color-white));
|
|
border-radius: 1000px;
|
|
border: none;
|
|
box-shadow: var(--elevation-low);
|
|
}
|
|
|
|
.monaco-editor [class*=arrow-decoration] {
|
|
border-color: transparent transparent var(--background-tertiary) !important;
|
|
margin-left: 0 !important;
|
|
}
|
|
.monaco-editor .zone-widget {
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
.monaco-editor .zone-widget .zone-widget-container {
|
|
background: none !important;
|
|
border: 1px solid var(--background-tertiary) !important;
|
|
border-radius: 3px;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
box-shadow: var(--elevation-low);
|
|
height: auto !important;
|
|
}
|
|
.monaco-editor .peekview-widget[style*="border-top-color: rgb(244, 135, 113);"] .head {
|
|
background: #f04747 !important;
|
|
color: hsl(var(--vz-color-white)) !important;
|
|
}
|
|
.monaco-editor .peekview-widget .head {
|
|
height: 40px !important;
|
|
padding: 10px;
|
|
background: var(--background-tertiary) !important;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
}
|
|
.monaco-editor .peekview-widget .head * {
|
|
color: var(--header-secondary);
|
|
}
|
|
.monaco-editor .peekview-widget .head .peekview-title {
|
|
margin-left: 0;
|
|
}
|
|
.monaco-editor .peekview-widget .head .peekview-title .filename {
|
|
display: none;
|
|
}
|
|
.monaco-editor .peekview-widget > .body {
|
|
border: none !important;
|
|
background: var(--background-secondary);
|
|
padding: 10px 0;
|
|
}
|
|
.monaco-editor .peekview-widget > .body[style*="border-color: rgb(244, 135, 113);"] {
|
|
background: rgba(240, 71, 71, 0.2) !important;
|
|
}
|
|
.monaco-editor .peekview-widget > .body[style*="border-color: rgb(244, 135, 113);"]::after {
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: var(--background-secondary);
|
|
z-index: -1;
|
|
}
|
|
.monaco-editor .marker-widget {
|
|
padding: 10px 20px !important;
|
|
height: 100% !important;
|
|
}
|
|
.monaco-editor .marker-widget > div {
|
|
height: 100% !important;
|
|
}
|
|
.monaco-editor .marker-widget > div > .monaco-scrollable-element {
|
|
height: 100% !important;
|
|
}
|
|
.monaco-editor .marker-widget .descriptioncontainer {
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.split-view-view .monaco-list .monaco-list-rows {
|
|
background: none !important;
|
|
}
|
|
|
|
.split-view-view .monaco-list .monaco-list-row {
|
|
font-size: 14px;
|
|
font-family: Whitney;
|
|
font-weight: 500;
|
|
padding: 0 15px;
|
|
position: relative;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.monaco-tl-twistie {
|
|
display: none !important;
|
|
}
|
|
|
|
.monaco-list .monaco-list-row.selected {
|
|
background: var(--background-secondary-alt) !important;
|
|
color: var(--header-primary);
|
|
}
|
|
|
|
.monaco-list:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
|
|
background: var(--background-modifier-hover) !important;
|
|
}
|
|
|
|
.monaco-editor .reference-zone-widget .ref-tree {
|
|
background: none !important;
|
|
}
|
|
|
|
.monaco-editor .accessibilityHelpWidget {
|
|
overflow: auto;
|
|
padding: 20px;
|
|
background: var(--background-primary) !important;
|
|
box-shadow: var(--elevation-high) !important;
|
|
color: var(--text-normal);
|
|
font-family: Whitney;
|
|
font-size: 16px;
|
|
border-radius: 5px;
|
|
top: 20px !important;
|
|
height: auto !important;
|
|
animation: fadeShortSlideInFromTop 0.3s ease forwards;
|
|
}
|
|
.monaco-editor .accessibilityHelpWidget > div::before {
|
|
content: "Accessibility Help";
|
|
color: var(--header-primary);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
letter-spacing: 0.3px;
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.monaco-editor .tokens-inspect-widget {
|
|
color: var(--text-normal);
|
|
background: var(--background-primary);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--background-tertiary);
|
|
font-size: 14px;
|
|
padding: 20px;
|
|
}
|
|
.monaco-editor .tokens-inspect-widget .tm-token {
|
|
display: flow-root;
|
|
color: var(--header-primary);
|
|
padding: 5px 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
.monaco-editor .tokens-inspect-widget .tm-token-length {
|
|
font-size: 12px;
|
|
padding-left: 20px;
|
|
line-height: 23px;
|
|
}
|
|
.monaco-editor .tokens-inspect-widget .tm-metadata-key {
|
|
padding: 5px 20px 5px 0;
|
|
color: var(--text-normal);
|
|
}
|
|
.monaco-editor .tokens-inspect-widget .tm-metadata-value {
|
|
color: var(--header-primary);
|
|
}
|
|
.monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
|
|
background-color: var(--background-modifier-accent);
|
|
}
|
|
.monaco-editor .tokens-inspect-widget .tm-token-type {
|
|
line-height: 2;
|
|
}
|
|
|
|
.monaco-editor .find-widget {
|
|
color: var(--text-normal) !important;
|
|
box-shadow: var(--elevation-medium) !important;
|
|
background: var(--background-primary) !important;
|
|
border-radius: 5px;
|
|
transition: none !important;
|
|
}
|
|
.monaco-editor .find-widget.visible {
|
|
animation: fadeShortSlideInFromTop 0.3s ease forwards;
|
|
}
|
|
.monaco-editor .find-widget.no-results .matchesCount {
|
|
color: #f04747 !important;
|
|
}
|
|
.monaco-editor .find-widget .monaco-inputbox > .wrapper {
|
|
background: var(--background-tertiary) !important;
|
|
border-radius: 3px !important;
|
|
overflow: hidden;
|
|
}
|
|
.monaco-editor .find-widget .monaco-findInput .input {
|
|
color: var(--header-primary) !important;
|
|
font-size: 14px;
|
|
}
|
|
.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
.monaco-editor .suggest-widget {
|
|
color: var(--text-normal) !important;
|
|
padding: 5px 0;
|
|
background: var(--background-tertiary) !important;
|
|
border: 1px solid var(--background-tertiary) !important;
|
|
box-shadow: var(--elevation-low);
|
|
border-radius: 4px;
|
|
line-height: 30px !important;
|
|
margin-top: 20px;
|
|
}
|
|
.monaco-editor .suggest-widget > .tree {
|
|
background: none !important;
|
|
border: none !important;
|
|
}
|
|
.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
|
|
padding: 0 5px;
|
|
}
|
|
.monaco-editor .suggest-widget .monaco-list:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
|
|
background: var(--background-modifier-hover) !important;
|
|
}
|
|
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
|
|
background: var(--background-floating) !important;
|
|
color: var(--header-primary);
|
|
}
|
|
.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused, .monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused .monaco-icon-label {
|
|
color: hsl(var(--vz-color-white));
|
|
}
|
|
.monaco-editor .suggest-widget .details {
|
|
border: none;
|
|
}
|
|
|
|
.monaco-editor .minimap {
|
|
border-radius: var(--vz-editor-border-radius);
|
|
overflow: hidden;
|
|
}
|
|
.monaco-editor .decorationsOverviewRuler {
|
|
border-radius: var(--vz-editor-border-radius);
|
|
}
|
|
|
|
.monaco-editor .monaco-editor-overlaymessage.fadeIn {
|
|
animation: editor-tooltip 0.1s ease forwards;
|
|
}
|
|
|
|
.monaco-editor .monaco-editor-overlaymessage .message {
|
|
background-color: var(--vz-editor-context-menu-item-focus-background) !important;
|
|
box-shadow: var(--elevation-low);
|
|
color: hsl(var(--vz-color-white)) !important;
|
|
padding: 10px;
|
|
border: none !important;
|
|
font-family: Whitney !important;
|
|
border-radius: 4px;
|
|
margin-left: -10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.monaco-editor .monaco-editor-overlaymessage .anchor {
|
|
border-top-color: var(--vz-editor-item-focus-background) !important;
|
|
}
|
|
|
|
.vz-component-preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: -40px;
|
|
}
|
|
.vz-component-preview-tabs .vz-component-preview-tab-item {
|
|
padding: 12px 15px;
|
|
margin: 0;
|
|
background: none;
|
|
}
|
|
.vz-component-preview-tabs .vz-component-preview-tab-item[vz-active] {
|
|
background: none !important;
|
|
}
|
|
.vz-component-preview-tabs .vz-component-preview-tab-item[vz-active]::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 15px;
|
|
right: 15px;
|
|
background: hsl(var(--vz-color-blurple));
|
|
box-shadow: 0 -4px 12px 0 hsl(var(--vz-color-blurple));
|
|
height: 2px;
|
|
transition: transform 0.125s;
|
|
}
|
|
.vz-component-preview-tabs .vz-component-preview-tab-item:hover, .vz-component-preview-tabs .vz-component-preview-tab-item:active {
|
|
background: none !important;
|
|
}
|
|
.vz-component-preview-tabs-inner {
|
|
background: var(--background-secondary-alt);
|
|
border: 1px solid var(--background-tertiary);
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
overflow: hidden;
|
|
padding: 0 10px;
|
|
justify-content: space-between;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.vz-component-preview-tabs-wrapper {
|
|
background: var(--background-primary);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
padding: 40px 0 0;
|
|
}
|
|
.vz-component-preview-tabs-children {
|
|
justify-content: center;
|
|
}
|
|
.vz-component-preview-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--background-secondary);
|
|
border-radius: 0 0 5px 5px;
|
|
border: 1px solid var(--background-tertiary);
|
|
border-top: none;
|
|
}
|
|
.vz-component-preview-aside {
|
|
display: inline-flex;
|
|
margin: 35px 0;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
align-self: flex-start;
|
|
justify-content: center;
|
|
position: sticky;
|
|
top: 124px;
|
|
}
|
|
.vz-component-preview-content {
|
|
margin: 20px;
|
|
flex-flow: row wrap;
|
|
float: right;
|
|
align-self: flex-start;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
/* Fix for last row of flex container */
|
|
}
|
|
.vz-component-preview-content-loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
}
|
|
.vz-component-preview-content::after {
|
|
content: "";
|
|
flex: auto;
|
|
}
|
|
.vz-component-preview-no-results {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
.vz-component-preview-no-results-image {
|
|
flex: 1 1 auto;
|
|
width: -webkit-fill-available;
|
|
height: 140px;
|
|
background-image: url("/assets/a12ff54c4c5c03b41006fd96a4709c29.svg");
|
|
margin-bottom: 20px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.vz-component-preview-no-results-text {
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
.vz-component-preview[vz-tab=code] .vz-component-preview-content {
|
|
display: block;
|
|
}
|
|
.vz-component-preview .vz-code-block-code {
|
|
background: var(--background-secondary-alt);
|
|
}
|
|
|
|
.vz-overflow-tooltip {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.vz-error-boundary {
|
|
font-size: 16px;
|
|
}
|
|
.vz-error-boundary-header {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
.vz-error-boundary-text {
|
|
margin: 30px 0 15px;
|
|
}
|
|
.vz-error-boundary-block {
|
|
font-size: 18px;
|
|
line-height: 1.4;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-tertiary);
|
|
border-radius: 4px;
|
|
padding: 20px;
|
|
white-space: pre-line;
|
|
max-height: 20vh;
|
|
overflow: auto;
|
|
}
|
|
.vz-error-boundary-error-stack::first-line {
|
|
font-weight: 600;
|
|
color: var(--header-primary);
|
|
}
|
|
.vz-error-boundary-scene {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
animation: vz-error-boundary-scene-in 0.2s ease;
|
|
}
|
|
.vz-error-boundary-scene > div {
|
|
bottom: 0;
|
|
}
|
|
|
|
@media screen and (max-height: 700px) {
|
|
.vz-error-boundary-scene {
|
|
display: none;
|
|
}
|
|
}
|
|
@keyframes vz-error-boundary-scene-in {
|
|
from {
|
|
transform: translate3d(0, 100%, 0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.vz-icon {
|
|
display: flex;
|
|
height: auto;
|
|
}
|
|
.vz-icon-wrapper {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
}
|
|
|
|
.vz-markdown {
|
|
/*
|
|
* We have this because we don't have the markup wrapper
|
|
* in markdown, which Discord uses to style inline code
|
|
*/
|
|
}
|
|
.vz-markdown-header-h1, .vz-markdown-header-h2, .vz-markdown-header-h3, .vz-markdown-header-h4, .vz-markdown-header-h5, .vz-markdown-header-h6 {
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
.vz-markdown-header-h1, .vz-markdown-header-h2 {
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--background-modifier-accent);
|
|
}
|
|
.vz-markdown-header-h6 {
|
|
text-transform: uppercase;
|
|
}
|
|
.vz-markdown-header:hover .vz-markdown-anchor-icon {
|
|
visibility: visible;
|
|
}
|
|
.vz-markdown-anchor {
|
|
float: left;
|
|
padding-right: 4px;
|
|
margin-left: -20px;
|
|
line-height: 1;
|
|
}
|
|
.vz-markdown-anchor-icon {
|
|
color: var(--header-secondary);
|
|
visibility: hidden;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
.vz-markdown-hr {
|
|
height: 4px;
|
|
padding: 0;
|
|
margin: 12px 0;
|
|
background-color: var(--background-modifier-accent);
|
|
border: 0;
|
|
}
|
|
.vz-markdown-blockquote {
|
|
padding: 0 16px;
|
|
opacity: 0.8;
|
|
border-left: 4px solid var(--interactive-muted);
|
|
}
|
|
.vz-markdown-ul, .vz-markdown-ol {
|
|
padding-left: 32px;
|
|
}
|
|
.vz-markdown-ul .vz-markdown-ul, .vz-markdown-ul .vz-markdown-ol, .vz-markdown-ol .vz-markdown-ul, .vz-markdown-ol .vz-markdown-ol {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
.vz-markdown-ul .vz-markdown-checkbox, .vz-markdown-ol .vz-markdown-checkbox {
|
|
margin: 0 0 10px -26px;
|
|
}
|
|
.vz-markdown-ul {
|
|
list-style: disc;
|
|
}
|
|
.vz-markdown-ul .vz-markdown-ul {
|
|
list-style-type: circle;
|
|
}
|
|
.vz-markdown-ul .vz-markdown-ul .vz-markdown-ul {
|
|
list-style-type: square;
|
|
}
|
|
.vz-markdown-ol {
|
|
list-style-type: decimal;
|
|
}
|
|
.vz-markdown-ol .vz-markdown-ol {
|
|
list-style-type: circle;
|
|
}
|
|
.vz-markdown-li.task-list-item {
|
|
list-style-type: none;
|
|
}
|
|
.vz-markdown-table {
|
|
display: table;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-spacing: 0;
|
|
border-radius: 4px;
|
|
color: var(--text-normal);
|
|
border: 1px solid var(--background-tertiary);
|
|
}
|
|
.vz-markdown-thead {
|
|
display: table-header-group;
|
|
vertical-align: middle;
|
|
border-color: inherit;
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
}
|
|
.vz-markdown-thead > .vz-markdown-tr {
|
|
background: var(--background-tertiary);
|
|
}
|
|
.vz-markdown-tr {
|
|
display: table-row;
|
|
vertical-align: inherit;
|
|
border-color: inherit;
|
|
background: var(--background-secondary);
|
|
}
|
|
.vz-markdown-tr:nth-child(2n) {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
.vz-markdown-td, .vz-markdown-th {
|
|
display: table-cell;
|
|
vertical-align: inherit;
|
|
text-align: left;
|
|
padding: 8px 13px;
|
|
}
|
|
.vz-markdown-td.vz-align-right, .vz-markdown-th.vz-align-right {
|
|
text-align: right;
|
|
}
|
|
.vz-markdown-th {
|
|
font-weight: 600;
|
|
}
|
|
.vz-markdown-tbody {
|
|
display: table-row-group;
|
|
vertical-align: middle;
|
|
border-color: inherit;
|
|
}
|
|
.vz-markdown-ol, .vz-markdown-ul {
|
|
padding-left: 32px;
|
|
}
|
|
.vz-markdown-image {
|
|
cursor: pointer;
|
|
margin: 20px 0;
|
|
height: auto !important;
|
|
max-width: 100%;
|
|
width: fit-content !important;
|
|
display: inline-block;
|
|
}
|
|
.vz-markdown-image img {
|
|
height: auto !important;
|
|
max-width: 100%;
|
|
width: auto !important;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
}
|
|
.vz-markdown-code {
|
|
line-height: 1.5;
|
|
}
|
|
.vz-markdown-code-inline {
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0.2em;
|
|
margin: -0.2em 0;
|
|
border-radius: 3px;
|
|
text-indent: 0;
|
|
border: none;
|
|
white-space: pre-wrap;
|
|
background: var(--background-secondary);
|
|
}
|
|
.vz-markdown-p {
|
|
margin: 0 0 16px;
|
|
}
|
|
.vz-markdown-strong {
|
|
font-weight: 600;
|
|
}
|
|
.vz-markdown-em {
|
|
font-style: italic;
|
|
}
|
|
.vz-markdown-blockquote, .vz-markdown-details, .vz-markdown-dl, .vz-markdown-p, .vz-markdown-pre, .vz-markdown-table, .vz-markdown-ul, .vz-markdown-ol {
|
|
line-height: 1.5;
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
.vz-markdown-blockquote > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.vz-markdown-blockquote > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
.vz-markdown-content-loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.vz-wave-divider {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
max-height: 150px;
|
|
}
|
|
.vz-wave-divider-svg {
|
|
display: block;
|
|
}
|
|
.vz-wave-divider-svg-path {
|
|
animation: vz-wave-divider 10s linear infinite alternate;
|
|
}
|
|
|
|
@keyframes vz-wave-divider {
|
|
0% {
|
|
d: path("M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z");
|
|
}
|
|
50% {
|
|
d: path("M655.558582,28.4898877 C500.191373,61.6062216 422.833785,83.5422763 266.940085,49.8995879 C112.480383,16.5663637 84.0992497,8.02840272 0,44.7243294 L0,150.727527 L1920,150.727527 L1920,49.8995879 C1580.91676,-34.8808285 1438.10804,73.6768193 1148.0266,38.0019829 C857.945166,2.32714659 810.925791,-4.62644617 655.558582,28.4898877 Z");
|
|
}
|
|
to {
|
|
d: path("M842.322034,38.0019829 C686.954825,71.1183168 623.386282,53.08497 467.492582,19.4422816 C313.032879,-13.8909426 84.0992497,8.02840272 0,44.7243294 L0,150.727527 L1920,150.727527 L1920,76.8685643 C1512.23604,-35.3595639 1568.70222,67.4289432 1278.62078,31.7541069 C988.539347,-3.92072949 997.689243,4.88564905 842.322034,38.0019829 Z");
|
|
}
|
|
}
|
|
.vz-image-modal img {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 80vw;
|
|
max-height: 80vh;
|
|
position: relative;
|
|
}
|
|
|
|
.vz-image-wrapper {
|
|
width: fit-content;
|
|
height: fit-content;
|
|
max-width: 400px;
|
|
max-height: 400px;
|
|
margin: 30px;
|
|
}
|
|
.vz-image-wrapper img {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 400px;
|
|
max-height: 400px;
|
|
border-radius: inherit;
|
|
position: relative;
|
|
}
|
|
|
|
.vz-popup {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-color: var(--background-tertiary);
|
|
display: flex;
|
|
flex-flow: column;
|
|
}
|
|
.vz-popup .titleBar-1it3bQ {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.vz-popup .wordmarkWindows-2dq6rw {
|
|
padding: 0 9px;
|
|
}
|
|
.vz-popup-spinner {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
animation: fadeIn 0.2s forwards;
|
|
}
|
|
.vz-popup-content-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-flow: column;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
animation: fadeIn 0.1s 1s forwards;
|
|
}
|
|
.vz-popup-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
z-index: 0;
|
|
}
|
|
.vz-popup .macButtons-2MuSAC {
|
|
margin-top: 4px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.vz-code-block--theme-dracula .hljs, .vz-code-block--theme-dracula .hljs-subst {
|
|
color: #f8f8f2;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-built_in, .vz-code-block--theme-dracula .hljs-selector-id, .vz-code-block--theme-dracula .hljs-attribute, .vz-code-block--theme-dracula .hljs-link, .vz-code-block--theme-dracula .hljs-meta-string, .vz-code-block--theme-dracula .hljs-doctag {
|
|
color: #8be9fd;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-keyword, .vz-code-block--theme-dracula .hljs-selector-tag, .vz-code-block--theme-dracula .hljs-subst, .vz-code-block--theme-dracula .hljs-meta {
|
|
color: #ff79c6;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-title, .vz-code-block--theme-dracula .hljs-selector-pseudo, .vz-code-block--theme-dracula .hljs-selector-class {
|
|
color: #50fa7b;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-params, .vz-code-block--theme-dracula .hljs-strong {
|
|
font-style: italic;
|
|
color: #ffb86c;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-string, .vz-code-block--theme-dracula .hljs-name, .vz-code-block--theme-dracula .hljs-type, .vz-code-block--theme-dracula .hljs-attr, .vz-code-block--theme-dracula .hljs-emphasis, .vz-code-block--theme-dracula .hljs-symbol, .vz-code-block--theme-dracula .hljs-regexp, .vz-code-block--theme-dracula .hljs-bullet, .vz-code-block--theme-dracula .hljs-addition, .vz-code-block--theme-dracula .hljs-variable, .vz-code-block--theme-dracula .hljs-selector-attr, .vz-code-block--theme-dracula .hljs-template-tag, .vz-code-block--theme-dracula .hljs-template-variable {
|
|
color: #f1fa8c;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-comment, .vz-code-block--theme-dracula .hljs-quote, .vz-code-block--theme-dracula .hljs-deletion {
|
|
color: #6272a4;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-keyword, .vz-code-block--theme-dracula .hljs-selector-tag, .vz-code-block--theme-dracula .hljs-literal, .vz-code-block--theme-dracula .hljs-title, .vz-code-block--theme-dracula .hljs-section, .vz-code-block--theme-dracula .hljs-doctag, .vz-code-block--theme-dracula .hljs-type, .vz-code-block--theme-dracula .hljs-name, .vz-code-block--theme-dracula .hljs-strong {
|
|
font-weight: 700;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-literal, .vz-code-block--theme-dracula .hljs-number, .vz-code-block--theme-dracula .hljs-section {
|
|
color: #bd93f9;
|
|
}
|
|
.vz-code-block--theme-dracula .hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-subst, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-tag {
|
|
color: #f8f8f2;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-emphasis, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-strong {
|
|
color: #a8a8a2;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-bullet, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-link, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-literal, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-number, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-quote, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-regexp {
|
|
color: #ae81ff;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-code, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-section, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-selector-class, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-title {
|
|
color: #a6e22e;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-strong {
|
|
font-weight: 700;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-emphasis {
|
|
font-style: italic;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-attr, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-keyword, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-name, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-selector-tag {
|
|
color: #f92672;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-attribute, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-symbol {
|
|
color: #66d9ef;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-class .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-title, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-params {
|
|
color: #f8f8f2;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-addition, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-built_in, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-builtin-name, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-selector-attr, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-selector-id, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-selector-pseudo, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-string, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-template-variable, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-type, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-variable {
|
|
color: #e6db74;
|
|
}
|
|
.vz-code-block.vz-code-block--theme-monokai-sublime .hljs-comment, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-deletion, .vz-code-block.vz-code-block--theme-monokai-sublime .hljs-meta {
|
|
color: #75715e;
|
|
}
|
|
|
|
.vz-code-block {
|
|
/*
|
|
* Small bottom and right distance is to take into account
|
|
* single line generic code blocks that have no header.
|
|
*/
|
|
}
|
|
.vz-code-block-wrapper .vz-code-block-pre {
|
|
max-width: 100%;
|
|
}
|
|
.vz-code-block-header {
|
|
color: var(--text-normal);
|
|
background: hsl(var(--vz-color-black) / 0.1);
|
|
border-bottom: 1px solid var(--background-tertiary);
|
|
line-height: 20px;
|
|
padding: 0 10px;
|
|
font-family: "Raleway", sans-serif;
|
|
font-size: 0.8em;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-style: initial;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: initial;
|
|
}
|
|
.vz-code-block-line-numbers {
|
|
width: 30px;
|
|
height: 100%;
|
|
color: var(--interactive-muted);
|
|
text-align: right;
|
|
line-height: 1.125rem;
|
|
font-weight: initial;
|
|
font-style: initial;
|
|
}
|
|
.vz-code-block-line-numbers::after {
|
|
content: "1\a 2\a 3\a 4\a 5\a 6\a 7\a 8\a 9\a 10\a 11\a 12\a 13\a 14\a 15\a 16\a 17\a 18\a 19\a 20\a 21\a 22\a 23\a 24\a 25\a 26\a 27\a 28\a 29\a 30\a 31\a 32\a 33\a 34\a 35\a 36\a 37\a 38\a 39\a 40\a 41\a 42\a 43\a 44\a 45\a 46\a 47\a 48\a 49\a 50\a 51\a 52\a 53\a 54\a 55\a 56\a 57\a 58\a 59\a 60\a 61\a 62\a 63\a 64\a 65\a 66\a 67\a 68\a 69\a 70\a 71\a 72\a 73\a 74\a 75\a 76\a 77\a 78\a 79\a 80\a 81\a 82\a 83\a 84\a 85\a 86\a 87\a 88\a 89\a 90\a 91\a 92\a 93\a 94\a 95\a 96\a 97\a 98\a 99\a 100\a 101\a 102\a 103\a 104\a 105\a 106\a 107\a 108\a 109\a 110\a 111\a 112\a 113\a 114\a 115\a 116\a 117\a 118\a 119\a 120\a 121\a 122\a 123\a 124\a 125\a 126\a 127\a 128\a 129\a 130\a 131\a 132\a 133\a 134\a 135\a 136\a 137\a 138\a 139\a 140\a 141\a 142\a 143\a 144\a 145\a 146\a 147\a 148\a 149\a 150\a 151\a 152\a 153\a 154\a 155\a 156\a 157\a 158\a 159\a 160\a 161\a 162\a 163\a 164\a 165\a 166\a 167\a 168\a 169\a 170\a 171\a 172\a 173\a 174\a 175\a 176\a 177\a 178\a 179\a 180\a 181\a 182\a 183\a 184\a 185\a 186\a 187\a 188\a 189\a 190\a 191\a 192\a 193\a 194\a 195\a 196\a 197\a 198\a 199\a 200\a 201\a 202\a 203\a 204\a 205\a 206\a 207\a 208\a 209\a 210\a 211\a 212\a 213\a 214\a 215\a 216\a 217\a 218\a 219\a 220\a 221\a 222\a 223\a 224\a 225\a 226\a 227\a 228\a 229\a 230\a 231\a 232\a 233\a 234\a 235\a 236\a 237\a 238\a 239\a 240\a 241\a 242\a 243\a 244\a 245\a 246\a 247\a 248\a 249\a 250\a 251\a 252\a 253\a 254\a 255\a 256\a 257\a 258\a 259\a 260\a 261\a 262\a 263\a 264\a 265\a 266\a 267\a 268\a 269\a 270\a 271\a 272\a 273\a 274\a 275\a 276\a 277\a 278\a 279\a 280\a 281\a 282\a 283\a 284\a 285\a 286\a 287\a 288\a 289\a 290\a 291\a 292\a 293\a 294\a 295\a 296\a 297\a 298\a 299\a 300\a 301\a 302\a 303\a 304\a 305\a 306\a 307\a 308\a 309\a 310\a 311\a 312\a 313\a 314\a 315\a 316\a 317\a 318\a 319\a 320\a 321\a 322\a 323\a 324\a 325\a 326\a 327\a 328\a 329\a 330\a 331\a 332\a 333\a 334\a 335\a 336\a 337\a 338\a 339\a 340\a 341\a 342\a 343\a 344\a 345\a 346\a 347\a 348\a 349\a 350\a 351\a 352\a 353\a 354\a 355\a 356\a 357\a 358\a 359\a 360\a 361\a 362\a 363\a 364\a 365\a 366\a 367\a 368\a 369\a 370\a 371\a 372\a 373\a 374\a 375\a 376\a 377\a 378\a 379\a 380\a 381\a 382\a 383\a 384\a 385\a 386\a 387\a 388\a 389\a 390\a 391\a 392\a 393\a 394\a 395\a 396\a 397\a 398\a 399\a 400\a 401\a 402\a 403\a 404\a 405\a 406\a 407\a 408\a 409\a 410\a 411\a 412\a 413\a 414\a 415\a 416\a 417\a 418\a 419\a 420\a 421\a 422\a 423\a 424\a 425\a 426\a 427\a 428\a 429\a 430\a 431\a 432\a 433\a 434\a 435\a 436\a 437\a 438\a 439\a 440\a 441\a 442\a 443\a 444\a 445\a 446\a 447\a 448\a 449\a 450\a 451\a 452\a 453\a 454\a 455\a 456\a 457\a 458\a 459\a 460\a 461\a 462\a 463\a 464\a 465\a 466\a 467\a 468\a 469\a 470\a 471\a 472\a 473\a 474\a 475\a 476\a 477\a 478\a 479\a 480\a 481\a 482\a 483\a 484\a 485\a 486\a 487\a 488\a 489\a 490\a 491\a 492\a 493\a 494\a 495\a 496\a 497\a 498\a 499\a 500\a 501\a 502\a 503\a 504\a 505\a 506\a 507\a 508\a 509\a 510\a 511\a 512\a 513\a 514\a 515\a 516\a 517\a 518\a 519\a 520\a 521\a 522\a 523\a 524\a 525\a 526\a 527\a 528\a 529\a 530\a 531\a 532\a 533\a 534\a 535\a 536\a 537\a 538\a 539\a 540\a 541\a 542\a 543\a 544\a 545\a 546\a 547\a 548\a 549\a 550\a 551\a 552\a 553\a 554\a 555\a 556\a 557\a 558\a 559\a 560\a 561\a 562\a 563\a 564\a 565\a 566\a 567\a 568\a 569\a 570\a 571\a 572\a 573\a 574\a 575\a 576\a 577\a 578\a 579\a 580\a 581\a 582\a 583\a 584\a 585\a 586\a 587\a 588\a 589\a 590\a 591\a 592\a 593\a 594\a 595\a 596\a 597\a 598\a 599\a 600\a 601\a 602\a 603\a 604\a 605\a 606\a 607\a 608\a 609\a 610\a 611\a 612\a 613\a 614\a 615\a 616\a 617\a 618\a 619\a 620\a 621\a 622\a 623\a 624\a 625\a 626\a 627\a 628\a 629\a 630\a 631\a 632\a 633\a 634\a 635\a 636\a 637\a 638\a 639\a 640\a 641\a 642\a 643\a 644\a 645\a 646\a 647\a 648\a 649\a 650\a 651\a 652\a 653\a 654\a 655\a 656\a 657\a 658\a 659\a 660\a 661\a 662\a 663\a 664\a 665\a 666\a 667\a 668\a 669\a 670\a 671\a 672\a 673\a 674\a 675\a 676\a 677\a 678\a 679\a 680\a 681\a 682\a 683\a 684\a 685\a 686\a 687\a 688\a 689\a 690\a 691\a 692\a 693\a 694\a 695\a 696\a 697\a 698\a 699\a 700\a 701\a 702\a 703\a 704\a 705\a 706\a 707\a 708\a 709\a 710\a 711\a 712\a 713\a 714\a 715\a 716\a 717\a 718\a 719\a 720\a 721\a 722\a 723\a 724\a 725\a 726\a 727\a 728\a 729\a 730\a 731\a 732\a 733\a 734\a 735\a 736\a 737\a 738\a 739\a 740\a 741\a 742\a 743\a 744\a 745\a 746\a 747\a 748\a 749\a 750\a 751\a 752\a 753\a 754\a 755\a 756\a 757\a 758\a 759\a 760\a 761\a 762\a 763\a 764\a 765\a 766\a 767\a 768\a 769\a 770\a 771\a 772\a 773\a 774\a 775\a 776\a 777\a 778\a 779\a 780\a 781\a 782\a 783\a 784\a 785\a 786\a 787\a 788\a 789\a 790\a 791\a 792\a 793\a 794\a 795\a 796\a 797\a 798\a 799\a 800\a 801\a 802\a 803\a 804\a 805\a 806\a 807\a 808\a 809\a 810\a 811\a 812\a 813\a 814\a 815\a 816\a 817\a 818\a 819\a 820\a 821\a 822\a 823\a 824\a 825\a 826\a 827\a 828\a 829\a 830\a 831\a 832\a 833\a 834\a 835\a 836\a 837\a 838\a 839\a 840\a 841\a 842\a 843\a 844\a 845\a 846\a 847\a 848\a 849\a 850\a 851\a 852\a 853\a 854\a 855\a 856\a 857\a 858\a 859\a 860\a 861\a 862\a 863\a 864\a 865\a 866\a 867\a 868\a 869\a 870\a 871\a 872\a 873\a 874\a 875\a 876\a 877\a 878\a 879\a 880\a 881\a 882\a 883\a 884\a 885\a 886\a 887\a 888\a 889\a 890\a 891\a 892\a 893\a 894\a 895\a 896\a 897\a 898\a 899\a 900\a 901\a 902\a 903\a 904\a 905\a 906\a 907\a 908\a 909\a 910\a 911\a 912\a 913\a 914\a 915\a 916\a 917\a 918\a 919\a 920\a 921\a 922\a 923\a 924\a 925\a 926\a 927\a 928\a 929\a 930\a 931\a 932\a 933\a 934\a 935\a 936\a 937\a 938\a 939\a 940\a 941\a 942\a 943\a 944\a 945\a 946\a 947\a 948\a 949\a 950\a 951\a 952\a 953\a 954\a 955\a 956\a 957\a 958\a 959\a 960\a 961\a 962\a 963\a 964\a 965\a 966\a 967\a 968\a 969\a 970\a 971\a 972\a 973\a 974\a 975\a 976\a 977\a 978\a 979\a 980\a 981\a 982\a 983\a 984\a 985\a 986\a 987\a 988\a 989\a 990\a 991\a 992\a 993\a 994\a 995\a 996\a 997\a 998\a 999\a";
|
|
overflow: hidden;
|
|
position: absolute;
|
|
padding-right: 6px;
|
|
left: -3px;
|
|
top: 0.5em;
|
|
bottom: 0.5em;
|
|
border-right: 1px solid hsl(var(--vz-color-black) / 0.2);
|
|
}
|
|
.vz-code-block-copy-button {
|
|
position: absolute;
|
|
right: 5px;
|
|
bottom: 5px;
|
|
max-height: calc(100% - 10px);
|
|
min-height: 0;
|
|
opacity: 0;
|
|
color: var(--header-primary);
|
|
background: var(--background-floating);
|
|
box-shadow: var(--elevation-medium);
|
|
transition: opacity 0.17s, background-color 0.17s ease, color 0.17s ease;
|
|
}
|
|
.vz-code-block-copy-button.vz-is-copied {
|
|
opacity: 1;
|
|
}
|
|
.vz-code-block-code.vz-has-line-numbers, .vz-code-block-code.vz-has-header, .vz-code-block-code.vz-has-copy-button {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.vz-code-block-code.vz-has-line-numbers {
|
|
padding-left: calc(35px + 0.5em);
|
|
}
|
|
.vz-code-block-code.vz-has-header {
|
|
padding-top: calc(20px + 0.5em);
|
|
}
|
|
.vz-code-block-code.vz-has-header .vz-code-block-line-numbers::after {
|
|
top: calc(20px + 0.5em);
|
|
}
|
|
.vz-code-block-code:hover .vz-code-block-copy-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.vz-embed-table {
|
|
display: grid;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
.vz-embed-table-grid-header {
|
|
text-transform: uppercase;
|
|
font-weight: 600;
|
|
background: var(--background-secondary-alt) !important;
|
|
font-size: 10px !important;
|
|
margin-bottom: 5px;
|
|
border: none !important;
|
|
}
|
|
.vz-embed-table-grid-header:hover {
|
|
border-radius: 0 !important;
|
|
}
|
|
.vz-embed-table-grid-row {
|
|
display: grid;
|
|
grid-template-columns: 220px repeat(auto-fill, 138px) 70px;
|
|
padding: 5px 10px;
|
|
width: auto !important;
|
|
align-items: center;
|
|
column-gap: 20px;
|
|
font-size: 14px;
|
|
border-bottom: 1px solid hsl(var(--vz-color-white) / 0.03);
|
|
}
|
|
.vz-embed-table-grid-row:hover {
|
|
background: var(--background-modifier-accent);
|
|
border-color: transparent;
|
|
border-radius: 8px;
|
|
}
|
|
.vz-embed-table-grid-row-inner {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
.vz-embed-table-grid-row-inner + div {
|
|
max-width: 100%;
|
|
width: fit-content;
|
|
}
|
|
.vz-embed-table-grid-inner-text {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
color: var(--header-primary);
|
|
cursor: pointer;
|
|
}
|
|
.vz-embed-table-grid-inner-text:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.vz-commands-autocomplete .vz-command-icon {
|
|
color: var(--header-primary);
|
|
}
|
|
.vz-commands-autocomplete .vz-command-icon,
|
|
.vz-commands-autocomplete .vz-commands-category-header-icon {
|
|
border-radius: 50%;
|
|
}
|
|
.vz-commands-autocomplete[vz-rail-active] .autocompleteRow-2OthDa {
|
|
padding: 0;
|
|
}
|
|
.vz-commands-autocomplete .listItems-1uJgMC {
|
|
top: 8px;
|
|
right: 8px;
|
|
bottom: 0px;
|
|
left: 8px;
|
|
}
|
|
.vz-commands-autocomplete:not([vz-rail-active]) .autocompleteRow-2OthDa:first-of-type {
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--background-mobile-secondary);
|
|
z-index: 1;
|
|
}
|
|
|
|
.vz-sticky-element {
|
|
display: flex;
|
|
padding: 12px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.vz-sticky-element-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: sticky;
|
|
top: -1px;
|
|
border-radius: 8px;
|
|
background: var(--background-secondary-alt);
|
|
z-index: 1;
|
|
box-shadow: var(--elevation-low);
|
|
flex: 0;
|
|
}
|
|
.vz-sticky-element-wrapper[vz-stuck] {
|
|
background: var(--background-primary);
|
|
border-radius: 0;
|
|
}
|
|
.vz-sticky-element-wrapper[vz-stuck] .vz-sticky-element {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
.vz-sticky-element .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG {
|
|
background: var(--brand-experiment);
|
|
}
|
|
.vz-sticky-element .topPill-3DJJNV .selected-g-kMVV.item-3XjbnG:hover {
|
|
background: var(--brand-experiment);
|
|
}
|
|
|
|
.vz-settings-item {
|
|
/**
|
|
* Used for formatted i18n strings: ****Test****
|
|
*/
|
|
}
|
|
.vz-settings-item strong strong {
|
|
color: var(--text-danger);
|
|
}
|
|
.vz-settings-item-restart-badge, .vz-settings-item-info-badge {
|
|
margin-left: 6px;
|
|
color: var(--header-secondary);
|
|
}
|
|
.vz-settings-item-restart-badge + .vz-icon-wrapper, .vz-settings-item-info-badge + .vz-icon-wrapper {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.vz-settings-category {
|
|
margin-bottom: 16px;
|
|
padding: 0;
|
|
border-radius: 8px;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
/**
|
|
* Targetting any elements after a category that aren't another category.
|
|
*/
|
|
}
|
|
.vz-settings-category + :not(.vz-settings-category) {
|
|
margin-top: 20px;
|
|
}
|
|
.vz-settings-category-meta {
|
|
flex: 1;
|
|
margin: 0;
|
|
}
|
|
.vz-settings-category-icon-wrapper {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 16px;
|
|
flex: 0 auto;
|
|
padding: 4px;
|
|
}
|
|
.vz-settings-category-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.vz-settings-category-title-wrapper {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 16px 24px 16px 16px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
background-color: var(--background-secondary);
|
|
transition: background 0.2s;
|
|
}
|
|
.vz-settings-category-title-wrapper:hover {
|
|
background-color: var(--background-secondary-alt);
|
|
}
|
|
.vz-settings-category-title-icon-wrapper {
|
|
transition: transform 0.2s;
|
|
}
|
|
.vz-settings-category[vz-expanded] .vz-settings-category-title-wrapper {
|
|
background: var(--background-secondary-alt);
|
|
color: var(--interactive-hover);
|
|
border-radius: 8px 8px 0 0;
|
|
}
|
|
.vz-settings-category[vz-expanded] .vz-settings-category-title-icon-wrapper {
|
|
transform: rotate3d(0, 0, 1, 90deg);
|
|
}
|
|
.vz-settings-category-contents {
|
|
padding: 20px;
|
|
}
|
|
.vz-settings-category-inner {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background: var(--background-secondary);
|
|
}
|
|
.vz-settings-category-inner > div:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
.vz-settings-category-inner > div:last-of-type .divider-3573oO {
|
|
display: none;
|
|
}
|
|
|
|
.vz-settings-button-item-inner {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
}
|
|
.vz-settings-button-item-info {
|
|
margin-right: 40px;
|
|
flex: 1;
|
|
}
|
|
|
|
.vz-settings-switch-item-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.vz-settings-checkbox-item {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.vz-hasNoGuildIcon {
|
|
background-image: url("https://i.imgur.com/Fa13xn9.png");
|
|
}
|
|
|
|
.vz-hasNoGameIcon {
|
|
background-image: url("https://i.imgur.com/Fa13xn9.png");
|
|
}
|
|
|
|
.vz-hasNoGameIcon * {
|
|
display: none;
|
|
} |