1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-26 06:22:50 -05:00
Files
DankMaterialShell/quickshell/matugen/templates/vesktop-base.css
2025-11-12 17:18:45 -05:00

218 lines
10 KiB
CSS

/**
* @name DMS Discord Base CSS
* @author DMS Team
* @version 3.0.0
* @description Minimal Discord color theme - stock layout with DMS colors
* @source https://github.com/yourusername/dankdots
*/
body {
--font-primary: var(--font), 'gg sans';
--font-display: var(--font), 'gg sans';
--font-code: var(--code-font), 'gg mono';
}
@property --colors {
syntax: 'off | on';
inherits: false;
initial-value: on;
}
@container root style(--colors: on) {
.visual-refresh body,
.visual-refresh .theme-dark:not(.custom-user-profile-theme),
.visual-refresh .theme-light:not(.custom-user-profile-theme) {
--activity-card-background: var(--bg-3);
--autocomplete-bg: var(--bg-3);
--background-accent: var(--bg-4);
--background-floating: var(--bg-3);
--background-nested-floating: var(--bg-2);
--background-mentioned: color-mix(in srgb, var(--accent-2), transparent 90%);
--background-mentioned-hover: color-mix(in srgb, var(--accent-2), transparent 85%);
--background-message-highlight: color-mix(in srgb, var(--text-3), transparent 95%);
--background-message-highlight-hover: color-mix(in srgb, var(--text-3), transparent 92%);
--background-message-hover: var(--message-hover);
--background-primary: var(--bg-2);
--background-secondary: var(--bg-3);
--background-secondary-alt: var(--bg-3);
--background-tertiary: var(--bg-2);
--bg-base-primary: var(--bg-2);
--bg-base-secondary: var(--bg-2);
--bg-base-tertiary: var(--bg-3);
--background-mod-subtle: var(--hover);
--background-mod-normal: var(--active);
--background-mod-strong: var(--active-2);
--background-base-low: var(--bg-2);
--background-base-lower: var(--bg-2);
--background-base-lowest: var(--bg-2);
--background-surface-high: var(--bg-3);
--background-surface-higher: var(--bg-4);
--background-surface-highest: var(--bg-4);
--bg-surface-overlay: var(--bg-2);
--bg-surface-raised: var(--bg-3);
--chat-background-default: var(--bg-3);
--chat-text-muted: var(--text-5);
--input-background: var(--bg-3);
--modal-background: var(--bg-2);
--modal-footer-background: var(--bg-2);
--background-modifier-accent: var(--hover);
--background-modifier-active: var(--active);
--background-modifier-hover: var(--hover);
--background-modifier-selected: var(--active);
--bg-mod-faint: var(--hover);
--bg-mod-subtle: var(--bg-3);
--bg-mod-strong: var(--bg-3);
--bg-brand: var(--accent-2);
--border-faint: transparent;
--border-subtle: transparent;
--border-normal: transparent;
--border-strong: transparent;
--input-border: transparent;
--button-danger-background: var(--red-3);
--button-danger-background-active: var(--red-5);
--button-danger-background-hover: var(--red-4);
--button-danger-background-disabled: var(--red-5);
--button-danger-border: transparent;
--button-filled-brand-text: var(--text-0);
--button-filled-brand-background: var(--accent-3);
--button-filled-brand-background-active: var(--accent-5);
--button-filled-brand-background-hover: var(--accent-4);
--button-filled-brand-border: transparent;
--button-filled-brand-inverted-background: var(--text-1);
--button-filled-brand-inverted-background-active: var(--text-3);
--button-filled-brand-inverted-background-hover: var(--text-2);
--button-filled-brand-inverted-text: var(--bg-1);
--button-filled-white-background: var(--text-1);
--button-filled-white-background-active: var(--text-3);
--button-filled-white-background-hover: var(--text-2);
--button-filled-white-text: var(--bg-1);
--button-outline-danger-background: var(--bg-3);
--button-outline-danger-background-active: var(--text-5);
--button-outline-danger-background-hover: var(--bg-2);
--button-outline-danger-border: transparent;
--button-outline-danger-border-active: transparent;
--button-outline-danger-border-hover: transparent;
--button-outline-danger-text: var(--red-1);
--button-outline-danger-text-active: var(--red-1);
--button-outline-danger-text-hover: var(--red-1);
--button-outline-primary-background: transparent;
--button-outline-primary-background-active: var(--active);
--button-outline-primary-background-hover: var(--hover);
--button-outline-primary-border: transparent;
--button-outline-primary-border-active: transparent;
--button-outline-primary-border-hover: transparent;
--button-outline-primary-text: var(--text-3);
--button-outline-primary-text-active: var(--text-3);
--button-outline-primary-text-hover: var(--text-3);
--button-positive-background: var(--green-2);
--button-positive-background-active: var(--green-4);
--button-positive-background-hover: var(--green-3);
--button-positive-background-disabled: var(--green-4);
--button-positive-border: transparent;
--button-secondary-background: var(--bg-4);
--button-secondary-background-active: var(--text-5);
--button-secondary-background-hover: var(--bg-3);
--button-secondary-background-disabled: var(--bg-3);
--button-secondary-text: var(--text-3);
--button-transparent-background: var(--hover);
--button-transparent-background-active: var(--active-2);
--button-transparent-background-hover: var(--active);
--button-transparent-text: var(--text-3);
--redesign-button-secondary-text: var(--text-3);
--card-primary-bg: var(--bg-3);
--card-secondary-bg: var(--bg-4);
--channel-icon: var(--text-4);
--channels-default: var(--text-4);
--embed-title: var(--text-2);
--header-primary: var(--text-2);
--header-secondary: var(--text-4);
--header-muted: var(--text-4);
--icon-muted: var(--text-5);
--icon-primary: var(--text-3);
--icon-secondary: var(--text-4);
--icon-tertiary: var(--text-4);
--text-brand: var(--accent-1);
--text-danger: var(--red-1);
--text-link: var(--accent-1);
--text-low-contrast: var(--text-4);
--text-muted: var(--text-5);
--text-muted-on-default: var(--text-4);
--text-normal: var(--text-3);
--text-positive: var(--green-1);
--text-primary: var(--text-3);
--text-secondary: var(--text-4);
--text-warning: var(--yellow-1);
--text-default: var(--text-3);
--text-tertiary: var(--text-4);
--user-profile-overlay-background: var(--bg-2);
--user-profile-overlay-background-hover: var(--bg-4);
--status-danger: var(--red-2);
--status-danger-background: var(--red-3);
--status-danger-text: var(--white);
--status-dnd: var(--dnd);
--status-idle: var(--idle);
--status-offline: var(--offline);
--status-online: var(--online);
--status-positive: var(--green-2);
--status-positive-background: var(--green-2);
--status-positive-text: var(--white);
--status-speaking: var(--green-2);
--status-warning: var(--yellow-2);
--interactive-normal: var(--text-4);
--interactive-hover: var(--text-3);
--interactive-active: var(--text-3);
--interactive-muted: var(--text-5);
--mention-foreground: var(--accent-1);
--mention-background: color-mix(in srgb, var(--accent-2), transparent 90%);
--channel-text-area-placeholder: var(--text-5);
--message-reacted-text: var(--text-2);
--message-reacted-background: color-mix(in srgb, var(--accent-2), transparent 90%);
--custom-channel-members-bg: var(--bg-2);
--redesign-input-control-selected: var(--accent-2);
--scrollbar-auto-thumb: var(--bg-4);
--scrollbar-auto-track: transparent;
--scrollbar-thin-thumb: var(--bg-4);
--scrollbar-thin-track: transparent;
--white: var(--text-0);
--white-500: var(--text-0);
--redesign-button-overlay-alpha-text: var(--text-2);
--brand-360: var(--accent-2);
--brand-500: var(--accent-2);
--blurple-50: var(--accent-2);
--red-400: var(--red-2);
--red-500: var(--red-3);
--green-360: var(--green-2);
--primary-400: var(--text-4);
--deprecated-text-input-bg: var(--bg-3);
--deprecated-text-input-border: transparent;
--background-code: var(--bg-3);
}
.visual-refresh {
.bg__960e4 { background: var(--bg-1); }
.base_c48ade { background: var(--bg-1); }
.colorPickerSwatch__459fb[style*="rgb(88, 101, 242)"],
.newBadge_faa96b,
.mentioned__5126c:before { background-color: var(--accent-2) !important; }
.botTagRegular__82f07 { background-color: var(--accent-2); }
.container__87bf1.checked__87bf1 { background-color: var(--accent-2) !important; }
.container__87bf1.checked__87bf1 .slider__87bf1 > svg > path { fill: var(--accent-2) !important; }
.newMessagesBar__0f481 { background-color: var(--accent-3); }
.barFill_a562c8 { background-color: var(--accent-2) !important; }
::selection,
.highlight { background: var(--accent-3); color: var(--text-0); }
rect[fill='#82838b'] { fill: var(--offline); }
.status_a423bd[style='background-color: rgb(130, 131, 139);'] { background-color: var(--offline) !important; }
rect[fill='#43a25a'],
path[fill='#43a25a'],
path[fill='var(--status-positive)'] { fill: var(--online); }
.status_a423bd[style='background-color: rgb(67, 162, 90);'] { background-color: var(--online) !important; }
rect[fill='#ca9654'] { fill: var(--idle); }
.status_a423bd[style='background-color: rgb(202, 150, 84);'] { background-color: var(--idle) !important; }
rect[fill='#d83a42'] { fill: var(--dnd); }
.status_a423bd[style='background-color: rgb(216, 58, 66);'] { background-color: var(--dnd) !important; }
rect[fill='#9147ff'] { fill: var(--streaming); }
div[style*='background-color: rgb(67, 162, 90)'] { background-color: var(--online) !important; }
}
}