Cynosphere
/
xmc
mirror of https://gitlab.com/Cynosphere/xmc.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make Modular

This commit is contained in:
CI 2022-10-19 03:28:08 +00:00
parent 11ffc55d4e
commit 4f52753ca2
25 changed files with 681 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

597
modular/base.css
View File

@ -1,4 +1,4 @@
/* BASE THEME START */
/* colors */
.theme-dark,
@ -1282,3 +1282,598 @@
/*[class*="pictureInPicture-"] {
display: none;
}*/
[class^="scroller"][id="private-channels"]
a[class^="channel-"][href*="/discovery"] {
display: none;
}
[class^="modalTextContainer-"] {
overflow: scroll !important;
}
[class*="mirror-"] {
transform: none !important;
}
[class*="modal-"][class*="root-"] {
background-color: var(--background-primary);
box-shadow: var(--deprecated-card-bg) 0px 0px 0px 1px,
rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
}
a[class^="anchor-"]:not([aria-controls^="popout_"]) {
color: var(--text-link) !important;
}
[class*="bar-"][class*="mention-"] {
background-color: var(--red);
}
[class^="accountProfileCard-"] [class^="avatar-"] {
border: 0;
background-color: transparent;
}
[class^="perksModal-"] {
background-color: var(--background-primary) !important;
}
[class^="directoryModal-"] {
background-color: var(--background-primary) !important;
}
[class*="barBase-"] {
padding-bottom: 0 !important;
border-radius: 8px;
margin: 0 4px;
}
[class^="layerContainer-"] > [class^="layer-"] > [class^="container-"] {
background: var(--background-floating);
}
[class^="layerContainer-"]
> [class^="layer-"]
> [class^="container-"]
[class^="option-"]:after {
background: transparent;
}
[class^="layerContainer-"]
> [class^="layer-"]
> [class^="container-"]
[class^="option-"][class*="selected-"] {
background: var(--background-modifier-hover);
}
[class^="content-"] > [class^="sidebar-"] {
border-radius: 0;
}
.platform-osx [class*="guilds-"] > ul > [class^="scroller-"] {
padding-top: 4px;
}
[class^="slider-"] {
padding-top: 0 !important;
}
.platform-win
nav[class*="guilds-"]
> ul[class^="tree-"]
> [class^="scroller-"] {
padding-top: 12px !important;
}
a[href="https://support.discord.com"]
{
display: none;
}
[class*="timestampVisibleOnHover-"] {
opacity: 1 !important;
}
[class^="message-"][class*="compact-"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
[class*="progressBarHeader-"] > [class^="container-"],
[class^="control-"] > [class^="container-"] {
transition: background-color 0.75s linear;
}
[class*="progressBarHeader-"]
> [class^="container-"]:not([class*="checked-"]),
[class^="control-"] > [class^="container-"]:not([class*="checked-"]) {
background-color: var(--highlight) !important;
}
[class*="progressBarHeader-"] > [class^="container-"][class*="checked-"],
[class^="control-"] > [class^="container-"][class*="checked-"] {
background-color: var(--_color2) !important;
}
[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
--radio-bar-accent-color: var(--_color2) !important;
}
[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] {
--radio-bar-accent-color: var(--_color3) !important;
}
[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] {
--radio-bar-accent-color: var(--_color1) !important;
}
span[style*="background-color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%);"] {
background-color: var(--accent) !important;
}
span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] {
background-color: var(--red) !important;
}
[class^="updateIconForeground-"] {
fill: var(--_color2);
}
[class*="tierHeaderLocked-"],
[class*="tierHeaderUnlocked-"] {
background-color: var(--background-secondary) !important;
}
[class*="tierAccomplished-"],
[class*="tierCurrent-"],
[class*="tierFirst-"] {
background: var(--_color13) !important;
}
[class^="progressWithSubscriptions-"] > svg > g > rect[class^="background-"] {
color: var(--background-secondary);
}
[class^="tierIcon-"],
[class^="unlockedIcon-"],
[class^="progressWithSubscriptions-"] > svg > g > rect[class^="foreground-"] {
color: var(--_color13) !important;
}
svg[fill="#FF73FA"] {
fill: var(--_color13) !important;
}
[class^="activeCircle-"] {
background-color: var(--_color2) !important;
}
[class*="allow-"][class*="selected-"] {
background-color: var(--status-positive) !important;
}
[class^="item-"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
background-color: var(--_color2) !important;
}
[class^="chat-"][class*="background-"],
[class^="title-"][class*="background-"],
[class^="chat-"] > [class^="content-"] > [class^="container-"] {
background-color: var(--tertiary) !important;
}
[class*="headerBarInner-"]:after {
background: transparent !important;
}
[class^="streamPreview-"] {
background-color: var(--secondary) !important;
}
[class^="streamPreview-"] > [class^="previewContainer-"] {
background-color: var(--primary) !important;
}
[class*="messageContent-"].deleted-message {
color: var(--_color1) !important;
}
[class^="markdown-"] [class^="codeInline-"],
[class^="codeLine-"],
[class^="codeBlockText-"],
[class^="durationTimeDisplay-"],
[class^="durationTimeSeparator-"],
[class^="after_inlineCode-"],
[class^="before_inlineCode-"],
[class^="inlineCode-"],
code.inline,
code,
.hljs {
font-family: var(--font-code) !important;
}
/* an attempt to have collapsing channel list */
/*[class^="sidebar-"] > [class^="panels-"] {
position: absolute;
bottom: 0;
width: 240px;
height: 53px;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
z-index: 10;
}
[class^="sidebar-"] > [class^="panels-"]:hover {
height: unset;
flex-direction: column;
}
[class^="sidebar-"] {
width: unset;
}
[class^="sidebar-"] > nav[class^="container-"] {
width: unset;
z-index: 9;
}
[class^="sidebar-"] > nav[class^="container-"] > [class^="scroller-"] {
width: 48px;
margin-top: 48px;
margin-bottom: 53px;
}
[class^="sidebar-"] > nav[class^="container-"] > [class^="scroller-"]:hover {
width: 240px;
}
[class^="sidebar-"]
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"] {
position: fixed;
top: 0;
width: 240px;
z-index: 101;
background: var(--background-secondary);
}
[class^="sidebar-"]
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
height: 48px;
}
[class^="sidebar-"]
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
height: 48px;
}
[class^="sidebar-"]
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
content: "";
height: 48px;
width: 240px;
top: 0;
left: 0;
position: absolute;
background: linear-gradient(
0deg,
var(--background-secondary) 5%,
transparent 100%
);
}
[class^="sidebar-"]
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
[class^="bannerImg-"] {
top: -67px;
position: relative;
}
[class^="sidebar-"]
> nav[class^="container-"]
> [class^="scroller-"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
[class^="chatContent-"] > form [class^="channelTextArea"] {
margin-left: 192px;
}
[class^="sidebar-"]:hover
~ [class^="chat-"]
[class^="chatContent-"]
> form
[class^="channelTextArea"] {
margin-left: 0;
}
[class^="chat-"] [class^="title-"] {
margin-left: 192px;
}
[class^="sidebar-"]:hover ~ [class^="chat-"] [class^="title-"] {
margin-left: 0;
}*/
/* jane's steam border ext */
.steam-border-message > #border {
width: 20px !important;
height: 20px !important;
left: 0 !important;
}
.steam-border-popout > #border {
left: 0 !important;
top: 0 !important;
}
.steam-border-modal > #border {
left: 1em !important;
top: -4.25em !important;
}
.steam-border-modal {
position: absolute;
}
.steam-border-user > .avatarWrapper {
top: -7.3em !important;
left: -6.1em !important;
}
/* hljs */
[class^="markdown-"] code {
background-color: var(--background-secondary) !important;
border-radius: 5%;
line-height: 12px !important;
}
[class^="markdown-"] [class^="codeInline-"],
code.inline {
-webkit-font-smoothing: none !important;
font-family: var(--font-code) !important;
font-size: 12px !important;
line-height: 12px !important;
color: var(--_colorFG) !important;
}
.hljs {
background: var(--background-secondary) !important;
font-family: var(--font-code) !important;
font-size: 12px !important;
-webkit-font-smoothing: none !important;
display: block;
overflow-x: auto;
padding: 0.5em;
color: var(--_colorFG);
}
.hljs-keyword {
color: var(--_color5);
}
.hljs-built_in {
color: var(--_color6);
}
.hljs-type {
color: var(--_color3);
}
.hljs-literal {
color: var(--_color3);
}
.hljs-number {
color: var(--_color3);
}
.hljs-regexp {
color: var(--_color6);
}
.hljs-string {
color: var(--_color2);
}
.hljs-subst {
color: var(--_color1);
}
.hljs-symbol {
color: var(--_color5);
}
.hljs-class {
color: var(--_color3);
}
.hljs-function {
color: var(--_color4);
}
.hljs-title {
color: var(--_color4);
}
.hljs-params {
color: var(--_color1);
}
.hljs-comment {
color: var(--highlight);
}
.hljs-doctag {
color: var(--_colorFG);
}
.hljs-meta {
color: var(--_color1);
}
.hljs-meta-keyword {
color: var(--_color3);
}
.hljs-meta-string {
color: var(--_color2) !important;
}
.hljs-section {
color: var(--_color4);
}
.hljs-tag {
color: var(--_colorFG);
}
.hljs-name {
color: var(--_color1);
}
.hljs-builtin-name {
color: var(--_colorFG);
}
.hljs-attr {
color: var(--_color3);
}
.hljs-attribute {
color: var(--_colorFG);
}
.hljs-variable {
color: var(--_color1);
}
.hljs-bullet {
color: var(--_color1);
}
.hljs-code {
color: var(--_color2);
}
.hljs-emphasis {
color: var(--_color5);
font-style: italic;
}
.hljs-strong {
color: var(--_color3);
font-weight: bold;
}
.hljs-formula {
color: var(--_colorFG);
}
.hljs-link {
color: var(--_color3);
}
.hljs-quote {
color: var(--_color3);
}
.hljs-selector-tag {
color: var(--_color1);
}
.hljs-selector-id {
color: var(--_color4);
}
.hljs-selector-class {
color: var(--_color3);
}
.hljs-selector-attr {
color: var(--_color4);
}
.hljs-selector-pseudo {
color: var(--_color3);
}
.hljs-template-tag {
color: var(--_colorFG);
}
.hljs-template-variable {
color: var(--_colorFG);
}
.hljs-addition {
color: #a6e22e;
background: #384c10;
}
.hljs-deletion {
color: #f92672;
background: #4c0c23;
}
.hljs-operator {
color: var(--_colorFG);
}
.hljs-pattern-match {
color: var(--_colorFG);
}
.hljs-typing {
color: var(--_colorFG);
}
.hljs-constructor {
color: var(--_colorFG);
}
.hljs-module-access {
color: var(--_colorFG);
}
.hljs-module {
color: var(--_colorFG);
}
.hljs-emphasis {
font-style: italic !important;
}
.hljs-strong {
font-weight: bold !important;
}
.hljs-ansi-foreground-black [class^="hljs-ansi-background-"],
.hljs-ansi-foreground-black {
color: var(--_color0) !important;
}
.hljs-ansi-foreground-red {
color: var(--_color1) !important;
}
.hljs-ansi-foreground-green {
color: var(--_color2) !important;
}
.hljs-ansi-foreground-yellow {
color: var(--_color3) !important;
}
.hljs-ansi-foreground-blue {
color: var(--_color4) !important;
}
.hljs-ansi-foreground-magenta {
color: var(--_color5) !important;
}
.hljs-ansi-foreground-cyan {
color: var(--_color6) !important;
}
.hljs-ansi-foreground-white [class^="hljs-ansi-background-"],
.hljs-ansi-foreground-white {
color: var(--_color7) !important;
}
.hljs-ansi-style-bold {
font-weight: 0;
}
.hljs-ansi-foreground-black .hljs-ansi-style-bold {
color: var(--_color8) !important;
}
.hljs-ansi-foreground-red .hljs-ansi-style-bold {
color: var(--_color9) !important;
}
.hljs-ansi-foreground-green .hljs-ansi-style-bold {
color: var(--_color10) !important;
}
.hljs-ansi-foreground-yellow .hljs-ansi-style-bold {
color: var(--_color11) !important;
}
.hljs-ansi-foreground-blue .hljs-ansi-style-bold {
color: var(--_color12) !important;
}
.hljs-ansi-foreground-magenta .hljs-ansi-style-bold {
color: var(--_color13) !important;
}
.hljs-ansi-foreground-cyan .hljs-ansi-style-bold {
color: var(--_color14) !important;
}
.hljs-ansi-foreground-white .hljs-ansi-style-bold {
color: var(--_color15) !important;
}
.hljs-ansi-background-black {
background-color: var(--_color0) !important;
}
.hljs-ansi-background-red {
background-color: var(--_color1) !important;
}
.hljs-ansi-background-green {
background-color: var(--_color2) !important;
}
.hljs-ansi-background-yellow {
background-color: var(--_color3) !important;
}
.hljs-ansi-background-blue {
background-color: var(--_color4) !important;
}
.hljs-ansi-background-magenta {
background-color: var(--_color5) !important;
}
.hljs-ansi-background-cyan {
background-color: var(--_color6) !important;
}
.hljs-ansi-background-white {
background-color: var(--_color7) !important;
}

