From 7f48ea73b24e47553f984e8f89ec2aaa267819ba Mon Sep 17 00:00:00 2001 From: Ly-sec Date: Tue, 25 Nov 2025 02:15:18 +0100 Subject: [PATCH] Matugen/Vesktop: more layout fixes --- Assets/MatugenTemplates/vesktop.css | 96 ++++++++++++----------------- Assets/noctalia-shape.svg | 43 +++++++++++++ 2 files changed, 84 insertions(+), 55 deletions(-) create mode 100644 Assets/noctalia-shape.svg diff --git a/Assets/MatugenTemplates/vesktop.css b/Assets/MatugenTemplates/vesktop.css index 06f773ee0..2ef939a2e 100644 --- a/Assets/MatugenTemplates/vesktop.css +++ b/Assets/MatugenTemplates/vesktop.css @@ -42,7 +42,7 @@ body { /* 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('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjU2IgogICBoZWlnaHQ9IjI1NiIKICAgdmlld0JveD0iMCAwIDY3LjczMzMzNCA2Ny43MzMzMzQiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzEiCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczEiIC8+CiAgPGcKICAgICBpZD0iZzEiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4xMDEwODY5LDAsMCwxLjEwMTA4NjksLTMuNDIzODM0NywtMy40MjM0ODkzKSI+CiAgICA8ZwogICAgICAgaWQ9Imc1NSIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCg0LjIwNTU5MDUsMCwwLDQuMjA1NTkwNSwtMTQuNzg4ODk4LC0xODAuNDMzNjIpIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGg1NSIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6OS4xO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtwYWludC1vcmRlcjpmaWxsIG1hcmtlcnMgc3Ryb2tlIgogICAgICAgICBkPSJtIDExLjY0NjQ4NCw0My42NDI1NzggYSA3LjMxNDEzNTYsNy4zMTQxMzU2IDAgMCAwIC03LjMxMjQ5OTYsNy4zMTI1IDcuMzE0MTM1Niw3LjMxNDEzNTYgMCAwIDAgNy4zMTI0OTk2LDcuMzE0NDUzIDcuMzE0MTM1Niw3LjMxNDEzNTYgMCAwIDAgNy4xNTgyMDQsLTUuODk4NDM3IDYuMjIwMzMwMiw2LjIyMDMzMDIgMCAwIDEgLTMuNDE2MDE2LDMuNDY0ODQ0IGMgMC4wMDE1LDAuMjc3NDA2IDAuMDAzOSwwLjUzMjU1IDAuMDAzOSwwLjcyNjU2MiAtMC43Mzk0NDUsMCAtMS4zNzU4MzUsLTAuMTAxODg2IC0xLjkyMTg3NSwtMC4yNzE0ODQgYSA2LjIyMDMzMDIsNi4yMjAzMzAyIDAgMCAxIC0wLjQ0MTQwNiwwLjAzNTE2IDYuMjIwMzMwMiw2LjIyMDMzMDIgMCAwIDEgLTYuMjIwNzAzMiwtNi4yMjA3MDMgNi4yMjAzMzAyLDYuMjIwMzMwMiAwIDAgMSA2LjIyMDcwMzIsLTYuMjIwNzAzIDYuMjIwMzMwMiw2LjIyMDMzMDIgMCAwIDEgMC41NzYxNzIsMC4wMjczNCA3LjMxNDEzNTYsNy4zMTQxMzU2IDAgMCAwIC0xLjk1ODk4NSwtMC4yNjk1MzEgeiIgLz4KICAgIDwvZz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDU2IgogICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS4zNDYwODtzdHJva2UtbWl0ZXJsaW1pdDo5LjE7cGFpbnQtb3JkZXI6ZmlsbCBtYXJrZXJzIHN0cm9rZSIKICAgICAgIGQ9Im0gNDIuNjY0NDQsMzEuMjkxNDc0IGMgLTEuODAyODgyLDIuMDIzMTA1IC00Ljk1MDEzOSwyLjQ5MjY2MSAtOC41MjU0LDIuNTAyOCAtMi43MTgxNiwtMC4wMDc3IC01LjQ1MDQ3NiwtMC4xMjgyMjcgLTcuMjY5NTYsLTEuMzg5NTUxIC0xLjgxNjU0MiwwLjMyNDE4MiAtMi41NzkxNTcsMi4zNDQwMzMgLTIuNDE1ODY2LDQuNzAyNzc3IDEuMTY0NjQ3LDE2LjgyMjk2NyAxMS44MTY3MiwxNS43MzQ2NDUgMTEuOTEyMTk4LDE1LjcwNzE0NSAtNy43OTMzNjYsLTMuODAyNDQ3IC02LjUxNjQ5OCwtMTAuMDAwNDggLTYuNzcyNjIyLC0xMS45NzUyOTMgMC4zMjA5MjgsMy4zNDIzMyAzLjg5NTkyNiwxMi44NTY3NjQgMTcuMjM1NDk0LDEyLjg1Njc2NCAwLC00LjAwOTY1NSAwLjAxOTkyLC0xNC4zMTEwMzUgLTEuMjc5MDgsLTE3LjQ4NzAyNCAtMC40MDkxMjQsLTEuMjM3MzEyIC0xLjUyNTI2LC00LjU0Njk2MyAtMi44ODUxNjQsLTQuOTE3NjE4IHoiIC8+CiAgICA8cGF0aAogICAgICAgaWQ9InBhdGg1NyIKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzY1NjU7c3Ryb2tlLW1pdGVybGltaXQ6OS4xO3BhaW50LW9yZGVyOmZpbGwgbWFya2VycyBzdHJva2UiCiAgICAgICBkPSJtIDIwLjk5MjAxMywxNi4wODcwMDQgYyAwLjYwODk0NCwxLjg2NTU0NSAxLjgzNTMzNCwzLjcwNDMxNCAzLjQ4MDA4Niw0LjQwMTc0NSAtMC40NTg3ODEsMS4zODI4MDQgLTAuNDYwODMxLDMuMDI0OTQ5IC0wLjQ2MDgzMSw0Ljc4MzEyNiAwLDQuOTI3ODk1IDQuNTMzNjk4LDguOTE5NDEzIDEwLjEzMDM1OSw4LjkzODU1OSA1LjU5NjY2NCwtMC4wMTkxMiAxMC4xMzAzNjcsLTQuMDEwNjY3IDEwLjEzMDM2NywtOC45Mzg1NTkgMCwtMS43NTgxNzcgLTAuMDAyMSwtMy40MDAzMjIgLTAuNDYwODMzLC00Ljc4MzEyNiAxLjY0NDc1MywtMC42OTc0MzEgMi44NzExNDIsLTIuNTM2MiAzLjQ4MDA4NCwtNC40MDE3NDUgLTEuOTg3Nzc2LC0wLjAzMDUgLTUuMTUwOTA4LDAuNzAwNzU3IC03Ljg1MDA0NywwLjc4NjU5NSAtMS4zNTE1MzksLTAuMzUxODQ1IC0zLjA4NjEzNywtMC41NDU4NjggLTUuMjk5NTcxLC0wLjU0ODIzMyAtMi4yMTM0MzEsMC4wMDI0IC0zLjk0ODAyNywwLjE5NjM2NyAtNS4yOTk1NjgsMC41NDgyMzMgLTIuNjk5MTM1LC0wLjA4NTg0IC01Ljg2MjI2NiwtMC44MTcxODcgLTcuODUwMDQ2LC0wLjc4NjU5NSB6IG0gNi43Nzc0MTksNC42NDgwNTMgYyAwLjU1NTQ3LC0wLjAxMzgzIDEuMjk5Nzc5LDAuMDYyMDQgMi4zMDQxNjEsMC4yNDYzMTkgMC42NzIxOTgsMC4xMjMzMDIgMS41MjM1MzYsMC40NTI0MDIgMi4wMzQwMTksMC43NTQ4MTMgMC45NTA4MDcsMC41NjMyNjQgMS4wNzM1OTUsMS4yMDc2OTcgMi4wMzQwMTUsMS4yMDc2OTcgMC45NjA0MiwwIDEuMDgzMjA3LC0wLjY0NDQzMyAyLjAzNDAxOCwtMS4yMDc2OTcgMC41MTA0ODMsLTAuMzAyNDE4IDEuMzYxODIyLC0wLjYzMTUxMSAyLjAzNDAyMSwtMC43NTQ4MTMgNC41OTE0NTksLTAuODQyMzI4IDMuODIxNzMyLDAuNTIzOTYyIDMuODIxNzMyLDIuODM2NTA1IDAsMi4zODcxMzIgLTEuOTM1MTU1LDQuMzIyMjkgLTQuMzIyMjkxLDQuMzIyMjkgLTAuNzYyOTUsLTAuMDAzNyAtMS41MTEzMzIsLTAuMjA5MzQgLTIuMTY5MDkxLC0wLjU5NTkwNSAtMC4wMTU0NiwwLjAzMzc1IC0wLjAyODg3LDAuMDY0ODQgLTAuMDQ3NjgsMC4wOTUzNSBsIC0wLjk2OTMzOCwxLjU3MzE4OSBjIC0wLjEwNTIzOSwwLjE3MTIyMiAtMC4yNDM3OTcsMC4yNTc0NjcgLTAuMzgxMzc4LDAuMjU0MjUxIC0wLjEzNzU4LDAuMDAzMSAtMC4yNzYxMzksLTAuMDgzMDMgLTAuMzgxMzc4LC0wLjI1NDI1MSBsIC0wLjk2OTMzOCwtMS41NzMxODkgYyAtMC4wMTg3MSwtMC4wMzA1IC0wLjAzMjEyLC0wLjA2MTU5IC0wLjA0NzY4LC0wLjA5NTM1IC0wLjY1Nzc2MywwLjM4NjU4NSAtMS40MDYxNDIsMC41OTIxODggLTIuMTY5MDkxLDAuNTk1OTA1IC0yLjM4NzEzNywwIC00LjMyMjI5LC0xLjkzNTE1OCAtNC4zMjIyOSwtNC4zMjIyOSAwLC0xLjgwNjY3MyAtMC40NjYyNzEsLTMuMDMzMTczIDEuNTE3NTY5LC0zLjA4MjgxNCB6IiAvPgogICAgPHBhdGgKICAgICAgIGlkPSJwYXRoNTgiCiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoxLjIyMDUyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjkuMTtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtwYWludC1vcmRlcjpmaWxsIG1hcmtlcnMgc3Ryb2tlIgogICAgICAgZD0iTSAzMi4zMDQyLDI1LjMwMDU5NiBBIDEuOTkxNDQzOCwxLjk5MTQ0MzggMCAwIDEgMzAuNTc5NTU5LDI2LjI5NjMyIDEuOTkxNDQzOCwxLjk5MTQ0MzggMCAwIDEgMjguODU0OTE4LDI1LjMwMDU5NiIgLz4KICAgIDxwYXRoCiAgICAgICBpZD0icGF0aDU5IgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MS4yMjA1MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDo5LjE7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7cGFpbnQtb3JkZXI6ZmlsbCBtYXJrZXJzIHN0cm9rZSIKICAgICAgIGQ9Ik0gMzkuNDI4MzM0LDI1LjMwMDU5NiBBIDEuOTkxNDQzOCwxLjk5MTQ0MzggMCAwIDEgMzcuNzAzNjk2LDI2LjI5NjMyIDEuOTkxNDQzOCwxLjk5MTQ0MzggMCAwIDEgMzUuOTc5MDUzLDI1LjMwMDU5NiIgLz4KICA8L2c+Cjwvc3ZnPgo='); /* icon svg url. MUST BE A SVG. */ + --dms-icon-svg-url: url('https://raw.githubusercontent.com/noctalia-dev/noctalia-shell/main/Assets/noctalia-shape.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 */ @@ -88,17 +88,17 @@ body { --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 */ +--hover: {{colors.surface_container_high.default.hex}}20; /* channels and buttons when hovered */ +--active: {{colors.surface_container_highest.default.hex}}40; /* channels and buttons when clicked or selected */ +--active-2: {{colors.surface.default.hex}}30; /* extra state for transparent buttons */ +--message-hover: {{colors.surface_variant.default.hex}}40; /* 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-4: {{colors.on_secondary_container.default.hex}}; /* accent buttons when hovered */ +--accent-5: {{colors.secondary.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 90%) 40%, transparent); /* background of messages that mention you */ @@ -108,48 +108,48 @@ body { --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 */ /* 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 */ +--online: var(--green-2); /* change to #43a25a for default */ +--dnd: var(--red-2); /* change to #d83a42 for default */ +--idle: var(--yellow-2); /* change to #ca9654 for default */ +--streaming: var(--purple-2); /* change to #593695 for default */ +--offline: var(--text-4); /* change to #83838b for default offline color */ /* 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 */ +--border-light: var(--hover); /* general light border color */ +--border: var(--active); /* general normal border color */ +--border-hover: var(--active); /* border color of panels when hovered */ +--button-border: hsl(230, 0%, 100%, 0.1); /* neutral border color of buttons */ /* 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}}; +--red-1: hsl(351deg, 74%, 78%); +--red-2: hsl(351deg, 74%, 73%); +--red-3: hsl(351deg, 74%, 73%); +--red-4: hsl(351deg, 74%, 68%); +--red-5: hsl(351deg, 74%, 63%); ---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}}; +--green-1: hsl(105deg, 48%, 77%); +--green-2: hsl(105deg, 48%, 72%); +--green-3: hsl(105deg, 48%, 72%); +--green-4: hsl(105deg, 48%, 67%); +--green-5: hsl(105deg, 48%, 62%); ---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}}; +--blue-1: hsl(199deg, 66%, 74%); +--blue-2: hsl(199deg, 66%, 69%); +--blue-3: hsl(199deg, 66%, 69%); +--blue-4: hsl(199deg, 66%, 64%); +--blue-5: hsl(199deg, 66%, 59%); ---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}}; +--yellow-1: hsl(40deg, 70%, 83%); +--yellow-2: hsl(40deg, 70%, 78%); +--yellow-3: hsl(40deg, 70%, 78%); +--yellow-4: hsl(40deg, 70%, 73%); +--yellow-5: hsl(40deg, 70%, 68%); ---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}}; +--purple-1: hsl(267deg, 83%, 85%); +--purple-2: hsl(267deg, 83%, 80%); +--purple-3: hsl(267deg, 83%, 80%); +--purple-4: hsl(267deg, 83%, 75%); +--purple-5: hsl(267deg, 83%, 70%); } .divider__908e2:not(.isUnread__908e2) { @@ -173,17 +173,3 @@ body { .timestampInline_c19a55 time { color: var(--text-4) !important; } - -/* Make chat input text and placeholder use lighter text color */ -.slateTextArea_ec4baf, -.slateTextArea_ec4baf .emptyText__1464f, -.markup__75297, -.editor__1b31f { - color: var(--text-4) !important; -} - -/* Make chat messages slightly lighter */ -.messageContent__5126c, -.messageContent__5126c .markup__75297 { - color: var(--text-1) !important; -} diff --git a/Assets/noctalia-shape.svg b/Assets/noctalia-shape.svg new file mode 100644 index 000000000..631dabf53 --- /dev/null +++ b/Assets/noctalia-shape.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + +