feat: more theming

This commit is contained in:
2024-04-26 01:46:09 +02:00
parent b9cd147c0e
commit 326de208d6
6 changed files with 191 additions and 7 deletions

View File

@@ -0,0 +1,83 @@
/**
* @name Matugen
* @author Theaninova
* @version 6.9.0
* @description reactive material theme
*/
@import url("https://clearvision.github.io/ClearVision-v6/main.css");
:root {
--text-normal: {{colors.on_surface.default.hex}};
--main-color: {{colors.primary.default.hex}};
--hover-color: {{colors.tertiary.default.hex}};
--success-color: {{colors.ok.default.hex}};
--danger-color: {{colors.error.default.hex}};
--url-color: var(--main-color);
--background-image: transparent;
--background-shading: 0%;
--background-position: center;
--background-size: cover;
--background-repeat: no-repeat;
--background-attachment: fixed;
--background-brightness: 100%;
--background-contrast: 100%;
--background-saturation: 100%;
--background-grayscale: 0%;
--background-invert: 0%;
--background-blur: 0px;
--background-overlay: rgba({{colors.surface.default.red}}, {{colors.surface.default.green}}, {{colors.surface.default.blue}}, 0.8);
--user-popout-image: url("https://clearvision.github.io/images/sapphire.jpg");
--user-popout-position: center;
--user-popout-size: cover;
--user-popout-repeat: no-repeat;
--user-popout-attachment: fixed;
--user-popout-brightness: 100%;
--user-popout-contrast: 100%;
--user-popout-saturation: 100%;
--user-popout-grayscale: 0%;
--user-popout-invert: 0%;
--user-popout-blur: 3px;
--user-modal-image: url("https://clearvision.github.io/images/sapphire.jpg");
--user-modal-position: center;
--user-modal-size: cover;
--user-modal-repeat: no-repeat;
--user-modal-attachment: fixed;
--user-modal-brightness: 100%;
--user-modal-contrast: 100%;
--user-modal-saturation: 100%;
--user-modal-grayscale: 0%;
--user-modal-invert: 0%;
--user-modal-blur: 3px;
--home-icon: url("https://clearvision.github.io/icons/discord.svg");
--home-position: center;
--home-size: 40px;
--channel-unread: var(--main-color);
--channel-color: {{colors.on_surface.default.hex}};
--muted-color: {{colors.outline.default.hex}};
--online-color: {{colors.green.default.hex}};
--idle-color: {{colors.yellow.default.hex}};
--dnd-color: {{colors.red.default.hex}};
--streaming-color: {{colors.magenta.default.hex}};
--offline-color: {{colors.outline.default.hex}};
--main-font: NotoSans Nerd Font;
--code-font: FiraCode Nerd Font;
--channels-width: 220px;
--members-width: 240px;
--backdrop-overlay: rgba({{colors.surface.default.red}}, {{colors.surface.default.green}}, {{colors.surface.default.blue}}, 0.8);
--backdrop-image: var(--background-image);
--backdrop-position: var(--background-position);
--backdrop-size: var(--background-size);
--backdrop-repeat: var(--background-repeat);
--backdrop-attachment: var(--background-attachment);
--backdrop-brightness: var(--background-brightness);
--backdrop-contrast: var(--background-contrast);
--backdrop-saturation: var(--background-saturation);
--backdrop-invert: var(--background-invert);
--backdrop-grayscale: var(--background-grayscale);
--backdrop-sepia: var(--background-sepia);
--backdrop-blur: var(--background-blur);
--bd-blue: var(--main-color);
--bd-blue-hover: var(--hover-color);
--bd-blue-active: var(--hover-color);
}