4
modular/font/custom.css
View File

@ -1,6 +1,6 @@
.theme-dark,
:root {
:root {
--font-primary: var(--xmc_custom_font), sans-serif !important;
--font-display: var(--font-primary) !important;
--font-code: var(--xmc_custom_font_mono), monospace !important;
}
}

1
modular/font/default.css
View File

@ -1 +0,0 @@

4
modular/font/revert_rebrand.css
View File

@ -1,4 +1,4 @@
.theme-dark,
:root {
:root {
--font-display: var(--font-primary) !important;
}
}

19
modular/font/terminus.css
View File

@ -41,13 +41,13 @@
}
.theme-dark,
:root {
--font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont",
monospace !important;
--font-display: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont",
monospace !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont",
monospace !important;
:root {
--font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)",
"Unifont Windows", "Unifont", monospace !important;
--font-display: "Terminus (TTF) for Windows", "Terminus (TTF)",
"Unifont Windows", "Unifont", monospace !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows",
"Unifont", monospace !important;
--_font-titlebars: var(--font-primary) !important;
}
@ -107,6 +107,7 @@ span[class="role-tag"],
font-size: 0.75em !important;
}
[class^="codeBlockText-"], [class^="codeLine-"] {
[class^="codeBlockText-"],
[class^="codeLine-"] {
font-size: 12px !important;
}
}

