this brings back most of the color I think
This commit is contained in:
parent
00cab2e093
commit
2d5ad57657
55 changed files with 224 additions and 223 deletions
|
|
@ -47,13 +47,13 @@
|
|||
.vc-notification-close-btn {
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.vc-notification-close-btn:hover {
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -137,5 +137,5 @@
|
|||
|
||||
.vc-notification-log-danger-btn {
|
||||
color: var(--white-500);
|
||||
background-color: var(--button-danger-background);
|
||||
background-color: var(---redesign-button-danger-background);
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
text-align: start;
|
||||
transition: 50ms ease-in;
|
||||
transition-property: background-color, color, border-color, opacity;
|
||||
background: var(--control-background-secondary-default);
|
||||
background: var(--control-secondary-background-primary);
|
||||
color: var(--text-default);
|
||||
white-space: nowrap;
|
||||
|
||||
|
|
@ -63,73 +63,73 @@
|
|||
}
|
||||
|
||||
.vc-btn-primary {
|
||||
background-color: var(--control-background-primary-default);
|
||||
border-color: var(--control-border-primary-default);
|
||||
color: var(--control-text-primary-default);
|
||||
background-color: var(--control-primary-background-default);
|
||||
border-color: var(--control-primary-border-default);
|
||||
color: var(--control-primary-text-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-background-primary-hover);
|
||||
border-color: var(--control-border-primary-hover);
|
||||
color: var(--control-text-primary-hover);
|
||||
background-color: var(--control-primary-background-hover);
|
||||
border-color: var(--control-primary-border-hover);
|
||||
color: var(--control-primary-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-btn-secondary,
|
||||
.vc-btn-link {
|
||||
background-color: var(--control-background-secondary-default);
|
||||
border-color: var(--control-border-secondary-default);
|
||||
color: var(--control-text-secondary-default);
|
||||
background-color: var(--control-secondary-background-default);
|
||||
border-color: var(--control-secondary-border-default);
|
||||
color: var(--control-secondary-text-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-background-secondary-hover);
|
||||
border-color: var(--control-border-secondary-hover);
|
||||
color: var(--control-text-secondary-hover);
|
||||
background-color: var(--control-secondary-background-hover);
|
||||
border-color: var(--control-secondary-border-hover);
|
||||
color: var(--control-secondary-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-btn-dangerPrimary {
|
||||
background-color: var(--control-background-critical-primary-default);
|
||||
border-color: var(--control-border-critical-primary-default);
|
||||
color: var(--control-text-critical-primary-default);
|
||||
background-color: var(--control-critical-primary-background-default);
|
||||
border-color: var(--control-critical-primary-border-default);
|
||||
color: var(--control-critical-primary-text-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-background-critical-primary-hover);
|
||||
border-color: var(--control-border-critical-primary-hover);
|
||||
color: var(--control-text-critical-primary-hover);
|
||||
background-color: var(--control-critical-primary-background-hover);
|
||||
border-color: var(--control-secondary-background-hover);
|
||||
color: var(--control-secondary-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-btn-dangerSecondary {
|
||||
background-color: var(--control-background-critical-secondary-default);
|
||||
border-color: var(--control-border-critical-secondary-default);
|
||||
color: var(--control-text-critical-secondary-default);
|
||||
background-color: var(--control-critical-secondary-background-default);
|
||||
border-color: var(--control-critical-secondary-border-default);
|
||||
color: var(--control-critical-secondary-text-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-background-critical-secondary-hover);
|
||||
border-color: var(--control-border-critical-secondary-hover);
|
||||
color: var(--control-text-critical-secondary-hover);
|
||||
background-color: var(--control-critical-secondary-background-hover);
|
||||
border-color: var(--control-critical-secondary-border-hover);
|
||||
color: var(--control-critical-secondary-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-btn-overlayPrimary {
|
||||
background-color: var(--control-background-overlay-primary-default);
|
||||
border-color: var(--control-border-overlay-primary-default);
|
||||
color: var(--control-text-overlay-primary-default);
|
||||
background-color: var(--control-overlay-primary-background-default);
|
||||
border-color: var(--control-overlay-primary-border-default);
|
||||
color: var(--control-overlay-primary-text-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-background-overlay-primary-hover);
|
||||
border-color: var(--control-border-overlay-primary-hover);
|
||||
color: var(--control-text-overlay-primary-hover);
|
||||
background-color: var(--control-overlay-primary-background-hover);
|
||||
border-color: var(--control-overlay-primary-border-hover);
|
||||
color: var(--control-overlay-primary-text-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.vc-btn-positive {
|
||||
background-color: var(--button-positive-background);
|
||||
border-color: var(--button-positive-border);
|
||||
color: var(--white);
|
||||
background-color: var(--redesign-button-positive-background);
|
||||
border-color: var(--redesign-button-positive-background);
|
||||
color: var(--redesign-button-positive-text);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-positive-background-hover);
|
||||
background-color: var(--redesign-button-positive-pressed-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,9 +139,9 @@
|
|||
color: var(--control-icon-icon-only-default);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--control-background-icon-only-hover);
|
||||
border-color: var(--control-border-icon-only-hover);
|
||||
color: var(--control-icon-icon-only-hover);
|
||||
background-color: var(--control-icon-only-background-hover);
|
||||
border-color: var(--control-icon-only-border-hover);
|
||||
color: var(--control-icon-only-icon-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.vc-card-base {
|
||||
background: var(--card-primary-bg);
|
||||
background: var(--background-surface-high);
|
||||
border-radius: var(--radius-sm, 8px)
|
||||
}
|
||||
|
||||
|
|
@ -8,11 +8,11 @@
|
|||
}
|
||||
|
||||
.vc-card-warning {
|
||||
border: 1px solid var(--info-warning-foreground);
|
||||
border: 1px solid var(--text-status-idle);
|
||||
}
|
||||
|
||||
.vc-card-danger {
|
||||
border: 1px solid var(--info-danger-foreground);
|
||||
border: 1px solid var(--text-status-dnd);
|
||||
}
|
||||
|
||||
.vc-card-defaultPadding {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.vc-error-card {
|
||||
padding: 1em;
|
||||
background-color: var(--info-danger-background, rgb(237 66 69 / 10%));
|
||||
border: 1px solid var(--info-danger-foreground, #ed4245);
|
||||
background-color: var(--background-feedback-critical, rgb(237 66 69 / 10%));
|
||||
border: 1px solid var(--text-status-dnd, #ed4245);
|
||||
border-radius: var(--radius-sm, 8px);
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
|
@ -12,4 +12,4 @@
|
|||
|
||||
.vc-error-card a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.vc-switch-checked {
|
||||
background: var(--brand-500);
|
||||
border-color: var(--control-border-primary-default);
|
||||
border-color: var(--control-primary-border-default);
|
||||
}
|
||||
|
||||
.vc-switch-disabled {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background-base-lower-alt);
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
border-radius: 8px;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
|
|
@ -38,13 +38,13 @@
|
|||
}
|
||||
|
||||
.vc-settings-usercss-ie-buttons > div {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
opacity: .5;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.vc-settings-usercss-ie-buttons > div:hover {
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.vc-addon-card {
|
||||
background-color: var(--card-primary-bg);
|
||||
color: var(--interactive-active);
|
||||
background-color: var(--background-surface-high);
|
||||
color: var(--interactive-icon-active);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
-webkit-box-orient: vertical;
|
||||
/* stylelint-disable-next-line property-no-unknown */
|
||||
box-orient: vertical;
|
||||
color: var(--text-default);
|
||||
}
|
||||
|
||||
.vc-addon-name-author {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
.vc-settings-quickActions-pill {
|
||||
all: unset;
|
||||
background: var(--button-secondary-background);
|
||||
background: var(--redesign-button-secondary-background);
|
||||
color: var(--text-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
.vc-settings-quickActions-pill:hover {
|
||||
background: var(--button-secondary-background-hover);
|
||||
background: var(--redesign-button-secondary-pressed-background);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--elevation-high);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
.vc-changelog-entry.required:hover {
|
||||
background-color: var(--background-base-low);
|
||||
border-left-color: var(--status-warning-foreground);
|
||||
border-left-color: var(--status-warning-background);
|
||||
}
|
||||
|
||||
.vc-changelog-entry-header {
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
|
||||
.vc-changelog-new-plugin-card.required:hover {
|
||||
background-color: var(--background-base-low);
|
||||
border-left-color: var(--status-warning-foreground);
|
||||
border-left-color: var(--status-warning-background);
|
||||
}
|
||||
|
||||
.vc-changelog-new-plugins-compact {
|
||||
|
|
@ -174,17 +174,17 @@
|
|||
.vc-changelog-new-plugin-tag.required {
|
||||
background-color: var(--status-warning);
|
||||
color: var(--white);
|
||||
border: 1px solid var(--status-warning-foreground);
|
||||
border: 1px solid var(--status-warning-background);
|
||||
}
|
||||
|
||||
.vc-changelog-new-plugin-tag.required:hover {
|
||||
background-color: var(--status-warning-foreground);
|
||||
background-color: var(--status-warning-background);
|
||||
}
|
||||
|
||||
.vc-changelog-restart-notice {
|
||||
margin-top: 1em;
|
||||
padding: 0.75em;
|
||||
background-color: var(--info-warning-background);
|
||||
background-color: var(--background-feedback-warning);
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid var(--status-warning);
|
||||
}
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
|
||||
/* Visual refresh support */
|
||||
.visual-refresh .vc-changelog-entry {
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
|
|
@ -327,7 +327,7 @@
|
|||
|
||||
.visual-refresh .vc-changelog-entry.required {
|
||||
border-left: 4px solid var(--status-warning);
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding-left: calc(0.75em - 4px);
|
||||
}
|
||||
|
|
@ -399,12 +399,12 @@
|
|||
}
|
||||
|
||||
.visual-refresh .vc-changelog-entry:hover {
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.visual-refresh .vc-changelog-empty {
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
|
|
@ -414,7 +414,7 @@
|
|||
}
|
||||
|
||||
.visual-refresh .vc-changelog-new-plugins-section {
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-left: 4px solid var(--brand);
|
||||
}
|
||||
|
|
@ -425,7 +425,7 @@
|
|||
}
|
||||
|
||||
.visual-refresh .vc-changelog-log {
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
|
|
@ -438,7 +438,7 @@
|
|||
}
|
||||
|
||||
.visual-refresh .vc-changelog-restart-notice {
|
||||
background-color: var(--card-primary-bg);
|
||||
background-color: var(--background-surface-high);
|
||||
border: 1px solid var(--status-warning);
|
||||
border-left: 4px solid var(--status-warning);
|
||||
}
|
||||
|
|
@ -521,7 +521,7 @@
|
|||
/* Visual refresh support for required plugins */
|
||||
.visual-refresh .vc-changelog-new-plugin-tag.required {
|
||||
background-color: var(--status-warning);
|
||||
border: 1px solid var(--status-warning-foreground);
|
||||
border: 1px solid var(--status-warning-background);
|
||||
}
|
||||
|
||||
.visual-refresh .vc-changelog-new-plugin-card.required {
|
||||
|
|
@ -563,9 +563,9 @@
|
|||
.vc-changelog-delete-button:hover {
|
||||
opacity: 1 !important;
|
||||
color: var(--status-danger) !important;
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
.vc-changelog-log-header:hover .vc-changelog-delete-button {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
.vc-plugin-ui-elements-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
margin-top: 0.5em;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
color: var(--interactive-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
color: var(--interactive-icon-hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -33,12 +33,12 @@
|
|||
transition: background-color .2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--interactive-hover)
|
||||
color: var(--interactive-icon-hover)
|
||||
}
|
||||
}
|
||||
|
||||
.vc-plugins-settings-button:hover {
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
}
|
||||
|
||||
.vc-plugins-filter-controls {
|
||||
|
|
@ -78,9 +78,9 @@
|
|||
|
||||
.vc-plugins-restart-card {
|
||||
padding: 1em;
|
||||
background: var(--info-warning-background);
|
||||
border: 1px solid var(--info-warning-foreground);
|
||||
color: var(--info-warning-foreground);
|
||||
background: var(--background-feedback-warning);
|
||||
border: 1px solid var(--text-status-idle);
|
||||
color: var(--text-status-idle);
|
||||
}
|
||||
|
||||
.vc-plugins-info-icon:not(:hover, :focus) {
|
||||
|
|
@ -89,12 +89,12 @@
|
|||
|
||||
.vc-plugins-restart-button {
|
||||
background-color: var(--background-base-low) !important;
|
||||
border: 1px solid var(--info-warning-foreground) !important;
|
||||
border: 1px solid var(--text-status-idle) !important;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.vc-plugins-restart-button:hover {
|
||||
background-color: var(--info-warning-foreground) !important;
|
||||
background-color: var(--text-status-idle) !important;
|
||||
}
|
||||
|
||||
.vc-plugin-stats {
|
||||
|
|
@ -175,29 +175,29 @@
|
|||
|
||||
.vc-plugins-disable-warning,
|
||||
.vc-plugin-modal-disable-warning {
|
||||
background-color: color-mix(in srgb, var(--button-danger-background) 10%, transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--redesign-button-danger-background) 10%, transparent) !important;
|
||||
border-style: solid !important;
|
||||
border-width: .1rem !important;
|
||||
border-color: color-mix(in srgb, var(--button-danger-background) 80%, transparent) !important;
|
||||
border-color: color-mix(in srgb, var(--redesign-button-danger-background) 80%, transparent) !important;
|
||||
border-radius: 5px !important;
|
||||
color: color-mix(in srgb, var(--button-danger-background) 100%, transparent) !important;
|
||||
color: color-mix(in srgb, var(--redesign-button-danger-background) 100%, transparent) !important;
|
||||
}
|
||||
|
||||
.vc-plugins-disable-warning:hover,
|
||||
.vc-plugin-modal-disable-warning:hover {
|
||||
background-color: color-mix(in srgb, var(--button-danger-background-hover) 40%, transparent) !important;
|
||||
background-color: color-mix(in srgb, var(--redesign-button-danger-background) 40%, transparent) !important;
|
||||
}
|
||||
|
||||
.vc-plugins-confirm-reset,
|
||||
.vc-plugin-modal-confirm-reset {
|
||||
background-color: var(--button-danger-background) !important;
|
||||
color: var(--header-primary);
|
||||
background-color: var(--redesign-button-danger-background) !important;
|
||||
color: var(--redesign-button-danger-pressed-text);
|
||||
}
|
||||
|
||||
.vc-plugins-confirm-reset:hover,
|
||||
.vc-plugin-modal-confirm-reset:hover {
|
||||
background-color: var(--button-danger-background-hover) !important;
|
||||
filter: saturate(80%);
|
||||
background-color: var(--redesign-button-danger-pressed-background) !important;
|
||||
color: var(--redesign-button-danger-pressed-text);
|
||||
}
|
||||
|
||||
.vc-modal-close-button {
|
||||
|
|
@ -250,20 +250,20 @@
|
|||
}
|
||||
|
||||
.visual-refresh .vc-plugins-info-card {
|
||||
background-color: var(--card-primary-bg) !important;
|
||||
background-color: var(--background-surface-high) !important;
|
||||
border: 1px solid var(--border-subtle) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--card-primary-bg) !important;
|
||||
background-color: var(--background-surface-high) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.visual-refresh .vc-plugin-stats {
|
||||
background-color: var(--card-primary-bg) !important;
|
||||
background-color: var(--background-surface-high) !important;
|
||||
border: 1px solid var(--border-subtle) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--card-primary-bg) !important;
|
||||
background-color: var(--background-surface-high) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -298,4 +298,4 @@
|
|||
|
||||
.vc-plugins-ui-elements {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -33,15 +33,15 @@
|
|||
|
||||
.vc-warning-card {
|
||||
padding: 1em;
|
||||
background: var(--info-warning-background);
|
||||
border: 1px solid var(--info-warning-foreground);
|
||||
color: var(--info-warning-foreground);
|
||||
background: var(--background-feedback-warning);
|
||||
border: 1px solid var(--text-status-idle);
|
||||
color: var(--text-status-idle);
|
||||
}
|
||||
|
||||
.vc-backup-restore-card {
|
||||
background-color: var(--info-warning-background);
|
||||
border-color: var(--info-warning-foreground);
|
||||
color: var(--info-warning-foreground);
|
||||
background-color: var(--background-feedback-warning);
|
||||
border-color: var(--text-status-idle);
|
||||
color: var(--text-status-idle);
|
||||
}
|
||||
|
||||
.vc-settings-theme-links {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
|
||||
.vc-cloud-erase-data-danger-btn {
|
||||
color: var(--white-500);
|
||||
background-color: var(--button-danger-background);
|
||||
background-color: var(--redesign-button-danger-background);
|
||||
}
|
||||
|
||||
.vc-settings-modal {
|
||||
|
|
@ -85,4 +85,4 @@
|
|||
|
||||
.vc-settings-modal-close {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@ export function Updatable(props: CommonProps) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<Flex className={Margins.top16} gap="8px">
|
||||
<Flex className={Margins.bottom16} gap="8px">
|
||||
<Button
|
||||
size="small"
|
||||
disabled={isUpdating || isChecking}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
|
||||
|
||||
.vc-joindiscordbutton {
|
||||
background-color: var(--button-secondary-background) !important;
|
||||
background-color: var(--redesign-button-secondary-background) !important;
|
||||
}
|
||||
|
||||
.vc-joindiscordbutton:hover {
|
||||
background-color: var(--button-secondary-background-hover) !important;
|
||||
background-color: var(--redesign-button-secondary-pressed-background) !important;
|
||||
}
|
||||
|
||||
.vc-settings-card-buttons {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.vc-bbr-remove-button:hover {
|
||||
color: var(--button-danger-background-hover);
|
||||
color: var(--redesign-button-danger-pressed-background);
|
||||
}
|
||||
|
||||
.vc-bbr-add-button {
|
||||
|
|
@ -28,4 +28,4 @@
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -492,7 +492,7 @@ export default function ChannelTab(props: ChannelTabsProps & { index: number; })
|
|||
setTimeout(() => closeTab(id), 150);
|
||||
}}
|
||||
>
|
||||
<XIcon size={16} fill="var(--interactive-normal)" />
|
||||
<XIcon size={16} fill="var(--interactive-icon-default)" />
|
||||
</button>}
|
||||
|
||||
{!compact && settings.store.showResizeHandle && <div
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@
|
|||
}
|
||||
|
||||
.vc-channeltabs-bookmark-star:hover {
|
||||
stroke: var(--interactive-hover);
|
||||
stroke: var(--interactive-icon-hover);
|
||||
}
|
||||
|
||||
.vc-channeltabs-bookmark-star-checked {
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
min-width: 0;
|
||||
margin: 0 4px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--background-modifier-accent);
|
||||
border: 1px solid var(--background-mod-muted);
|
||||
transition:
|
||||
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||||
background-color 0.15s ease,
|
||||
|
|
@ -367,7 +367,7 @@
|
|||
}
|
||||
|
||||
.vc-channeltabs-new-button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
|
@ -381,7 +381,7 @@
|
|||
}
|
||||
|
||||
.vc-channeltabs-new-button:hover svg {
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
animation: vc-channeltabs-plus-spin 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -409,7 +409,7 @@
|
|||
}
|
||||
|
||||
.vc-channeltabs-close-button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
|
@ -455,7 +455,7 @@
|
|||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.vc-channeltabs-close-button.vc-channeltabs-close-button-compact:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
transform: translateX(0) scale(1) rotate(90deg) !important;
|
||||
transition:
|
||||
opacity 0.3s ease-out 0.2s,
|
||||
|
|
@ -864,7 +864,7 @@
|
|||
.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-drop-target {
|
||||
transform: none !important;
|
||||
background-color: transparent !important;
|
||||
border-color: var(--background-modifier-accent) !important;
|
||||
border-color: var(--background-mod-muted) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -894,8 +894,8 @@
|
|||
|
||||
/* Selected tab border - disable if setting is off */
|
||||
.vc-channeltabs-container.vc-channeltabs-no-selected-border .vc-channeltabs-tab-selected {
|
||||
border: 1px solid var(--background-modifier-accent) !important;
|
||||
border-bottom: 1px solid var(--background-modifier-accent) !important;
|
||||
border: 1px solid var(--background-mod-muted) !important;
|
||||
border-bottom: 1px solid var(--background-mod-muted) !important;
|
||||
}
|
||||
|
||||
/* Selected tab background - disable if setting is off */
|
||||
|
|
@ -1048,13 +1048,13 @@
|
|||
|
||||
/* Folder expansion */
|
||||
.vc-channeltabs-bookmark.vc-channeltabs-folder-expanded {
|
||||
background-color: var(--background-modifier-selected);
|
||||
background-color: var(--background-mod-strong);
|
||||
}
|
||||
|
||||
/* Folder item styling - indented and visually connected to folder */
|
||||
.vc-channeltabs-bookmark.vc-channeltabs-folder-item {
|
||||
margin-left: 0.5rem;
|
||||
border-left: 2px solid var(--background-modifier-accent);
|
||||
border-left: 2px solid var(--background-mod-muted);
|
||||
padding-left: 0.5rem;
|
||||
opacity: 0.9;
|
||||
background-color: var(--background-secondary-alt);
|
||||
|
|
@ -1062,7 +1062,7 @@
|
|||
|
||||
.vc-channeltabs-bookmark.vc-channeltabs-folder-item:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
/* Active bookmark visual indicator */
|
||||
|
|
@ -1127,11 +1127,11 @@
|
|||
color: var(--header-primary);
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--background-modifier-accent);
|
||||
box-shadow: 0 0 0 1px var(--background-mod-muted);
|
||||
}
|
||||
|
||||
.channelTabs-keybind-button:hover:not(:disabled) {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
border-color: var(--brand-experiment);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
|
||||
|
|
|
|||
|
|
@ -720,11 +720,11 @@
|
|||
color: var(--header-primary);
|
||||
transition: all 0.2s ease;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px var(--background-modifier-accent);
|
||||
box-shadow: 0 0 0 1px var(--background-mod-muted);
|
||||
}
|
||||
|
||||
.vc-command-palette-keybind-button:hover:not(:disabled) {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
border-color: var(--brand-experiment);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
|
||||
|
|
@ -783,4 +783,4 @@
|
|||
|
||||
/* stylelint-enable no-descending-specificity */
|
||||
|
||||
/* fuck you css */
|
||||
/* fuck you css */
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
.vc-custom-sounds-seasonal-title {
|
||||
margin-top: 16px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--background-modifier-accent);
|
||||
border-top: 1px solid var(--background-mod-muted);
|
||||
}
|
||||
|
||||
.vc-custom-sounds-sound-section {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.vc-cmt-info-card {
|
||||
background-color: var(--info-help-background);
|
||||
border: 1px solid var(--info-help-foreground);
|
||||
background-color: var(--background-feedback-info);
|
||||
border: 1px solid var(--icon-feedback-info);
|
||||
padding: 8px;
|
||||
border-radius: var(--radius-xs);
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.vc-cmt-demo-message-container{
|
||||
.vc-cmt-demo-message-container {
|
||||
position: sticky;
|
||||
background: var(--background-base-lowest);
|
||||
padding: 10px 0;
|
||||
|
|
@ -14,4 +14,4 @@
|
|||
top: -8px;
|
||||
border: solid grey 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
|
||||
.eq-googlefonts-card:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
background: var(--background-mod-subtle);
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.vc-boo-ghosted-entry:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
.vc-boo-user-info {
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@
|
|||
}
|
||||
|
||||
.vc-github-repos-table tbody tr:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
.vc-github-repos-table td {
|
||||
|
|
@ -183,8 +183,8 @@
|
|||
}
|
||||
|
||||
.vc-github-repos-table-star-icon {
|
||||
color: var(--info-warning-foreground);
|
||||
fill: var(--info-warning-foreground);
|
||||
color: var(--text-status-idle);
|
||||
fill: var(--text-status-idle);
|
||||
}
|
||||
|
||||
.vc-github-repos-modal-footer-close {
|
||||
|
|
@ -221,11 +221,11 @@
|
|||
|
||||
.vc-github-repos-link {
|
||||
cursor: pointer;
|
||||
fill: var(--interactive-normal);
|
||||
fill: var(--interactive-icon-default);
|
||||
}
|
||||
|
||||
.vc-github-repos-name {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
.vc-github-repos-header-repo {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { JSX } from "react";
|
||||
|
||||
const OverFlowIcon = ({ width = 24, height = 24, color = "var(--interactive-normal)", className, ...rest }) => (
|
||||
const OverFlowIcon = ({ width = 24, height = 24, color = "var(--interactive-icon-default)", className, ...rest }) => (
|
||||
<svg
|
||||
{...rest}
|
||||
width={width}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ $modifier: var(--input-border);
|
|||
cursor: pointer;
|
||||
padding-left: 0px;
|
||||
margin: 0px 14px 6px 0px;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +115,7 @@ $modifier: var(--input-border);
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-style: solid;
|
||||
/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.vc-icon-icon {
|
||||
margin-left: 5%;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
transition: transform 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
|
|
@ -13,12 +13,12 @@
|
|||
.vc-icon-icon polygon,
|
||||
.vc-icon-icon circle,
|
||||
.vc-icon-icon rect {
|
||||
fill: var(--interactive-normal);
|
||||
fill: var(--interactive-icon-default);
|
||||
transition: fill 0.15s ease;
|
||||
}
|
||||
|
||||
.vc-icon-container:hover .vc-icon-icon {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
transform: scale(1.020);
|
||||
}
|
||||
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.vc-icon-container:hover .vc-icon-icon polygon,
|
||||
.vc-icon-container:hover .vc-icon-icon circle,
|
||||
.vc-icon-container:hover .vc-icon-icon rect {
|
||||
fill: var(--interactive-active);
|
||||
fill: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
.vc-icon-modal-main-container {
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
.vc-icon-modal-color-tooltip:hover {
|
||||
background-color: var(--info-help-background);
|
||||
background-color: var(--background-feedback-info);
|
||||
}
|
||||
|
||||
.vc-save-modal {
|
||||
|
|
@ -134,4 +134,4 @@
|
|||
.vc-ic-modals-footer {
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
}
|
||||
|
|
@ -139,7 +139,7 @@ export default definePlugin({
|
|||
});
|
||||
}}
|
||||
>
|
||||
<Deafen color={"var(--interactive-active)"} />
|
||||
<Deafen color={"var(--interactive-icon-active)"} />
|
||||
</Button>
|
||||
)}
|
||||
</Tooltip>
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@
|
|||
|
||||
.vc-command-palette-key-hover {
|
||||
padding: 5px;
|
||||
background-color: var(--background-modifier-selected);
|
||||
background-color: var(--background-mod-strong);
|
||||
border-radius: 3px;
|
||||
font-family: var(--font-display);
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
padding-left: 0.8rem;
|
||||
}
|
||||
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
.vc-command-palette-registrar {
|
||||
position: absolute;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
right: 1.6rem;
|
||||
|
|
@ -102,11 +102,11 @@
|
|||
height: 30px;
|
||||
width: 128px;
|
||||
color: var(--white-500);
|
||||
background-color: var(--button-secondary-background);
|
||||
background-color: var(--redesign-button-secondary-background);
|
||||
border-radius: 10px;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.vc-command-palette-key-recorder-button:hover {
|
||||
background-color: var(--button-secondary-background-hover);
|
||||
background-color: var(--redesign-button-secondary-background);
|
||||
}
|
||||
|
|
@ -94,8 +94,8 @@
|
|||
margin-top: 18px;
|
||||
width: 20rem;
|
||||
background: linear-gradient(to right,
|
||||
var(--button-danger-background) calc(var(--progress) - 1%),
|
||||
var(--button-danger-background-active) var(--progress)) !important;
|
||||
var(--redesign-button-danger-background) calc(var(--progress) - 1%),
|
||||
var(--redesign-button-danger-pressed-background) var(--progress)) !important;
|
||||
border-radius: 420rem;
|
||||
|
||||
--progress: 0%;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
background-color: transparent;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
}
|
||||
|
||||
.vc-media-playback-speed-icon:hover {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
}
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
position: absolute;
|
||||
top: -24px;
|
||||
right: -24px;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -72,11 +72,11 @@
|
|||
}
|
||||
|
||||
.vc-log-toolbox-btn svg {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
}
|
||||
|
||||
:is(.vc-log-toolbox-btn:hover, .vc-log-toolbox-btn[class*="selected"]) svg {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
.folder-upload-container {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export const PickerSidebar = ({ packMetas, onPackSelect }: SidebarProps) => {
|
|||
}}
|
||||
>
|
||||
<RecentlyUsedIcon width={24} height={24} color={
|
||||
activePack === RecentPack ? " var(--interactive-active)" : "var(--interactive-normal)"
|
||||
activePack === RecentPack ? " var(--interactive-icon-active)" : "var(--interactive-icon-default)"
|
||||
} />
|
||||
</StickerCategory>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
/* stylelint-disable function-url-quotes */
|
||||
.vc-more-stickers-icon {
|
||||
fill: var(--interactive-normal);
|
||||
fill: var(--interactive-icon-default);
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.vc-more-stickers-icon:hover,
|
||||
.vc-more-stickers-icon:focus-visible,
|
||||
.vc-more-stickers-icon-active {
|
||||
fill: var(--interactive-active);
|
||||
fill: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
.vc-more-stickers-picker-container {
|
||||
|
|
@ -160,7 +160,7 @@
|
|||
|
||||
.vc-more-stickers-sticker-category {
|
||||
border-radius: 4px;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
cursor: pointer;
|
||||
height: 32px;
|
||||
margin-bottom: 8px;
|
||||
|
|
@ -168,16 +168,16 @@
|
|||
|
||||
.vc-more-stickers-sticker-category:hover,
|
||||
.vc-more-stickers-sticker-category-active {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
.vc-more-stickers-clear-icon {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vc-more-stickers-clear-icon:hover {
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
}
|
||||
|
||||
.vc-more-stickers-picker-content-list-wrapper {
|
||||
|
|
@ -272,7 +272,7 @@
|
|||
}
|
||||
|
||||
.vc-more-stickers-picker-content-header-header:hover {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
}
|
||||
|
||||
.vc-more-stickers-picker-content-inspector-title-secondary {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
margin: 0 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
}
|
||||
|
||||
.vc-spotify-button:hover {
|
||||
color: var(--interactive-hover);
|
||||
background-color: var(--background-modifier-selected);
|
||||
color: var(--interactive-icon-hover);
|
||||
background-color: var(--background-mod-strong);
|
||||
}
|
||||
|
||||
.vc-spotify-button-icon {
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
}
|
||||
|
||||
#vc-spotify-progress-bar > [class^="slider"] [class^="barFill"] {
|
||||
background-color: var(--interactive-active);
|
||||
background-color: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
#vc-spotify-progress-bar > [class^="slider"]:hover [class^="barFill"] {
|
||||
|
|
@ -192,9 +192,9 @@
|
|||
width: 16px !important;
|
||||
margin-top: calc(17px/-2 + var(--bar-offset)/2);
|
||||
margin-left: -0.5px;
|
||||
background-color: var(--interactive-active);
|
||||
border-color: var(--interactive-normal);
|
||||
color: var(--interactive-normal);
|
||||
background-color: var(--interactive-icon-active);
|
||||
border-color: var(--interactive-icon-default);
|
||||
color: var(--interactive-icon-default);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
margin-top: calc(13px/-2 + var(--bar-offset)/2);
|
||||
margin-left: -0.5px;
|
||||
border: unset;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
margin: 0 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
}
|
||||
|
||||
.eq-tdl-button:hover {
|
||||
color: var(--interactive-hover);
|
||||
background-color: var(--background-modifier-selected);
|
||||
color: var(--interactive-icon-hover);
|
||||
background-color: var(--background-mod-strong);
|
||||
}
|
||||
|
||||
.eq-tdl-button svg {
|
||||
|
|
@ -205,4 +205,4 @@
|
|||
|
||||
.eq-tdl-time-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
margin-top: calc(13px/-2 + var(--bar-offset)/2);
|
||||
margin-left: -0.5px;
|
||||
border: unset;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
margin: 0 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: none;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -97,8 +97,8 @@
|
|||
}
|
||||
|
||||
.vc-ytm-button:hover {
|
||||
color: var(--interactive-hover);
|
||||
background-color: var(--background-modifier-selected);
|
||||
color: var(--interactive-icon-hover);
|
||||
background-color: var(--background-mod-strong);
|
||||
}
|
||||
|
||||
.vc-ytm-button svg {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
width: var(--space-32);
|
||||
min-width: 0;
|
||||
height: var(--space-32);
|
||||
color: var(--interactive-normal) !important;
|
||||
color: var(--interactive-icon-default) !important;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(2);
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: var(--info-danger-background);
|
||||
background: var(--background-feedback-critical);
|
||||
border-radius: 5px;
|
||||
color: var(--text-normal);
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
--toastnotifications-title-line-height: 1.25rem;
|
||||
|
||||
/* Close Button */
|
||||
--toastnotifications-close-button-color: var(--interactive-normal);
|
||||
--toastnotifications-close-button-hover-color: var(--interactive-hover);
|
||||
--toastnotifications-close-button-color: var(--interactive-icon-default);
|
||||
--toastnotifications-close-button-hover-color: var(--interactive-icon-hover);
|
||||
--toastnotifications-close-button-opacity: 0.5;
|
||||
--toastnotifications-close-button-hover-opacity: 1;
|
||||
|
||||
|
|
@ -148,4 +148,4 @@
|
|||
|
||||
.visual-refresh .toastnotifications-notification-root {
|
||||
background-color: var(--background-base-low);
|
||||
}
|
||||
}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.remove-all-button {
|
||||
cursor: pointer;
|
||||
background-color: var(--button-danger-background);
|
||||
background-color: var(--redesign-button-danger-background);
|
||||
color: var(--white-500);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
.remove-button {
|
||||
cursor: pointer;
|
||||
background-color: var(--button-danger-background);
|
||||
background-color: var(--redesign-button-danger-background);
|
||||
color: var(--white-500);
|
||||
transition: background-color 0.2s ease;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@ export default definePlugin({
|
|||
overflow: "hidden",
|
||||
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "var(--interactive-normal)",
|
||||
backgroundColor: "var(--interactive-icon-default)",
|
||||
color: "var(--background-base-lower)",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { classNameFactory } from "@api/Styles";
|
||||
import { ErrorCard } from "@components/ErrorCard";
|
||||
import { HeadingPrimary,HeadingSecondary } from "@components/Heading";
|
||||
import { HeadingPrimary, HeadingSecondary } from "@components/Heading";
|
||||
import { Paragraph } from "@components/Paragraph";
|
||||
import { relativeLuminance } from "@plugins/clientTheme/utils/colorUtils";
|
||||
import { createOrUpdateThemeColorVars } from "@plugins/clientTheme/utils/styleUtils";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.vc-cfc-button {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
cursor: pointer;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.vc-cfc-button:hover {
|
||||
color: var(--interactive-hover);
|
||||
}
|
||||
color: var(--interactive-icon-hover);
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
.vc-decor-danger-btn {
|
||||
color: var(--white-500);
|
||||
background-color: var(--button-danger-background);
|
||||
background-color: var(--redesign-button-danger-background);
|
||||
}
|
||||
|
||||
.vc-decor-change-decoration-modal-content {
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default definePlugin({
|
|||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="var(--interactive-normal)"
|
||||
fill="var(--interactive-icon-default)"
|
||||
>
|
||||
<path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
|
||||
<path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ function ToggleActivityComponent(activity: IgnoredActivity, isPlaying = false) {
|
|||
const { ignoredActivities } = s;
|
||||
|
||||
if (ignoredActivities.some(act => act.id === activity.id)) return ToggleIconOff(activity, "var(--status-danger)");
|
||||
return ToggleIconOn(activity, isPlaying ? "var(--green-300)" : "var(--interactive-normal)");
|
||||
return ToggleIconOn(activity, isPlaying ? "var(--green-300)" : "var(--interactive-icon-default)");
|
||||
}
|
||||
|
||||
function handleActivityToggle(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, activity: IgnoredActivity) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.messagelogger-deleted {
|
||||
--text-default: var(--status-danger, #f04747);
|
||||
--interactive-normal: var(--status-danger, #f04747);
|
||||
--interactive-icon-default: var(--status-danger, #f04747);
|
||||
--text-muted: var(--status-danger, #f04747);
|
||||
--embed-title: var(--red-460, #be3535);
|
||||
--text-link: var(--red-460, #be3535);
|
||||
--header-primary: var(--red-460, #be3535);
|
||||
}
|
||||
}
|
||||
|
|
@ -66,11 +66,11 @@
|
|||
}
|
||||
|
||||
.vc-permviewer-modal-list-item:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
.vc-permviewer-modal-list-item-active {
|
||||
background-color: var(--background-modifier-selected);
|
||||
background-color: var(--background-mod-strong);
|
||||
}
|
||||
|
||||
.vc-permviewer-modal-list-item-text {
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
}
|
||||
|
||||
.vc-permviewer-modal-perms-item-icon {
|
||||
border: 1px solid var(--background-modifier-selected);
|
||||
border: 1px solid var(--background-mod-strong);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
|
@ -135,13 +135,13 @@
|
|||
}
|
||||
|
||||
.vc-permviewer-modal-perms-item .vc-info-icon:hover {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
/* copy pasted from discord cause impossible to webpack find */
|
||||
.vc-permviewer-role-button {
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
border: 1px solid var(--user-profile-border);
|
||||
/* stylelint-disable-next-line value-no-vendor-prefix */
|
||||
width: -moz-fit-content;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.vc-pip-button {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
}
|
||||
|
||||
.vc-pip-button:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
color: var(--interactive-hover);
|
||||
}
|
||||
background-color: var(--background-mod-subtle);
|
||||
color: var(--interactive-icon-hover);
|
||||
}
|
||||
|
|
@ -28,10 +28,10 @@
|
|||
.vc-pindms-collapse-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
transform: rotate(90deg)
|
||||
}
|
||||
|
||||
.vc-pindms-collapsed .vc-pindms-collapse-icon {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.vc-ranb-button {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
padding: 0 0.5em;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
|
|
@ -8,5 +8,5 @@
|
|||
}
|
||||
|
||||
.vc-ranb-button:hover {
|
||||
color: var(--interactive-active);
|
||||
color: var(--interactive-icon-active);
|
||||
}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
.vc-gp-tab {
|
||||
border-bottom: 2px solid transparent;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
cursor: pointer;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
.vc-gp-tab:where(.vc-gp-selected, :hover, :focus) {
|
||||
border-bottom-color: var(--interactive-active);
|
||||
border-bottom-color: var(--interactive-icon-active);
|
||||
}
|
||||
|
||||
.vc-gp-info {
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
|
||||
.vc-gp-member-row:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
||||
.vc-gp-member-content {
|
||||
|
|
@ -165,5 +165,5 @@
|
|||
}
|
||||
|
||||
.vc-gp-scroller [class^="listRow"]:hover {
|
||||
background-color: var(--background-modifier-hover);
|
||||
background-color: var(--background-mod-subtle);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.vc-uvs-speaker {
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.vc-uvs-clickable:hover {
|
||||
color: var(--interactive-hover);
|
||||
color: var(--interactive-icon-hover);
|
||||
}
|
||||
|
||||
.vc-uvs-profile-speaker {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.vc-voice-download {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--interactive-normal);
|
||||
color: var(--interactive-icon-default);
|
||||
margin-left: 12px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vc-voice-download:hover {
|
||||
color: var(--interactive-active);
|
||||
}
|
||||
color: var(--interactive-icon-active);
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
.vc-vmsg-preview-indicator {
|
||||
background: var(--button-secondary-background);
|
||||
background: var(--redesign-button-secondary-background);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue