mirror of
https://github.com/noctalia-dev/noctalia-shell.git
synced 2026-05-11 17:08:27 +08:00
Merge pull request #859 from singhantariksh/main
refactor(vesktop.css): updated from hyprluna to midnight vesktop theme
This commit is contained in:
Lysec
+139
-234
@@ -1,256 +1,161 @@
|
||||
/**
|
||||
* @name LunarCord (HyprLuna theme)
|
||||
* @description A dark, minimaldiscord theme with Material You colors.
|
||||
* @author Nixev
|
||||
* @version 2.0.0
|
||||
* @invite nAHD9keWr
|
||||
* @website https://hyprluna.vercel.app
|
||||
* @name midnight-noctalia
|
||||
* @description a discord theme for noctalia-shell
|
||||
* @author refact0r
|
||||
* @version 2.1.1
|
||||
* @invite nz87hXyvcy
|
||||
* @website https://github.com/refact0r/midnight-discord
|
||||
* @source https://github.com/refact0r/midnight-discord/blob/master/themes/midnight.theme.css
|
||||
* @authorId 508863359777505290
|
||||
* @authorLink https://www.refact0r.dev
|
||||
*/
|
||||
|
||||
@import url("https://refact0r.github.io/midnight-discord/build/midnight.css");
|
||||
/* import theme modules */
|
||||
@import url('https://refact0r.github.io/midnight-discord/build/midnight.css');
|
||||
|
||||
body {
|
||||
/* font options */
|
||||
--font: ''; /* change to '' for default discord font */
|
||||
--code-font: ''; /* change to '' for default discord font */
|
||||
font-weight: 400; /* normal text font weight. DOES NOT AFFECT BOLD TEXT */
|
||||
|
||||
/* sizes */
|
||||
--gap: 12px; /* spacing between panels */
|
||||
--divider-thickness: 4px; /* thickness of unread messages divider and highlighted message borders */
|
||||
--border-thickness: 1px; /* thickness of borders around main panels. DOES NOT AFFECT OTHER BORDERS */
|
||||
|
||||
/* animation/transition options */
|
||||
--animations: on; /* off: disable animations/transitions, on: enable animations/transitions */
|
||||
--list-item-transition: 0.2s ease; /* transition for list items */
|
||||
--dms-icon-svg-transition: 0.4s ease; /* transition for the dms icon */
|
||||
--border-hover-transition: 0.2s ease; /* transition for borders when hovered */
|
||||
|
||||
/* top bar options */
|
||||
--top-bar-height: var(--gap); /* height of the top bar (discord default is 36px, old discord style is 24px, var(--gap) recommended if button position is set to titlebar) */
|
||||
--top-bar-button-position: titlebar; /* off: default position, hide: hide buttons completely, serverlist: move inbox button to server list, titlebar: move inbox button to channel titlebar (will hide title) */
|
||||
--top-bar-title-position: off; /* off: default centered position, hide: hide title completely, left: left align title (like old discord) */
|
||||
--subtle-top-bar-title: off; /* off: default, on: hide the icon and use subtle text color (like old discord) */
|
||||
|
||||
/* window controls */
|
||||
--custom-window-controls: on; /* off: default window controls, on: custom window controls */
|
||||
--window-control-size: 14px; /* size of custom window controls */
|
||||
|
||||
/* dms button options */
|
||||
--custom-dms-icon: custom; /* off: use default discord icon, hide: remove icon entirely, custom: use custom icon */
|
||||
--dms-icon-svg-url: url('https://refact0r.github.io/midnight-discord/assets/Font_Awesome_5_solid_moon.svg'); /* icon svg url. MUST BE A SVG. */
|
||||
--dms-icon-svg-size: 90%; /* size of the svg (css mask-size property) */
|
||||
--dms-icon-color-before: var(--icon-secondary); /* normal icon color */
|
||||
--dms-icon-color-after: var(--white); /* icon color when button is hovered/selected */
|
||||
--custom-dms-background: off; /* off to disable, image to use a background image (must set url variable below), color to use a custom color/gradient */
|
||||
--dms-background-image-url: url(''); /* url of the background image */
|
||||
--dms-background-image-size: cover; /* size of the background image (css background-size property) */
|
||||
--dms-background-color: linear-gradient(70deg, var(--blue-2), var(--purple-2), var(--red-2)); /* fixed color/gradient (css background property) */
|
||||
|
||||
/* background image options */
|
||||
--background-image: off; /* off: no background image, on: enable background image (must set url variable below) */
|
||||
--background-image-url: url(''); /* url of the background image */
|
||||
|
||||
/* transparency/blur options */
|
||||
/* NOTE: TO USE TRANSPARENCY/BLUR, YOU MUST HAVE TRANSPARENT BG COLORS. FOR EXAMPLE: --bg-4: hsla(220, 15%, 10%, 0.7); */
|
||||
--transparency-tweaks: off; /* off: no changes, on: remove some elements for better transparency */
|
||||
--remove-bg-layer: off; /* off: no changes, on: remove the base --bg-3 layer for use with window transparency (WILL OVERRIDE BACKGROUND IMAGE) */
|
||||
--panel-blur: off; /* off: no changes, on: blur the background of panels */
|
||||
--blur-amount: 12px; /* amount of blur */
|
||||
--bg-floating: var(--bg-3); /* set this to a more opaque color if floating panels look too transparent. only applies if panel blur is on */
|
||||
|
||||
/* chatbar options */
|
||||
--custom-chatbar: separated; /* off: default chatbar, separated: chatbar separated from chat */
|
||||
--chatbar-height: 47px; /* height of the chatbar (56px by default, 47px to align with user panel, 56px recommended for separated) */
|
||||
|
||||
/* other options */
|
||||
--small-user-panel: off; /* off: default user panel, on: smaller user panel like in old discord */
|
||||
}
|
||||
|
||||
/* color options */
|
||||
:root {
|
||||
--colors: on; /* turn off to use discord default colors */
|
||||
--colors: on; /* off: discord default colors, on: midnight custom colors */
|
||||
|
||||
/* text colors */
|
||||
--text-0: {{colors.background.default.hex}}; /* text on colored elements */
|
||||
--text-1: {{colors.on_background.default.hex}}; /* default text on colored elements */
|
||||
--text-2: {{colors.on_surface.default.hex}}; /* headings and important text */
|
||||
--text-3: {{colors.on_surface_variant.default.hex}}; /* normal text */
|
||||
--text-4: {{colors.outline.default.hex}}; /* icon buttons and channels */
|
||||
--text-5: {{colors.outline_variant.default.hex}}; /* muted channels/chats and timestamps */
|
||||
/* text colors */
|
||||
--text-0: {{colors.background.default.hex}}; /* text on colored elements */
|
||||
--text-1: {{colors.on_background.default.hex}}; /* other normally white text */
|
||||
--text-2: {{colors.on_surface.default.hex}}; /* headings and important text */
|
||||
--text-3: {{colors.on_surface_variant.default.hex}}; /* normal text */
|
||||
--text-4: {{colors.outline.default.hex}}; /* icon buttons and channels */
|
||||
--text-5: {{colors.outline_variant.default.hex}}; /* muted channels/chats and timestamps */
|
||||
|
||||
/* background and dark colors */
|
||||
--bg-1: {{colors.surface_container_lowest.default.hex}}; /* dark buttons when clicked */
|
||||
--bg-2: {{colors.surface_container_low.default.hex}}; /* dark buttons */
|
||||
--bg-3: {{colors.surface_container.default.hex}}; /* spacing, secondary elements */
|
||||
--bg-4: {{colors.surface.default.hex}}; /* main background color */
|
||||
--hover: {{colors.surface_container_high.default.hex}}; /* channels and buttons when hovered */
|
||||
--active: {{colors.surface_container_highest.default.hex}}; /* channels and buttons when clicked or selected */
|
||||
--active-2: {{colors.surface.default.hex}}; /* extra state for transparent buttons */
|
||||
--message-hover: {{colors.surface_variant.default.hex}}; /* messages when hovered */
|
||||
/* background and dark colors */
|
||||
--bg-1: {{colors.surface_container_lowest.default.hex}}; /* dark buttons when clicked */
|
||||
--bg-2: {{colors.surface_container_low.default.hex}}; /* dark buttons */
|
||||
--bg-3: {{colors.surface_container.default.hex}}; /* spacing, secondary elements */
|
||||
--bg-4: {{colors.surface.default.hex}}; /* main background color */
|
||||
--hover: {{colors.surface_container_high.default.hex}}; /* channels and buttons when hovered */
|
||||
--active: {{colors.surface_container_highest.default.hex}}; /* channels and buttons when clicked or selected */
|
||||
--active-2: {{colors.surface.default.hex}}; /* extra state for transparent buttons */
|
||||
--message-hover: {{colors.surface_variant.default.hex}}; /* messages when hovered */
|
||||
|
||||
/* accent colors */
|
||||
--accent-1: {{colors.primary.default.hex}}; /* links and other accent text */
|
||||
--accent-2: {{colors.primary_container.default.hex}}; /* small accent elements */
|
||||
--accent-3: {{colors.secondary.default.hex}}; /* accent buttons */
|
||||
--accent-4: {{colors.secondary_container.default.hex}}; /* accent buttons when hovered */
|
||||
--accent-5: {{colors.tertiary.default.hex}}; /* accent buttons when clicked */
|
||||
--accent-new: {{colors.error.default.hex}}; /* stuff that's normally red like mute/deafen buttons */
|
||||
--mention: linear-gradient(
|
||||
to right,
|
||||
color-mix(in hsl, {{colors.primary_container.default.hex}}, transparent 70%) 60%,
|
||||
transparent
|
||||
); /* background of messages that mention you */
|
||||
--mention-hover: linear-gradient(
|
||||
to right,
|
||||
color-mix(in hsl, {{colors.primary_container.default.hex}}, transparent 75%) 60%,
|
||||
transparent
|
||||
); /* background of messages that mention you when hovered */
|
||||
--reply: linear-gradient(
|
||||
to right,
|
||||
color-mix(in hsl, {{colors.tertiary_container.default.hex}}, transparent 70%) 60%,
|
||||
transparent
|
||||
); /* background of messages that reply to you */
|
||||
--reply-hover: linear-gradient(
|
||||
to right,
|
||||
color-mix(in hsl, {{colors.tertiary_container.default.hex}}, transparent 75%) 60%,
|
||||
transparent
|
||||
); /* background of messages that reply to you when hovered */
|
||||
/* accent colors */
|
||||
--accent-1: {{colors.primary.default.hex}}; /* links and other accent text */
|
||||
--accent-2: {{colors.primary_container.default.hex}}; /* small accent elements */
|
||||
--accent-3: {{colors.secondary.default.hex}}; /* accent buttons */
|
||||
--accent-4: {{colors.secondary_container.default.hex}}; /* accent buttons when hovered */
|
||||
--accent-5: {{colors.tertiary.default.hex}}; /* accent buttons when clicked */
|
||||
--accent-new: {{colors.error.default.hex}}; /* stuff that's normally red like mute/deafen buttons */
|
||||
|
||||
/* status indicator colors */
|
||||
--online: {{colors.primary.default.hex}}; /* change to #43a25a for default */
|
||||
--dnd: {{colors.error.default.hex}}; /* change to #d83a42 for default */
|
||||
--idle: {{colors.tertiary.default.hex}}; /* change to #ca9654 for default */
|
||||
--streaming: {{colors.secondary.default.hex}}; /* change to #593695 for default */
|
||||
--offline: {{colors.outline.default.hex}}; /* change to #83838b for default offline color */
|
||||
--mention: linear-gradient(to right, color-mix(in hsl, {{colors.primary_container.default.hex}}, transparent 90%) 40%, transparent); /* background of messages that mention you */
|
||||
--mention-hover: linear-gradient(to right, color-mix(in hsl, {{colors.primary_container.default.hex}}, transparent 95%) 40%, transparent); /* background of messages that mention you when hovered */
|
||||
|
||||
/* border colors */
|
||||
--border-light: {{colors.surface_container_high.default.hex}}; /* light border color */
|
||||
--border: {{colors.surface_container_highest.default.hex}}; /* normal border color */
|
||||
--button-border: {{colors.surface_container_high.default.hex}}; /* neutral border color of buttons */
|
||||
--reply: linear-gradient(to right, color-mix(in hsl, {{colors.tertiary_container.default.hex}}, transparent 90%) 40%, transparent); /* background of messages that reply to you */
|
||||
--reply-hover: linear-gradient(to right, color-mix(in hsl, {{colors.tertiary_container.default.hex}}, transparent 95%) 40%, transparent); /* background of messages that reply to you when hovered */
|
||||
|
||||
/* base colors */
|
||||
--red-1: {{colors.error.default.hex}};
|
||||
--red-2: {{colors.error_container.default.hex}};
|
||||
--red-3: {{colors.on_error.default.hex}};
|
||||
--red-4: {{colors.on_error_container.default.hex}};
|
||||
--red-5: {{colors.error.default.hex}};
|
||||
/* status indicator colors */
|
||||
--online: {{colors.primary.default.hex}}; /* change to #40a258 for default */
|
||||
--dnd: {{colors.error.default.hex}}; /* change to #d83a41 for default */
|
||||
--idle: {{colors.tertiary.default.hex}}; /* change to #cc954c for default */
|
||||
--streaming: {{colors.secondary.default.hex}}; /* change to #9147ff for default */
|
||||
--offline: {{colors.outline.default.hex}}; /* change to #82838b for default offline color */
|
||||
|
||||
--green-1: {{colors.primary.default.hex}};
|
||||
--green-2: {{colors.primary_container.default.hex}};
|
||||
--green-3: {{colors.on_primary.default.hex}};
|
||||
--green-4: {{colors.on_primary_container.default.hex}};
|
||||
--green-5: {{colors.primary.default.hex}};
|
||||
/* border colors */
|
||||
--border-light: {{colors.surface_container_high.default.hex}}; /* general light border color */
|
||||
--border: {{colors.surface_container_highest.default.hex}}; /* general normal border color */
|
||||
--border-hover: {{colors.surface_container_high.default.hex}}; /* border color of panels when hovered */
|
||||
--button-border: hsl(220, 0%, 100%, 0.1); /* neutral border color of buttons */
|
||||
|
||||
--blue-1: {{colors.primary.default.hex}};
|
||||
--blue-2: {{colors.primary_container.default.hex}};
|
||||
--blue-3: {{colors.on_primary.default.hex}};
|
||||
--blue-4: {{colors.on_primary_container.default.hex}};
|
||||
--blue-5: {{colors.primary.default.hex}};
|
||||
/* base colors */
|
||||
--red-1: {{colors.error.default.hex}};
|
||||
--red-2: {{colors.error_container.default.hex}};
|
||||
--red-3: {{colors.on_error.default.hex}};
|
||||
--red-4: {{colors.on_error_container.default.hex}};
|
||||
--red-5: {{colors.error.default.hex}};
|
||||
|
||||
--yellow-1: {{colors.tertiary.default.hex}};
|
||||
--yellow-2: {{colors.tertiary_container.default.hex}};
|
||||
--yellow-3: {{colors.on_tertiary.default.hex}};
|
||||
--yellow-4: {{colors.on_tertiary_container.default.hex}};
|
||||
--yellow-5: {{colors.tertiary.default.hex}};
|
||||
--green-1: {{colors.primary.default.hex}};
|
||||
--green-2: {{colors.primary_container.default.hex}};
|
||||
--green-3: {{colors.on_primary.default.hex}};
|
||||
--green-4: {{colors.on_primary_container.default.hex}};
|
||||
--green-5: {{colors.primary.default.hex}};
|
||||
|
||||
--purple-1: {{colors.secondary.default.hex}};
|
||||
--purple-2: {{colors.secondary_container.default.hex}};
|
||||
--purple-3: {{colors.on_secondary.default.hex}};
|
||||
--purple-4: {{colors.on_secondary_container.default.hex}};
|
||||
--purple-5: {{colors.secondary.default.hex}};
|
||||
--blue-1: {{colors.primary.default.hex}};
|
||||
--blue-2: {{colors.primary_container.default.hex}};
|
||||
--blue-3: {{colors.on_primary.default.hex}};
|
||||
--blue-4: {{colors.on_primary_container.default.hex}};
|
||||
--blue-5: {{colors.primary.default.hex}};
|
||||
|
||||
--yellow-1: {{colors.tertiary.default.hex}};
|
||||
--yellow-2: {{colors.tertiary_container.default.hex}};
|
||||
--yellow-3: {{colors.on_tertiary.default.hex}};
|
||||
--yellow-4: {{colors.on_tertiary_container.default.hex}};
|
||||
--yellow-5: {{colors.tertiary.default.hex}};
|
||||
|
||||
--purple-1: {{colors.secondary.default.hex}};
|
||||
--purple-2: {{colors.secondary_container.default.hex}};
|
||||
--purple-3: {{colors.on_secondary.default.hex}};
|
||||
--purple-4: {{colors.on_secondary_container.default.hex}};
|
||||
--purple-5: {{colors.secondary.default.hex}};
|
||||
}
|
||||
|
||||
/* Improve timestamp/clock readability */
|
||||
/* Target timestamps with various selector patterns to work across Discord versions */
|
||||
[class*="timestamp"] time,
|
||||
[class*="timestamp"] time[id*="message-timestamp"],
|
||||
[id*="message-timestamp"] time,
|
||||
span[class*="timestamp"] time {
|
||||
color: var(--text-3) !important; /* Use normal text color for better contrast */
|
||||
opacity: 0.85 !important; /* Slightly muted but still readable */
|
||||
.divider__908e2:not(.isUnread__908e2) {
|
||||
border-color: var(--bg-2);
|
||||
}
|
||||
|
||||
/* Hover state for timestamps - make them fully visible */
|
||||
[class*="timestamp"]:hover time,
|
||||
[id*="message-timestamp"]:hover time,
|
||||
span[class*="timestamp"]:hover time {
|
||||
color: var(--text-2) !important; /* Use heading color on hover */
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Improve slowmode cooldown and typing indicator readability */
|
||||
[class*="cooldownText"],
|
||||
[class*="cooldownWrapper"],
|
||||
[class*="cooldownText"] svg,
|
||||
.cooldownText_b21699,
|
||||
.cooldownWrapper_b21699 {
|
||||
color: var(--text-3) !important; /* Use normal text color for better contrast */
|
||||
opacity: 0.85 !important; /* Slightly muted but still readable */
|
||||
}
|
||||
|
||||
/* Slowmode icon color */
|
||||
[class*="slowModeIcon"],
|
||||
.slowModeIcon_b21699 {
|
||||
color: var(--text-3) !important;
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
|
||||
/* Typing indicator text */
|
||||
[class*="typing"] [class*="text"],
|
||||
[class*="typingDots"] [class*="text"],
|
||||
.typing_b88801 .text_b88801 {
|
||||
color: var(--text-3) !important;
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
|
||||
[class*="postTitleText"],
|
||||
[class*="postTitleText"] span,
|
||||
h3[class*="postTitleText"],
|
||||
[class*="heading-lg"][class*="postTitleText"],
|
||||
[data-text-variant*="heading"] [class*="postTitleText"] {
|
||||
color: var(--text-2) !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
[class*="postTitleText"]:hover,
|
||||
[class*="postTitleText"]:hover span,
|
||||
h3[class*="postTitleText"]:hover {
|
||||
color: var(--text-2) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
[class*="messageContent"],
|
||||
[class*="markup"] {
|
||||
line-height: 1.35 !important;
|
||||
color: var(--text-3) !important;
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
|
||||
/* Improve message input/editor text readability */
|
||||
[class*="editor"] [class*="markup"],
|
||||
[class*="slateTextArea"] [class*="markup"],
|
||||
[class*="slateTextArea"],
|
||||
[role="textbox"][class*="markup"],
|
||||
[role="textbox"][class*="editor"],
|
||||
[class*="editor"] [class*="slateTextArea"],
|
||||
[data-slate-editor="true"] {
|
||||
color: var(--text-3) !important;
|
||||
opacity: 0.9 !important;
|
||||
line-height: 1.4 !important;
|
||||
}
|
||||
|
||||
/* Empty/placeholder text in message input */
|
||||
[class*="emptyText"],
|
||||
[class*="emptyText"] span,
|
||||
[data-slate-zero-width] {
|
||||
color: var(--text-4) !important;
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
[class*="messageContent"][class*="deleted"],
|
||||
[class*="text-sm"][class*="messageContent"][class*="deleted"],
|
||||
[data-text-variant*="text-sm"][class*="messageContent"][class*="deleted"] {
|
||||
color: var(--text-3) !important;
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
|
||||
[class*="messageContent"][class*="deleted"]:hover,
|
||||
[class*="messageContent"][class*="deleted"]:hover span {
|
||||
color: var(--text-2) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Improve tooltip readability */
|
||||
[class*="tooltip"],
|
||||
[class*="tooltip"] *,
|
||||
[role="tooltip"],
|
||||
[role="tooltip"] * {
|
||||
color: var(--text-2) !important;
|
||||
}
|
||||
|
||||
[class*="tooltipText"],
|
||||
[class*="tooltipContent"],
|
||||
[class*="tooltip"] span,
|
||||
[class*="tooltip"] div {
|
||||
color: var(--text-2) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Improve link readability - ONLY target link callout containers (not channels or other UI) */
|
||||
/* Override CSS variables only within link callout containers */
|
||||
div[class*="linkCalloutContainer"] {
|
||||
--text-muted: var(--text-3) !important;
|
||||
--text-default: var(--accent-1) !important;
|
||||
}
|
||||
|
||||
/* Make muted parts (protocol, path) more readable - only direct child spans in link containers */
|
||||
div[class*="linkCalloutContainer"] > span[class*="normal"][data-text-variant*="normal"][style*="--text-muted"],
|
||||
div[class*="linkCalloutContainer"] > span[class*="normal"][style*="color: var(--text-muted)"] {
|
||||
color: var(--text-3) !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
/* Make the domain (semibold part) stand out with accent color - only direct child spans in link containers */
|
||||
div[class*="linkCalloutContainer"] > span[class*="semibold"],
|
||||
div[class*="linkCalloutContainer"] > span[data-text-variant*="semibold"],
|
||||
div[class*="linkCalloutContainer"] > span[style*="color: var(--text-default)"] {
|
||||
color: var(--accent-1) !important;
|
||||
font-weight: 600 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Hover state for link containers - only affects spans inside link containers */
|
||||
div[class*="linkCalloutContainer"]:hover > span[class*="normal"][data-text-variant*="normal"] {
|
||||
color: var(--text-2) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
div[class*="linkCalloutContainer"]:hover > span[class*="semibold"],
|
||||
div[class*="linkCalloutContainer"]:hover > span[data-text-variant*="semibold"] {
|
||||
color: var(--accent-1) !important;
|
||||
opacity: 1 !important;
|
||||
.bannerButton_de8008, .bannerColor_fb7f94 {
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user