4
modular/font/the_funny.css
View File

@ -17,8 +17,8 @@
}
.theme-dark,
:root {
:root {
--font-primary: "Comic Sans MS", cursive !important;
--font-display: "Comic Sans MS", cursive !important;
--font-code: "Pointfree", "Untyped", monospace !important;
}
}

4
modular/font/the_funny_(alternate_monospace).css
View File

@ -17,8 +17,8 @@
}
.theme-dark,
:root {
:root {
--font-primary: "Comic Sans MS", cursive !important;
--font-display: "Comic Sans MS", cursive !important;
--font-code: "Untyped", "Pointfree", monospace !important;
}
}

8
modular/font/unifont.css
View File

@ -50,11 +50,11 @@
}
.theme-dark,
:root {
:root {
--font-primary: "Unifont Windows", "Unifont", monospace !important;
--font-display: "Unifont Windows", "Unifont", monospace !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", "Unifont",
monospace !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows",
"Unifont", monospace !important;
}
[class^="menu-"] [class^="item-"],
@ -63,4 +63,4 @@
font-size: 16px;
text-transform: none;
font-weight: 500;
}
}

2
modular/scheme/amoled.css
View File

@ -42,4 +42,4 @@
--status-streaming: #593695;
--titlebar-color: #060606 !important;
}
}

