From b84fa4a161c71da258021eda879e87db859a3266 Mon Sep 17 00:00:00 2001 From: schnensch Date: Sat, 12 Jun 2021 13:39:53 +0200 Subject: [PATCH] 1.1 --- README.md | 7 ++- powercord_manifest.json | 2 +- theme.css | 101 ++++++++++++++++++++++++++++++++++------ zelk.css | 53 ++++++++++++--------- zelkBD.theme.css | 61 +++++++++++++----------- 5 files changed, 158 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index df5c668..89c9b62 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Zelk -`1.0.1` +`1.1` Zelk is a smooth discord theme inspired by the [Zorin Blue Dark](https://github.com/ZorinOS/zorin-desktop-themes/tree/master/ZorinBlue-Dark)/[Light](https://github.com/ZorinOS/zorin-desktop-themes/tree/master/ZorinBlue-Light) GTK theme. @@ -12,13 +12,12 @@ Zelk is a smooth discord theme inspired by the [Zorin Blue Dark](https://github. [Download](https://betterdiscord.app/Download?id=300) #### Goosemod -Search for **Zelk** in the Themes section of your settings +Search for **Zelk** in the Themes tab ![Mockup](https://raw.githubusercontent.com/schnensch0/zelk/main/preview/mockup.png) for actual previews look [here](https://github.com/schnensch0/zelk/tree/main/preview) ### TO DO -* font? * icons? -* animations????????? +* animations? * more accent colors? diff --git a/powercord_manifest.json b/powercord_manifest.json index 4f1093d..8d7a558 100644 --- a/powercord_manifest.json +++ b/powercord_manifest.json @@ -1,6 +1,6 @@ { "name": "Zelk", - "version": "1.0.1", + "version": "1.1", "license": "MIT", "theme": "zelk.css", "author": "schnensch", diff --git a/theme.css b/theme.css index e4a9c22..21b47c6 100644 --- a/theme.css +++ b/theme.css @@ -1,4 +1,6 @@ /* Zelk 1.0.1 */ +/* imports */ +@import url('https://rsms.me/inter/inter.css'); /* background */ .tabBody-3YRQ8W, .chat-3bRxxu, .container-3w7J-x, .container-lRFx4q, .privateChannels-1nO12o, .homeWrapperNormal-2KSUEa { background-color: var(--background-tertiary); @@ -93,7 +95,7 @@ border-radius: 0px 10px 10px 0px; } /* red things */ -.colorDanger-2qLCe1, .colorDanger-2qLCe1 .checkbox-3s5GYZ, .colorDanger-2qLCe1 .radioSelection-1HmrQS, .pruneLink-3V7wes, .side-8zPYf6 .item-PXvHYJ[aria-controls='logout-tab'], .lookLink-9FtZy-.colorRed-1TFJan { +.colorDanger-2qLCe1, .colorDanger-2qLCe1 .checkbox-3s5GYZ, .colorDanger-2qLCe1 .radioSelection-1HmrQS, .pruneLink-3V7wes, .side-8zPYf6 .item-PXvHYJ[aria-controls='logout-tab'], .lookLink-9FtZy-.colorRed-1TFJan, .fixed-3zCC84 { color: var(--button-destructive) !important; } .colorDanger-2qLCe1:hover, .colorDanger-2qLCe1 .checkbox-3s5GYZ:hover, .colorDanger-2qLCe1 .radioSelection-1HmrQS:hover, .item-PXvHYJ[aria-controls='logout-tab']:hover { @@ -108,6 +110,9 @@ .item-PXvHYJ[aria-controls='logout-tab'] { background-color: transparent !important; } +.fixed-3zCC84::after { + background-color: var(--button-destructive); +} /* status area*/ .layer-v9HyYc .popout_164 { left: 82px !important; @@ -244,8 +249,8 @@ color: var(--interactive-selected) !important; } /* settings */ -.sidebarRegionScroller-3MXcoP, .titleContainer-2CXtJo, .header-2mZ9Ov, .contentRegion-3nDuYy, .contentRegionScroller-26nc1e, .scroller-305q3I { - background-color: var(--background-tertiary); +.sidebarRegionScroller-3MXcoP, .titleContainer-2CXtJo, .header-2mZ9Ov, .contentRegion-3nDuYy, .contentRegionScroller-26nc1e, .scroller-305q3I, .powercord-entities-manage-tabs { + background-color: var(--background-tertiary) !important; } .sidebar-CFHs9e { width: 290px; @@ -291,10 +296,10 @@ .side-8zPYf6 .item-PXvHYJ[aria-controls="DELETE-tab"]:active::before, .side-8zPYf6 .item-PXvHYJ[aria-controls="logout-tab"]:active::before { --settings-icon-color: var(--button-destructive-active); } -.powercord-product, .container-cMG81i, .attendeeCTA-3ZZQWt, .input-cIJ7To, .item-26Dhrx, .powercord-entities-manage-tabs, .powercord-account, .activeGame-14JI7o, .formNotice-2_hHWR, .css-118dehu-control, .previewContainer-37c2Si, .auditLog-3jNbM6, .background-1QDuV2, .roleRow-30TwGe, .bd-addon-card, .membershipDialogHouse2-35h9SY, .codeRedemptionRedirect-1wVR4b, .card-o7rAq-, .enableContainer-2DIT9Q, .accountList-33MS45, .container-_phMUq, .feature-2w65J5, .details-1YZMDP>div { +.powercord-product, .container-cMG81i, .attendeeCTA-3ZZQWt, .input-cIJ7To, .item-26Dhrx, .powercord-entities-manage-tabs, .powercord-account, .activeGame-14JI7o, .formNotice-2_hHWR, .css-118dehu-control, .previewContainer-37c2Si, .auditLog-3jNbM6, .background-1QDuV2, .roleRow-30TwGe, .bd-addon-card, .membershipDialogHouse2-35h9SY, .codeRedemptionRedirect-1wVR4b, .card-o7rAq-, .enableContainer-2DIT9Q, .accountList-33MS45, .container-_phMUq, .feature-2w65J5, .details-1YZMDP>div, .preview-2Vkbi6, .powercord-quickcss, .profileBannerPreview-3FLQKD { border-radius: 10px !important; } -.avatarUploaderInner-3UNxY3, .codeRedemptionRedirect-1wVR4b, .auditLog-3jNbM6, .card-o7rAq-, .activeGame-14JI7o, .cardPrimary-1Hv-to, .card-3AyPWq { +.avatarUploaderInner-3UNxY3, .codeRedemptionRedirect-1wVR4b, .auditLog-3jNbM6, .card-o7rAq-, .activeGame-14JI7o, .cardPrimary-1Hv-to, .card-3AyPWq, .profileBackgroundPreview-3BVL0Q, .profileBannerPreview-3FLQKD .avatar-2PN2-j { background-color: var(--background-secondary) !important; } .item-26Dhrx[aria-checked=true] { @@ -324,9 +329,21 @@ position: relative; right: 40px; } -.sectionTitle-2vauyC { +.sectionTitle-2vauyC, .contentColumnDefault-1VQkGM .title-3sZWYQ { padding-bottom: 10px; } +.notches-1sAcEM { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='20' fill='hsl(200, 15%, 12%)'%3E%3Cpath fill-rule='evenodd' d='M0 0h8v20H0V0zm4 2a2 2 0 00-2 2v12a2 2 0 104 0V4a2 2 0 00-2-2z'/%3E%3C/svg%3E") !important; +} +.progress-1IcQ3A { + background-color: var(--background-accent) !important; +} +.container-3PXSwK { + background: linear-gradient(to right, hsl(200, 89%, 86%), hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%)) !important; +} +.profileBannerPreview-3FLQKD .avatar-2PN2-j { + border: none; +} /* sliders */ .barFill-23-gu- { background: var(--background-modifier-selected); @@ -343,7 +360,7 @@ border-color: var(--background-modifier-selected); } /* switches */ -.container-3auIfb:not([style*="125"]), .bd-switch-checked .bd-switch-body { +.container-3auIfb:not([style*="218"]), .bd-switch-checked .bd-switch-body { background-color: var(--background-modifier-selected) !important; } .container-3auIfb, .bd-switch-body { @@ -361,7 +378,7 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { border: 1px solid !important; border-color: var(--border-color) !important; } -.css-3vaxre-menu, .phoneFieldPopout-7PzjOO, .addGamePopout-2RY8Ju, .recentMentionsPopout-3rCiI6 .header-2-Imhb { +.css-3vaxre-menu, .phoneFieldPopout-7PzjOO, .addGamePopout-2RY8Ju { background-color: var(--background-secondary) !important; } .labelContainer-1BLJti, .item-1tOPte { @@ -481,6 +498,9 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { .root-3QyAh1 { width: 650px; } +.root-3QyAh1 .tabBar-3nvOPa { + justify-content: space-between; +} /* better roles | thanks to Bowser65#1337 */ .role-2irmRk { position: relative; @@ -584,7 +604,7 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { .tabBarContainer-1s1u-z { border-top: transparent; } -.tabBody-3YRQ8W::before, .divider-3FBTu8, .content-yTz4x3:before { +.tabBody-3YRQ8W::before, .divider-3FBTu8, .content-yTz4x3:before, .chat-1cCjJ5::before { display: none; } .searchBar-6Kv8R2, .header-2V-4Sw, .headerBarContainer-31FKNA { @@ -697,7 +717,7 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { border-radius: 8px; } .container-3ayLPN { - background-color: var(--background-secondary) !important; + background-color: var(--background-tertiary) !important; border-radius: 10px; border: 1px solid var(--border-color); } @@ -751,15 +771,35 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { .selectorButton-EEUWed:not(.selectorButtonPremiumRequired-mKMbIu):hover { background-color: var(--background-modifier-hover); } -.root-1gCeng:not(.popout-103y-5), .footer-2gL1pp, .root-1gCeng .avatarUploaderInner-KkYu-S, .uploadModal-2ifh8j, .footer-3mqk7D { +.root-1gCeng:not(.popout-103y-5), .footer-2gL1pp, .root-1gCeng .avatarUploaderInner-KkYu-S, .uploadModal-2ifh8j, .footer-3mqk7D, .container-7uh5fX, .container-7uh5fX .icon-3pEw1v, .messagesPopoutWrap-1MQ1bW, .header-ykumBX, .popout-103y-5, .header-2-Imhb .button-1-5Aqk, .container-3u944p, .container-3u944p .icon-1Itzco { background-color: var(--background-tertiary) !important; } -.popout-103y-5, .messagesPopoutWrap-1MQ1bW .header-ykumBX, .messagesPopoutWrap-1MQ1bW .footer-1kmXd4, .message-2qRu38, .header-1VS4tm { +.message-2qRu38, .messageGroupCozy-2iY6cT, .container-3iAQ-0 .button-1-5Aqk { background-color: var(--background-secondary) !important; } .addMemberRow-3-w-9X.selectedRow-1QP7qb { background-color: var(--background-modifier-active); } +.messageGroupWrapper-o-Zw7G { + margin: 0 10px 10px 4px; + background-color: var(--background-tertiary); + border-radius: 10px; +} +.messageGroupCozy-2iY6cT { + border-radius: 10px; +} +.header-ykumBX { + box-shadow: none; +} +.channelHeader-3Gd2xq { + border-radius: 10px 10px 0 0; +} +.messageContainer-gbhlwo { + border-radius: 0 0 10px 10px; +} +.container-3iAQ-0 .button-1-5Aqk { + margin-right: 12px; +} /* home */ .scroller-1JbKMe { border-radius: 10px 10px 0 0; @@ -819,6 +859,15 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { background-color: var(--background-tertiary); border: 1px solid var(--border-color); } +.guild-Hq0WWA { + border-radius: 10px; +} +.guildHeaderBackground-1G51bM { + background-image: none !important; +} +.guildHeader-3nh5RK { + background-color: var(--background-secondary); +} /* keyboard shortcuts */ .keyboardShortcutsModal-3piNz7 { background-color: var(--background-tertiary) !important; @@ -833,7 +882,7 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { margin: 0 10px; background-color: var(--background-tertiary); } -.threadSidebar-1o3BTy .chat-1WUuAG { +.threadSidebar-1o3BTy .chat-1WUuAG, .channelTextAreaInner-1WnnRS { border-radius: 10px; background-color: var(--background-primary); } @@ -885,9 +934,20 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { .resultDefault-1ymv3u, .resultFocused-3aIoYe { border-radius: 8px; } +/* toasts */ +.powercord-toast, .powercord-toast .header, .powercord-toast .inner { + background-color: var(--background-primary) !important; +} +.powercord-toast .inner { + border: none !important; +} +.powercord-toast, .powercord-toast .header { + border-radius: 10px !important; + box-shadow: none !important; +} /* everything else */ ::-webkit-scrollbar { - display: none; + display: var(--scrollbars); } .item-26Dhrx[aria-checked=true] .colorStandard-2KCXvj, .resultFocused-3aIoYe .match-38WbBN, .resultFocused-3aIoYe .iconContainer-3UxHn2>svg { color: var(--interactive-selected); @@ -919,3 +979,16 @@ svg.slider-TkfMQL svg, .bd-switch-slider>svg { background-color: var(--button-accent) !important; color: var(--interactive-selected); } +.notice-3bPHh- { + background-color: var(--background-tertiary); + box-shadow: none; +} +.noticeWrapper-8z511t .button-2DhvE9 { + background-color: var(--button-background); + border-color: var(--button-background); + color: var(--accent-color) !important; +} +.noticeWrapper-8z511t .button-2DhvE9:hover { + background-color: var(--button-background-hover); + border-color: var(--button-background-hover); +} diff --git a/zelk.css b/zelk.css index 2186bf7..e423e43 100644 --- a/zelk.css +++ b/zelk.css @@ -1,19 +1,26 @@ /* imports */ @import url(https://raw.githack.com/schnensch0/zelk/main/theme.css); - -/* dark mode */ - .theme-dark { +:root { + /* set to 'unset' to display scrollbars */ + --scrollbars: none; + /* set to 'Inter', sans-serif !important to use Inter font*/ + --font-primary: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-display: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; + --border-radius-1: 10px; + --border-radius-2: 8px; +} +/* dark mode +basic variables */ +.theme-dark { --accent-color: #bde6fb; - --background-1: #131719; --background-2: #191f22; --background-accent: #252e32; - --border-color: #1e262a; - } +} /* advanced variables */ .theme-dark { -/* background */ + /* background */ --background-primary: var(--background-1); --background-primary-alt: var(--background-1); --background-secondary: var(--background-1); @@ -23,13 +30,13 @@ --background-floating: var(--background-1); --background-mentioned: #bde6fb10; --background-mentioned-hover: #bde6fb15; -/* modifier colours */ + /* modifier colours */ --background-modifier-hover: #21292c; --background-modifier-active: #2b3437; --background-modifier-selected: var(--accent-color); --background-modifier-accent: transparent; --background-message-hover: transparent; -/* text colors */ + /* text colors */ --text-normal: var(--accent-color); --text-positive: var(--accent-color); --text-muted: #6d8692; @@ -37,10 +44,11 @@ --interactive-selected: var(--background-primary); --interactive-active: #c1e7fd; --interactive-normal: var(--text-normal); + --interactive-muted: var(--background-accent); --channels-default: var(--text-muted); --header-primary: var(--text-normal); --header-secondary: var(--text-muted); -/* more colors */ + /* more colors */ --settings-icon-color: #8caaba; --radio-bar-accent-color: transparent; --control-brand-foreground: var(--accent-color); @@ -49,7 +57,9 @@ --channeltextarea-background: var(--background-tertiary); --switch: #3d4c53; --activity-card-background: var(--background-1); -/* buttons */ + --brand-experiment: var(--accent-color) !important; + --deprecated-text-input-bg: var(--background-secondary); + /* buttons */ --button-background: #252e32; --button-background-hover: #323d42; --button-background-active: #4a5b63; @@ -59,21 +69,19 @@ --button-destructive: #fb7c7c; --button-destructive-hover: #ff929b; --button-destructive-active: #fa4a4a; - } - -/* light mode */ +} +/* light mode + basic variables */ .theme-light { --accent-color: #22c5fd; - --background-1: #e4e8ee; --background-2: #f5f7fa; --background-accent: #e4e8ee; - --border-color: #e4e8ee; - } +} /* advanced variables */ .theme-light { -/* background */ + /* background */ --background-primary: var(--background-1); --background-primary-alt: var(--background-1); --background-secondary: var(--background-1); @@ -89,7 +97,7 @@ --background-modifier-selected: var(--accent-color); --background-modifier-accent: transparent; --background-message-hover: transparent; -/* text colors */ + /* text colors */ --text-normal: #123354; --text-positive: #123354; --text-muted: #8495a7; @@ -97,10 +105,11 @@ --interactive-selected: var(--background-primary); --interactive-active: var(--text-normal); --interactive-normal: var(--text-normal); + --interactive-muted: var(--background-accent); --channels-default: var(--text-normal); --header-primary: var(--text-normal); --header-secondary: var(--text-muted); -/* more colors */ + /* more colors */ --settings-icon-color: #566e86; --radio-bar-accent-color: transparent; --control-brand-foreground: var(--accent-color); @@ -109,7 +118,9 @@ --channeltextarea-background: var(--background-tertiary); --switch: #c8d0d9; --activity-card-background: var(--background-1); -/* buttons */ + --brand-experiment: var(--accent-color) !important; + --deprecated-text-input-bg: var(--background-secondary); + /* buttons */ --button-background: #e4e8ee; --button-background-hover: #d3dae1; --button-background-active: #c8d0d9; diff --git a/zelkBD.theme.css b/zelkBD.theme.css index 5caf3c8..a235300 100644 --- a/zelkBD.theme.css +++ b/zelkBD.theme.css @@ -1,29 +1,34 @@ /** * @name Zelk - * @version 1.0.1 + * @version 1.1 * @description a smooth theme inspired by zorin blue * @author schnensch * @authorId 652801938374656013 * @source https://github.com/schnensch0/zelk - * @updateUrl https://github.com/schnensch0/zelk/blob/main/zelkBD.theme.css */ - -/* imports */ -@import url(https://raw.githack.com/schnensch0/zelk/main/theme.css); - -/* dark mode */ - .theme-dark { + /* imports */ + @import url(https://raw.githack.com/schnensch0/zelk/main/theme.css); +:root { + /* set to 'unset' to display scrollbars */ + --scrollbars: none; + /* set to 'Inter', sans-serif !important to use Inter font*/ + --font-primary: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; + --font-display: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif; + --border-radius-1: 10px; + --border-radius-2: 8px; +} +/* dark mode + basic variables */ +.theme-dark { --accent-color: #bde6fb; - --background-1: #131719; --background-2: #191f22; --background-accent: #252e32; - --border-color: #1e262a; - } +} /* advanced variables */ .theme-dark { -/* background */ + /* background */ --background-primary: var(--background-1); --background-primary-alt: var(--background-1); --background-secondary: var(--background-1); @@ -33,13 +38,13 @@ --background-floating: var(--background-1); --background-mentioned: #bde6fb10; --background-mentioned-hover: #bde6fb15; -/* modifier colours */ + /* modifier colours */ --background-modifier-hover: #21292c; --background-modifier-active: #2b3437; --background-modifier-selected: var(--accent-color); --background-modifier-accent: transparent; --background-message-hover: transparent; -/* text colors */ + /* text colors */ --text-normal: var(--accent-color); --text-positive: var(--accent-color); --text-muted: #6d8692; @@ -47,10 +52,11 @@ --interactive-selected: var(--background-primary); --interactive-active: #c1e7fd; --interactive-normal: var(--text-normal); + --interactive-muted: var(--background-accent); --channels-default: var(--text-muted); --header-primary: var(--text-normal); --header-secondary: var(--text-muted); -/* more colors */ + /* more colors */ --settings-icon-color: #8caaba; --radio-bar-accent-color: transparent; --control-brand-foreground: var(--accent-color); @@ -59,7 +65,9 @@ --channeltextarea-background: var(--background-tertiary); --switch: #3d4c53; --activity-card-background: var(--background-1); -/* buttons */ + --brand-experiment: var(--accent-color) !important; + --deprecated-text-input-bg: var(--background-secondary); + /* buttons */ --button-background: #252e32; --button-background-hover: #323d42; --button-background-active: #4a5b63; @@ -69,21 +77,19 @@ --button-destructive: #fb7c7c; --button-destructive-hover: #ff929b; --button-destructive-active: #fa4a4a; - } - -/* light mode */ +} +/* light mode + basic variables */ .theme-light { --accent-color: #22c5fd; - --background-1: #e4e8ee; --background-2: #f5f7fa; --background-accent: #e4e8ee; - --border-color: #e4e8ee; - } +} /* advanced variables */ .theme-light { -/* background */ + /* background */ --background-primary: var(--background-1); --background-primary-alt: var(--background-1); --background-secondary: var(--background-1); @@ -99,7 +105,7 @@ --background-modifier-selected: var(--accent-color); --background-modifier-accent: transparent; --background-message-hover: transparent; -/* text colors */ + /* text colors */ --text-normal: #123354; --text-positive: #123354; --text-muted: #8495a7; @@ -107,10 +113,11 @@ --interactive-selected: var(--background-primary); --interactive-active: var(--text-normal); --interactive-normal: var(--text-normal); + --interactive-muted: var(--background-accent); --channels-default: var(--text-normal); --header-primary: var(--text-normal); --header-secondary: var(--text-muted); -/* more colors */ + /* more colors */ --settings-icon-color: #566e86; --radio-bar-accent-color: transparent; --control-brand-foreground: var(--accent-color); @@ -119,7 +126,9 @@ --channeltextarea-background: var(--background-tertiary); --switch: #c8d0d9; --activity-card-background: var(--background-1); -/* buttons */ + --brand-experiment: var(--accent-color) !important; + --deprecated-text-input-bg: var(--background-secondary); + /* buttons */ --button-background: #e4e8ee; --button-background-hover: #d3dae1; --button-background-active: #c8d0d9;