2
modular/scheme/amora.css
View File

@ -40,4 +40,4 @@
--status-dnd: var(--_color5);
--status-offline: var(--tertiary);
--status-streaming: var(--_color4);
}
}

2
modular/scheme/amora_focus.css
View File

@ -40,4 +40,4 @@
--status-dnd: var(--_color5);
--status-offline: var(--tertiary);
--status-streaming: var(--_color4);
}
}

2
modular/scheme/annie.css
View File

@ -42,4 +42,4 @@
--status-streaming: #593695;
--titlebar-color: var(--tertiary) !important;
}
}

6
modular/scheme/catppuccin_frappe.css
View File

@ -9,8 +9,8 @@
--_color6: #81c8be;
--_color7: #b5bfe2;
--_color8: #626880;
--_color9: #e78284;
--_color8: #626880;
--_color9: #e78284;
--_color10: #a6d189;
--_color11: #e5c890;
--_color12: #8caaee;
@ -45,4 +45,4 @@
--interactive-hover: var(--_color6) !important;
--interactive-active: var(--_color7) !important;
}
}

7
modular/scheme/catppuccin_macchiato.css
View File

@ -9,8 +9,8 @@
--_color6: #8bd5ca;
--_color7: #b8c0e0;
--_color8: #5b6078;
--_color9: #ed8796;
--_color8: #5b6078;
--_color9: #ed8796;
--_color10: #a6da95;
--_color11: #eed49f;
--_color12: #8aadf4;
@ -45,5 +45,4 @@
--interactive-hover: var(--_color6) !important;
--interactive-active: var(--_color7) !important;
}
}

6
modular/scheme/catppuccin_mocha.css
View File

@ -9,8 +9,8 @@
--_color6: #94e2d5;
--_color7: #bac2de;
--_color8: #585b70;
--_color9: #f38ba8;
--_color8: #585b70;
--_color9: #f38ba8;
--_color10: #a6e3a1;
--_color11: #f9e2af;
--_color12: #89b4fa;
@ -49,4 +49,4 @@
--background-modifier-active: rgba(205, 214, 244, 0.16) !important;
--background-modifier-hover: rgba(137, 180, 250, 0.08) !important;
--background-modifier-selected: rgba(137, 180, 250, 0.24) !important;
}
}

5
modular/scheme/custom.css
View File

@ -1,4 +1,5 @@
.theme-dark,:root {
.theme-dark,
:root {
--_color0: var(--xmc-custom-color0);
--_color1: var(--xmc-custom-color1);
--_color2: var(--xmc-custom-color2);
@ -44,4 +45,4 @@
--interactive-hover: var(--xmc-custom-hover) !important;
--interactive-active: var(--xmc-custom-active) !important;
}
}

2
modular/scheme/everforest.css
View File

@ -43,4 +43,4 @@
--interactive-hover: var(--_color6) !important;
--interactive-active: var(--_color15) !important;
}
}

2
modular/scheme/gruvbox.css
View File

@ -40,4 +40,4 @@
--status-dnd: var(--_color1);
--status-offline: var(--_color8);
--status-streaming: var(--_color13);
}
}

2
modular/scheme/lovelace.css
View File

@ -43,4 +43,4 @@
--interactive-hover: var(--_color6) !important;
--interactive-active: var(--_color7) !important;
}
}

2
modular/scheme/nord.css
View File

@ -42,4 +42,4 @@
--status-streaming: var(--_color5);
--titlebar-color: #4c566a !important;
}
}

2
modular/scheme/stock.css
View File

@ -42,4 +42,4 @@
--status-streaming: #593695;
--titlebar-color: var(--highlight) !important;
}
}

2
modular/scheme/tokyo_night.css
View File

@ -43,4 +43,4 @@
--interactive-hover: var(--_color4) !important;
--interactive-active: var(--_color15) !important;
}
}

2
modular/scheme/xmc.css
View File

@ -42,4 +42,4 @@
--status-streaming: var(--_color5);
--titlebar-color: var(--accent) !important;
}
}

46
modular/textarea/fullwidth.css
View File

@ -4,19 +4,51 @@
[class^="chatContent-"] > form [class^="channelTextArea"] {
margin-bottom: 0 !important;
}
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] {
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"] {
border-radius: 0 !important;
}
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"],
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="buttons-"],
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="attachWrapper-"] > [class^="attachButton-"] {
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="textArea-"],
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="buttons-"],
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="attachWrapper-"]
> [class^="attachButton-"] {
height: 53px;
}
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"] > div > [class*="fontSize16Padding-"] {
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="textArea-"]
> div
> [class*="fontSize16Padding-"] {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
[class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="buttons-"] [class*="emojiButton-"] {
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="buttons-"]
[class*="emojiButton-"] {
max-height: unset;
}
}

2
modular/textarea/mobile.css
View File

@ -213,4 +213,4 @@
> div
> [class^="placeholder-"] {
left: 14px;
}
}