├── AccentSwap ├── import.css └── readme.md ├── AccountDetailsGrid ├── import.css └── readme.md ├── AccountSettingsRefresh ├── import.css └── readme.md ├── BDSettingsV2 ├── import.css └── readme.md ├── BetterAuthApps ├── import.css └── readme.md ├── BetterFloatingEditor ├── import.css └── readme.md ├── BetterNitroProfileBorder ├── import.css └── readme.md ├── BetterStatusPicker ├── import.css └── readme.md ├── BetterTitlebar ├── import-trafficlights.css ├── import.css └── readme.md ├── ClydeNickname ├── import.css └── readme.md ├── ConsistentChatbar ├── import.css └── readme.md ├── CyanUI2-Ports ├── Bootup │ └── import.css ├── UserArea2 │ └── import.css └── readme.md ├── DeclutterBar ├── import-trafficlights.css ├── import.css └── readme.md ├── DisablePIP ├── import.css └── readme.md ├── DiscordTeal ├── import.css └── readme.md ├── FreeNitroProfile ├── import.css └── readme.md ├── HorizontalServerList ├── import-topbar.css ├── import.css ├── readme.md ├── unified-import-topbar.css └── unified-import.css ├── ImmersiveMode ├── import-trafficlights.css ├── import.css └── readme.md ├── LICENSE ├── MacosTitlebar ├── import.css └── readme.md ├── Mobilecord ├── import.css └── readme.md ├── NitroThemesFix ├── import.css └── readme.md ├── Omnibar ├── import.css └── readme.md ├── PrettyFolderIcons ├── import.css └── readme.md ├── QuickSwitchV2 ├── import.css └── readme.md ├── README.md ├── ServersList ├── import.css └── readme.md ├── SpotifyActivityRedesign ├── import.css └── readme.md ├── SuperUserArea ├── import.css └── readme.md ├── TabsV2HomeIcon ├── import.css └── readme.md ├── TogglesV2 ├── import.css └── readme.md ├── UserReimagined ├── condensed.css ├── import-ua-top.css ├── import.css └── readme.md └── VesktopMica ├── import.css └── readme.md /AccentSwap/import.css: -------------------------------------------------------------------------------- 1 | :root:root { 2 | --accent-h: 235; 3 | --accent-s: 86%; 4 | --accent-l: 65%; 5 | 6 | --brand-100-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 13)); 7 | --brand-130-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 12)); 8 | --brand-160-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 11)); 9 | --brand-200-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 10)); 10 | --brand-230-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 9)); 11 | --brand-260-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 8)); 12 | --brand-300-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 7)); 13 | --brand-330-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 6)); 14 | --brand-345-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 5)); 15 | --brand-360-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 4)); 16 | --brand-400-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 3)); 17 | --brand-430-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + (3.6% * 2)); 18 | --brand-460-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) + 3.6); 19 | --brand-500-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) var(--accent-l); 20 | --brand-530-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - 3.6); 21 | --brand-560-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 2)); 22 | --brand-600-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 3)); 23 | --brand-630-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 4)); 24 | --brand-660-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 5)); 25 | --brand-700-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 6)); 26 | --brand-730-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 7)); 27 | --brand-760-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 8)); 28 | --brand-800-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 9)); 29 | --brand-830-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 10)); 30 | --brand-860-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 11)); 31 | --brand-900-hsl: var(--accent-h) calc(var(--saturation-factor, 1)*var(--accent-s)) calc(var(--accent-l) - (3.6% * 12)); 32 | } 33 | -------------------------------------------------------------------------------- /AccentSwap/readme.md: -------------------------------------------------------------------------------- 1 | # Accent Swap 2 | A snippet that makes it simple to swap the Accent/Brand color of Discord 3 | 4 | ### Importing: 5 | #### Import 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/AccentSwap/import.css"); 8 | :root:root { 9 | --accent-h: 235; 10 | --accent-s: 86%; 11 | --accent-l: 65%; 12 | } 13 | ``` 14 | #### Theme Link 15 | https://dablulite.github.io/css-snippets/AccentSwap/import.css 16 | 17 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/ebc24e8f-70b6-4d77-bb84-c8584b60e4b7) 18 | -------------------------------------------------------------------------------- /AccountDetailsGrid/import.css: -------------------------------------------------------------------------------- 1 | .background__1fed1 { 2 | background-color: transparent; 3 | padding: 0; 4 | } 5 | .fieldList__1fed1 { 6 | background-color: transparent; 7 | display: grid; 8 | grid-template-columns: repeat(2, 1fr); 9 | grid-gap: 5px; 10 | } 11 | .field__1fed1 { 12 | width: 100%; 13 | border-radius: 8px; 14 | background-color: var(--background-primary); 15 | max-height: unset; 16 | flex-direction: column; 17 | display: flex; 18 | padding: 15px; 19 | margin-top: 0; 20 | overflow-y: auto; 21 | height: 120px; 22 | margin-bottom: 0; 23 | } 24 | .field__1fed1 .fieldButton__1fed1 { 25 | background-color: var(--button-secondary-background); 26 | border-radius: 6px; 27 | -webkit-transition: background-color .17s ease,color .17s ease; 28 | transition: background-color .17s ease,color .17s ease; 29 | } 30 | .field__1fed1 .fieldButton__1fed1:hover { 31 | background-color: var(--button-secondary-background-hover); 32 | } 33 | .field__1fed1 .fieldButton__1fed1:hover > div { 34 | background: none; 35 | } 36 | .field__1fed1 .fieldButton__1fed1 { 37 | width: 100%; 38 | margin-right: 0; 39 | position: relative; 40 | } 41 | .field__1fed1 .fieldButtonList__1fed1 { 42 | gap: 5px; 43 | } 44 | .field__1fed1::-webkit-scrollbar { 45 | width: 16px; 46 | height: 16px; 47 | } 48 | .field__1fed1::-webkit-scrollbar-corner { 49 | background-color: transparent; 50 | } 51 | .field__1fed1::-webkit-scrollbar-thumb { 52 | background-color: var(--scrollbar-auto-thumb); 53 | min-height: 40px; 54 | } 55 | .field__1fed1::-webkit-scrollbar-track { 56 | background-color: var(--scrollbar-auto-track); 57 | } 58 | .field__1fed1::-webkit-scrollbar-thumb, 59 | .field__1fed1::-webkit-scrollbar-track { 60 | border: 4px solid transparent; 61 | background-clip: padding-box; 62 | border-radius: 8px; 63 | } 64 | -------------------------------------------------------------------------------- /AccountDetailsGrid/readme.md: -------------------------------------------------------------------------------- 1 | # Account Details Grid 2 | A refresh to the now archived "account details columns" snippet. 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/AccountDetailsGrid/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/d8f638d5-30f4-4dbd-b171-b2a146ce282e) 11 | -------------------------------------------------------------------------------- /AccountSettingsRefresh/import.css: -------------------------------------------------------------------------------- 1 | .field__1fed1 { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: start; 5 | padding: 11px 8px; 6 | padding-left: 11px; 7 | gap: 5px; 8 | box-sizing: border-box; 9 | min-height: 56px; 10 | align-items: center; 11 | border-radius: 4px; 12 | transition: none; 13 | background-color: var(--background-secondary); 14 | color: var(--header-primary); 15 | margin: 0; 16 | } 17 | .field__1fed1:hover { 18 | background-color: var(--background-modifier-hover); 19 | } 20 | .visual-refresh .field__1fed1 { 21 | background: var(--bg-mod-faint); 22 | border-radius: 8px; 23 | border: 1px solid rgba(255,255,255,10%) !important; 24 | transition: background-color 0.1s ease-in-out, 25 | border-color 0.1s ease-in-out; 26 | } 27 | .visual-refresh .field__1fed1:hover { 28 | background-color: var(--bg-mod-subtle); 29 | } 30 | .fieldList__1fed1 { 31 | position: relative; 32 | display: grid; 33 | grid-template-columns: 1fr; 34 | grid-auto-rows: max-content; 35 | gap: 8px; 36 | width: 100%; 37 | scrollbar-width: none !important; 38 | box-sizing: border-box; 39 | overflow: hidden auto; 40 | background-color: transparent; 41 | border-radius: 0; 42 | } 43 | .fieldTitle__1fed1 { 44 | margin-bottom: 0; 45 | } 46 | .background__1fed1 { 47 | background-color: transparent; 48 | margin: 0; 49 | } 50 | .accountProfileCard__1fed1 { 51 | box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high); 52 | background-color: var(--modal-background); 53 | border-radius: 4px; 54 | } 55 | .visual-refresh .accountProfileCard__1fed1 { 56 | border-radius: var(--radius-md); 57 | background-color: var(--bg-base-primary); 58 | border: 1px solid var(--border-subtle); 59 | } 60 | .fieldButton__1fed1 { 61 | color: var(--white-500) !important; 62 | background-color: var(--button-secondary-background); 63 | transition: background-color var(--custom-button-transition-duration)ease,color var(--custom-button-transition-duration)ease; 64 | } 65 | .fieldButton__1fed1:hover { 66 | color: var(--white-500) !important; 67 | background-color: var(--button-secondary-background-hover); 68 | } 69 | .fieldButton__1fed1 > .contents__201d5 { 70 | background-image: none; 71 | } 72 | :where(.visual-refresh) .fieldButton__1fed1 { 73 | border: 1px solid rgba(255,255,255,.1); 74 | transition-duration: .3s; 75 | } 76 | -------------------------------------------------------------------------------- /AccountSettingsRefresh/readme.md: -------------------------------------------------------------------------------- 1 | # Account Settings Refresh 2 | A fresh take on the "Account Settings" area design. 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/AccountSettingsRefresh/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | Normal: 11 | ![image](https://github.com/user-attachments/assets/8c8515a7-06e9-42aa-b96f-dca8377c6622) 12 | W/ Visual Refresh experiment: 13 | ![image](https://github.com/user-attachments/assets/2c66da63-0b31-4906-be9d-d62d2a629541) 14 | -------------------------------------------------------------------------------- /BDSettingsV2/import.css: -------------------------------------------------------------------------------- 1 | .keybind_c2b141 { 2 | display: none; 3 | } 4 | .closeButton_c2b141 { 5 | border: none; 6 | background-color: var(--background-tertiary); 7 | position: absolute; 8 | top: 10px; 9 | right: 30px; 10 | border-radius: 50px; 11 | width: fit-content; 12 | gap: 4px; 13 | padding: 0 8px; 14 | } 15 | .closeButton_c2b141::before { 16 | content: attr(aria-label); 17 | } 18 | .toolsContainer__23e6b, 19 | .tools__23e6b { 20 | position: unset !important; 21 | } 22 | .noticeRegion__23e6b { 23 | padding: 0; 24 | width: 100%; 25 | max-width: unset; 26 | } 27 | .noticeRegion__23e6b > .container_fcf29c { 28 | border-radius: 0; 29 | } 30 | #bd-notices { 31 | display: flex; 32 | gap: 4px; 33 | margin: 4px !important; 34 | width: calc(100% - 20px - 126px); 35 | flex-direction: column; 36 | } 37 | #bd-notices > .bd-notice { 38 | width: 100%; 39 | padding: 0; 40 | border-radius: 4px; 41 | } 42 | .bd-settings-title { 43 | color: var(--header-primary); 44 | } 45 | .sidebarRegionScroller__23e6b, .sidebarRegion__23e6b { 46 | justify-content: start; 47 | flex: 0 1 auto; 48 | } 49 | 50 | .sidebar__23e6b, .sidebarRegionScroller__23e6b, .sidebarRegion__23e6b { 51 | width: 262px; 52 | max-width: unset; 53 | min-width: unset; 54 | float: left; 55 | } 56 | .contentRegionShownSidebar__23e6b { 57 | justify-content: center; 58 | } 59 | .bd-settings-tab { 60 | overflow: visible; 61 | align-items: center; 62 | gap: 4px; 63 | } 64 | .bd-settings-tab::before { 65 | content: ""; 66 | width: 20px; 67 | height: 20px; 68 | background-color: currentColor; 69 | -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Calque_1' x='0px' y='0px' viewBox='0 0 2000 2000' enable-background='new 0 0 2000 2000' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='currentColor' d='M1402.2,631.7c-9.7-353.4-286.2-496-642.6-496H68.4v714.1l442,398V490.7h257c274.5,0,274.5,344.9,0,344.9H597.6v329.5h169.8c274.5,0,274.5,344.8,0,344.8h-699v354.9h691.2c356.3,0,632.8-142.6,642.6-496c0-162.6-44.5-284.1-122.9-368.6C1357.7,915.8,1402.2,794.3,1402.2,631.7z'/%3E%3Cpath fill='currentColor' fill-opacity='60%25' d='M1262.5,135.2L1262.5,135.2l-76.8,0c26.6,13.3,51.7,28.1,75,44.3c70.7,49.1,126.1,111.5,164.6,185.3c39.9,76.6,61.5,165.6,64.3,264.6l0,1.2v1.2c0,141.1,0,596.1,0,737.1v1.2l0,1.2c-2.7,99-24.3,188-64.3,264.6c-38.5,73.8-93.8,136.2-164.6,185.3c-22.6,15.7-46.9,30.1-72.6,43.1h72.5c346.2,1.9,671-171.2,671-567.9V716.7C1933.5,312.2,1608.7,135.2,1262.5,135.2z'/%3E%3C/g%3E%3C/svg%3E"); 70 | -webkit-mask-repeat: no-repeat; 71 | -webkit-mask-position: center; 72 | -webkit-mask-size: 20px; 73 | } 74 | .bd-sidebar-header-label::before { 75 | content: ""; 76 | width: 20px; 77 | height: 20px; 78 | background-color: currentColor; 79 | -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Calque_1' x='0px' y='0px' viewBox='0 0 2000 2000' enable-background='new 0 0 2000 2000' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='currentColor' d='M1402.2,631.7c-9.7-353.4-286.2-496-642.6-496H68.4v714.1l442,398V490.7h257c274.5,0,274.5,344.9,0,344.9H597.6v329.5h169.8c274.5,0,274.5,344.8,0,344.8h-699v354.9h691.2c356.3,0,632.8-142.6,642.6-496c0-162.6-44.5-284.1-122.9-368.6C1357.7,915.8,1402.2,794.3,1402.2,631.7z'/%3E%3Cpath fill='currentColor' fill-opacity='60%25' d='M1262.5,135.2L1262.5,135.2l-76.8,0c26.6,13.3,51.7,28.1,75,44.3c70.7,49.1,126.1,111.5,164.6,185.3c39.9,76.6,61.5,165.6,64.3,264.6l0,1.2v1.2c0,141.1,0,596.1,0,737.1v1.2l0,1.2c-2.7,99-24.3,188-64.3,264.6c-38.5,73.8-93.8,136.2-164.6,185.3c-22.6,15.7-46.9,30.1-72.6,43.1h72.5c346.2,1.9,671-171.2,671-567.9V716.7C1933.5,312.2,1608.7,135.2,1262.5,135.2z'/%3E%3C/g%3E%3C/svg%3E"); 80 | -webkit-mask-repeat: no-repeat; 81 | -webkit-mask-position: center; 82 | -webkit-mask-size: 20px; 83 | } 84 | .bd-sidebar-header-label { 85 | gap: 4px; 86 | } 87 | .bd-settings-tab::after { 88 | content: "Settings"; 89 | padding: 12px 16px; 90 | width: calc(((100% - 262px - 60px)/5) - 0.6px - 32px); 91 | display: flex; 92 | position: fixed; 93 | left: 292px; 94 | top: 80px; 95 | z-index: 3; 96 | transition: .2s; 97 | font-size: 16px; 98 | border-radius: 50px; 99 | justify-content: center; 100 | } 101 | .bd-settings-tab:hover::after, 102 | .bd-updates-tab:hover, 103 | .bd-customcss-tab:hover { 104 | background-color: var(--background-modifier-hover) !important; 105 | } 106 | .bd-settings-tab.selected_b3f026::after, 107 | .bd-updates-tab.selected_b3f026, 108 | .bd-customcss-tab.selected_b3f026 { 109 | background-color: var(--background-modifier-selected) !important; 110 | } 111 | #app-mount .bd-updates-tab { 112 | padding: 12px 16px; 113 | width: calc(((100% - 262px - 60px)/5) - 0.6px); 114 | display: flex; 115 | position: fixed; 116 | left: calc(292.6px + ((100% - 262px - 60px)/5)); 117 | top: 80px; 118 | z-index: 3; 119 | transition: .2s; 120 | font-size: 16px; 121 | border-radius: 50px !important; 122 | justify-content: center; 123 | } 124 | #app-mount .bd-customcss-tab { 125 | padding: 12px 16px; 126 | width: calc(((100% - 262px - 60px)/5) - 0.6px); 127 | display: flex; 128 | position: fixed; 129 | left: calc(292.6px + ((100% - 262px - 60px)/5) + ((100% - 262px - 60px)/5)); 130 | top: 80px; 131 | z-index: 3; 132 | transition: .2s; 133 | font-size: 16px; 134 | border-radius: 50px !important; 135 | justify-content: center; 136 | } 137 | #app-mount .bd-plugins-tab { 138 | padding: 12px 16px; 139 | width: calc(((100% - 262px - 60px)/5) - 0.6px); 140 | display: flex; 141 | position: fixed; 142 | left: calc(292.6px + ((100% - 262px - 60px)/5) + ((100% - 262px - 60px)/5) + ((100% - 262px - 60px)/5)); 143 | top: 80px; 144 | z-index: 3; 145 | transition: .2s; 146 | font-size: 16px; 147 | border-radius: 50px !important; 148 | justify-content: center; 149 | } 150 | #app-mount .bd-themes-tab { 151 | padding: 12px 16px; 152 | width: calc(((100% - 262px - 60px)/5) - 0.6px); 153 | display: flex; 154 | position: fixed; 155 | left: calc(292.6px + ((100% - 262px - 60px)/5) + ((100% - 262px - 60px)/5) + ((100% - 262px - 60px)/5) + ((100% - 262px - 60px)/5)); 156 | top: 80px; 157 | z-index: 3; 158 | transition: .2s; 159 | font-size: 16px; 160 | border-radius: 50px !important; 161 | justify-content: center; 162 | } 163 | #customcss-tab, 164 | #plugins-tab, 165 | #themes-tab, 166 | #updates-tab, 167 | #settings-tab { 168 | padding-top: 130px; 169 | } 170 | .contentRegion__23e6b::before { 171 | content: ""; 172 | position: absolute; 173 | width: calc((100% - 54px)); 174 | height: 50px; 175 | border-radius: 50px; 176 | background-color: var(--background-tertiary); 177 | top: 55px; 178 | left: 27px; 179 | opacity: 0; 180 | } 181 | html:has(.bd-settings-tab.selected_b3f026, 182 | .bd-updates-tab.selected_b3f026, 183 | .bd-customcss-tab.selected_b3f026, 184 | .bd-plugins-tab.selected_b3f026, 185 | .bd-themes-tab.selected_b3f026) .bd-settings-tab { 186 | background-color: var(--background-modifier-selected) !important; 187 | } 188 | .side_b3f026 [class^="bd"].item_b3f026 { 189 | display: none !important; 190 | } 191 | #app-mount .bd-settings-tab::after { 192 | opacity: 0; 193 | pointer-events: none; 194 | } 195 | #app-mount .bd-settings-tab, 196 | #app-mount .bd-settings-tab::after { 197 | display: flex !important; 198 | } 199 | html:has(.bd-settings-tab.selected_b3f026, 200 | .bd-updates-tab.selected_b3f026, 201 | .bd-customcss-tab.selected_b3f026, 202 | .bd-plugins-tab.selected_b3f026, 203 | .bd-themes-tab.selected_b3f026) .side_b3f026 [class^="bd"].item_b3f026 { 204 | display: flex !important; 205 | } 206 | html:has(.bd-settings-tab.selected_b3f026, 207 | .bd-updates-tab.selected_b3f026, 208 | .bd-customcss-tab.selected_b3f026, 209 | .bd-plugins-tab.selected_b3f026, 210 | .bd-themes-tab.selected_b3f026) .bd-settings-tab::after { 211 | opacity: 1 !important; 212 | pointer-events: all !important; 213 | } 214 | html:has(.bd-settings-tab.selected_b3f026, 215 | .bd-updates-tab.selected_b3f026, 216 | .bd-customcss-tab.selected_b3f026, 217 | .bd-plugins-tab.selected_b3f026, 218 | .bd-themes-tab.selected_b3f026) .contentRegion__23e6b::before { 219 | opacity: 1; 220 | } 221 | html:has(.bd-settings-tab.selected_b3f026, 222 | .bd-updates-tab.selected_b3f026, 223 | .bd-customcss-tab.selected_b3f026, 224 | .bd-plugins-tab.selected_b3f026, 225 | .bd-themes-tab.selected_b3f026) .bd-settings-tab { 226 | pointer-events: none; 227 | } 228 | html:has(.bd-settings-tab.selected_b3f026, 229 | .bd-updates-tab.selected_b3f026, 230 | .bd-customcss-tab.selected_b3f026, 231 | .bd-plugins-tab.selected_b3f026, 232 | .bd-themes-tab.selected_b3f026) .bd-settings-tab { 233 | color: var(--interactive-active); 234 | } 235 | .bd-sidebar-header { 236 | position: fixed; 237 | top: 42px; 238 | left: 282px; 239 | display: none; 240 | } 241 | .bd-sidebar-header > h2 { 242 | font-size: 20px; 243 | text-transform: none; 244 | color: var(--interactive-active); 245 | } 246 | html:has(.bd-settings-tab.selected_b3f026, 247 | .bd-updates-tab.selected_b3f026, 248 | .bd-customcss-tab.selected_b3f026, 249 | .bd-plugins-tab.selected_b3f026, 250 | .bd-themes-tab.selected_b3f026) .bd-sidebar-header { 251 | display: flex; 252 | } 253 | .contentContainer__91dc3, 254 | .contentContainer__91dc3 > div { 255 | position: initial; 256 | display: flex; 257 | width: 100%; 258 | } 259 | .contentContainer__91dc3 > div { 260 | overflow: visible !important; 261 | padding-right: 0 !important; 262 | } 263 | .contentWidth_c6bf1b { 264 | width: 100%; 265 | display: flex; 266 | flex-direction: column; 267 | overflow: visible !important; 268 | float: right; 269 | } 270 | .contentWidth_c6bf1b > * { 271 | width: 100%; 272 | display: flex; 273 | flex-direction: column; 274 | } 275 | .stickyHeader_c6bf1b { 276 | position: initial; 277 | } 278 | .headerContainer__9a73f { 279 | width: fit-content; 280 | position: initial; 281 | } 282 | div:not([class])[style="height: 243px;"]:empty { 283 | display: none; 284 | } 285 | .memberRow__9a73f { 286 | flex-direction: row; 287 | } 288 | -------------------------------------------------------------------------------- /BDSettingsV2/readme.md: -------------------------------------------------------------------------------- 1 | # BDSettingsV2 2 | A complete redesign on the BetterDiscord Settings Section, inspired by dav's "BDV2 Styled BD Settings" Snippet 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/BDSettingsV2/import.css"); 7 | ``` 8 | 9 | ### Screenshots 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/63290651-b890-4f0e-8d8f-98759d57fedc) 11 | -------------------------------------------------------------------------------- /BetterAuthApps/import.css: -------------------------------------------------------------------------------- 1 | #authorized-apps-tab .deleteApp_b3a490 { 2 | opacity: 1; 3 | border: none; 4 | background-color: var(--button-danger-background); 5 | transition: background-color .17s ease,color .17s ease; 6 | } 7 | #authorized-apps-tab .deleteApp_b3a490:hover { 8 | background-color: var(--button-danger-background-hover); 9 | } 10 | #authorized-apps-tab .children__7bffb { 11 | counter-reset: section -1; 12 | position: relative; 13 | } 14 | #authorized-apps-tab .children__7bffb > .authedApp__50a54 { 15 | counter-increment: section; 16 | } 17 | #authorized-apps-tab .children__7bffb::after { 18 | counter-increment: section; 19 | content: "Authorized Apps: "counter(section); 20 | order: -1; 21 | position: absolute; 22 | color: var(--header-primary); 23 | top: -44px; 24 | font-weight: 600; 25 | font-size: 20px; 26 | line-height: 24px; 27 | } 28 | #authorized-apps-tab .children__7bffb .flexChild__7c0ba > h3 { 29 | display: flex; 30 | } 31 | #authorized-apps-tab .sectionTitle__7bffb { 32 | opacity: 0; 33 | } 34 | #authorized-apps-tab .appAvatar__50a54 { 35 | width: 46px; 36 | height: 46px; 37 | background-color: var(--background-floating); 38 | box-shadow: 0 0 0 5px var(--background-floating); 39 | } 40 | #authorized-apps-tab .headerInfo_f0135d { 41 | flex-direction: column; 42 | align-items: flex-start; 43 | gap: 12px; 44 | margin-top: -50px; 45 | } 46 | #authorized-apps-tab .headerInfo_f0135d > h4 { 47 | margin-left: 0; 48 | font-size: 20px; 49 | } 50 | #authorized-apps-tab .authedApp__50a54:not(:nth-child(2)) { 51 | margin-top: 40px; 52 | } 53 | #authorized-apps-tab .permission__50a54 { 54 | border-bottom: 1px solid hsl(var(--primary-300-hsl)/.3); 55 | padding: 6px; 56 | height: fit-content; 57 | transition: .05s; 58 | } 59 | #authorized-apps-tab .permission__50a54:hover { 60 | border-color: var(--primary-300); 61 | } 62 | #authorized-apps-tab .authedApp__50a54 { 63 | background-color: var(--background-secondary-alt); 64 | transition: box-shadow .2s ease-out,transform .2s ease-out,background .2s ease-out,opacity .2s ease-in,-webkit-box-shadow .2s ease-out,-webkit-transform .2s ease-out; 65 | border: none; 66 | border-radius: 8px; 67 | } 68 | #authorized-apps-tab .authedApp__50a54:hover { 69 | background-color: var(--background-tertiary); 70 | transform: translateY(-1px); 71 | box-shadow: var(--elevation-high); 72 | } 73 | #authorized-apps-tab .authedApp__50a54:hover .appAvatar__50a54 { 74 | box-shadow: 0 0 0 5px var(--background-floating),var(--elevation-high); 75 | } 76 | -------------------------------------------------------------------------------- /BetterAuthApps/readme.md: -------------------------------------------------------------------------------- 1 | # Better "Authorized Apps" Tab 2 | A redesign to the Authorized app cards, as well as a counter at the top of the tab 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/BetterAuthApps/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/d403610f-70b2-46f1-a974-d712a5597d2c) 11 | -------------------------------------------------------------------------------- /BetterFloatingEditor/import.css: -------------------------------------------------------------------------------- 1 | .floating-window { 2 | padding-bottom: 0 !important; 3 | box-shadow: 0 0 0 1px hsl(var(--primary-900-hsl)/0.3),var(--elevation-high); 4 | border-radius: 16px; 5 | min-width: 450px !important; 6 | max-width: unset !important; 7 | max-height: unset !important; 8 | } 9 | .floating-window #bd-editor-controls { 10 | position: absolute; 11 | background-color: transparent; 12 | box-shadow: none; 13 | top: 0; 14 | right: 65px; 15 | } 16 | .floating-window #bd-editor-controls .btn { 17 | height: 30px; 18 | padding-top: 0 !important; 19 | border-radius: 50%; 20 | } 21 | .floating-window #bd-editor-controls > .controls-section:empty { 22 | display: none; 23 | } 24 | .floating-window #bd-editor-controls > .controls-right { 25 | order: -1; 26 | } 27 | .floating-window-titlebar { 28 | height: 40px; 29 | box-shadow: var(--elevation-stroke); 30 | z-index: +1; 31 | background-color: var(--background-primary); 32 | } 33 | .floating-window-buttons .button { 34 | border-radius: 50%; 35 | margin: 0 5px 0 0; 36 | height: 30px; 37 | } 38 | #bd-editor-controls .btn, 39 | .floating-window-buttons .button { 40 | background: var(--background-secondary-alt) !important; 41 | } 42 | .floating-window-titlebar .title { 43 | padding: 0 16px; 44 | color: var(--header-primary); 45 | line-height: 40px; 46 | } 47 | #bd-editor-controls .controls-section.controls-right .checkboxElement-1qV33p { 48 | margin: 0; 49 | } 50 | #bd-editor-controls .checkbox-inner { 51 | position: relative; 52 | } 53 | #bd-editor-controls .checkbox { 54 | width: 37px; 55 | transform: translateX(-28px); 56 | position: absolute; 57 | top: 0; 58 | opacity: 0; 59 | } 60 | #bd-editor-controls .checkbox-inner::before { 61 | content: ""; 62 | width: 28px; 63 | height: 14px; 64 | display: flex; 65 | background-color: var(--background-secondary-alt); 66 | border: 28px; 67 | border-radius: 50px; 68 | transform: translateX(calc(-25% - 20px)); 69 | transition: .15s; 70 | } 71 | #bd-editor-controls .checkbox-inner::after { 72 | content: ""; 73 | width: 18px; 74 | height: 18px; 75 | display: flex; 76 | background-color: #fff; 77 | border: 28px; 78 | border-radius: 50px; 79 | transform: translateX(calc(-75% - 20px)) translateY(-87.5%); 80 | transition: .15s; 81 | } 82 | #bd-editor-controls .checkbox-inner:has(:checked)::before { 83 | background-color: var(--brand-experiment); 84 | } 85 | #bd-editor-controls .checkbox-inner:has(:checked)::after { 86 | background-color: var(--brand-experiment-500); 87 | filter: brightness(2); 88 | transform: translateX(calc(50% - 20px)) translateY(-87.5%); 89 | } 90 | .checkbox-item .checkbox-label { 91 | margin-right: 40px; 92 | } 93 | #customcss-tab #bd-editor-controls { 94 | justify-content: end; 95 | background-color: transparent; 96 | } 97 | #customcss-tab #bd-editor-controls > .controls-left { 98 | order: +1; 99 | } 100 | #customcss-tab #bd-editor-controls .btn { 101 | border-radius: 50%; 102 | padding-top: 0 !important; 103 | height: 30px; 104 | } 105 | #customcss-tab .bd-settings-title { 106 | margin-bottom: 0; 107 | line-height: 40px; 108 | } 109 | #customcss-tab #bd-editor-panel { 110 | margin-top: -40px; 111 | } 112 | .minimap { 113 | right: -120px !important; 114 | opacity: 0; 115 | transition: .4s; 116 | } 117 | .editor-scrollable:has(.scrollbar.vertical:hover) ~ .minimap, 118 | .minimap:hover { 119 | right: 14px !important; 120 | opacity: 1; 121 | } 122 | -------------------------------------------------------------------------------- /BetterFloatingEditor/readme.md: -------------------------------------------------------------------------------- 1 | # Better Floating Editor for BetterDiscord 2 | ## Redesign of BetterDiscord's floating editor, with unlocked max width and height 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/BetterFloatingEditor/import.css"); 7 | ``` 8 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/dab400e5-c2bf-423d-b6f4-3984c4eb1027) 9 | -------------------------------------------------------------------------------- /BetterNitroProfileBorder/import.css: -------------------------------------------------------------------------------- 1 | .userProfileModalOverlayBackground_c69a7b::before, 2 | .overlayBackground_c69a7b::before { 3 | content: ""; 4 | width: calc(100% + 2px); 5 | height: calc(100% + 2px); 6 | position: absolute; 7 | top: -1px; 8 | left: -1px; 9 | z-index: 1; 10 | border-radius: 8px; 11 | background: linear-gradient(to bottom, var(--profile-gradient-primary-color),var(--profile-gradient-secondary-color)),var(--background-secondary-alt); 12 | } 13 | .userProfileModalOverlayBackground_c69a7b::after, 14 | .overlayBackground_c69a7b::after { 15 | content: ""; 16 | width: calc(100%); 17 | height: calc(100%); 18 | position: absolute; 19 | z-index: 2; 20 | border-radius: 8px; 21 | background: var(--profile-gradient-overlay-color); 22 | } 23 | .userProfileModalOverlayBackground_c69a7b, 24 | .overlayBackground_c69a7b { 25 | overflow: visible; 26 | } 27 | .userProfileModalOverlayBackground_c69a7b .body-1Ukv50, 28 | .overlayBackground_c69a7b > :is(.section_d7a21f,.scroller_d2b491,#account) { 29 | z-index: 3; 30 | background-color: var(--profile-body-background-color); 31 | } 32 | .overlayBackground_c69a7b .divider_e6f9ab { 33 | display: none; 34 | } 35 | .overlayBackground_c69a7b .scroller_d2b491:not(:has(~#account)), 36 | .overlayBackground_c69a7b #account { 37 | border-radius: 0 0 8px 8px; 38 | } 39 | .overlayBackground_c69a7b .usernameSection_d2b491 { 40 | border-radius: 8px 8px 0 0; 41 | } 42 | .userProfileOuter_c69a7b { 43 | padding: 0 !important; 44 | } 45 | .userProfileModalInner_c69a7b:before, 46 | .userPopoutInner_c69a7b:before { 47 | width: 100%; 48 | height: 100%; 49 | border-radius: 0; 50 | } 51 | .avatarPositionPremiumBanner_f89da9 { 52 | top: 72px; 53 | } 54 | .userPopoutOuter_c69a7b.userProfileOuterThemed_c69a7b .avatarWrapper_f89da9 { 55 | left: 18px; 56 | } 57 | .divider_d2b491 { 58 | display: none; 59 | } 60 | .body__24502 { 61 | z-index: +3; 62 | } 63 | -------------------------------------------------------------------------------- /BetterNitroProfileBorder/readme.md: -------------------------------------------------------------------------------- 1 | # Better Nitro Profile Borders 2 | Gets rid of the unsightly outer 4px border/padding and replaces it with a gradient border around the user info area, like in Discord RN 3 | 4 | ### Importing 5 | #### Normal: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/BetterNitroProfileBorder/import.css"); 8 | ``` 9 | #### With BetterNitroProfileBorders: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/BetterNitroProfileBorder/import.css"); 12 | .userPopoutOuter__3884e:has(.userProfileInnerThemedNonPremium_ed9022) .avatarWrapper__0cd44 { 13 | left: 22px !important; 14 | top: 16px !important; 15 | } 16 | ``` 17 | 18 | ### Screenshots: 19 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/dcf49d77-8b2f-4ef4-bc01-13cd8c3af3ba) 20 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/5ea982e9-d22b-4e19-9a41-047cf8174d81) 21 | -------------------------------------------------------------------------------- /BetterStatusPicker/import.css: -------------------------------------------------------------------------------- 1 | #status-status-picker--online[class*=focused], 2 | #status-status-picker[class*=focused]:has([mask="url(#svg-mask-status-online)"]) { 3 | background-color: var(--green-360); 4 | } 5 | #status-status-picker--dnd[class*=focused], 6 | #status-status-picker[class*=focused]:has([mask="url(#svg-mask-status-dnd)"]) { 7 | background-color: var(--red-400); 8 | } 9 | #status-status-picker--idle[class*=focused], 10 | #status-status-picker[class*=focused]:has([mask="url(#svg-mask-status-idle)"]) { 11 | background-color: var(--yellow-330); 12 | } 13 | #status-status-picker--invisible[class*=focused], 14 | #status-status-picker[class*=focused]:has([mask="url(#svg-mask-status-invisible)"]) { 15 | background-color: var(--primary-400); 16 | } 17 | #status .submenu_c1e9c4 .separator_c1e9c4 { 18 | display: none; 19 | } 20 | #status .submenu_c1e9c4 .description_af7fb7 { 21 | height: fit-content; 22 | overflow: hidden; 23 | max-height: 0rem; 24 | transition: .2s ease !important; 25 | width: 100%; 26 | flex: 0 0 100%; 27 | display: flex; 28 | } 29 | #status .submenu_c1e9c4 .item_c1e9c4.focused_c1e9c4 .description_af7fb7 { 30 | max-height: 4rem; 31 | } 32 | .statusItem_af7fb7 { 33 | display: flex; 34 | flex-wrap: wrap; 35 | } 36 | .statusItem_af7fb7 .icon_af7fb7 { 37 | margin-right: 10px; 38 | flex: 0 0 10px; 39 | } 40 | .status_af7fb7 { 41 | width: calc(100% - 20px); 42 | display: flex; 43 | } 44 | #status-status-picker--idle .statusItem_af7fb7::after { 45 | content: "Away from Discord/PC."; 46 | height: fit-content; 47 | overflow: hidden; 48 | max-height: 0rem; 49 | transition: .2s ease !important; 50 | width: 100%; 51 | flex: 0 0 100%; 52 | display: flex; 53 | } 54 | #status-status-picker--idle.focused_c1e9c4 .statusItem_af7fb7::after { 55 | max-height: 4rem; 56 | } 57 | -------------------------------------------------------------------------------- /BetterStatusPicker/readme.md: -------------------------------------------------------------------------------- 1 | # BetterStatusPicker 2 | A redesign to the simple status picker that gives each button an accent that matches the status, as well as condensing the UI 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/BetterStatusPicker/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/ce55d41b-f55d-4d91-8e38-562fc518de17) 11 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/a54f624e-3a50-4a8a-af8e-0fc71b64aa32) 12 | -------------------------------------------------------------------------------- /BetterTitlebar/import-trafficlights.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/BetterTitlebar/import.css"); 2 | :root { 3 | --mactitlebar-button-width: 20px; 4 | --mactitlebar-button-height: 20px; 5 | --mactitlebar-button-border-radius: 50px; 6 | --mactitlebar-close-btn-back: #f25056; 7 | --mactitlebar-min-btn-back: #fac536; 8 | --mactitlebar-max-btn-back: #39ea49; 9 | } 10 | .winButtonClose_a934d8 { 11 | order: 3; 12 | margin: auto 0; 13 | } 14 | .winButtonMinMax_a934d8 { 15 | order: 1; 16 | margin: auto 0; 17 | } 18 | .winButtonMinMax_a934d8:last-child { 19 | margin: auto 0; 20 | } 21 | .winButton_a934d8:hover { 22 | background-color: transparent !important; 23 | } 24 | .winButtonClose_a934d8 > svg { 25 | background: var(--mactitlebar-close-btn-back) !important; 26 | background-size: contain !important; 27 | border-radius: var(--mactitlebar-button-border-radius); 28 | } 29 | .winButtonClose_a934d8 > svg > polygon { 30 | display: none !important; 31 | } 32 | .winButtonMinMax_a934d8 > svg { 33 | background: var(--mactitlebar-max-btn-back) !important; 34 | background-size: contain !important; 35 | border-radius: var(--mactitlebar-button-border-radius); 36 | } 37 | .winButtonMinMax_a934d8:last-child > svg { 38 | background: var(--mactitlebar-min-btn-back) !important; 39 | background-size: contain !important; 40 | border-radius: var(--mactitlebar-button-border-radius); 41 | } 42 | .winButtonMinMax_a934d8 > svg > rect { 43 | display: none !important; 44 | } 45 | .winButton_a934d8:hover { 46 | background-color: transparent; 47 | } 48 | .winButton_a934d8 { 49 | width: var(--mactitlebar-button-width) !important; 50 | height: var(--mactitlebar-button-height) !important; 51 | } 52 | .typeWindows_a934d8 { 53 | justify-content: start; 54 | } 55 | .winButtonClose_a934d8 > svg:hover, 56 | .winButtonMinMax_a934d8 > svg:hover { 57 | filter: brightness(.6); 58 | } 59 | -------------------------------------------------------------------------------- /BetterTitlebar/import.css: -------------------------------------------------------------------------------- 1 | .wordmarkWindows_a934d8 > svg { 2 | width: 19px; 3 | } 4 | .wordmarkWindows_a934d8 path:not(:first-child) { 5 | display: none; 6 | } 7 | .wordmarkWindows_a934d8 path:first-child { 8 | d: path("M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z") !important; 9 | scale: 2; 10 | } 11 | .wordmarkWindows_a934d8 svg > g { 12 | transform: translateY(-75%); 13 | } 14 | .wordmarkWindows_a934d8 { 15 | display: flex; 16 | gap: 6px; 17 | align-items: center; 18 | order: 1; 19 | margin-right: auto; 20 | color: var(--header-primary); 21 | } 22 | .wordmarkWindows_a934d8::after { 23 | content: "Discord"; 24 | display: flex; 25 | width: fit-content; 26 | font-size: 12px; 27 | font-family: var(--font-display); 28 | font-weight: 700; 29 | } 30 | html:has(#activeColorway:not(:empty)) .wordmarkWindows_a934d8::after, 31 | html:has(#activeColorwayCSS:not(:empty)) .wordmarkWindows_a934d8::after{ 32 | content: "Colorways"; 33 | background-color: var(--background-primary); 34 | padding: 2px 8px; 35 | border-radius: 16px; 36 | } 37 | .typeWindows_a934d8 { 38 | margin-top: 0; 39 | padding: 4px; 40 | height: fit-content; 41 | } 42 | .typeWindows_a934d8 > .winButton_a934d8, 43 | .typeWindows_a934d8 > .wordmarkWindows_a934d8 { 44 | position: relative; 45 | } 46 | .winButton_a934d8 { 47 | top: 0 !important; 48 | margin: -4px 0; 49 | height: 31px; 50 | width: 46px; 51 | } 52 | .winButtonClose_a934d8 { 53 | margin-right: -4px; 54 | } 55 | .platform-win .layer_d4b6c5 { 56 | padding-top: 31px !important; 57 | top: -31px !important; 58 | } 59 | .bg_d4b6c5 { 60 | top: -31px !important; 61 | } 62 | -------------------------------------------------------------------------------- /BetterTitlebar/readme.md: -------------------------------------------------------------------------------- 1 | # Better Windows Titlebar 2 | A redesign to the original Windows titlebar, making it bigger, as well as giving it the functionality of displaying custom tags, eg: for Colorways 3 | 4 | ### Importing 5 | #### Normal: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/BetterTitlebar/import.css"); 8 | ``` 9 | #### With macOS Traffic Lights: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/BetterTitlebar/import-trafficlights.css"); 12 | ``` 13 | 14 | ### Screenshots: 15 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/e5fe7d6f-0884-4f62-924c-99c40ab82505) 16 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/f4e86421-2d91-4906-b7a9-7045d1068d40) 17 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/8448bb73-05e6-4d13-8044-a7c74e482401) 18 | -------------------------------------------------------------------------------- /ClydeNickname/import.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --clyde-nickname: "Clyde"; 3 | } 4 | .contents_c19a55:has(img[src="/assets/cb1043c312ec65507573c06c37f6ee63.gif"]) .headerText_c19a55 .username_c19a55, 5 | .contents_c19a55:has(img[src="/assets/6024f311af925206143919b880e34a30.png"]) .headerText_c19a55 .username_c19a55 { 6 | font-size: 0; 7 | height: fit-content; 8 | display: flex; 9 | width: fit-content; 10 | float: left; 11 | } 12 | .contents_c19a55:has(img[src="/assets/cb1043c312ec65507573c06c37f6ee63.gif"]) .headerText_c19a55 .username_c19a55::before, 13 | .contents_c19a55:has(img[src="/assets/6024f311af925206143919b880e34a30.png"]) .headerText_c19a55 .username_c19a55::before { 14 | content: var(--clyde-nickname); 15 | font-size: 1rem; 16 | font-weight: 500; 17 | line-height: 1.375rem; 18 | color: var(--header-primary); 19 | display: inline; 20 | vertical-align: baseline; 21 | position: relative; 22 | overflow: hidden; 23 | -ms-flex-negative: 0; 24 | flex-shrink: 0; 25 | } 26 | .userPopoutInner_c69a7b:has(img[src="/assets/cb1043c312ec65507573c06c37f6ee63.gif"]) .userText_c9ccf6 h1, 27 | .link__972a0:has(img[src="/assets/6024f311af925206143919b880e34a30.png"]) .name__20a53 .overflow__82b15, 28 | .userProfileModalInner_c69a7b:has(img[src="/assets/cb1043c312ec65507573c06c37f6ee63.gif"]) .container-3g15px > div > .defaultColor__77578 { 29 | display: none; 30 | } 31 | .userPopoutInner_c69a7b:has(img[src="/assets/cb1043c312ec65507573c06c37f6ee63.gif"]) .userText_c9ccf6::before { 32 | content: var(--clyde-nickname); 33 | font-family: var(--font-display); 34 | font-size: 20px; 35 | line-height: 24px; 36 | font-weight: 600; 37 | color: var(--header-primary); 38 | display: block; 39 | } 40 | .link__972a0:has(img[src="/assets/6024f311af925206143919b880e34a30.png"]) .name__20a53::before { 41 | content: var(--clyde-nickname); 42 | white-space: nowrap; 43 | text-overflow: ellipsis; 44 | overflow: hidden; 45 | position: relative; 46 | } 47 | .userProfileModalInner_c69a7b:has(img[src="/assets/cb1043c312ec65507573c06c37f6ee63.gif"]) .container-3g15px > div::before { 48 | content: var(--clyde-nickname); 49 | margin-right: 12px; 50 | scrollbar-color: var(--profile-body-divider-color) var(--scrollbar-thin-track); 51 | font-family: var(--font-primary); 52 | font-size: 20px; 53 | line-height: 24px; 54 | font-weight: 600; 55 | color: var(--text-normal); 56 | display: block; 57 | } 58 | -------------------------------------------------------------------------------- /ClydeNickname/readme.md: -------------------------------------------------------------------------------- 1 | # Nickname for Clyde 2 | A simple snippet to add a nickname to Clyde 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/ClydeNickname/import.css"); 7 | :root { 8 | --clyde-nickname: "Clyde"; 9 | } 10 | ``` 11 | 12 | ### Screenshots: 13 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/17ba9966-5069-496c-a13e-156b9d412dac) 14 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/ea9943fa-54da-475d-85c1-017404faf164) 15 | -------------------------------------------------------------------------------- /ConsistentChatbar/import.css: -------------------------------------------------------------------------------- 1 | .wrapper__44df5 { 2 | margin-bottom: 0; 3 | border-radius: 0; 4 | padding: 16.5px 0; 5 | } 6 | .form_a7d72e { 7 | padding: 0; 8 | margin-top: 0; 9 | display: flex; 10 | flex-direction: column; 11 | } 12 | .channelTextArea_a7d72e { 13 | margin-bottom: 0; 14 | border-radius: 0; 15 | } 16 | .base_b88801 { 17 | position: absolute; 18 | width: calc(100% - 16px); 19 | display: flex; 20 | justify-content: space-between; 21 | padding: 0 8px; 22 | box-sizing: border-box; 23 | top: -24px; 24 | left: 0; 25 | background: var(--bg-overlay-chat,var(--background-primary)); 26 | } 27 | .base_b88801 > .cooldownWrapper_b21699 { 28 | margin: 0; 29 | position: static; 30 | } 31 | .scrollableContainer__74017 { 32 | border-radius: 0; 33 | } 34 | .scrollableContainer__74017 > .inner__74017 { 35 | min-height: 53px; 36 | align-items: center; 37 | } 38 | .attachWrapper__0923f { 39 | display: flex; 40 | position: static; 41 | align-items: center; 42 | } 43 | .stackedBars__74017 { 44 | border-radius: 0; 45 | } 46 | -------------------------------------------------------------------------------- /ConsistentChatbar/readme.md: -------------------------------------------------------------------------------- 1 | # Consistent Chatbar 2 | A snippet that artificially makes the chatbar look like a continuous user area 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/ConsistentChatbar/import.css"); 7 | ``` 8 | 9 | ### Screenshots 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/055558c4-b618-441d-afc1-7dd73a804495) 11 | -------------------------------------------------------------------------------- /CyanUI2-Ports/Bootup/import.css: -------------------------------------------------------------------------------- 1 | .ready_a2f514 { 2 | position: absolute; 3 | right: 0; 4 | bottom: 0; 5 | width: 150px !important; 6 | height: 150px !important; 7 | } 8 | .container_a2f514 { 9 | backdrop-filter: blur(48px); 10 | } 11 | .theme-dark .container_a2f514 { 12 | background-color: rgb(0 0 0/60%); 13 | } 14 | .theme-light .container_a2f514 { 15 | background-color: rgb(255 255 255/60%); 16 | } 17 | .tip_a2f514 { 18 | color: var(--header-primary); 19 | font-size: 30px; 20 | font-weight: 300; 21 | opacity: .7; 22 | } 23 | .tipTitle_a2f514, 24 | .tip_a2f514 { 25 | width: fit-content !important; 26 | line-height: unset !important; 27 | max-width: 40vw; 28 | font-family: var(--font-headline); 29 | text-transform: none; 30 | margin-bottom: 8px; 31 | text-align: left; 32 | } 33 | .text_a2f514 { 34 | position: absolute; 35 | top: 57px; 36 | left: 35px; 37 | display: flex; 38 | flex-direction: column-reverse; 39 | } 40 | .problems_a2f514 { 41 | z-index: +1; 42 | width: fit-content; 43 | padding-left: 35px; 44 | } 45 | .problemsText_a2f514 { 46 | color: var(--header-primary); 47 | } 48 | .tipTitle_a2f514 { 49 | font-size: 0; 50 | } 51 | .tipTitle_a2f514::after { 52 | --var-loading-header: "Discord is loading..."; 53 | content: var(--var-loading-header); 54 | color: var(--header-primary); 55 | font-size: 22px; 56 | font-weight: 300; 57 | opacity: .5; 58 | } 59 | -------------------------------------------------------------------------------- /CyanUI2-Ports/UserArea2/import.css: -------------------------------------------------------------------------------- 1 | .nameTag__37e49 { 2 | display: none; 3 | } 4 | .avatarWrapper__37e49 { 5 | margin: 0; 6 | padding: 7px; 7 | width: calc((100%/4) - 14px) !important; 8 | justify-content: center; 9 | min-width: unset !important; 10 | height: 42px !important; 11 | border-radius: 8px !important; 12 | cursor: pointer; 13 | transition: .2s ease; 14 | } 15 | .panels_c48ade :has(.flex__7c0ba > :nth-child(4)) .avatarWrapper__37e49 { 16 | width: calc((100%/5) - 14px) !important; 17 | } 18 | .container__37e49 { 19 | padding: 6px; 20 | gap: 4px; 21 | } 22 | .panels_c48ade .flex__7c0ba { 23 | gap: 4px; 24 | width: calc((100%/4)*3); 25 | height: 56px; 26 | } 27 | .panels_c48ade .flex__7c0ba:has(>:nth-child(4)) { 28 | width: calc((100%/5)*4); 29 | } 30 | .panels_c48ade .flex__7c0ba, 31 | .panels_c48ade .avatarWrapper__37e49 { 32 | height: 100%; 33 | align-items: center; 34 | } 35 | .panels_c48ade .flex__7c0ba .button__67645 { 36 | width: 100%; 37 | border-radius: 8px !important; 38 | cursor: pointer; 39 | height: 56px; 40 | transition: .2s ease; 41 | } 42 | #vc-spotify-player { 43 | border-bottom: none; 44 | padding: 12px; 45 | padding-bottom: 0; 46 | } 47 | #vc-spotify-info-wrapper, 48 | .vc-spotify-button-row { 49 | justify-content: space-between; 50 | } 51 | #vc-spotify-album-image { 52 | order: 1; 53 | } 54 | .vc-spotify-button-row { 55 | gap: 4px !important; 56 | margin: 8px -6px 0 -6px; 57 | } 58 | .vc-spotify-button { 59 | border-radius: 6px; 60 | width: 100%; 61 | transition: .2s ease; 62 | height: 36px; 63 | } 64 | -------------------------------------------------------------------------------- /CyanUI2-Ports/readme.md: -------------------------------------------------------------------------------- 1 | # Cyan w/ UI v2 (Cyan 2) UI ports for Discord 2 | Porting some of the new UIs of Cyan 2 to vanilla Discord 3 | 4 | ## Imports: 5 | ### UserArea2: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/CyanUI2-Ports/UserArea2/import.css"); 8 | ``` 9 | ### Bootup: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/CyanUI2-Ports/Bootup/import.css"); 12 | ``` 13 | 14 | ## Screenshots: 15 | ### UserArea2: 16 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/a0083bb4-9728-4f52-bd15-31fc6e70df12) 17 | ### Bootup: 18 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/3866f3a9-fafc-427b-8aaa-ebe41c577b6c) 19 | 20 | ## Variables: 21 | ### Bootup: 22 | ```css 23 | :root { 24 | --var-loading-header: "Polishing surfaces..."; 25 | } 26 | ``` 27 | -------------------------------------------------------------------------------- /DeclutterBar/import-trafficlights.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/DeclutterBar/import.css"); 2 | :root { 3 | --mactitlebar-button-width: 20px; 4 | --mactitlebar-button-height: 20px; 5 | --mactitlebar-button-border-radius: 50px; 6 | --mactitlebar-close-btn-back: #f25056; 7 | --mactitlebar-min-btn-back: #fac536; 8 | --mactitlebar-max-btn-back: #39ea49; 9 | } 10 | .container_fc4f04 { 11 | padding-left: 64px; 12 | padding-right: 0; 13 | } 14 | #app-mount .withFrame_a934d8 { 15 | margin-left: 0; 16 | } 17 | .chat_a7d72e:has(.newMessagesBar__0f481) .container_fc4f04 { 18 | padding-right: 46px !important; 19 | } 20 | .winButtonClose_a934d8 { 21 | order: 3; 22 | margin: auto 0; 23 | } 24 | .winButtonMinMax_a934d8 { 25 | order: 1; 26 | margin: auto 0; 27 | } 28 | .winButtonMinMax_a934d8:last-child { 29 | margin: auto 0; 30 | } 31 | .winButton_a934d8:hover { 32 | background-color: transparent !important; 33 | } 34 | .winButtonClose_a934d8 > svg { 35 | background: var(--mactitlebar-close-btn-back) !important; 36 | background-size: contain !important; 37 | border-radius: var(--mactitlebar-button-border-radius); 38 | } 39 | .winButtonClose_a934d8 > svg > polygon { 40 | display: none !important; 41 | } 42 | .winButtonMinMax_a934d8 > svg { 43 | background: var(--mactitlebar-max-btn-back) !important; 44 | background-size: contain !important; 45 | border-radius: var(--mactitlebar-button-border-radius); 46 | } 47 | .winButtonMinMax_a934d8:last-child > svg { 48 | background: var(--mactitlebar-min-btn-back) !important; 49 | background-size: contain !important; 50 | border-radius: var(--mactitlebar-button-border-radius); 51 | } 52 | .winButtonMinMax_a934d8 > svg > rect { 53 | display: none !important; 54 | } 55 | .winButton_a934d8:hover { 56 | background-color: transparent; 57 | } 58 | .winButton_a934d8 { 59 | width: var(--mactitlebar-button-width) !important; 60 | height: var(--mactitlebar-button-height) !important; 61 | } 62 | .newMessagesBar__0f481 .barButtonAlt__0f481 { 63 | right: calc((-46px * 5.6)); 64 | } 65 | .container__133bf .container_fc4f04, 66 | .homeWrapper__0920e .container_fc4f04, 67 | .shop-3sIaH8 .container_fc4f04 { 68 | left: 0; 69 | } 70 | .winButtonClose_a934d8 > svg:hover, 71 | .winButtonMinMax_a934d8 > svg:hover { 72 | filter: brightness(.6); 73 | } 74 | -------------------------------------------------------------------------------- /DeclutterBar/import.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/BetterTitlebar/import.css"); 2 | .container_fc4f04 { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | height: var(--declutter-bar-height,31px); 7 | min-height: unset; 8 | width: 100vw; 9 | background: none !important; 10 | padding-left: 0; 11 | box-shadow: none; 12 | padding-right: calc(var(--declutter-bar-button-width, 46px)*3); 13 | box-sizing: border-box; 14 | } 15 | .upperContainer_fc4f04 { 16 | -webkit-app-region: drag; 17 | } 18 | .appAsidePanelWrapper_a3002d { 19 | overflow: visible; 20 | } 21 | .withFrame_a934d8 { 22 | width: fit-content; 23 | margin-left: auto; 24 | } 25 | .winButton_a934d8 { 26 | height: var(--declutter-bar-height,31px); 27 | width: var(--declutter-bar-button-width, 46px); 28 | } 29 | .bg_d4b6c5 { 30 | top: calc(var(--declutter-bar-height,31px) * -1) !important; 31 | } 32 | .children_fc4f04:after, 33 | .tabBody__133bf:before { 34 | content: none; 35 | } 36 | .wordmarkWindows_a934d8 { 37 | display: none; 38 | } 39 | .topicClickTarget_bf3bbb { 40 | width: auto; 41 | display: flex; 42 | flex: 0 1 auto; 43 | } 44 | .container_fc4f04 .toolbar_fc4f04, 45 | .container_fc4f04 .topicClickTarget_bf3bbb { 46 | -webkit-app-region: no-drag; 47 | } 48 | .container_fc4f04 .divider_fc4f04 { 49 | display: none; 50 | } 51 | .search_ff5f90, 52 | .search_a46bef, 53 | .searchBar_a46bef { 54 | height: var(--declutter-bar-height,31px); 55 | align-items: center; 56 | } 57 | .DraftEditor-root { 58 | height: fit-content; 59 | transition: .2s ease; 60 | } 61 | .search_a46bef:not(.open_a46bef) > .searchBar_a46bef .DraftEditor-root { 62 | opacity: 0; 63 | position: absolute; 64 | width: 100%; 65 | } 66 | .container_fc4f04 .iconWrapper_fc4f04 .icon_fc4f04 { 67 | scale: var(--declutter-bar-icon-scale,0.8); 68 | } 69 | .input__4f074 { 70 | box-shadow: none !important; 71 | border-radius: 0; 72 | } 73 | .container_fc4f04 .topPill_b3f026 { 74 | height: var(--declutter-bar-height,31px); 75 | gap: 8px; 76 | } 77 | .container_fc4f04 .tabBar__133bf .item__133bf { 78 | margin: 4px 0; 79 | border-radius: 50px; 80 | background-color: transparent !important; 81 | color: var(--interactive-normal) !important; 82 | } 83 | .container_fc4f04 .tabBar__133bf .item__133bf:hover { 84 | background-color: hsl(var(--primary-600-hsl)/.4) !important; 85 | } 86 | .container_fc4f04 .tabBar__133bf .item__133bf.selected_b3f026 { 87 | background-color: var(--background-primary) !important; 88 | color: var(--interactive-active) !important; 89 | } 90 | .platform-win .standardSidebarView__23e6b { 91 | top: 0; 92 | } 93 | .container__01ae2 .container_fc4f04 { 94 | position: static; 95 | width: 100%; 96 | padding: 0; 97 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 98 | -webkit-app-region: no-drag; 99 | } 100 | .container_fc4f04 .toolbar_fc4f04 { 101 | height: var(--declutter-bar-height,31px); 102 | } 103 | .container_fc4f04 .toolbar_fc4f04 .iconWrapper_fc4f04 { 104 | margin: 0; 105 | width: var(--declutter-bar-button-width, 46px); 106 | height: var(--declutter-bar-height,31px); 107 | justify-content: center; 108 | align-items: center; 109 | display: flex; 110 | } 111 | .container_fc4f04 .toolbar_fc4f04 .iconWrapper_fc4f04:hover { 112 | background-color: var(--background-modifier-hover); 113 | color: var(--interactive-hover); 114 | } 115 | .container_fc4f04 .toolbar_fc4f04 .iconWrapper_fc4f04:has(path[d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"]):hover { 116 | background-color: var(--status-danger); 117 | } 118 | .callContainer_d880dc { 119 | overflow: visible; 120 | } 121 | .headerWrapper_d880dc { 122 | margin: 0; 123 | } 124 | .topControls_dd069c { 125 | width: calc(100% + 32px); 126 | margin-left: -16px; 127 | opacity: 1 !important; 128 | transform: none !important; 129 | } 130 | .topControls_dd069c .justifyEnd_abf706 { 131 | padding: 8px 16px; 132 | } 133 | .searchBar_a46bef { 134 | border-radius: 0; 135 | padding: 0 4px; 136 | width: var(--declutter-bar-button-width, 46px); 137 | justify-content: center; 138 | align-items: center; 139 | } 140 | .search_a46bef:not(.open_a46bef) > .searchBar_a46bef { 141 | cursor: pointer; 142 | padding: 0; 143 | } 144 | .search_a46bef:not(.open_a46bef) > .searchBar_a46bef .icon_a46bef { 145 | cursor: pointer; 146 | } 147 | .searchBar_a46bef:hover, 148 | .open_a46bef > .searchBar_a46bef { 149 | background-color: var(--background-modifier-hover); 150 | } 151 | .search_ff5f90 { 152 | margin: 0; 153 | order: -1; 154 | } 155 | .searchBar_a46bef:hover .icon_a46bef, 156 | .open_a46bef > .searchBar_a46bef .icon_a46bef { 157 | color: var(--interactive-hover); 158 | } 159 | .container_fc4f04 .toolbar_fc4f04 .iconWrapper_fc4f04 .iconBadge_fc4f04 { 160 | display: none; 161 | } 162 | .container_fc4f04 .toolbar_fc4f04 .iconWrapper_fc4f04:has(.iconBadge_fc4f04)::after { 163 | content: ""; 164 | width: var(--declutter-bar-button-width, 46px); 165 | height: 1px; 166 | position: absolute; 167 | bottom: 1px; 168 | left: 0; 169 | box-shadow: 0 1px 1px hsl(var(--red-400-hsl)/1),0 0px 4px hsl(var(--red-400-hsl)/1); 170 | } 171 | .container_fc4f04 .toolbar_fc4f04 .iconWrapper_fc4f04:has(.iconBadge_fc4f04) { 172 | overflow: hidden; 173 | } 174 | .autocompleteAttached__6b0e0 { 175 | z-index: +999; 176 | background: var(--bg-overlay-chat,var(--background-primary)); 177 | } 178 | .children_fc4f04 > .hiddenVisually__27f77:first-of-type { 179 | display: flex; 180 | height: fit-content; 181 | position: static; 182 | clip: unset; 183 | clip-path: unset; 184 | font-size: 0; 185 | order: -1; 186 | width: auto; 187 | flex: 0 0 auto; 188 | align-items: center; 189 | } 190 | .children_fc4f04 > .hiddenVisually__27f77:first-of-type::after { 191 | content: "Discord"; 192 | display: flex; 193 | width: fit-content; 194 | font-weight: 700; 195 | color: var(--declutter-bar-wordmark-color,var(--header-primary)); 196 | font-family: var(--declutter-bar-wordmark-font,var(--font-display)); 197 | font-size: var(--declutter-bar-wordmark-font-size, 12px); 198 | margin-left: 8px; 199 | } 200 | .children_fc4f04 > .hiddenVisually__27f77:first-of-type::before { 201 | clip-path: path("M23.0212 1.67671C21.3107 0.879656 19.5079 0.318797 17.6584 0C17.4062 0.461742 17.1749 0.934541 16.9708 1.4184C15.003 1.12145 12.9974 1.12145 11.0283 1.4184C10.819 0.934541 10.589 0.461744 10.3368 0.00546311C8.48074 0.324393 6.67795 0.885118 4.96746 1.68231C1.56727 6.77853 0.649666 11.7538 1.11108 16.652C3.10102 18.1418 5.3262 19.2743 7.69177 20C8.22338 19.2743 8.69519 18.4993 9.09812 17.691C8.32996 17.3997 7.58522 17.0424 6.87684 16.6135C7.06531 16.4762 7.24726 16.3387 7.42403 16.1847C11.5911 18.1749 16.408 18.1749 20.5763 16.1847C20.7531 16.3332 20.9351 16.4762 21.1171 16.6135C20.41 17.0369 19.6639 17.3997 18.897 17.691C19.3052 18.4993 19.7718 19.2689 20.3021 19.9945C22.6677 19.2689 24.8929 18.1364 26.8828 16.6466H26.8893C27.43 10.9731 25.9665 6.04728 23.0212 1.67671ZM9.68041 13.6383C8.39754 13.6383 7.34085 12.4453 7.34085 10.994C7.34085 9.54272 8.37155 8.34973 9.68041 8.34973C10.9893 8.34973 12.0395 9.54272 12.0187 10.994C12.0187 12.4453 10.9828 13.6383 9.68041 13.6383ZM18.3161 13.6383C17.0332 13.6383 15.9765 12.4453 15.9765 10.994C15.9765 9.54272 17.0124 8.34973 18.3161 8.34973C19.6184 8.34973 20.6751 9.54272 20.6543 10.994C20.6543 12.4453 19.6184 13.6383 18.3161 13.6383Z"); 202 | height: 20px; 203 | width: var(--declutter-bar-height,31px); 204 | margin: 0 auto; 205 | scale: .6; 206 | margin-left: 4px; 207 | display: flex; 208 | background-color: var(--declutter-bar-wordmark-color,var(--header-primary)); 209 | content: var(--declutter-bar-wordmark-icon-enabled, ""); 210 | margin-right: -8px; 211 | } 212 | .children_fc4f04 .titleWrapper_fc4f04:not(:last-of-type) { 213 | width: max-content; 214 | flex: 0 0 auto; 215 | -webkit-app-region: no-drag; 216 | } 217 | .titleWrapper_fc4f04 { 218 | display: flex; 219 | min-width: unset; 220 | width: fit-content; 221 | margin: 0; 222 | overflow: hidden; 223 | text-overflow: ellipsis; 224 | flex: unset; 225 | } 226 | .title_fc4f04 { 227 | overflow: hidden; 228 | text-overflow: ellipsis; 229 | width: 100%; 230 | display: block; 231 | font-size: var(--declutter-bar-font-size, 16px); 232 | } 233 | .container__01ae2 .container_fc4f04 { 234 | z-index: 101; 235 | } 236 | html:has(#activeColorway:not(:empty)) .children_fc4f04 > .hiddenVisually__27f77:first-of-type::after, 237 | html:has(#activeColorwayCSS:not(:empty)) .children_fc4f04 > .hiddenVisually__27f77:first-of-type::after { 238 | content: "Colorways"; 239 | display: flex; 240 | width: fit-content; 241 | font-size: 12px; 242 | font-family: var(--font-display); 243 | font-weight: 700; 244 | background-color: var(--background-primary); 245 | padding: 2px 8px; 246 | border-radius: 16px; 247 | -webkit-app-region: no-drag; 248 | transition: background-color .15s ease-out, border-radius .2s ease; 249 | height: min-content; 250 | color: var(--header-primary); 251 | margin-left: 0; 252 | } 253 | html:has(#activeColorway:not(:empty)) .children_fc4f04 > .hiddenVisually__27f77:first-of-type:hover::after, 254 | html:has(#activeColorwayCSS:not(:empty)) .children_fc4f04 > .hiddenVisually__27f77:first-of-type:hover::after { 255 | background-color: var(--brand-experiment); 256 | border-radius: 8px; 257 | } 258 | .chat_a7d72e:has(.newMessagesBar__0f481) .container_fc4f04, 259 | :root:has(.newMessagesBar__0f481) .container_fc4f04 .searchBar_a46bef:not(:hover) { 260 | background: var(--brand-600) !important; 261 | } 262 | .chat_a7d72e:has(.newMessagesBar__0f481) .children_fc4f04 > .hiddenVisually__27f77:first-of-type::after { 263 | content: "Discord | Unread messages"; 264 | } 265 | html:has(#activeColorway:not(:empty)) .chat_a7d72e:has(.newMessagesBar__0f481) .children_fc4f04 > .hiddenVisually__27f77:first-of-type::after, 266 | html:has(#activeColorwayCSS:not(:empty)) .chat_a7d72e:has(.newMessagesBar__0f481) .children_fc4f04 > .hiddenVisually__27f77:first-of-type::after { 267 | content: "Colorways | Unread messages"; 268 | } 269 | .chat_a7d72e:has(.newMessagesBar__0f481) .container_fc4f04 :is(.icon_fc4f04,.icon_a46bef,.topic_bf3bbb) { 270 | color: var(--interactive-hover); 271 | } 272 | :root:has(.newMessagesBar__0f481) .withFrame_a934d8 .winButton_a934d8 { 273 | color: var(--interactive-hover); 274 | } 275 | .form_a7d72e { 276 | z-index: 100; 277 | } 278 | .callContainer_d880dc { 279 | max-width: 100%; 280 | } 281 | .returnButton_c791b2 .contents__201d5 .text-xs-medium__220aa { 282 | font-size: 0 !important; 283 | } 284 | .returnButton_c791b2 { 285 | border-radius: 0; 286 | border: none; 287 | transition: none; 288 | margin: 0; 289 | width: var(--declutter-bar-button-width, 46px); 290 | padding: 0; 291 | min-width: unset; 292 | } 293 | .returnButton_c791b2 .contents__201d5 { 294 | display: flex; 295 | margin: 0; 296 | overflow: visible; 297 | background-image: none !important; 298 | gap: 4px; 299 | } 300 | .returnButton_c791b2:hover { 301 | background-color: var(--background-modifier-hover) !important; 302 | } 303 | .returnButton_c791b2 .contents__201d5 .returnIcon_c791b2 { 304 | color: var(--interactive-normal) !important; 305 | margin: 0; 306 | } 307 | .returnButton_c791b2:hover .contents__201d5 .returnIcon_c791b2 { 308 | color: var(--interactive-hover) !important; 309 | } 310 | .returnButton_c791b2 .contents__201d5::before { 311 | content: "<"; 312 | color: var(--interactive-normal); 313 | width: fit-content; 314 | height: 16px; 315 | display: block; 316 | font-family: var(--font-code); 317 | } 318 | .returnButton_c791b2:hover .contents__201d5::before { 319 | color: var(--interactive-hover); 320 | } 321 | .returnButton_c791b2 .iconContainer__2ea32 { 322 | margin: 0; 323 | } 324 | .searchBar_a46bef { 325 | background: none; 326 | } 327 | .wrapper_d880dc, 328 | .applicationStore_f07d62 .scroller__244e5, 329 | .applicationStore_f07d62 { 330 | border-top-left-radius: 8px; 331 | } 332 | .followButton_a7d72e { 333 | -webkit-app-region: no-drag; 334 | border-radius: 0; 335 | height: var(--declutter-bar-height,31px); 336 | background-color: transparent !important; 337 | transition: none; 338 | margin-right: 0; 339 | margin-left: auto; 340 | color: var(--interactive-normal) !important; 341 | width: var(--declutter-bar-button-width, 46px); 342 | padding: 0; 343 | order: 10; 344 | } 345 | .followButton_a7d72e:hover { 346 | background-color: var(--background-modifier-hover) !important; 347 | color: var(--interactive-hover) !important; 348 | } 349 | .followButton_a7d72e::before { 350 | content: ""; 351 | background-color: currentColor; 352 | clip-path: path("M3.9 8.26H2V15.2941H3.9V8.26Z M19.1 4V5.12659L4.85 8.26447V18.1176C4.85 18.5496 5.1464 18.9252 5.5701 19.0315L9.3701 19.9727C9.4461 19.9906 9.524 20 9.6 20C9.89545 20 10.1776 19.8635 10.36 19.6235L12.7065 16.5242L19.1 17.9304V19.0588H21V4H19.1ZM9.2181 17.9944L6.75 17.3826V15.2113L10.6706 16.0753L9.2181 17.9944Z"); 353 | width: 19px; 354 | height: 19px; 355 | display: inline-block; 356 | scale: .9; 357 | translate: -2px -1px; 358 | } 359 | .followButton_a7d72e > .contents__201d5 { 360 | display: none; 361 | } 362 | .titleWrapper_fc4f04 { 363 | margin-right: 8px; 364 | } 365 | .headerBar__0920e:before { 366 | content: none; 367 | } 368 | .topic_bf3bbb .anchor_edefb8 { 369 | display: flex; 370 | align-items: center; 371 | gap: 3px; 372 | height: var(--declutter-bar-height,31px); 373 | color: var(--interactive-normal); 374 | padding: 0 2px; 375 | padding-right: 8px; 376 | margin: 0 0.25em; 377 | } 378 | .topic_bf3bbb .anchor_edefb8:hover { 379 | background-color: var(--background-modifier-hover); 380 | color: var(--interactive-hover); 381 | } 382 | .topic_bf3bbb .anchor_edefb8::before { 383 | content: ""; 384 | background-color: currentColor; 385 | clip-path: path("M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z"); 386 | width: 22px; 387 | height: 22px; 388 | display: inline-block; 389 | scale: var(--declutter-bar-icon-scale,0.8); 390 | } 391 | .topic_bf3bbb .channelMention { 392 | border-radius: 0; 393 | height: var(--declutter-bar-height,31px); 394 | align-items: center; 395 | display: flex; 396 | margin: 0 0.25em; 397 | } 398 | .topic_bf3bbb .channelWithIcon { 399 | align-items: center; 400 | display: flex; 401 | } 402 | .topic_bf3bbb .channelWithIcon .icon_b52c3f { 403 | margin-bottom: 0.05rem; 404 | } 405 | .topic_bf3bbb .channelMention:not(:hover) { 406 | background-color: transparent; 407 | } 408 | .topic_bf3bbb { 409 | width: min-content !important; 410 | overflow: hidden; 411 | text-overflow: ellipsis; 412 | display: inline-flex; 413 | height: var(--declutter-bar-height,31px); 414 | white-space: nowrap; 415 | line-height: var(--declutter-bar-height,31px); 416 | max-width: 50% !important; 417 | min-width: unset !important; 418 | position: relative; 419 | flex: 0 0 auto; 420 | align-items: center; 421 | } 422 | .container_fc4f04 .children_fc4f04 { 423 | overflow: hidden; 424 | } 425 | .topic_bf3bbb .channelMention { 426 | width: fit-content; 427 | display: inline-flex; 428 | } 429 | .topic_bf3bbb .emojiContainer__75abc > .emoji { 430 | height: var(--declutter-bar-height,31px); 431 | } 432 | .topic_bf3bbb .anchor_edefb8 { 433 | display: inline-flex; 434 | } 435 | .topicClickTarget_bf3bbb { 436 | width: 100%; 437 | } 438 | .container__4f074, 439 | .container__4f074 .input__4f074 { 440 | height: var(--declutter-bar-height,31px); 441 | line-height: var(--declutter-bar-height,31px); 442 | } 443 | .typeWindows_a934d8 { 444 | height: var(--declutter-bar-height,31px); 445 | box-sizing: border-box; 446 | } 447 | .upperContainer_fc4f { 448 | align-items: center; 449 | } 450 | .container__4f074, 451 | .container__4f074 .input__4f074 { 452 | height: 28px; 453 | line-height: 28px; 454 | } 455 | .guilds_c48ade.hidden_ef3116 + .base_c48ade > .content_c48ade { 456 | width: 100vw; 457 | } 458 | .guilds_c48ade.hidden_ef3116 + .base_c48ade > .content_c48ade .chatContent_a7d72e { 459 | opacity: 0; 460 | } 461 | .title-dzyan3 { 462 | margin-left: 0; 463 | } 464 | .form_a7d72e, 465 | .clipContainer__841c8 { 466 | margin-top: 0; 467 | } 468 | .scrollerSpacer__36d07 { 469 | height: 26px; 470 | } 471 | .notice__5fd4c { 472 | height: var(--declutter-bar-height,31px); 473 | -webkit-app-regin: no-drag; 474 | display: flex; 475 | justify-content: center; 476 | align-items: center; 477 | box-sizing: border-box; 478 | top: unset; 479 | box-shadow: none; 480 | } 481 | .notice__5fd4c:not(:first-of-type) { 482 | border-radius: 0; 483 | } 484 | .notice__5fd4c > :is(.premiumIcon__9671b,.button__33db6) { 485 | top: 0; 486 | } 487 | .notice__5fd4c > .closeButton__90904 { 488 | height: var(--declutter-bar-height,31px); 489 | } 490 | .layer_d4b6c5:not(.baseLayer_d4b6c5) { 491 | top: calc(var(--declutter-bar-height,31px) * -1) !important; 492 | padding-top: var(--declutter-bar-height,31px) !important; 493 | } 494 | -------------------------------------------------------------------------------- /DeclutterBar/readme.md: -------------------------------------------------------------------------------- 1 | # Declutter Bar 2 | A modified version of the "Better Titlebar" snippet, that moves the channel actions (the bar above the chat) inside the titlebar 3 | 4 | ### Importing 5 | #### Normal: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/DeclutterBar/import.css"); 8 | ``` 9 | #### With macOS Traffic Lights: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/DeclutterBar/import-trafficlights.css"); 12 | ``` 13 | #### Optional settings: 14 | ```css 15 | :root { 16 | --declutter-bar-height: 31px; 17 | --declutter-bar-button-width: 46px; 18 | --declutter-bar-icon-scale: 0.8; 19 | --declutter-bar-font-size: 16px; 20 | --declutter-bar-wordmark-color: var(--header-primary); 21 | --declutter-bar-wordmark-font: var(--font-display); 22 | --declutter-bar-wordmark-font-size: 12px; 23 | /** 24 | "": on 25 | none: off 26 | */ 27 | --declutter-bar-wordmark-icon-enabled: ""; 28 | } 29 | ``` 30 | 31 | ### Screenshots: 32 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/4c1a6fb0-803d-451d-9cf6-df1fbe84122c) 33 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/e6c9bcb0-16d4-4645-8b7c-fec547839c93) 34 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/00c01232-6596-42ec-9301-f94317deaf73) 35 | -------------------------------------------------------------------------------- /DisablePIP/import.css: -------------------------------------------------------------------------------- 1 | div:not(:has(.videoWrapper__6981d)) + .pictureInPicture__6341f, 2 | div:not(:has(.videoWrapper__6981d)) + .pictureInPicture__6341f * { 3 | opacity: 0; 4 | pointer-events: none !important; 5 | transition: 0s !important; 6 | } 7 | -------------------------------------------------------------------------------- /DisablePIP/readme.md: -------------------------------------------------------------------------------- 1 |

Disable Picture-in-picture

2 | 3 | ### Allows you to hide the Pictire-in-picture (Not-detached) window without stopping playback in activities like YouTube 4 | 5 | ### Importing: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/DisablePIP/import.css"); 8 | ``` 9 | -------------------------------------------------------------------------------- /DiscordTeal/import.css: -------------------------------------------------------------------------------- 1 | :root:root { 2 | --brand-100-hsl: var(--teal-100-hsl); 3 | --brand-130-hsl: var(--teal-130-hsl); 4 | --brand-160-hsl: var(--teal-160-hsl); 5 | --brand-200-hsl: var(--teal-200-hsl); 6 | --brand-230-hsl: var(--teal-230-hsl); 7 | --brand-260-hsl: var(--teal-260-hsl); 8 | --brand-300-hsl: var(--teal-300-hsl); 9 | --brand-330-hsl: var(--teal-330-hsl); 10 | --brand-345-hsl: var(--teal-345-hsl); 11 | --brand-360-hsl: var(--teal-360-hsl); 12 | --brand-400-hsl: var(--teal-400-hsl); 13 | --brand-430-hsl: var(--teal-430-hsl); 14 | --brand-460-hsl: var(--teal-460-hsl); 15 | --brand-500-hsl: var(--teal-500-hsl); 16 | --brand-530-hsl: var(--teal-530-hsl); 17 | --brand-560-hsl: var(--teal-560-hsl); 18 | --brand-600-hsl: var(--teal-600-hsl); 19 | --brand-630-hsl: var(--teal-630-hsl); 20 | --brand-660-hsl: var(--teal-660-hsl); 21 | --brand-700-hsl: var(--teal-700-hsl); 22 | --brand-730-hsl: var(--teal-730-hsl); 23 | --brand-760-hsl: var(--teal-760-hsl); 24 | --brand-800-hsl: var(--teal-800-hsl); 25 | --brand-830-hsl: var(--teal-830-hsl); 26 | --brand-860-hsl: var(--teal-860-hsl); 27 | --brand-900-hsl: var(--teal-900-hsl); 28 | } 29 | -------------------------------------------------------------------------------- /DiscordTeal/readme.md: -------------------------------------------------------------------------------- 1 | # Discord Teal Brand 2 | Changes all `brand-hsl` values for `teal-hsl` 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/DiscordTeal/import.css"); 7 | ``` 8 | -------------------------------------------------------------------------------- /FreeNitroProfile/import.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --custom-nitro-profile-primary: var(--background-primary); 3 | --custom-nitro-profile-secondary: var(--background-primary); 4 | --custom-nitro-profile-banner: var(--background-floating); 5 | } 6 | .userProfileOuterUnthemed_c69a7b:has(.pencilContainer_c3e427) { 7 | padding: 4px; 8 | background: linear-gradient(var(--custom-nitro-profile-primary),var(--custom-nitro-profile-secondary)); 9 | border-radius: 4px; 10 | } 11 | .userProfileOuterUnthemed_c69a7b:has(.pencilContainer_c3e427) .buttonColor_e36233 { 12 | background-color: var(--custom-nitro-profile-primary) !important; 13 | } 14 | .userProfileOuterUnthemed_c69a7b:has(.pencilContainer_c3e427) > div { 15 | border-radius: 4px; 16 | background: linear-gradient(var(--custom-nitro-profile-primary),var(--custom-nitro-profile-primary) 60px,var(--custom-nitro-profile-secondary)); 17 | } 18 | .theme-dark .userProfileOuter_c69a7b:has(.pencilContainer_c3e427) .overlayBackground_c69a7b, 19 | .theme-dark .userPopoutOuter_c69a7b:has(.pencilContainer_c3e427) .userProfileInner_c69a7b::before, 20 | .theme-dark .userProfileModalOuter_c69a7b:has(.pencilContainer_c3e427) .userProfileModalInner_c69a7b:before { 21 | background: hsla(0,0%,0%,0.45) !important; 22 | } 23 | .theme-light .userProfileOuter_c69a7b:has(.pencilContainer_c3e427) .overlayBackground_c69a7b, 24 | .theme-light .userPopoutOuter_c69a7b:has(.pencilContainer_c3e427) .userProfileInner_c69a7b::before, 25 | .theme-light .userProfileModalOuter_c69a7b:has(.pencilContainer_c3e427) .userProfileModalInner_c69a7b:before { 26 | background: hsla(0,0%,100%,0.45) !important; 27 | } 28 | .userPopoutOuter_c69a7b:has(.pencilContainer_c3e427) .profileBadges_f89da9, 29 | .userProfileModalOuter_c69a7b:has(.pencilContainer_c3e427) .badgeList-2aoHPw { 30 | background-color: var(--custom-nitro-profile-secondary); 31 | } 32 | .userPopoutOuter_c69a7b:has(.pencilContainer_c3e427) .avatarWrapper_f89da9 { 33 | left: 22px; 34 | top: 76px; 35 | z-index: +1; 36 | } 37 | .userProfileOuterUnthemed_c69a7b:has(.pencilContainer_c3e427) .pencilContainer_c3e427 { 38 | display: none; 39 | } 40 | .userPopoutOuter_c69a7b:has(.pencilContainer_c3e427) .bannerSVGWrapper_b32cc2 { 41 | height: 120px; 42 | } 43 | .userProfileModalOuter_c69a7b:has(.pencilContainer_c3e427) .bannerSVGWrapper_b32cc2 { 44 | height: 212px; 45 | } 46 | .userProfileOuterUnthemed_c69a7b:has(.pencilContainer_c3e427) .banner__68edb { 47 | background-color: transparent !important; 48 | } 49 | .userPopoutOuter_c69a7b:has(.pencilContainer_c3e427) .userProfileInner_c69a7b::after { 50 | content: ""; 51 | position: absolute; 52 | background: var(--custom-nitro-profile-banner); 53 | background-repeat: no-repeat; 54 | background-size: cover; 55 | background-position: center; 56 | border-radius: 4px 4px 0 0; 57 | top: 4px; 58 | left: 4px; 59 | height: 120px; 60 | width: 340px; 61 | -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 120' style='min-width: 340px; min-height: 120px;' %3E%3Cpath d='M 0 0 L 0 120 L 12.785156 120 A 46 46 0 0 1 12 112 A 46 46 0 0 1 58 66 A 46 46 0 0 1 104 112 A 46 46 0 0 1 103.21484 120 L 340 120 L 340 0 L 0 0 z '/%3E%3C/svg%3E"); 62 | } 63 | .userProfileModalOuter_c69a7b:has(.pencilContainer_c3e427) .userProfileInner_c69a7b::after { 64 | content: ""; 65 | position: absolute; 66 | background: var(--custom-nitro-profile-banner); 67 | background-repeat: no-repeat; 68 | background-size: cover; 69 | background-position: center; 70 | border-radius: 4px 4px 0 0; 71 | top: 4px; 72 | left: 4px; 73 | height: 212px; 74 | width: 600px; 75 | -webkit-mask: url("data:image/svg+xml,%3Csvg class='bannerSVGWrapper_b32cc2' viewBox='0 0 600 212' style='min-width: 600px; min-height: 212px;' id='svg1689' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs1693' /%3E%3Cpath id='path1818' style='fill:%23ffffff' d='M 0 0 L 0 212 L 14.357422 212 A 68 68 0 0 1 14 207 A 68 68 0 0 1 14.691406 197.32227 A 68 68 0 0 1 16.753906 187.8418 A 68 68 0 0 1 20.144531 178.75195 A 68 68 0 0 1 24.794922 170.23633 A 68 68 0 0 1 30.609375 162.46875 A 68 68 0 0 1 37.46875 155.60938 A 68 68 0 0 1 45.236328 149.79492 A 68 68 0 0 1 53.751953 145.14453 A 68 68 0 0 1 62.841797 141.75391 A 68 68 0 0 1 72.322266 139.69141 A 68 68 0 0 1 82 139 A 68 68 0 0 1 85.335938 139.08203 A 68 68 0 0 1 88.666016 139.32812 A 68 68 0 0 1 91.978516 139.73633 A 68 68 0 0 1 95.265625 140.30664 A 68 68 0 0 1 98.523438 141.03711 A 68 68 0 0 1 101.74023 141.92773 A 68 68 0 0 1 104.9082 142.97461 A 68 68 0 0 1 108.02344 144.17578 A 68 68 0 0 1 111.07422 145.5293 A 68 68 0 0 1 114.05469 147.0293 A 68 68 0 0 1 116.95898 148.67383 A 68 68 0 0 1 119.7793 150.46094 A 68 68 0 0 1 122.50781 152.38281 A 68 68 0 0 1 125.13867 154.43555 A 68 68 0 0 1 127.66602 156.61523 A 68 68 0 0 1 130.08398 158.91602 A 68 68 0 0 1 132.38477 161.33398 A 68 68 0 0 1 134.56445 163.86133 A 68 68 0 0 1 136.61719 166.49219 A 68 68 0 0 1 138.53906 169.2207 A 68 68 0 0 1 140.32617 172.04102 A 68 68 0 0 1 141.9707 174.94531 A 68 68 0 0 1 143.4707 177.92578 A 68 68 0 0 1 144.82422 180.97656 A 68 68 0 0 1 146.02539 184.0918 A 68 68 0 0 1 147.07227 187.25977 A 68 68 0 0 1 147.96289 190.47656 A 68 68 0 0 1 148.69336 193.73438 A 68 68 0 0 1 149.26367 197.02148 A 68 68 0 0 1 149.67188 200.33398 A 68 68 0 0 1 149.91797 203.66406 A 68 68 0 0 1 150 207 A 68 68 0 0 1 149.64258 212 L 600 212 L 600 0 L 0 0 z ' /%3E%3C/svg%3E"); 76 | } 77 | -------------------------------------------------------------------------------- /FreeNitroProfile/readme.md: -------------------------------------------------------------------------------- 1 | # Free Nitro Profile 2 | A replica of the nitro profile customization system. 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/FreeNitroProfile/import.css"); 7 | ``` 8 | 9 | ### Customizing 10 | The variables below determine the 2 colors of the gradient and the banner color/image 11 | ```css 12 | :root { 13 | --custom-nitro-profile-primary: var(--background-primary); /*Gradient top color*/ 14 | --custom-nitro-profile-secondary: var(--background-primary); /*Gradient bottom color*/ 15 | --custom-nitro-profile-banner: var(--background-floating); /*Banner image/color*/ 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /HorizontalServerList/import-topbar.css: -------------------------------------------------------------------------------- 1 | .chat_a7d72e, 2 | .container__01ae2, 3 | .container__133bf, 4 | .applicationStore_f07d62, 5 | .containerSidenav_dc2e0e { 6 | padding-top: 72px; 7 | } 8 | .container_c48ade { 9 | display: block; 10 | height: 100%; 11 | } 12 | .guilds_c48ade { 13 | position: absolute; 14 | z-index: +1; 15 | height: 72px; 16 | width: calc(100vw - 240px); 17 | top: 0; 18 | right: 0; 19 | } 20 | .base_c48ade { 21 | height: 100%; 22 | } 23 | .tutorialContainer__1f388 { 24 | display: flex; 25 | width: fit-content; 26 | } 27 | .guilds_c48ade .scroller_ef3116 { 28 | display: flex; 29 | flex-wrap: nowrap; 30 | overflow: auto hidden !important; 31 | align-items: center; 32 | padding-right: 10px; 33 | padding-top: 0; 34 | } 35 | .guilds_c48ade .scroller_ef3116::-webkit-scrollbar { 36 | height: 0; 37 | width: 0; 38 | } 39 | .listItem__650eb { 40 | width: 48px; 41 | height: 48px; 42 | margin-bottom: 0; 43 | } 44 | .listItem__650eb + [aria-label] { 45 | display: flex; 46 | } 47 | .expandedFolderBackground__48112 { 48 | width: calc(100% - 7px); 49 | height: 48px; 50 | top: 0; 51 | left: 7px; 52 | } 53 | .listItem__650eb { 54 | flex-direction: column; 55 | margin-left: 7px; 56 | } 57 | .listItem__650eb + [style]:not(ul) { 58 | height: 48px !important; 59 | width: 48px !important; 60 | display: flex !important; 61 | } 62 | [id*="folder-items-"], 63 | .wrapper__48112 { 64 | width: fit-content !important; 65 | height: 48px !important; 66 | display: flex; 67 | align-items: center; 68 | } 69 | .wrapper__58105, 70 | .colorwaysBtnPill { 71 | top: unset; 72 | bottom: -12px; 73 | width: 48px !important; 74 | height: 8px !important; 75 | z-index: +1; 76 | } 77 | .wrapper__58105 > .item__58105, 78 | .colorwaysBtnPill > .item__58105 { 79 | rotate: -90deg; 80 | margin-left: 20px; 81 | margin-top: 8px; 82 | } 83 | .guildSeparator__252b6 { 84 | width: 2px; 85 | height: 32px; 86 | } 87 | .listItem__650eb:has(.guildSeparator__252b6) { 88 | width: 2px; 89 | margin: 0 7px; 90 | } 91 | .container__37e49 { 92 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 93 | height: 72px; 94 | margin-bottom: 0; 95 | } 96 | .sidebar_c48ade { 97 | border-radius: 0 !important; 98 | } 99 | .panels_c48ade { 100 | order: -1; 101 | display: flex; 102 | flex-direction: column-reverse; 103 | } 104 | .platform-osx .guilds_c48ade.wrapper_ef3116 { 105 | margin-top: 0; 106 | } 107 | .pill__5bc7e { 108 | top: unset; 109 | bottom: 0; 110 | } 111 | .platform-osx .container__37e49 { 112 | height: 48px; 113 | padding-top: 24px; 114 | } 115 | .listItem__650eb:has(.guildSeparator__252b6) { 116 | margin-right: 0; 117 | } 118 | -------------------------------------------------------------------------------- /HorizontalServerList/import.css: -------------------------------------------------------------------------------- 1 | .chat_a7d72e, 2 | .container__01ae2, 3 | .container__133bf, 4 | .applicationStore_f07d62, 5 | .containerSidenav_dc2e0e { 6 | padding-bottom: 72px; 7 | } 8 | .container_c48ade { 9 | display: block; 10 | height: 100%; 11 | } 12 | .guilds_c48ade { 13 | position: absolute; 14 | z-index: +1; 15 | height: 72px; 16 | width: calc(100vw - 240px); 17 | bottom: 0; 18 | right: 0; 19 | } 20 | .base_c48ade { 21 | height: 100%; 22 | } 23 | .tutorialContainer__1f388 { 24 | display: flex; 25 | width: fit-content; 26 | } 27 | .guilds_c48ade .scroller_ef3116 { 28 | display: flex; 29 | flex-wrap: nowrap; 30 | overflow: auto hidden !important; 31 | align-items: center; 32 | padding-right: 10px; 33 | padding-top: 0; 34 | } 35 | .guilds_c48ade .scroller_ef3116::-webkit-scrollbar { 36 | height: 0; 37 | width: 0; 38 | } 39 | .listItem__650eb { 40 | width: 48px; 41 | height: 48px; 42 | margin-bottom: 0; 43 | } 44 | .listItem__650eb + [aria-label] { 45 | display: flex; 46 | } 47 | .expandedFolderBackground__48112 { 48 | width: calc(100% - 7px); 49 | height: 48px; 50 | top: 0; 51 | left: 7px; 52 | } 53 | .listItem__650eb { 54 | flex-direction: column; 55 | margin-left: 7px; 56 | } 57 | .listItem__650eb + [style]:not(ul) { 58 | height: 48px !important; 59 | width: 48px !important; 60 | display: flex !important; 61 | } 62 | [id*="folder-items-"], 63 | .wrapper__48112 { 64 | width: fit-content !important; 65 | height: 48px !important; 66 | display: flex; 67 | align-items: center; 68 | } 69 | .wrapper__58105, 70 | .colorwaysBtnPill { 71 | top: unset; 72 | bottom: -12px; 73 | width: 48px !important; 74 | height: 8px !important; 75 | z-index: +1; 76 | } 77 | .wrapper__58105 > .item__58105, 78 | .colorwaysBtnPill > .item__58105 { 79 | rotate: -90deg; 80 | margin-left: 20px; 81 | margin-top: 8px; 82 | } 83 | .guildSeparator__252b6 { 84 | width: 2px; 85 | height: 32px; 86 | } 87 | .listItem__650eb:has(.guildSeparator__252b6) { 88 | width: 2px; 89 | margin: 0 7px; 90 | } 91 | .container__37e49 { 92 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 93 | height: 72px; 94 | margin-bottom: 0; 95 | } 96 | .sidebar_c48ade { 97 | border-radius: 0 !important; 98 | } 99 | .pill__5bc7e { 100 | top: unset; 101 | bottom: 0; 102 | } 103 | .platform-osx .guilds_c48ade.wrapper_ef3116 { 104 | margin-top: 0; 105 | } 106 | .platform-osx .header_f37cb1 { 107 | padding-left: 84px; 108 | height: fit-content; 109 | } 110 | .platform-osx .header_f37cb1 .name_f37cb1 { 111 | overflow: visible; 112 | white-space: pre-wrap; 113 | } 114 | .platform-osx .header_f37cb1 .headerContent_f37cb1 { 115 | height: fit-content; 116 | } 117 | .listItem__650eb:has(.guildSeparator__252b6) { 118 | margin-right: 0; 119 | } 120 | -------------------------------------------------------------------------------- /HorizontalServerList/readme.md: -------------------------------------------------------------------------------- 1 | # DaBluLite's Horizontal Server List 2 | A different impementation of Gibbu's original HSL snippet 3 | 4 | ## Importing (Bottom): 5 | ### Normal: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/HorizontalServerList/import.css"); 8 | ``` 9 | ### Unified With User Area: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/HorizontalServerList/unified-import.css"); 12 | ``` 13 | ## Importing (Top): 14 | ### Normal: 15 | ```css 16 | @import url("https://dablulite.github.io/css-snippets/HorizontalServerList/import-topbar.css"); 17 | ``` 18 | ### Unified With User Area: 19 | ```css 20 | @import url("https://dablulite.github.io/css-snippets/HorizontalServerList/unified-import-topbar.css"); 21 | ``` 22 | 23 | ### Screenshots: 24 | Bottom: 25 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/7e79e017-babd-4c08-877e-12a6cabe4701) 26 | 27 | Top: 28 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/303120a3-a2f3-4ac4-82a0-f8db9ed526af) 29 | 30 | Unified: 31 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/c288a3a9-9eca-4c39-b78d-5698bf2f4896) 32 | -------------------------------------------------------------------------------- /HorizontalServerList/unified-import-topbar.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/HorizontalServerList/import-topbar.css"); 2 | .container__37e49 .avatarWrapper__37e49 { 3 | height: 48px; 4 | padding: 0; 5 | width: 48px; 6 | min-width: unset; 7 | margin-right: 0; 8 | background: none !important; 9 | } 10 | .container__37e49 .avatarWrapper__37e49 .svg__44b0c .avatar__44b0c { 11 | border-radius: 50%; 12 | transition: .2s !important; 13 | } 14 | .container__37e49 .avatarWrapper__37e49:hover .svg__44b0c .avatar__44b0c { 15 | border-radius: 10px !important; 16 | } 17 | .container__37e49 .avatarWrapper__37e49 .nameTag__37e49 { 18 | display: none; 19 | } 20 | .container__37e49 .avatarWrapper__37e49 .avatar__37e49 { 21 | width: 48px !important; 22 | height: 48px !important; 23 | } 24 | .container__37e49 .svg__44b0c { 25 | width: 60px !important; 26 | height: 60px !important; 27 | } 28 | .container__37e49 .svg__44b0c > :is(svg,.pointerEvents__44b0c) { 29 | display: none; 30 | } 31 | .container__37e49 .svg__44b0c, 32 | .container__37e49 .svg__44b0c > foreignObject { 33 | mask: none !important; 34 | } 35 | .container__37e49 { 36 | width: fit-content; 37 | padding-right: 7px; 38 | min-width: unset; 39 | gap: 7px; 40 | } 41 | .guilds_c48ade { 42 | width: calc(100vw - 228px); 43 | z-index: +2; 44 | } 45 | .container__37e49 .button__201d5 { 46 | width: 48px; 47 | height: 48px; 48 | border-radius: 50%; 49 | transition: .2s; 50 | background-color: var(--background-primary); 51 | } 52 | .container__37e49 .button__201d5:hover { 53 | border-radius: 16px; 54 | background-color: var(--brand-experiment); 55 | color: var(--interactive-active); 56 | } 57 | .container__37e49 > .flex__7c0ba { 58 | gap: 7px; 59 | } 60 | .container__37e49::after { 61 | content: ""; 62 | width: 2px; 63 | height: 32px; 64 | border-radius: 1px; 65 | background-color: var(--background-modifier-accent); 66 | } 67 | .panels_c48ade, 68 | .sidebar_c48ade { 69 | overflow: visible; 70 | } 71 | .container_c48ade:has(.panels_c48ade .container__37e49 .button__201d5 path[d="M182 856q-51 0-79-35.5T82 734l42-300q9-60 53.5-99T282 296h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778 856q-21 0-39-7.5T706 826l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm498-240q17 0 28.5-11.5T720 576q0-17-11.5-28.5T680 536q-17 0-28.5 11.5T640 576q0 17 11.5 28.5T680 616Zm-80-120q17 0 28.5-11.5T640 456q0-17-11.5-28.5T600 416q-17 0-28.5 11.5T560 456q0 17 11.5 28.5T600 496ZM310 616h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Z"]) .guilds_c48ade { 72 | width: calc(100vw - 228px - 7px - 48px); 73 | } 74 | .chat_a7d72e, .container__01ae2, .container__133bf, .applicationStore_f07d62, .containerSidenav_dc2e0e { 75 | padding-top: 0; 76 | margin-top: 72px; 77 | } 78 | .container__37e49:has(.flex__7c0ba .button__201d5:nth-of-type(4)) { 79 | width: calc(227px + 56px) !important; 80 | } 81 | .guilds_c48ade:has(~ .base_c48ade .container__37e49 .flex__7c0ba .button__201d5:nth-of-type(4)) { 82 | width: calc(100vw - 228px - 56px) !important; 83 | } 84 | .sidebar_c48ade { 85 | overflow: visible !important; 86 | } 87 | .ColorwaySelectorBtnContainer { 88 | margin-bottom: 0; 89 | width: 56px !important; 90 | flex: 0 0 56px; 91 | justify-content: end; 92 | } 93 | -------------------------------------------------------------------------------- /HorizontalServerList/unified-import.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/HorizontalServerList/import.css"); 2 | .container__37e49 .avatarWrapper__37e49 { 3 | height: 48px; 4 | padding: 0; 5 | width: 48px; 6 | min-width: unset; 7 | margin-right: 0; 8 | background: none !important; 9 | } 10 | .container__37e49 .avatarWrapper__37e49 .svg__44b0c .avatar__44b0c { 11 | border-radius: 50%; 12 | transition: .2s !important; 13 | } 14 | .container__37e49 .avatarWrapper__37e49:hover .svg__44b0c .avatar__44b0c { 15 | border-radius: 10px !important; 16 | } 17 | .container__37e49 .avatarWrapper__37e49 .nameTag__37e49 { 18 | display: none; 19 | } 20 | .container__37e49 .avatarWrapper__37e49 .avatar__37e49 { 21 | width: 48px !important; 22 | height: 48px !important; 23 | } 24 | .container__37e49 .svg__44b0c { 25 | width: 60px !important; 26 | height: 60px !important; 27 | } 28 | .container__37e49 .svg__44b0c > :is(svg,.pointerEvents__44b0c) { 29 | display: none; 30 | } 31 | .container__37e49 .svg__44b0c, 32 | .container__37e49 .svg__44b0c > foreignObject { 33 | mask: none !important; 34 | } 35 | .container__37e49 { 36 | width: fit-content; 37 | padding-right: 7px; 38 | min-width: unset; 39 | gap: 7px; 40 | } 41 | .guilds_c48ade { 42 | width: calc(100vw - 228px); 43 | z-index: +2; 44 | } 45 | .container__37e49 .button__201d5 { 46 | width: 48px; 47 | height: 48px; 48 | border-radius: 50%; 49 | transition: .2s; 50 | background-color: var(--background-primary); 51 | } 52 | .container__37e49 .button__201d5:hover { 53 | border-radius: 16px; 54 | background-color: var(--brand-experiment); 55 | color: var(--interactive-active); 56 | } 57 | .container__37e49 > .flex__7c0ba { 58 | gap: 7px; 59 | } 60 | .container__37e49::after { 61 | content: ""; 62 | width: 2px; 63 | height: 32px; 64 | border-radius: 1px; 65 | background-color: var(--background-modifier-accent); 66 | } 67 | .panels_c48ade, 68 | .sidebar_c48ade { 69 | overflow: visible; 70 | } 71 | .container_c48ade:has(.panels_c48ade .container__37e49 .button__201d5 path[d="M182 856q-51 0-79-35.5T82 734l42-300q9-60 53.5-99T282 296h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778 856q-21 0-39-7.5T706 826l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm498-240q17 0 28.5-11.5T720 576q0-17-11.5-28.5T680 536q-17 0-28.5 11.5T640 576q0 17 11.5 28.5T680 616Zm-80-120q17 0 28.5-11.5T640 456q0-17-11.5-28.5T600 416q-17 0-28.5 11.5T560 456q0 17 11.5 28.5T600 496ZM310 616h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Z"]) .guilds_c48ade { 72 | width: calc(100vw - 228px - 7px - 48px); 73 | } 74 | .chat_a7d72e, .container__01ae2, .container__133bf, .applicationStore_f07d62, .containerSidenav_dc2e0e { 75 | padding-top: 0; 76 | margin-top: 0; 77 | } 78 | .container__37e49:has(.flex__7c0ba .button__201d5:nth-of-type(4)) { 79 | width: calc(227px + 56px) !important; 80 | } 81 | .guilds_c48ade:has(~ .base_c48ade .container__37e49 .flex__7c0ba .button__201d5:nth-of-type(4)) { 82 | width: calc(100vw - 228px - 56px) !important; 83 | } 84 | .sidebar_c48ade { 85 | overflow: visible !important; 86 | } 87 | .ColorwaySelectorBtnContainer { 88 | margin-bottom: 0; 89 | width: 56px !important; 90 | flex: 0 0 56px; 91 | justify-content: end; 92 | } 93 | -------------------------------------------------------------------------------- /ImmersiveMode/import-trafficlights.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/DeclutterBar/import-trafficlights.css"); 2 | .chat_a7d72e > .container_fc4f04, 3 | .headerWrapper_d880dc > .container_fc4f04 { 4 | background: rgb(0,0,0,.6) !important; 5 | top: -16px !important; 6 | transition: .25s ease; 7 | z-index: +1000; 8 | opacity: 0 !important; 9 | } 10 | .chat_a7d72e > .container_fc4f04 .upperContainer_fc4f, 11 | .headerWrapper_d880dc > .container_fc4f04 .upperContainer_fc4f { 12 | -webkit-app-region: no-drag !important; 13 | } 14 | .titleBar_a934d8 { 15 | position: fixed; 16 | left: 0; 17 | transition: .25s ease; 18 | opacity: .5; 19 | background: none !important; 20 | } 21 | .chat_a7d72e > .container_fc4f04::before, 22 | .headerWrapper_d880dc > .container_fc4f04::before { 23 | content: ""; 24 | height: 84px; 25 | width: 12px; 26 | -webkit-app-region: drag; 27 | position: fixed; 28 | top: 0; 29 | left: 0; 30 | order: 5; 31 | } 32 | .chat_a7d72e > .container_fc4f04:hover, 33 | .headerWrapper_d880dc > .container_fc4f04:hover, 34 | #app-mount:has(.chat_a7d72e > .container_fc4f04:hover) .titleBar_a934d8, 35 | #app-mount:has(.headerWrapper_d880dc > .container_fc4f04:hover) .titleBar_a934d8, 36 | .titleBar_a934d8:hover, 37 | #app-mount:has(.titleBar_a934d8:hover) .chat_a7d72e > .container_fc4f04, 38 | #app-mount:has(.titleBar_a934d8:hover) .headerWrapper_d880dc > .container_fc4f04 { 39 | top: 0 !important; 40 | opacity: 1 !important; 41 | } 42 | .platform-win .scroller_ef3116 { 43 | padding-top: 32px; 44 | } 45 | .platform-win .sidebar_c48ade { 46 | border-radius: 0; 47 | } 48 | .container__01ae2 > .container_fc4f04 { 49 | padding-top: 31px; 50 | height: 62px; 51 | } 52 | -------------------------------------------------------------------------------- /ImmersiveMode/import.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/DeclutterBar/import.css"); 2 | .container_fc4f04 { 3 | background: rgb(0,0,0,.6) !important; 4 | top: -16px; 5 | transition: .25s ease; 6 | z-index: +1000; 7 | opacity: 0; 8 | } 9 | .container_fc4f04 .upperContainer_fc4f { 10 | -webkit-app-region: no-drag; 11 | } 12 | .container_fc4f04::before { 13 | content: ""; 14 | height: 84px; 15 | width: 12px; 16 | -webkit-app-region: drag; 17 | position: fixed; 18 | top: 0; 19 | left: 0; 20 | order: 5; 21 | } 22 | .container_fc4f04:hover, 23 | #app-mount:has(.container_fc4f04:hover) .titleBar_a934d8, 24 | .titleBar_a934d8:hover, 25 | #app-mount:has(.titleBar_a934d8:hover) .container_fc4f04 { 26 | top: 0 !important; 27 | opacity: 1 !important; 28 | } 29 | .platform-win .scroller_ef3116 { 30 | padding-top: 12px; 31 | } 32 | .platform-win .sidebar_c48ade { 33 | border-radius: 0; 34 | } 35 | .members_c8ffbb { 36 | padding-top: 31px; 37 | } 38 | .container__01ae2 > .container_fc4f04 { 39 | padding-top: 31px; 40 | height: 62px; 41 | } 42 | :is(.chat_a7d72e,.headerWrapper_d880dc,.container__133bf,.homeWrapper__0920e,.shop__6db1d) > .container_fc4f04 { 43 | background: rgb(0,0,0,.6) !important; 44 | top: -16px; 45 | transition: .25s ease; 46 | z-index: +1000; 47 | opacity: 0; 48 | } 49 | :is(.chat_a7d72e,.headerWrapper_d880dc,.container__133bf,.homeWrapper__0920e,.shop__6db1d) > .container_fc4f04 .upperContainer_fc4f { 50 | -webkit-app-region: no-drag !important; 51 | } 52 | .titleBar_a934d8 { 53 | position: fixed; 54 | right: 0; 55 | transition: .25s ease; 56 | opacity: .5; 57 | background: none !important; 58 | } 59 | :is(.chat_a7d72e,.headerWrapper_d880dc,.container__133bf,.homeWrapper__0920e,.shop__6db1d) > .container_fc4f04:hover, 60 | #app-mount:has(:is(.chat_a7d72e,.headerWrapper_d880dc,.container__133bf,.homeWrapper__0920e,.shop__6db1d) > .container_fc4f04:hover) :is(.titleBar_a934d8,.newMessagesBar__0f481 .barButtonAlt__0f481), 61 | .titleBar_a934d8:hover, 62 | .newMessagesBar__0f481 .barButtonAlt__0f481:hover, 63 | #app-mount:has(.titleBar_a934d8:hover,.newMessagesBar__0f481 .barButtonAlt__0f481:hover) :is(.chat_a7d72e,.headerWrapper_d880dc,.container__133bf,.homeWrapper__0920e,.shop__6db1d) > .container_fc4f04 { 64 | top: 0 !important; 65 | opacity: 1 !important; 66 | } 67 | .platform-win .scroller_ef3116 { 68 | padding-top: 12px; 69 | } 70 | .platform-win .sidebar_c48ade { 71 | border-radius: 0; 72 | } 73 | .members_c8ffbb { 74 | padding-top: 31px; 75 | } 76 | .container__01ae2 > .container_fc4f04 { 77 | padding-top: 31px; 78 | height: 62px; 79 | } 80 | -------------------------------------------------------------------------------- /ImmersiveMode/readme.md: -------------------------------------------------------------------------------- 1 | # Immersive Mode 2 | A snippet combining the minimalistic approach of DeclutterBar's titlebar, and the lack thereof. 3 | 4 | ### Importing 5 | #### Normal: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/ImmersiveMode/import.css"); 8 | ``` 9 | #### Traffic Lights: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/ImmersiveMode/import-trafficlights.css"); 12 | ``` 13 | 14 | ### Screenshots 15 | #### UI: 16 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/fc813dbf-bb1f-4f8f-b74a-4c66b11bdd80) 17 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/9d51a147-586d-4fb7-bf34-974a6135d93b) 18 | #### Drag Space: 19 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/2403efdb-7f3d-4892-ba89-1339b0df939f) 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /MacosTitlebar/import.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mactitlebar-left-margin: 5px; 3 | --mactitlebar-top-margin: 10px; 4 | --mactitlebar-button-width: 20px; 5 | --mactitlebar-button-height: 20px; 6 | --mactitlebar-button-border-radius: 50px; 7 | --mactitlebar-close-btn-back: #f25056; 8 | --mactitlebar-min-btn-back: #fac536; 9 | --mactitlebar-max-btn-back: #39ea49; 10 | --macbuttons-serverlist-inner-top-margin: 32px; 11 | } 12 | .winButtonClose_a934d8 { 13 | order: 3; 14 | margin-left: var(--mactitlebar-left-margin); 15 | } 16 | .winButtonMinMax_a934d8 { 17 | order: 1; 18 | } 19 | .winButtonClose_a934d8 > svg { 20 | background-color: var(--mactitlebar-close-btn-back) !important; 21 | } 22 | .winButtonMinMax_a934d8 > svg { 23 | background-color: var(--mactitlebar-max-btn-back) !important; 24 | } 25 | .winButtonMinMax_a934d8:last-child > svg { 26 | background-color: var(--mactitlebar-min-btn-back) !important; 27 | } 28 | .winButton_a934d8 > svg { 29 | background-size: contain !important; 30 | border-radius: var(--mactitlebar-button-border-radius); 31 | } 32 | .winButton_a934d8 > svg:hover { 33 | filter: brightness(.7); 34 | } 35 | .winButton_a934d8 > svg > :is(polygon, rect), 36 | .wordmarkWindows_a934d8, 37 | .withFrame_a934d8:before, 38 | .withFrame_a934d8:after { 39 | display: none !important; 40 | } 41 | .winButton_a934d8 { 42 | width: var(--mactitlebar-button-width) !important; 43 | height: var(--mactitlebar-button-height) !important; 44 | margin-top: var(--mactitlebar-top-margin); 45 | background-color: transparent !important; 46 | } 47 | .guilds_c48ade { 48 | padding-top: var(--macbuttons-serverlist-inner-top-margin); 49 | height: calc(100vh - var(--macbuttons-serverlist-inner-top-margin)); 50 | } 51 | .typeWindows_a934d8 { 52 | margin-top: 0; 53 | position: absolute; 54 | background-color: transparent; 55 | } 56 | .layer_d4b6c5 :not(.baseLayer_d4b6c5), 57 | .platform-win .container_fc4f04 :is(.toolbar_fc4f04, .children_fc4f04 > .titleWrapper_fc4f04:not(:last-of-type), .topic_bf3bbb) { 58 | -webkit-app-region: no-drag; 59 | } 60 | .platform-win .sidebar_c48ade { 61 | border-radius: 0; 62 | } 63 | .layer_d4b6c5 :not(.baseLayer_d4b6c5)::before, 64 | .platform-win .container_fc4f04 { 65 | -webkit-app-region: drag; 66 | } 67 | .layer_d4b6c5 :not(.baseLayer_d4b6c5)::before { 68 | content: ""; 69 | position: absolute; 70 | height: calc(var(--mactitlebar-top-margin) + var(--mactitlebar-button-height)); 71 | width: calc(100vw - (var(--mactitlebar-button-width) * 3) - var(--mactitlebar-left-margin)); 72 | top: 0; 73 | right: 0; 74 | } 75 | .platform-win .layer_d4b6c5 , 76 | .platform-win .standardSidebarView__23e6b { 77 | padding-top: 0; 78 | top: 0; 79 | } 80 | -------------------------------------------------------------------------------- /MacosTitlebar/readme.md: -------------------------------------------------------------------------------- 1 | # macOS Titlebar 2 | A replica of the macOS traffic lights. 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/MacosTitlebar/import.css"); 7 | :root { 8 | --mactitlebar-left-margin: 5px; 9 | --mactitlebar-top-margin: 10px; 10 | --mactitlebar-button-width: 20px; 11 | --mactitlebar-button-height: 20px; 12 | --mactitlebar-button-border-radius: 50px; 13 | --mactitlebar-close-btn-back: #f25056; 14 | --mactitlebar-min-btn-back: #fac536; 15 | --mactitlebar-max-btn-back: #39ea49; 16 | --macbuttons-serverlist-inner-top-margin: 32px; 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /Mobilecord/import.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); 2 | .panels_c48ade .avatar__37e49 { 3 | border: 3px solid var(--background-tertiary); 4 | margin-top: -15px; 5 | transform: translateY(-2.5px); 6 | background-color: var(--background-tertiary); 7 | } 8 | .container__37e49 { 9 | flex-direction: column; 10 | padding: 0; 11 | height: fit-content; 12 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 13 | margin-bottom: 0; 14 | } 15 | .panels_c48ade .avatarWrapper__37e49 { 16 | width: 100%; 17 | margin: 0 !important; 18 | padding: 4px; 19 | box-sizing: border-box; 20 | border-radius: 0; 21 | cursor: pointer; 22 | } 23 | .panels_c48ade .avatarWrapper__37e49:hover { 24 | background: var(--bg-overlay-hover,var(--background-modifier-hover)); 25 | } 26 | .panels_c48ade .avatarWrapper__37e49:hover .avatar__37e49 { 27 | border-color: var(--background-accent); 28 | background-color: var(--background-accent); 29 | } 30 | .panels_c48ade .avatarWrapper__37e49 .nameTag__37e49 { 31 | display: flex; 32 | align-items: center; 33 | gap: 8px; 34 | width: 100%; 35 | cursor: pointer; 36 | } 37 | .container__37e49 > .flex__7c0ba { 38 | width: 100%; 39 | gap: 6px; 40 | padding: 6px; 41 | box-sizing: border-box; 42 | } 43 | .container__37e49 > .flex__7c0ba > button { 44 | border-radius: 50px; 45 | width: 100%; 46 | padding: 6px 0; 47 | height: fit-content; 48 | --inversed-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 49 | background: var(--inversed-overlay,var(--background-primary)); 50 | transition: color .15s ease-out,background-color .15s ease-out; 51 | } 52 | .wrapper_e131a9 { 53 | padding-bottom: 10px; 54 | border-bottom: 1px solid var(--background-modifier-accent); 55 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 56 | } 57 | .container_e131a9 { 58 | border-bottom: none; 59 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 60 | } 61 | .wrapper_e131a9:empty { 62 | display: none; 63 | } 64 | .actionButtons_e131a9 > button, 65 | .actionButtons_e131a9 > div > button, 66 | .actionButtons_e131a9 > div > span > button { 67 | border-radius: 50px; 68 | width: 100%; 69 | padding: 6px 0; 70 | height: fit-content; 71 | --inversed-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 72 | background: var(--inversed-overlay,var(--background-primary)) !important; 73 | transition: color .15s ease-out,background-color .15s ease-out; 74 | max-height: 32px; 75 | } 76 | .actionButtons_e131a9 button:hover { 77 | background: var(--bg-overlay-hover,var(--background-modifier-hover)) !important; 78 | } 79 | .actionButtons_e131a9 button:active { 80 | background: var(--bg-overlay-active,var(--background-modifier-active)) !important; 81 | } 82 | .actionButtons_e131a9 > div { 83 | display: flex; 84 | width: 100%; 85 | } 86 | .actionButtons_e131a9 > div > span > span { 87 | display: none; 88 | } 89 | .actionButtons_e131a9 > div > span { 90 | background-color: transparent !important; 91 | } 92 | .actionButtons_e131a9 { 93 | width: 100%; 94 | gap: 6px; 95 | padding: 0; 96 | box-sizing: border-box; 97 | display: flex; 98 | } 99 | .subtext__339d0, 100 | .panelSubtextContainer__37e49 { 101 | max-width: unset; 102 | display: flex; 103 | width: 100%; 104 | } 105 | .hoverRoll__0263c { 106 | width: calc(100% - 32px); 107 | } 108 | :is(.wrapper_e131a9:not(:empty), #vc-spotify-player) + .container__37e49 .avatar__37e49 { 109 | margin-top: 0; 110 | transform: none; 111 | } 112 | .wrapper_e131a9:not(:empty) { 113 | padding: 0 !important; 114 | background: none !important; 115 | border-bottom: none !important; 116 | } 117 | .avatarWrapper__37e49 { 118 | width: 100%; 119 | height: 56px; 120 | } 121 | .container__37e49 > .flex__7c0ba > button { 122 | background: transparent; 123 | } 124 | .panels_c48ade .avatar__37e49 { 125 | margin-top: 0; 126 | transform: none; 127 | border-color: var(--background-floating); 128 | } 129 | .children_fc4f04:after { 130 | content: none; 131 | } 132 | .layer_da8173:has(>.menu_c1e9c4) { 133 | max-width: unset !important; 134 | right: unset !important; 135 | top: unset !important; 136 | bottom: 0 !important; 137 | left: 0 !important; 138 | width: 100% !important; 139 | } 140 | .menu_c1e9c4 { 141 | width: 100% !important; 142 | max-width: unset !important; 143 | border-radius: 24px 24px 0 0; 144 | background-color: var(--background-primary); 145 | padding: 20px; 146 | } 147 | .typeWindows_a934d8 { 148 | margin: 0; 149 | top: 0; 150 | height: 40px; 151 | } 152 | .wordmark_a934d8 { 153 | margin: calc(17px/2) 0; 154 | margin-left: 16px; 155 | } 156 | .sidebar_c48ade { 157 | border-top-left-radius: 20px !important; 158 | } 159 | .winButton_a934d8 { 160 | top: 6px; 161 | width: 28px; 162 | height: 28px; 163 | border-radius: 28px; 164 | margin-right: 6px; 165 | background-color: var(--background-primary); 166 | } 167 | .app__160d8 { 168 | top: 40px; 169 | height: calc(100% - 40px); 170 | } 171 | .menu_c1e9c4 .scrollerBase_d125d2 { 172 | background-color: var(--background-primary); 173 | border-radius: 20px; 174 | } 175 | .menu_c1e9c4 > div { 176 | margin-bottom: -20px; 177 | animation: animateMenu .4s ease; 178 | padding: 0; 179 | } 180 | @keyframes animateMenu { 181 | 0% { 182 | margin-bottom: -80%; 183 | } 184 | 70% { 185 | margin-bottom: 0; 186 | } 187 | 100% { 188 | margin-bottom: -20px; 189 | } 190 | } 191 | .searchBar__35e86::before { 192 | content: "Messages"; 193 | color: var(--header-primary); 194 | font-weight: bold; 195 | font-size: 20px; 196 | margin-right: 16px; 197 | margin-left: 8px; 198 | } 199 | .layerContainer_da8173 { 200 | transition: background .2s ease; 201 | } 202 | .layerContainer_da8173:not(:empty):has(>div>.menu_c1e9c4) { 203 | background-color: rgb(0,0,0,.85) !important; 204 | } 205 | .notAppAsidePanel_a3002d:has(.layerContainer_da8173:not(:empty) >div>.menu_c1e9c4) .container_c48ade { 206 | pointer-events: none; 207 | } 208 | .labelContainer_c1e9c4 { 209 | margin: 0; 210 | border-radius: 0 !important; 211 | padding: 16px; 212 | } 213 | .form_a7d72e { 214 | margin-top: 0; 215 | padding: 10px; 216 | border-top: 1px solid var(--primary-560); 217 | } 218 | .channelTextArea_a7d72e { 219 | margin-bottom: 0; 220 | } 221 | .scrollableContainer__74017, 222 | .channelTextArea_a7d72e { 223 | background: none; 224 | } 225 | .channelTextArea_a7d72e .inner__74017 { 226 | padding: 0; 227 | width: 100%; 228 | gap: 8px; 229 | } 230 | .channelTextArea_a7d72e .inner__74017 > textarea, 231 | .channelTextArea_a7d72e .inner__74017 .attachButton__74017, 232 | .channelTextArea_a7d72e .inner__74017 > .buttons__74017 > * { 233 | background-color: var(--background-tertiary); 234 | } 235 | .channelTextArea_a7d72e .inner__74017 > .buttons__74017 > * { 236 | width: 44px; 237 | border-radius: 50%; 238 | align-items: center; 239 | justify-content: center; 240 | } 241 | .channelTextArea_a7d72e .inner__74017 > .buttons__74017 { 242 | gap: 8px; 243 | } 244 | .channelTextArea_a7d72e .inner__74017 > .buttons__74017 .innerButton_aa63ab { 245 | margin: 0; 246 | } 247 | .channelTextArea_a7d72e .inner__74017 > textarea { 248 | border-radius: 25px; 249 | padding: 10px; 250 | } 251 | .channelTextArea_a7d72e .inner__74017 .attachButton__74017 { 252 | margin-left: 0; 253 | padding: 10px; 254 | border-radius: 50%; 255 | } 256 | .channelTextArea_a7d72e > .scrollableContainer__74017 { 257 | padding-right: 0; 258 | width: 100%; 259 | overflow-y: overlay !important; 260 | } 261 | .base_b88801 { 262 | position: static; 263 | padding-top: 8px; 264 | } 265 | .separator_aa63ab { 266 | margin: 0; 267 | } 268 | .separator_aa63ab::before { 269 | content: none; 270 | } 271 | .webkit__8d35a .buttons__74017 { 272 | margin-right: 0; 273 | } 274 | .divider__908e2 { 275 | display: none; 276 | } 277 | .hamburger_fc4f04 { 278 | margin-right: 0; 279 | } 280 | .buttons__5126c .wrapper_f7ecac { 281 | width: 100%; 282 | max-width: unset; 283 | justify-content: space-between; 284 | background-color: var(--background-secondary); 285 | box-shadow: var(--elevation-stroke),var(--elevation-medium); 286 | border-radius: 8px; 287 | } 288 | .buttons__5126c { 289 | padding: 0 !important; 290 | } 291 | .buttonContainer_c19a55 { 292 | display: none; 293 | } 294 | .message__5126c.selected__5126c .buttonContainer_c19a55, 295 | .message__5126c:hover .buttonContainer_c19a55, 296 | .buttonContainer_c19a55:hover { 297 | display: block !important; 298 | } 299 | .wrapper_f563df { 300 | padding: 6px; 301 | gap: 4px; 302 | box-sizing: border-box; 303 | } 304 | .wrapper_f563df > .customItem_c1e9c4 { 305 | display: contents; 306 | } 307 | .item_c1e9c4 + .layer_da8173 { 308 | left: 0 !important; 309 | top: unset !important; 310 | bottom: 0; 311 | width: 100%; 312 | z-index: +2; 313 | } 314 | .wrapper_f563df .button_f563df { 315 | background-color: var(--background-primary); 316 | box-sizing: border-box; 317 | width: 50px; 318 | height: 50px; 319 | } 320 | .menu_c1e9c4 > .scroller_c1e9c4::-webkit-scrollbar { 321 | width: 0; 322 | } 323 | .menu_c1e9c4 { 324 | background-color: var(--background-tertiary); 325 | } 326 | .menu_c1e9c4 div[role="group"]:not(.wrapper_f563df) { 327 | overflow: hidden; 328 | } 329 | .menu_c1e9c4 div[role="group"]:nth-child(2) { 330 | border-radius: 24px 24px 0 0; 331 | } 332 | .menu_c1e9c4 div[role="group"]:has(+ div[aria-hidden="true"]) { 333 | border-radius: 0 0 24px 24px; 334 | margin-bottom: 24px; 335 | } 336 | .menu_c1e9c4 div[role="separator"] { 337 | margin: 0 24px; 338 | } 339 | .icon_f563df { 340 | width: 32px; 341 | height: 32px; 342 | } 343 | .toolbar_fc4f04 > .iconWrapper_fc4f04 { 344 | background-color: var(--background-secondary); 345 | border-radius: 50px; 346 | padding: 5px; 347 | height: fit-content; 348 | } 349 | .container_fc4f04 { 350 | padding: 5px 10px; 351 | height: fit-content; 352 | background: var(--bg-overlay-chat,var(--background-primary)) !important; 353 | } 354 | .divider_fc4f04 { 355 | display: none; 356 | } 357 | .nameTag__37e49 { 358 | display: none !important; 359 | } 360 | .container__37e49 { 361 | flex-direction: row-reverse; 362 | } 363 | .avatarWrapper__37e49 { 364 | justify-content: center; 365 | width: calc(100%/4) !important; 366 | background-color: transparent !important; 367 | flex-direction: column; 368 | } 369 | .avatarWrapper__37e49::after { 370 | content: "You"; 371 | color: var(--interactive-normal); 372 | } 373 | .container__37e49 .flex__7c0ba { 374 | padding: 0; 375 | height: 56px; 376 | } 377 | .container__37e49 .flex__7c0ba .button__67645 { 378 | padding: 0; 379 | height: 56px; 380 | border-radius: 0; 381 | background-color: transparent !important; 382 | transition: 0; 383 | flex-direction: column; 384 | } 385 | .container__37e49 .flex__7c0ba .button__67645 > .contents__201d5 { 386 | width: 32px; 387 | height: 32px; 388 | border: 3px solid transparent; 389 | display: flex; 390 | justify-content: center; 391 | align-items: center; 392 | } 393 | .container__37e49 .flex__7c0ba .button__67645::after { 394 | content: ""; 395 | color: var(--interactive-normal); 396 | line-height: 14px; 397 | } 398 | .container__37e49 .flex__7c0ba .button__67645:nth-child(1)::after { 399 | content: "Mute"; 400 | } 401 | .container__37e49 .flex__7c0ba .button__67645:nth-child(2)::after { 402 | content: "Deafen"; 403 | } 404 | .container__37e49 .flex__7c0ba .button__67645:nth-child(3)::after { 405 | content: "Settings"; 406 | } 407 | .panels_c48ade .container__37e49 { 408 | position: fixed; 409 | bottom: 0; 410 | left: 0; 411 | width: 100%; 412 | border-top: 1px solid var(--interactive-muted); 413 | animation: showBottomBar ease .3s; 414 | } 415 | @keyframes showBottomBar { 416 | from { 417 | bottom: -57px; 418 | } 419 | to { 420 | bottom: 0; 421 | } 422 | } 423 | .panels_c48ade { 424 | padding-bottom: 57px; 425 | } 426 | #vc-spotify-player { 427 | border-bottom: none; 428 | } 429 | .guilds_c48ade .scroller_ef3116 { 430 | padding-bottom: 69px; 431 | } 432 | .wrapper__44df5 { 433 | border-radius: 0; 434 | background-color: transparent; 435 | flex-direction: column; 436 | gap: 12px; 437 | height: fit-content; 438 | margin-bottom: 0; 439 | padding-top: 0; 440 | } 441 | .wrapper__44df5 > .buttonContainer__44df5 { 442 | display: contents; 443 | } 444 | .wrapper__44df5 > .buttonContainer__44df5 > .button__44df5 { 445 | margin: 0; 446 | width: 100% !important; 447 | max-width: unset; 448 | border-radius: 25px; 449 | background-color: var(--brand-experiment); 450 | } 451 | .wrapper__44df5 .image__44df5 { 452 | display: none; 453 | } 454 | .wrapper__44df5 > .content__44df5 { 455 | margin: 0; 456 | } 457 | .dropdownButton__2637a { 458 | margin-left: 0; 459 | } 460 | .headerChildren_f37cb1 { 461 | border-radius: 50px; 462 | padding: 6px; 463 | display: flex; 464 | justify-content: center; 465 | align-items: center; 466 | transform: rotate(-90deg); 467 | } 468 | .button__353c4.open__353c4 { 469 | transform: unset !important; 470 | --custom-fix-rspack-build-bug: unset !important; 471 | } 472 | .name_f37cb1 { 473 | border-radius: 50px; 474 | padding: 6px; 475 | display: inline-flex; 476 | flex: 0 0 auto; 477 | margin-right: 0; 478 | } 479 | .button__353c4.open__353c4 path { 480 | stroke-dasharray: 7; 481 | } 482 | .guildIconV2Container__85d16 + .name_f37cb1 { 483 | border-radius: 0 50px 50px 0; 484 | } 485 | .guildIconV2Container__85d16 { 486 | border-radius: 50px 0 0 50px; 487 | padding: 6px; 488 | margin-right: 0; 489 | align-self: stretch; 490 | display: flex; 491 | align-items: center; 492 | } 493 | .headerContent_f37cb1 { 494 | height: fit-content; 495 | justify-content: start; 496 | } 497 | .guildIconV2Container__85d16 > div[role="button"] { 498 | height: fit-content; 499 | } 500 | .layer_da8173:has(.emojiPicker_c0e32c) { 501 | bottom: 0 !important; 502 | right: 0 !important; 503 | left: 0 !important 504 | } 505 | .emojiPicker_c0e32c { 506 | width: 100%; 507 | } 508 | .emojiListRow_fc7141 { 509 | width: 432px; 510 | margin-left: auto; 511 | margin-right: auto; 512 | } 513 | .header_c0e32c { 514 | border-radius: 0; 515 | border-top: 1px solid var(--interactive-muted); 516 | } 517 | .interactiveSelected__972a0 { 518 | background-color: transparent; 519 | } 520 | .interactive__972a0, 521 | .channel__972a0 { 522 | width: 100%; 523 | max-width: unset; 524 | } 525 | .privateChannels__35e86 .scroller__99e7c::-webkit-scrollbar { 526 | width: 0; 527 | } 528 | .privateChannels__35e86 .channel__972a0 { 529 | width: calc(100% - 8px) !important; 530 | margin: 0 4px; 531 | } 532 | .privateChannels__35e86 .interactive__972a0 { 533 | transition: .2s ease; 534 | } 535 | .privateChannels__35e86 .interactive__972a0:hover { 536 | background-color: var(--background-tertiary); 537 | border-radius: 16px; 538 | } 539 | .privateChannels__35e86 .svg__44b0c { 540 | width: 38px; 541 | height: 38px; 542 | position: static; 543 | } 544 | .privateChannels__35e86 .wrapper__44b0c, 545 | .privateChannels__35e86 .avatar__20a53 { 546 | width: unset !important; 547 | height: unset !important; 548 | } 549 | .privateChannels__35e86 .avatar__20a53 { 550 | margin: 8px; 551 | } 552 | .privateChannels__35e86 .layout__20a53 { 553 | height: 58px; 554 | } 555 | .privateChannels__35e86 .svg__44b0c:has(rect) { 556 | width: 44px; 557 | height: 44px; 558 | margin-top: 8px; 559 | margin-left: 2px; 560 | } 561 | .searchBar__35e86 { 562 | box-shadow: none; 563 | } 564 | .searchBarComponent__35e86 { 565 | border-radius: 25px !important; 566 | padding: 6px; 567 | width: 36px !important; 568 | font-size: 0 !important; 569 | height: fit-content !important; 570 | position: relative; 571 | } 572 | .searchBarComponent__35e86::before { 573 | content: "\F52A"; 574 | position: absolute; 575 | top: 50%; 576 | left: 50%; 577 | transform: translate(-50%, -50%); 578 | font-family: "bootstrap-icons"; 579 | font-size: 16px; 580 | } 581 | .sidebarRegionScroller__23e6b::-webkit-scrollbar { 582 | width: 0; 583 | } 584 | .mobileSidebar__23e6b { 585 | width: 100vw; 586 | padding: 0 24px; 587 | padding-top: 79px; 588 | } 589 | .item_b3f026 { 590 | margin-bottom: 0 !important; 591 | border-radius: 0 !important; 592 | padding: 16px !important; 593 | background-color: var(--background-tertiary); 594 | } 595 | .header_b3f026 + .item_b3f026, 596 | .separator_b3f026 + .item_b3f026 { 597 | border-radius: 12px 12px 0 0 !important; 598 | } 599 | .separator_b3f026 + .item_b3f026 { 600 | margin-top: 8px; 601 | } 602 | .item_b3f026:has(+.separator_b3f026) { 603 | border-radius: 0 0 12px 12px !important 604 | } 605 | .header_b3f026 + .item_b3f026:has(+.separator_b3f026), 606 | .separator_b3f026 + .item_b3f026:has(+.separator_b3f026) { 607 | border-radius: 12px !important; 608 | } 609 | .closeButton_c2b141 { 610 | border: none; 611 | } 612 | .mobileSidebarHeader__23e6b { 613 | position: fixed; 614 | z-index: +1; 615 | width: 100vw; 616 | top: 0; 617 | left: 0; 618 | height: 55px; 619 | background-color: var(--background-secondary); 620 | border-bottom: 1px solid var(--interactive-muted); 621 | display: flex; 622 | justify-content: center; 623 | align-items: center; 624 | } 625 | .mobileSidebarHeader__23e6b::after { 626 | content: "Settings"; 627 | color: var(--header-primary); 628 | font-weight: bold; 629 | font-size: 18px; 630 | } 631 | .toolsContainer__23e6b { 632 | position: absolute; 633 | top: 0; 634 | left: 0; 635 | display: flex; 636 | padding: 0; 637 | height: 55px; 638 | justify-content: center; 639 | align-items: center; 640 | } 641 | .tools__23e6b { 642 | display: contents; 643 | } 644 | .separator_b3f026 { 645 | display: none; 646 | } 647 | .header_b3f026 { 648 | margin-top: 8px; 649 | } 650 | .container__37e49 > .flex__7c0ba { 651 | gap: 0; 652 | } 653 | -------------------------------------------------------------------------------- /Mobilecord/readme.md: -------------------------------------------------------------------------------- 1 | # Mobilecord 2 | A very WIP UI, meant to improve the user experience of the mobile version of Discord's webapp, mainly aimed for use with Vendroid 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/Mobilecord/import.css"); 7 | ``` 8 | -------------------------------------------------------------------------------- /NitroThemesFix/import.css: -------------------------------------------------------------------------------- 1 | .theme-dark .sidebar_c48ade, 2 | .theme-dark .sidebarRegionScroller__23e6b, 3 | .theme-dark .searchResultsWrap_a9e706, 4 | .theme-dark .callContainer_d880dc, 5 | .theme-dark .mainCard_f369db, 6 | .theme-dark .replyBar__841c8, 7 | .theme-dark .stackedBars__74017, 8 | .theme-dark .container__5dbf8, 9 | .theme-dark .container__8e680, 10 | .theme-dark .container__5b321, 11 | .theme-dark .iconContainer__0624f, 12 | .theme-dark .box_d9914b { 13 | background: var(--bg-overlay-3,var(--background-secondary)); 14 | } 15 | .theme-light .sidebar_c48ade, 16 | .theme-light .sidebarRegionScroller__23e6b, 17 | .theme-light .searchResultsWrap_a9e706, 18 | .theme-light .callContainer_d880dc, 19 | .theme-light .mainCard_f369db, 20 | .theme-light .replyBar__841c8, 21 | .theme-light .stackedBars__74017, 22 | .theme-light .container__5dbf8, 23 | .theme-light .container__8e680, 24 | .theme-light .container__5b321, 25 | .theme-light .iconContainer__0624f, 26 | .theme-light .box_d9914b { 27 | background: var(--bg-overlay-2,var(--background-secondary)); 28 | } 29 | .mainCard_f369db .input__0f084 { 30 | background: none; 31 | } 32 | .theme-dark .callContainer_d880dc { 33 | background: var(--bg-overlay-1,var(--background-secondary)) !important; 34 | } 35 | .theme-light .callContainer_d880dc { 36 | background: var(--bg-overlay-1,var(--background-secondary)) !important; 37 | } 38 | .pageWrapper_a3a4ce, 39 | .homeWrapper__0920e, 40 | .contentRegionScroller__23e6b { 41 | background: var(--bg-overlay-chat,var(--background-primary)); 42 | } 43 | .homeWrapper__0920e > .headerBar__0920e, 44 | .homeWrapper__0920e > .scroller__244e5 { 45 | background: none; 46 | } 47 | .custom-theme-background .searchHeader_f3b986, 48 | .row__0624f { 49 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 50 | } 51 | .theme-dark.custom-theme-background .contentRegionShownSidebar__23e6b::-webkit-scrollbar-thumb, 52 | .theme-dark.custom-theme-background .scroller-3j5xK2::-webkit-scrollbar-thumb, 53 | .theme-dark.custom-theme-background .sidebarRegionScroller__23e6b::-webkit-scrollbar-thumb { 54 | background-size: 200vh; 55 | background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),to(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)))),var(--custom-theme-background); 56 | background-image: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),var(--custom-theme-background); 57 | } 58 | .theme-dark.custom-theme-background .contentRegionShownSidebar__23e6b::-webkit-scrollbar-track, 59 | .theme-dark.custom-theme-background .scroller-3j5xK2::-webkit-scrollbar-track { 60 | background-size: 200vh; 61 | background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color)/.4)),to(rgb(var(--bg-overlay-color)/.4))),var(--custom-theme-background); 62 | background-image: linear-gradient(rgb(var(--bg-overlay-color)/.4),rgb(var(--bg-overlay-color)/.4)),var(--custom-theme-background); 63 | } 64 | .theme-light.custom-theme-background .contentRegionShownSidebar__23e6b::-webkit-scrollbar-thumb, 65 | .theme-light.custom-theme-background .scroller-3j5xK2::-webkit-scrollbar-thumb, 66 | .theme-light.custom-theme-background .sidebarRegionScroller__23e6b::-webkit-scrollbar-thumb { 67 | background-size: 100vh; 68 | background-image: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-3)); 69 | } 70 | .theme-light.custom-theme-background .contentRegionShownSidebar__23e6b::-webkit-scrollbar-track, 71 | .theme-light.custom-theme-background .scroller-3j5xK2::-webkit-scrollbar-track { 72 | background-size: 200vh; 73 | background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))),to(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)))),var(--custom-theme-background); 74 | background-image: linear-gradient(rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2)),rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-2))),var(--custom-theme-background); 75 | } 76 | .contentRegion__23e6b, 77 | .root-2x5M19, 78 | .root__49fc1, 79 | .wrapper_f7ecac, 80 | .themeEditor_cf6da1, 81 | .categoryItemDefaultCategorySelected_b9ee0c, 82 | .categoryItemDefaultCategorySelected_b9ee0c:hover, 83 | .containerSidenav_dc2e0e { 84 | background: var(--bg-overlay-chat,var(--background-primary)); 85 | } 86 | .accountProfileCard__1fed1, 87 | .container_fea832, 88 | .floating-window-titlebar, 89 | .header__45690, 90 | .tertiary_ad6d80, 91 | .container__33507, 92 | .wrapper_dc0b29, 93 | .bd-search-wrapper, 94 | .userProfileInnerThemedNonPremium_c69a7b .overlayBackground_c69a7b, 95 | .badgeList_ab525a { 96 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 97 | } 98 | .background__1fed1, 99 | .fieldList__1fed1, 100 | .contentWrapper__08434, 101 | .footer__49fc1, 102 | .container__0f711, 103 | .secondary__45d4f, 104 | .friendRequestsButton__523aa, 105 | .userProfileInnerThemedNonPremium_c69a7b .overlayBackground_c69a7b, 106 | .itemFilled__001a7, 107 | .wrapper__14245, 108 | .bd-addon-list .bd-addon-card, 109 | .notDetected_cc46f0 { 110 | background: var(--bg-overlay-3,var(--background-secondary)); 111 | } 112 | #bd-editor-controls, 113 | .floating-window #bd-editor-controls, 114 | .userProfileInnerThemedNonPremium_c69a7b, 115 | .card-x5zW6z, 116 | .iconWrapper-eK7GO6, 117 | .inspector_aeaaeb, 118 | .card_e90879, 119 | .iconMask_e90879, 120 | .bd-addon-list .bd-addon-header, 121 | .userProfileOuterUnthemed_c69a7b > .userPanelInnerThemed_c69a7b, 122 | .stepNumber_d9914b { 123 | background: var(--bg-overlay-1,var(--background-secondary-alt)); 124 | } 125 | .paymentNote-3dcb-Z, 126 | .wrapper-wOVKdL, 127 | .body_c6f1a4 { 128 | background-color: transparent; 129 | } 130 | .modalHeader-gQTY3L { 131 | background: none; 132 | } 133 | .side_b3f026 .selected_b3f026.item_b3f026, 134 | .itemFilled__001a7[aria-checked=true], 135 | .navButtonActive__08434, 136 | .side_b3f026 .themed_b3f026.selected_b3f026.item_b3f026, 137 | .topPill_b3f026 .themed_b3f026.selected_b3f026.item_b3f026 { 138 | background: var(--bg-overlay-selected,var(--background-modifier-selected)); 139 | } 140 | .side_b3f026 .item_b3f026:hover, 141 | .itemFilled__001a7:hover, 142 | .side_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026), .topPill_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) { 143 | background: var(--bg-overlay-hover,var(--background-modifier-hover)); 144 | } 145 | .lookFilled__201d5.colorPrimary__201d5, 146 | .buttonColor_dfbe6b, 147 | .container-x8Y1ix { 148 | background: var(--bg-overlay-3,var(--button-secondary-background)); 149 | } 150 | .lookFilled__201d5.colorPrimary__201d5:hover, 151 | .buttonColor_dfbe6b:hover, 152 | .container__37e49 .lookBlank__201d5:hover, 153 | #bd-editor-controls button:hover, 154 | .container-x8Y1ix:hover { 155 | background: var(--bg-overlay-hover,var(--button-secondary-background-hover)); 156 | } 157 | .lookFilled__201d5.colorPrimary__201d5:active, 158 | .buttonColor_dfbe6b:active, 159 | .itemFilled__001a7:active, 160 | .container__37e49 .lookBlank__201d5:active, 161 | #bd-editor-controls button:active, 162 | .container-x8Y1ix:active { 163 | background: var(--bg-overlay-active,var(--button-secondary-background-active)); 164 | } 165 | .input__0f084, 166 | #app-mount .bioTextArea__6a919, 167 | .circle__8cc9a { 168 | background: var(--bg-overlay-app-frame,var(--input-background)); 169 | } 170 | .auto__99f8c::-webkit-scrollbar-thumb, 171 | .thin__99f8c::-webkit-scrollbar-thumb, 172 | .contentPanel_dc2e0e::-webkit-scrollbar-thumb { 173 | background-size: 200vh; 174 | background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),to(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)))),var(--custom-theme-background); 175 | background-image: linear-gradient(rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4)),rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-4))),var(--custom-theme-background); 176 | } 177 | .auto__99f8c::-webkit-scrollbar-track, 178 | .contentPanel_dc2e0e::-webkit-scrollbar-track { 179 | background-size: 200vh; 180 | background-image: -webkit-gradient(linear,left top,left bottom,from(rgb(var(--bg-overlay-color)/.4)),to(rgb(var(--bg-overlay-color)/.4))),var(--custom-theme-background); 181 | background-image: linear-gradient(rgb(var(--bg-overlay-color)/.4),rgb(var(--bg-overlay-color)/.4)),var(--custom-theme-background); 182 | } 183 | .section__00943 { 184 | background: var(--bg-overlay-chat,var(--background-primary)); 185 | } 186 | .wrapper__00943 { 187 | background: var(--bg-overlay-3,var(--background-secondary)); 188 | } 189 | #app-mount .ColorwaySelectorBtn:not(:hover) { 190 | background: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 191 | } 192 | .theme-dark .colorwayPresetContainer, 193 | .theme-dark .settingRow, 194 | .theme-dark .colorwayCreatorPreviewPanel, 195 | .theme-dark .choiceContainer > .choice.active { 196 | background: var(--bg-overlay-3,var(--background-secondary)); 197 | } 198 | 199 | .theme-light .colorwayPresetContainer, 200 | .theme-light .settingRow, 201 | .theme-light .colorwayCreatorPreviewPanel, 202 | .theme-light .choiceContainer > .choice.active { 203 | background: var(--bg-overlay-2,var(--background-secondary)); 204 | } 205 | .choiceContainer > .choice:hover { 206 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 207 | } 208 | .choiceContainer { 209 | background: var(--bg-overlay-chat,var(--background-primary)); 210 | } 211 | *::-webkit-scrollbar-corner { 212 | background-color: transparent; 213 | } 214 | .contentPanel_dc2e0e::-webkit-scrollbar { 215 | width: 16px; 216 | height: 16px; 217 | } 218 | .contentPanel_dc2e0e::-webkit-scrollbar-thumb, 219 | .contentPanel_dc2e0e::-webkit-scrollbar-track { 220 | border: 4px solid transparent; 221 | background-clip: padding-box; 222 | border-radius: 8px; 223 | } 224 | .container__01ae2, 225 | .icon_d404a3, 226 | .messageContainer__95796, 227 | .previewMessage__5d148 { 228 | background: var(--bg-overlay-chat,var(--background-primary)); 229 | } 230 | .theme-dark .colorwayAuthor, 231 | .theme-dark .colorwayImport, 232 | .theme-dark .colorwayCodeblock, 233 | .theme-dark .markup__75297 code, 234 | .theme-dark .container__2692d, 235 | .theme-dark .channelHeader__35a7e, 236 | .theme-dark .messagesPopoutWrap__45690, 237 | .theme-dark .cameraWrapper_d41d5f { 238 | background: var(--bg-overlay-3,var(--background-secondary)); 239 | } 240 | .theme-light .colorwayAuthor, 241 | .theme-light .colorwayImport, 242 | .theme-light .colorwayCodeblock, 243 | .theme-light .markup__75297 code, 244 | .theme-light .container__2692d, 245 | .theme-light .channelHeader__35a7e, 246 | .theme-light .messagesPopoutWrap__45690, 247 | .theme-light .cameraWrapper_d41d5f { 248 | background: var(--bg-overlay-2,var(--background-secondary)); 249 | } 250 | .iconWrapper__54b20, 251 | .theme-dark .bar_a562c8, .theme-dark .markDash_a562c8, 252 | .option_e03935:not(.selected_e03935) { 253 | background: var(--bg-overlay-4,var(--background-accent)); 254 | } 255 | .jumpButton_ed0c8c, 256 | .cardPrimary_cb7a0e.outline__73069 { 257 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 258 | } 259 | .folder__48112:not(:has(.expandedFolderIconWrapper__48112)) { 260 | background: none !important; 261 | } 262 | .expandedFolderBackground__48112.collapsed__48112 { 263 | background: none !important; 264 | } 265 | .tooltip__382e7, 266 | .lookFilled__3f413.select__3f413, 267 | .search_aabd24 { 268 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 269 | } 270 | .messageGroupWrapper__45690, 271 | .wrapper__02fc8, 272 | .directoryContainer_da3f59, 273 | .headerIcon_a1eac2, 274 | .commandName_e0307d { 275 | background: var(--bg-overlay-chat,var(--background-primary)); 276 | } 277 | .theme-dark .jumpButton__45690, 278 | .theme-dark .upload_aa605f, 279 | .theme-dark .connection_c7f964, 280 | .theme-dark .paymentPane__01014, 281 | .theme-dark .paginator__01014, 282 | .theme-dark .payment_e9cb00, 283 | .theme-dark .codeRedemptionRedirect_a706ba, 284 | .theme-dark .soundButtonSettingContainer__84bad, 285 | .theme-dark .category_d7acc7, 286 | .theme-dark .container_d9c848, 287 | .theme-dark .container_bf1c84, 288 | .theme-dark .list_e0307d { 289 | background: var(--bg-overlay-3,var(--background-secondary)); 290 | } 291 | .theme-light .jumpButton__45690, 292 | .theme-light .upload_aa605f, 293 | .theme-light .connection_c7f964, 294 | .theme-light .paymentPane__01014, 295 | .theme-light .paginator__01014, 296 | .theme-light .payment_e9cb00, 297 | .theme-light .codeRedemptionRedirect_a706ba, 298 | .theme-light .soundButtonSettingContainer__84bad, 299 | .theme-light .category_d7acc7, 300 | .theme-light .container_d9c848, 301 | .theme-light .container_bf1c84, 302 | .theme-light .list_e0307d { 303 | background: var(--bg-overlay-2,var(--background-secondary)); 304 | } 305 | .accountButtonInner_c7f964 { 306 | background-color: transparent; 307 | } 308 | .wrapper__02fc8 { 309 | border-radius: 8px; 310 | height: 48px; 311 | } 312 | .theme-dark .connectContainer_c7f964, 313 | .theme-dark .connectionHeader_c7f964, 314 | .theme-dark .bigPerkCard-1uwmWV, 315 | .theme-dark .innerWrapper-Eo2E86, 316 | .theme-dark .smallPerkCard-2sX_--, 317 | .theme-dark .guildContainer__5dba5, 318 | .theme-dark .wrapper__37ae5, 319 | .theme-dark .vc-addon-card, 320 | .theme-dark .card_e90143 { 321 | background: var(--bg-overlay-1,var(--background-secondary-alt)); 322 | } 323 | .theme-light .connectContainer_c7f964, 324 | .theme-light .connectionHeader_c7f964, 325 | .theme-light .bigPerkCard-1uwmWV, 326 | .theme-light .innerWrapper-Eo2E86, 327 | .theme-light .smallPerkCard-2sX_--, 328 | .theme-light .guildContainer__5dba5, 329 | .theme-light .wrapper__37ae5, 330 | .theme-light .vc-addon-card, 331 | .theme-light .card_e90143 { 332 | background: var(--bg-overlay-3,var(--background-secondary-alt)); 333 | } 334 | .header_d9c882 { 335 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 336 | } 337 | .theme-dark .container_d9c882, 338 | .theme-dark .footer_dbca3c { 339 | background: var(--bg-overlay-3,var(--background-secondary)); 340 | } 341 | .theme-light .container_d9c882, 342 | .theme-light .footer_dbca3c { 343 | background: var(--bg-overlay-2,var(--background-secondary)); 344 | } 345 | .container__6764b { 346 | background: var(--bg-overlay-chat,var(--background-primary)); 347 | } 348 | .footer__45690, 349 | .button_f563df { 350 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 351 | } 352 | .menu_c1e9c4 { 353 | background: var(--bg-overlay-1,var(--background-floating)); 354 | } 355 | .theme-dark .embedFull__623de, 356 | .theme-dark .footer__4d95d, 357 | .theme-dark .hljs, 358 | .theme-dark .textContainer__4d95d { 359 | background: var(--bg-overlay-3,var(--background-secondary)); 360 | } 361 | .theme-light .embedFull__623de, 362 | .theme-light .footer__4d95d, 363 | .theme-light .hljs, 364 | .theme-light .textContainer__4d95d { 365 | background: var(--bg-overlay-2,var(--background-secondary)); 366 | } 367 | -------------------------------------------------------------------------------- /NitroThemesFix/readme.md: -------------------------------------------------------------------------------- 1 | # Hotfix for the Nitro Themes 2 | Hotfix that styles the previously unstyled areas when using Nitro Themes 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/NitroThemesFix/import.css"); 7 | ``` 8 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/a60edaf6-2a1a-46f6-b0d8-e31a76dbc484) 9 | -------------------------------------------------------------------------------- /Omnibar/import.css: -------------------------------------------------------------------------------- 1 | .guilds_c48ade { 2 | margin-bottom: 227px; 3 | box-sizing: border-box; 4 | } 5 | .container__37e49 { 6 | position: fixed; 7 | bottom: 0; 8 | left: 0; 9 | background: none !important; 10 | height: 227px; 11 | width: 72px; 12 | flex-direction: column; 13 | padding: 0; 14 | gap: 7px; 15 | padding-top: 7px; 16 | box-sizing: border-box; 17 | margin-bottom: 0; 18 | } 19 | .container__37e49 > .flex__7c0ba { 20 | flex-direction: column; 21 | } 22 | .sidebar_c48ade, 23 | .base_c48ade, 24 | .panels_c48ade { 25 | overflow: visible !important; 26 | } 27 | .base_c48ade { 28 | width: calc(100% - 72px); 29 | } 30 | .container__37e49 .avatarWrapper__37e49 { 31 | height: 48px; 32 | padding: 0; 33 | width: 48px; 34 | min-width: unset !important; 35 | margin-right: 0; 36 | background: none !important; 37 | } 38 | .container__37e49 .avatarWrapper__37e49 .svg__44b0c .avatar__44b0c { 39 | border-radius: 50%; 40 | transition: .2s !important; 41 | } 42 | .container__37e49 .avatarWrapper__37e49:hover .svg__44b0c .avatar__44b0c { 43 | border-radius: 10px !important; 44 | } 45 | .container__37e49 .avatarWrapper__37e49 .nameTag__37e49 { 46 | display: none; 47 | } 48 | .container__37e49 .avatarWrapper__37e49 .avatar__37e49 { 49 | width: 48px !important; 50 | height: 48px !important; 51 | } 52 | .container__37e49 .svg__44b0c { 53 | width: 60px !important; 54 | height: 60px !important; 55 | } 56 | .container__37e49 .avatarWrapper__37e49 .avatarStack__44b0c::after { 57 | content: ""; 58 | position: absolute; 59 | bottom: -4.5px; 60 | right: -4.5px; 61 | width: 18px; 62 | height: 18px; 63 | border-radius: 50px; 64 | background-color: var(--background-tertiary) !important; 65 | } 66 | .container__37e49 .svg__44b0c, 67 | .container__37e49 .svg__44b0c > foreignObject { 68 | mask: none !important; 69 | } 70 | .container__37e49 .button__201d5 { 71 | width: 48px; 72 | height: 48px; 73 | border-radius: 50%; 74 | transition: .2s; 75 | --bg-over: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 76 | background: var(--bg-over,var(--background-primary)); 77 | } 78 | .container__37e49 .button__201d5:hover { 79 | border-radius: 16px; 80 | background-color: var(--brand-experiment); 81 | color: var(--interactive-active); 82 | } 83 | .container__37e49 > .flex__7c0ba { 84 | gap: 7px; 85 | } 86 | .container__2637a, 87 | .privateChannels__35e86 { 88 | border-top-left-radius: 8px; 89 | overflow: hidden; 90 | } 91 | .container__37e49:has(.flex__7c0ba .button__201d5:nth-of-type(4)) { 92 | height: calc(227px + 56px) !important; 93 | } 94 | .guilds_c48ade:has(~ .base_c48ade .container__37e49 .flex__7c0ba .button__201d5:nth-of-type(4)) { 95 | margin-bottom: calc(227px + 56px) !important; 96 | } 97 | .accountProfilePopoutWrapper__37e49 { 98 | left: 0; 99 | } 100 | .avatarDecoration__44b0c { 101 | width: 66.4px; 102 | height: 58.4px; 103 | } 104 | -------------------------------------------------------------------------------- /Omnibar/readme.md: -------------------------------------------------------------------------------- 1 | # Omnibar 2 | A combined Guild bar and User area 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/Omnibar/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/5f49f6f1-b328-4896-99ca-a93ed06f65fb) 11 | -------------------------------------------------------------------------------- /PrettyFolderIcons/import.css: -------------------------------------------------------------------------------- 1 | .expandedFolderIconWrapper__48112 > svg:has(>path[d="M2 5a3 3 0 0 1 3-3h3.93a2 2 0 0 1 1.66.9L12 5h7a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5Z"]) { 2 | scale: 10; 3 | } 4 | .expandedFolderIconWrapper__48112::after, 5 | .closedFolderIconWrapper__48112::after { 6 | content: ""; 7 | background-color: #fff; 8 | width: 24px; 9 | height: 24px; 10 | position: absolute; 11 | clip-path: path("M20 7H12L10.553 5.106C10.214 4.428 9.521 4 8.764 4H3C2.447 4 2 4.447 2 5V19C2 20.104 2.895 21 4 21H20C21.104 21 22 20.104 22 19V9C22 7.896 21.104 7 20 7Z"); 12 | } 13 | .closedFolderIconWrapper__48112 > .guildIcon__48112 { 14 | opacity: .5; 15 | filter: blur(2px); 16 | } 17 | .theme-dark .folder__48112[aria-expanded="false"] { 18 | background-color: #474747; 19 | } 20 | .theme-light .folder__48112[aria-expanded="false"] { 21 | background-color: #747474; 22 | } 23 | -------------------------------------------------------------------------------- /PrettyFolderIcons/readme.md: -------------------------------------------------------------------------------- 1 | # Pretty Folder Icons 2 | Makes the expanded folder icons white and their backgrounds colored 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/PrettyFolderIcons/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/53d0defb-0245-49cb-a517-b610ef7f5261) 11 | -------------------------------------------------------------------------------- /QuickSwitchV2/import.css: -------------------------------------------------------------------------------- 1 | .layer_bc663c:has(.quickswitcher_ac6cb0) { 2 | justify-content: start; 3 | } 4 | .quickswitcher_ac6cb0 { 5 | background: none; 6 | padding: 0; 7 | } 8 | .quickswitcher_ac6cb0 .scroller_ac6cb0 { 9 | margin: 0; 10 | border-radius: 0 0 8px 8px; 11 | scrollbar-width: none; 12 | padding: 8px !important; 13 | } 14 | .quickswitcher_ac6cb0 .input_ac6cb0 { 15 | height: 50px; 16 | } 17 | .quickswitcher_ac6cb0 .input_ac6cb0[value=""] { 18 | border-radius: 8px; 19 | } 20 | .quickswitcher_ac6cb0 .input_ac6cb0:not([value=""]) { 21 | border-radius: 8px 8px 0 0; 22 | } 23 | .quickswitcher_ac6cb0 .input_ac6cb0[value=""] + .scroller_ac6cb0, 24 | .quickswitcher_ac6cb0 .protip_ac6cb0 { 25 | display: none; 26 | } 27 | .backdrop__1a911:has(+ .layer_bc663c .quickswitcher_ac6cb0) { 28 | opacity: 0; 29 | } 30 | -------------------------------------------------------------------------------- /QuickSwitchV2/readme.md: -------------------------------------------------------------------------------- 1 | # QuickSwitch V2 2 | A redesign to Discord's quickswitch popup, making it look more like spotlight and simillar search bars 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/QuickSwitchV2/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/90e0ed90-ae04-4f2c-9278-379f3d50b85a) 11 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/4cbeef4a-6605-4006-9305-28c846f8b1c9) 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DaBluLite's CSS Snippets for Discord/BD/Vencord 2 | A repo with all of my CSS snippets. 3 | -------------------------------------------------------------------------------- /ServersList/import.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --guild-list-width: 290px; 3 | --guild-list-height: 48px; 4 | --guild-item-radius: 50px; 5 | --guild-item-spacing: 8px; 6 | --guild-item-font-size: 16px; 7 | } 8 | 9 | .guilds_c48ade { 10 | width: var(--guild-list-width); 11 | } 12 | 13 | .gradient_f8ec41 { 14 | width: var(--guild-list-width); 15 | } 16 | 17 | .listItem__650eb, 18 | .wrapper__48112, 19 | .svg_cc5dd2, 20 | .blobContainer_e5445c, 21 | .listItem__650eb>.wrapper__58105+div:not([class]), 22 | .wrapper_cc5dd2, 23 | .svg_cc5dd2>foreignObject { 24 | width: calc(var(--guild-list-width) - 12px); 25 | mask: none !important; 26 | } 27 | 28 | .colorwaysServerListItem { 29 | width: var(--guild-list-width); 30 | } 31 | 32 | .listItem__650eb:not(:has(.guildSeparator__252b6)), 33 | .wrapper_cc5dd2, 34 | .svg_cc5dd2>foreignObject { 35 | height: var(--guild-list-height); 36 | } 37 | 38 | .expandedFolderBackground__48112 { 39 | width: calc(var(--guild-list-width) - 24px); 40 | border-radius: min(24px, var(--guild-item-radius)); 41 | } 42 | 43 | .svg_cc5dd2>foreignObject { 44 | transform: translateX(calc((((var(--guild-list-width) - 12px)*-1)/2) + 50%)); 45 | } 46 | .wrapper__6e9f8 { 47 | translate: 12px; 48 | } 49 | 50 | .childWrapper__6e9f8, 51 | .icon__6e9f8 { 52 | border-radius: 50px; 53 | overflow: hidden; 54 | } 55 | 56 | .wrapper__8436d, 57 | .folder__48112, 58 | .circleIconButton__5bc7e { 59 | margin-left: 12px; 60 | width: calc(var(--guild-list-width) - 24px); 61 | justify-content: start; 62 | border-radius: var(--guild-item-radius) !important; 63 | height: var(--guild-list-height); 64 | } 65 | 66 | .wrapper__8436d img, 67 | .folderIconWrapper__48112, 68 | .childWrapper_a6ce15, 69 | .expandedFolderIconWrapper__48112, 70 | .closedFolderIconWrapper__48112 { 71 | border-radius: var(--guild-item-radius) !important; 72 | height: var(--guild-list-height); 73 | width: var(--guild-list-height); 74 | } 75 | 76 | .svg_cc5dd2 { 77 | position: static; 78 | } 79 | 80 | [data-dnd-name]:has(>.wrapper_cc5dd2)::after { 81 | content: attr(data-dnd-name); 82 | width: calc(var(--guild-list-width) - 24px - var(--guild-list-height) - 12px); 83 | position: absolute; 84 | top: 0; 85 | left: calc(12px + var(--guild-list-height) + 6px); 86 | flex-wrap: nowrap; 87 | align-items: center; 88 | color: var(--channels-default); 89 | font-size: var(--guild-item-font-size); 90 | line-height: var(--guild-list-height); 91 | font-weight: 500; 92 | white-space: nowrap; 93 | overflow: hidden; 94 | text-overflow: ellipsis; 95 | pointer-events: none; 96 | transition: color .15s ease-out, background-color .15s ease-out; 97 | } 98 | 99 | [data-dnd-name]:has(>.wrapper_cc5dd2 .selected_ae80f7, >.wrapper_cc5dd2 .hover__48112)::after { 100 | color: var(--interactive-active); 101 | } 102 | 103 | :has(>.wrapper_cc5dd2 .selected_ae80f7, >.wrapper_cc5dd2 .hover__48112) :is(.wrapper__8436d, .folder__48112, .circleIconButton__5bc7e) { 104 | background-color: var(--background-primary) !important; 105 | } 106 | 107 | .wrapperSimple_cc5dd2 { 108 | border-radius: 0 !important; 109 | } 110 | 111 | .circleIcon__5bc7e { 112 | margin-left: 12px; 113 | height: var(--guild-list-height); 114 | } 115 | 116 | .circleIconButton__5bc7e::after { 117 | content: attr(aria-label); 118 | width: calc(var(--guild-list-width) - 24px - var(--guild-list-height) - 12px); 119 | position: absolute; 120 | top: 0; 121 | left: calc(12px + var(--guild-list-height) + 6px); 122 | align-items: center; 123 | color: var(--green-360); 124 | font-size: var(--guild-item-font-size); 125 | line-height: var(--guild-list-height); 126 | font-weight: 500; 127 | white-space: nowrap; 128 | overflow: hidden; 129 | text-overflow: ellipsis; 130 | transition: color .15s ease-out, background-color .15s ease-out; 131 | pointer-events: none; 132 | } 133 | 134 | .circleIconButton__5bc7e.selected__5bc7e::after, 135 | .ColorwaySelectorBtn:hover::after { 136 | color: var(--interactive-active); 137 | } 138 | 139 | .wrapper__6e9f8[data-list-item-id*="guildsnav___"]::after { 140 | content: attr(aria-label); 141 | width: calc(var(--guild-list-width) - 24px - var(--guild-list-height) - 12px); 142 | position: absolute; 143 | top: 0; 144 | left: calc(6px + var(--guild-list-height)); 145 | align-items: center; 146 | color: var(--channels-default); 147 | font-size: var(--guild-item-font-size); 148 | line-height: var(--guild-list-height); 149 | font-weight: 500; 150 | white-space: nowrap; 151 | overflow: hidden; 152 | text-overflow: ellipsis; 153 | transition: color .15s ease-out, background-color .15s ease-out; 154 | pointer-events: none; 155 | display: inline-block; 156 | z-index: 5555; 157 | } 158 | 159 | .wrapper__6e9f8[data-list-item-id*="guildsnav___"].selected_ae80f7::after { 160 | color: var(--interactive-active); 161 | } 162 | 163 | .colorwaySelectorIcon { 164 | height: var(--guild-list-height) !important; 165 | width: var(--guild-list-height) !important; 166 | display: flex; 167 | justify-content: center; 168 | align-items: center; 169 | cursor: pointer; 170 | } 171 | 172 | .ColorwaySelectorBtn { 173 | position: relative; 174 | width: calc(var(--guild-list-width) - 24px) !important; 175 | border-radius: 0 !important; 176 | background-color: transparent !important; 177 | justify-content: start !important; 178 | gap: 6px; 179 | height: var(--guild-list-height) !important; 180 | } 181 | 182 | .ColorwaySelectorBtn::before { 183 | content: ""; 184 | position: absolute; 185 | background-color: var(--background-primary); 186 | border-radius: var(--guild-item-radius); 187 | height: var(--guild-list-height) !important; 188 | width: var(--guild-list-height) !important; 189 | transition: .15s ease-out; 190 | left: 0; 191 | } 192 | 193 | .ColorwaySelectorBtn:hover::before { 194 | background-color: var(--brand-500); 195 | } 196 | 197 | .ColorwaySelectorBtn::after { 198 | content: "Colorways"; 199 | width: calc(var(--guild-list-width) - 24px - 48px - 12px); 200 | position: absolute; 201 | top: 0; 202 | left: calc(6px + 48px); 203 | align-items: center; 204 | color: var(--channels-default); 205 | font-size: var(--guild-item-font-size); 206 | line-height: var(--guild-list-height); 207 | font-weight: 500; 208 | white-space: nowrap; 209 | overflow: hidden; 210 | text-overflow: ellipsis; 211 | transition: color .15s ease-out, background-color .15s ease-out; 212 | pointer-events: none; 213 | z-index: +1; 214 | } 215 | 216 | .ColorwaySelectorBtn .dc-pallete-icon { 217 | z-index: +1; 218 | width: var(--guild-list-height); 219 | } 220 | 221 | .wrapper__48112>[id*="folder-items-"] { 222 | height: fit-content !important; 223 | } 224 | 225 | .expandedFolderBackground__48112 { 226 | height: 100%; 227 | } 228 | 229 | .upperBadge_cc5dd2, 230 | .lowerBadge_cc5dd2 { 231 | transform: translateX(-50%) !important; 232 | box-shadow: 0 0 0 3px var(--background-floating); 233 | border-radius: 50%; 234 | } 235 | 236 | .pill__5bc7e, 237 | .wrapper__58105, 238 | .colorwaysBtnPill { 239 | height: var(--guild-list-height) !important; 240 | align-items: center; 241 | } 242 | 243 | .item__58105 { 244 | max-height: var(--guild-list-height); 245 | } 246 | 247 | .ColorwaySelectorBtn::after { 248 | position: static; 249 | height: unset !important; 250 | line-height: var(--guild-list-height); 251 | transform: translateX(6px); 252 | } 253 | 254 | .ColorwaySelectorBtn { 255 | gap: 0 !important; 256 | } 257 | 258 | .circleIcon__5bc7e { 259 | margin-left: 0; 260 | } 261 | 262 | .circleIcon__5bc7e { 263 | width: var(--guild-list-height); 264 | justify-content: center; 265 | align-items: center; 266 | box-sizing: border-box; 267 | padding: calc(var(--guild-list-height)/7); 268 | } 269 | 270 | .blobContainer_e5445c .wrapper__8436d[data-list-item-id*="guildsnav___"]::after { 271 | content: none; 272 | } 273 | 274 | .listItem__650eb { 275 | margin: 0 0 var(--guild-item-spacing); 276 | } 277 | -------------------------------------------------------------------------------- /ServersList/readme.md: -------------------------------------------------------------------------------- 1 | # Servers List 2 | A fully working server list with labels 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/ServersList/import.css"); 7 | :root { 8 | --guild-list-width: 290px; 9 | --guild-list-height: 48px; 10 | --guild-item-radius: 50px; 11 | --guild-item-spacing: 8px; 12 | --guild-item-font-size: 16px; 13 | } 14 | ``` 15 | 16 | ### Screenshots: 17 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/c61e6921-c20b-40cf-a5aa-fb42833f30e4) 18 | -------------------------------------------------------------------------------- /SpotifyActivityRedesign/import.css: -------------------------------------------------------------------------------- 1 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) { 2 | border-radius: 8px; 3 | background-color: #000; 4 | padding: 16px 5 | } 6 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) :is(.content__2ef49, .anchor_edefb8, .themed_c8b06d .text_c8b06d) { 7 | color: #fff 8 | } 9 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .barInner_c8b06d { 10 | background-color: #fff !important 11 | } 12 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .state__2ef49, 13 | .vc-spotify-ellipoverflow:has(>#vc-spotify-album-title), 14 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34)>.headerContainer__2ef49 { 15 | display: none 16 | } 17 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .textRow__2ef49:nth-of-type(2), 18 | .vc-spotify-ellipoverflow:has(>.vc-spotify-artist) { 19 | font-size: 0; 20 | line-height: unset 21 | } 22 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .textRow__2ef49:nth-of-type(2) .activityName__2ef49 { 23 | font-size: 14px; 24 | opacity: .6 25 | } 26 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .assetsLargeImage__2ef49 { 27 | border-radius: 4px 28 | } 29 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .buttonColor_e36233 { 30 | background-color: transparent !important; 31 | border-radius: 50px; 32 | border: 1px solid #fff; 33 | transition: none !important; 34 | color: #1fdf64 !important 35 | } 36 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .platformIcon__2ef49 { 37 | display: none !important 38 | } 39 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .iconButton__11faf, 40 | .vc-spotify-button:has(>:is(.vc-spotify-pause,.vc-spotify-play)) { 41 | background-color: #fff !important; 42 | color: #000 !important 43 | } 44 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .buttonColor_e36233:hover, 45 | .vc-spotify-button:has(>.vc-spotify-pause):hover { 46 | scale: 1.05 47 | } 48 | @font-face { 49 | font-family: Spotify; 50 | src: url(https://encore.scdn.co/fonts/CircularSp-Book-4eaffdf96f4c6f984686e93d5d9cb325.woff2); 51 | font-weight: 400 52 | } 53 | @font-face { 54 | font-family: Spotify; 55 | src: url(https://encore.scdn.co/fonts/CircularSp-Bold-fe1cfc14b7498b187c78fa72fb72d148.woff2); 56 | font-weight: 600 57 | } 58 | @font-face { 59 | font-family: Spotify; 60 | src: url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-2fbf72b606d7f0b0f771ea4956a8b4d6.woff2); 61 | font-weight: 700 62 | } 63 | @font-face { 64 | font-family: Spotify; 65 | src: url(https://encore.scdn.co/fonts/CircularSpTitle-Black-3f9afb402080d53345ca1850226ca724.woff2); 66 | font-weight: 800 67 | } 68 | #vc-spotify-player .bar_a562c8, 69 | #vc-spotify-player .barFill_a562c8 { 70 | border-radius: 8px 71 | } 72 | #vc-spotify-player .grabber_a562c8 { 73 | background-color: #fff !important; 74 | border-color: #fff !important; 75 | opacity: 0 76 | } 77 | #vc-spotify-player .bar_a562c8:is(:hover, :has(.barFill_a562c8:hover))+.track_a562c8>.grabber_a562c8, 78 | #vc-spotify-player .grabber_a562c8:hover { 79 | opacity: 1 80 | } 81 | #vc-spotify-player .bar_a562c8, 82 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .bar_c8b06d { 83 | background-color: #4d4d4d 84 | } 85 | #vc-spotify-player .barFill_a562c8 { 86 | background-color: #fff 87 | } 88 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .bar_c8b06d:hover>.barInner_c8b06d, 89 | #vc-spotify-player .bar_a562c8:hover>.barFill_a562c8 { 90 | background-color: #1bc357 !important 91 | } 92 | #vc-spotify-player { 93 | background-color: #000 !important 94 | } 95 | #vc-spotify-info-wrapper #vc-spotify-album-image { 96 | height: 56px !important; 97 | width: 56px !important; 98 | border-radius: 4px 99 | } 100 | #vc-spotify-info-wrapper { 101 | height: 56px; 102 | --fallback-font: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 103 | --font-display: "Spotify", var(--fallback-font); 104 | font-family: var(--font-display) !important 105 | } 106 | #vc-spotify-titles { 107 | font-weight: 400 !important 108 | } 109 | .vc-spotify-artist { 110 | font-size: 14px !important; 111 | --fallback-font: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 112 | --font-display: "Spotify", var(--fallback-font); 113 | font-family: var(--font-display) !important 114 | } 115 | .vc-spotify-artist:not(:last-of-type)::after { 116 | content: "," 117 | } 118 | .vc-spotify-button:hover { 119 | background-color: transparent; 120 | cursor: default 121 | } 122 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34), 123 | #vc-spotify-controls { 124 | --fallback-font: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 125 | --font-primary: "Spotify", var(--fallback-font); 126 | --font-display: "Spotify", var(--fallback-font); 127 | font-family: var(--font-display) !important 128 | } 129 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) :is(.activityName__2ef49, .detailsWrap__2ef49) { 130 | font-weight: 400 131 | } 132 | .vc-spotify-button-row { 133 | gap: 8px !important 134 | } 135 | #vc-spotify-player { 136 | display: flex; 137 | flex-direction: column; 138 | } 139 | #vc-spotify-info-wrapper { 140 | order: 0; 141 | } 142 | .vc-spotify-button-row { 143 | order: 2; 144 | margin: 5px 0 !important; 145 | } 146 | #vc-spotify-progress-bar { 147 | display: flex; 148 | align-items: center; 149 | gap: 8px; 150 | order: 3; 151 | margin: 0; 152 | } 153 | .vc-spotify-progress-time { 154 | position: static; 155 | } 156 | #vc-spotify-progress-bar .sliderContainer__65039 { 157 | height: 12px; 158 | } 159 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) { 160 | --fallback-font: "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif; 161 | --font-primary: "Spotify",var(--fallback-font); 162 | --font-display: "Spotify",var(--fallback-font); 163 | } 164 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .headerContainer__2ef49 { 165 | display: none; 166 | } 167 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .assets__2ef49, 168 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .assetsLargeImageUserPopoutV2_c1d9fd { 169 | height: 56px; 170 | width: 56px; 171 | } 172 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .textRow__2ef49:nth-of-type(2) .activityName__2ef49::after { 173 | content: ", "; 174 | font-size: 16px; 175 | } 176 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .textRow__2ef49:nth-of-type(2) > span:has(>.activityName__2ef49):last-of-type .activityName__2ef49::after { 177 | content: none; 178 | } 179 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .textRow__2ef49:nth-of-type(2) .activityName__2ef49 { 180 | font-size: 12px; 181 | } 182 | .activityUserPopoutV2_c1d9fd:has(.spotifyButtonLogo__6ca34) .contentImagesUserPopoutV2_c1d9fd .textRow__2ef49:nth-of-type(1) { 183 | font-weight: normal; 184 | } 185 | -------------------------------------------------------------------------------- /SpotifyActivityRedesign/readme.md: -------------------------------------------------------------------------------- 1 | # Spotify Activity (& Controls) Redesign 2 | A simple redesign for the Spotify activity portions in user popouts and Vencord's Spotify Controls to match the actual Spotify UI 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/SpotifyActivityRedesign/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/21b9a770-3c42-47cd-8d58-1caa66a91341) 11 | -------------------------------------------------------------------------------- /SuperUserArea/import.css: -------------------------------------------------------------------------------- 1 | .panels_c48ade { 2 | order: -1; 3 | } 4 | .container__37e49 { 5 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 6 | justify-content: space-between; 7 | padding: 0; 8 | padding-bottom: 8px; 9 | gap: 12px; 10 | margin: 0; 11 | height: fit-content; 12 | padding-top: 12px; 13 | } 14 | .platform-win .container__37e49, 15 | .platform-osx .container__37e49 { 16 | padding-top: 4px; 17 | } 18 | .container__37e49 .flex__7c0ba > .button__67645 { 19 | --nitro-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 20 | width: 48px; 21 | height: 48px; 22 | border-radius: 50px; 23 | background: var(--nitro-overlay,var(--background-primary)); 24 | transition: background-color .15s ease-out,color .15s ease-out, border-radius .2s ease; 25 | } 26 | .container__37e49 .avatarWrapper__37e49 { 27 | --nitro-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 28 | width: 48px; 29 | height: 48px; 30 | min-width: unset; 31 | border-radius: 50px; 32 | background: var(--nitro-overlay,var(--background-primary)); 33 | padding: 0; 34 | margin: 0; 35 | flex: 0 0 48px; 36 | transition: background-color .15s ease-out,color .15s ease-out, border-radius .2s ease; 37 | justify-content: center; 38 | cursor: pointer; 39 | } 40 | .container__37e49 .flex__7c0ba { 41 | justify-content: space-between; 42 | width: 100%; 43 | padding-right: 12px; 44 | } 45 | .container__37e49 .avatarWrapper__37e49 .nameTag__37e49 { 46 | display: none; 47 | } 48 | .container__37e49 .avatarWrapper__37e49:hover, 49 | .container__37e49 .avatarWrapper__37e49[aria-expanded="true"], 50 | .container__37e49 .flex__7c0ba > .button__67645:hover { 51 | background: var(--brand-500); 52 | border-radius: 16px; 53 | } 54 | .content_a7d72e, 55 | .chatContent_a7d72e, 56 | .container__2637a, 57 | .container_f37cb1, 58 | .header_f37cb1, 59 | .animatedContainer_f37cb1, 60 | .privateChannels__35e86 { 61 | border-top-left-radius: 8px; 62 | } 63 | .content_a7d72e:before { 64 | content: none; 65 | } 66 | .sidebar_c48ade { 67 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 68 | } 69 | .platform-win .chat_a7d72e, 70 | .platform-osx .chat_a7d72e { 71 | border-top-left-radius: 8px; 72 | } 73 | .container_e131a9 { 74 | border-bottom: none; 75 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 76 | padding: 0; 77 | padding-bottom: 4px; 78 | } 79 | .actionButtons_e131a9 { 80 | display: flex; 81 | gap: 12px; 82 | padding-top: 0; 83 | padding-right: 12px; 84 | } 85 | .actionButtons_e131a9 .button_e131a9 { 86 | --nitro-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 87 | width: 48px; 88 | height: 48px; 89 | padding: 0; 90 | border-radius: 50px; 91 | flex: 0 0 48px; 92 | background: var(--nitro-overlay,var(--background-primary)); 93 | transition: background-color .15s ease-out,color .15s ease-out, border-radius .2s ease; 94 | } 95 | .actionButtons_e131a9 .button_e131a9:hover, 96 | .actionButtons_e131a9 .button_e131a9[aria-expanded="true"] { 97 | background: var(--brand-500); 98 | border-radius: 16px; 99 | } 100 | .connection_e131a9 { 101 | padding: 8px; 102 | height: 60px; 103 | box-sizing: border-box; 104 | } 105 | .peopleColumn__133bf .inner__999f6 { 106 | height: 60px; 107 | padding: 0; 108 | } 109 | .nowPlayingColumn__133bf .scroller__7d20c { 110 | margin: 0; 111 | overflow: hidden overlay !important; 112 | padding-right: 16px !important; 113 | border: none; 114 | } 115 | .nowPlayingColumn__133bf .header__7d20c { 116 | margin: 0; 117 | width: calc(100% + 32px); 118 | margin-left: -16px; 119 | margin-top: -16px; 120 | height: 60px; 121 | line-height: 60px; 122 | padding: 0 12px; 123 | box-sizing: border-box; 124 | background: var(--bg-overlay-4,var(--background-tertiary)); 125 | position: fixed; 126 | z-index: +1; 127 | } 128 | .nowPlayingColumn__133bf .header__7d20c + .itemCard__7e549 { 129 | margin-top: 60px; 130 | } 131 | -------------------------------------------------------------------------------- /SuperUserArea/readme.md: -------------------------------------------------------------------------------- 1 | # SUA (Super User Area) 2 | Yet another User area redesign, this time aiming to unify Discord's main actions (Home, Account, Settings, etc...) 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/SuperUserArea/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/d8011e75-6d2c-4f00-b81b-0585c31228cf) 11 | -------------------------------------------------------------------------------- /TabsV2HomeIcon/import.css: -------------------------------------------------------------------------------- 1 | svg:has(>[d="M19.73 4.87a18.2 18.2 0 0 0-4.6-1.44c-.21.4-.4.8-.58 1.21-1.69-.25-3.4-.25-5.1 0-.18-.41-.37-.82-.59-1.2-1.6.27-3.14.75-4.6 1.43A19.04 19.04 0 0 0 .96 17.7a18.43 18.43 0 0 0 5.63 2.87c.46-.62.86-1.28 1.2-1.98-.65-.25-1.29-.55-1.9-.92.17-.12.32-.24.47-.37 3.58 1.7 7.7 1.7 11.28 0l.46.37c-.6.36-1.25.67-1.9.92.35.7.75 1.35 1.2 1.98 2.03-.63 3.94-1.6 5.64-2.87.47-4.87-.78-9.09-3.3-12.83ZM8.3 15.12c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.89 2.27-2 2.27Zm7.4 0c-1.1 0-2-1.02-2-2.27 0-1.24.88-2.26 2-2.26s2.02 1.02 2 2.26c0 1.25-.88 2.27-2 2.27Z"]) path { 2 | d: path("M7.516 16.7C7.8784 16.7 8.1694 16.3791 8.1838 16.0171 8.1906 15.8462 8.2 15.674 8.2 15.5 8.2 10.1984 11.7683 5.9 17.3338 5.9 19.3811 5.9 21.3254 6.6288 22.9281 7.6747 23.3211 7.9312 23.8106 7.6966 23.8014 7.2274 23.8005 7.1825 23.8 7.1398 23.8 7.1 23.8 1.8068 19.0527-2.5 13.219-2.5 7.3854-2.5 2.638 1.8068 2.638 7.1 2.638 8.59 3.0076 10.0228 3.7183 11.3276 3.9932 11.8323 3.9466 12.4664 3.5445 12.8769L1.7978 14.6604C1.0539 15.4198 1.592 16.7 2.6551 16.7H7.516ZM25.0161 18.9078C24.8039 18.5696 24.7806 18.1502 24.909 17.7722 25.1568 17.0422 25.2845 16.2741 25.2845 15.5 25.2845 11.5292 21.9897 8.3 17.9399 8.3 13.8903 8.3 10.5953 11.5292 10.5953 15.5 10.5953 19.4708 13.8903 22.7 17.9399 22.7H25.2258C26.1693 22.7 26.7437 21.6614 26.2424 20.8622L25.0161 18.9078Z") !important; 3 | transform: scale(.8) translate(1px, 5px); 4 | } 5 | -------------------------------------------------------------------------------- /TabsV2HomeIcon/readme.md: -------------------------------------------------------------------------------- 1 | # TabsV2 Home Icon 2 | Replaces the Discord logo on the DMs Button for the TabsV2 Messages Icon 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/TabsV2HomeIcon/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/1e053ce1-46a4-45f9-9b10-6de7d46cdbff) 11 | -------------------------------------------------------------------------------- /TogglesV2/import.css: -------------------------------------------------------------------------------- 1 | .container__87bf1 .slider__87bf1 > rect { 2 | transition: fill .2s ease; 3 | fill: white !important; 4 | } 5 | .container__87bf1 .slider__87bf1 { 6 | margin-top: 3px; 7 | margin-left: 2px; 8 | } 9 | .container__87bf1.checked__87bf1 .slider__87bf1 { 10 | margin-left: 10px; 11 | } 12 | .container__87bf1 .slider__87bf1 > svg { 13 | display: none; 14 | } 15 | .container__87bf1.checked__87bf1 .slider__87bf1 > rect { 16 | fill: var(--brand-experiment) !important; 17 | } 18 | .container__87bf1:has(.slider__87bf1) { 19 | height: 24px; 20 | width: 46px !important; 21 | transition: .2s ease; 22 | } 23 | .container__87bf1.checked__87bf1:has(.slider__87bf1) { 24 | background-color: var(--brand-experiment-300) !important; 25 | } 26 | -------------------------------------------------------------------------------- /TogglesV2/readme.md: -------------------------------------------------------------------------------- 1 | # TogglesV2 2 | A small redesign of the default Discord Toggles 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/TogglesV2/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/64198344-c92d-4d7a-96fc-c9875a0c01f6) 11 | -------------------------------------------------------------------------------- /UserReimagined/condensed.css: -------------------------------------------------------------------------------- 1 | @import url("https://dablulite.github.io/css-snippets/UserReimagined/import.css"); 2 | .container__37e49 > .flex__7c0ba { 3 | position: relative; 4 | padding-top: 12px; 5 | margin-bottom: -38px; 6 | transition: .2s ease; 7 | } 8 | .container__37e49 > .flex__7c0ba:hover { 9 | margin-bottom: 0; 10 | padding-top: 6px; 11 | } 12 | .container__37e49 > .flex__7c0ba::before { 13 | content: ""; 14 | position: absolute; 15 | width: 15px; 16 | height: 3px; 17 | background-color: var(--interactive-muted); 18 | top: 7px; 19 | left: calc(50% + 1px); 20 | border-radius: 50px; 21 | transform: rotate(12deg) translateX(-100%); 22 | transition: .2s ease; 23 | } 24 | .container__37e49 > .flex__7c0ba::after { 25 | content: ""; 26 | position: absolute; 27 | width: 15px; 28 | height: 3px; 29 | background-color: var(--interactive-muted); 30 | top: 7px; 31 | right: calc(50% + 1px); 32 | border-radius: 50px; 33 | transform: rotate(-12deg) translateX(100%); 34 | transition: .2s ease; 35 | } 36 | .container__37e49 > .flex__7c0ba:hover::before, 37 | .container__37e49 > .flex__7c0ba:hover::after { 38 | opacity: 0; 39 | } 40 | -------------------------------------------------------------------------------- /UserReimagined/import-ua-top.css: -------------------------------------------------------------------------------- 1 | .panels_c48ade { 2 | order: -1; 3 | } 4 | .panels_c48ade .avatar__37e49 { 5 | background-color: var(--background-tertiary); 6 | } 7 | .container__37e49 { 8 | flex-direction: column; 9 | padding: 0; 10 | height: fit-content; 11 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 12 | margin-bottom: 0; 13 | } 14 | .panels_c48ade .avatarWrapper__37e49 { 15 | width: 100%; 16 | margin: 0 !important; 17 | padding: 4px; 18 | box-sizing: border-box; 19 | border-radius: 0; 20 | cursor: pointer; 21 | } 22 | .panels_c48ade .avatarWrapper__37e49:hover { 23 | background: var(--bg-overlay-selected,var(--background-modifier-selected)); 24 | } 25 | .panels_c48ade .avatarWrapper__37e49:hover .avatar__37e49 { 26 | background-color: var(--background-accent); 27 | } 28 | .panels_c48ade .avatarWrapper__37e49 .nameTag__37e49 { 29 | display: flex; 30 | align-items: center; 31 | gap: 8px; 32 | width: 100%; 33 | cursor: pointer; 34 | } 35 | .container__37e49 > .flex__7c0ba { 36 | width: 100%; 37 | gap: 6px; 38 | padding: 6px; 39 | box-sizing: border-box; 40 | } 41 | .container__37e49 > .flex__7c0ba > button { 42 | border-radius: 50px; 43 | width: 100%; 44 | padding: 6px 0; 45 | height: fit-content; 46 | --inversed-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 47 | background: var(--inversed-overlay,var(--background-primary)); 48 | transition: color .15s ease-out,background-color .15s ease-out; 49 | } 50 | .subtext__339d0, 51 | .panelSubtextContainer__37e49 { 52 | max-width: unset; 53 | display: flex; 54 | width: 100%; 55 | } 56 | .hoverRoll__0263c { 57 | width: calc(100% - 32px); 58 | } 59 | -------------------------------------------------------------------------------- /UserReimagined/import.css: -------------------------------------------------------------------------------- 1 | .panels_c48ade .avatar__37e49 { 2 | border: 3px solid var(--background-tertiary); 3 | margin-top: -15px; 4 | transform: translateY(-2.5px); 5 | background-color: var(--background-tertiary); 6 | } 7 | .container__37e49 { 8 | flex-direction: column; 9 | padding: 0; 10 | height: fit-content; 11 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 12 | margin-bottom: 0; 13 | } 14 | .panels_c48ade .avatarWrapper__37e49 { 15 | width: 100%; 16 | margin: 0 !important; 17 | padding: 4px; 18 | box-sizing: border-box; 19 | border-radius: 0; 20 | cursor: pointer; 21 | } 22 | .panels_c48ade .avatarWrapper__37e49:hover { 23 | background: var(--bg-overlay-hover,var(--background-modifier-hover)); 24 | } 25 | .panels_c48ade .avatarWrapper__37e49:hover .avatar__37e49 { 26 | border-color: var(--background-accent); 27 | background-color: var(--background-accent); 28 | } 29 | .panels_c48ade .avatarWrapper__37e49 .nameTag__37e49 { 30 | display: flex; 31 | align-items: center; 32 | gap: 8px; 33 | width: 100%; 34 | cursor: pointer; 35 | } 36 | .container__37e49 > .flex__7c0ba { 37 | width: 100%; 38 | gap: 6px; 39 | padding: 6px; 40 | box-sizing: border-box; 41 | } 42 | .container__37e49 > .flex__7c0ba > button { 43 | border-radius: 50px; 44 | width: 100%; 45 | padding: 6px 0; 46 | height: fit-content; 47 | --inversed-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 48 | background: var(--inversed-overlay,var(--background-primary)); 49 | transition: color .15s ease-out,background-color .15s ease-out; 50 | } 51 | .wrapper_e131a9 { 52 | padding-bottom: 10px; 53 | border-bottom: 1px solid var(--background-modifier-accent); 54 | background: var(--bg-overlay-app-frame,var(--background-tertiary)) !important; 55 | } 56 | .container_e131a9 { 57 | border-bottom: none; 58 | background: var(--bg-overlay-app-frame,var(--background-tertiary)); 59 | } 60 | .wrapper_e131a9:empty { 61 | display: none; 62 | } 63 | .actionButtons_e131a9 > button, 64 | .actionButtons_e131a9 > div > button, 65 | .actionButtons_e131a9 > div > span > button { 66 | border-radius: 50px; 67 | width: 100%; 68 | padding: 6px 0; 69 | height: fit-content; 70 | --inversed-overlay: rgb(var(--bg-overlay-color-inverse)/var(--bg-overlay-opacity-6)); 71 | background: var(--inversed-overlay,var(--background-primary)) !important; 72 | transition: color .15s ease-out,background-color .15s ease-out; 73 | max-height: 32px; 74 | } 75 | .actionButtons_e131a9 button:hover { 76 | background: var(--bg-overlay-hover,var(--background-modifier-hover)) !important; 77 | } 78 | .actionButtons_e131a9 button:active { 79 | background: var(--bg-overlay-active,var(--background-modifier-active)) !important; 80 | } 81 | .actionButtons_e131a9 > div { 82 | display: flex; 83 | width: 100%; 84 | } 85 | .actionButtons_e131a9 > div > span > span { 86 | display: none; 87 | } 88 | .actionButtons_e131a9 > div > span { 89 | background-color: transparent !important; 90 | } 91 | .actionButtons_e131a9 { 92 | width: 100%; 93 | gap: 6px; 94 | padding: 0; 95 | box-sizing: border-box; 96 | display: flex; 97 | } 98 | .subtext__339d0, 99 | .panelSubtextContainer__37e49 { 100 | max-width: unset; 101 | display: flex; 102 | width: 100%; 103 | } 104 | .hoverRoll__0263c { 105 | width: calc(100% - 32px); 106 | } 107 | :is(.wrapper_e131a9:not(:empty), #vc-spotify-player) + .container__37e49 .avatar__37e49 { 108 | margin-top: 0; 109 | transform: none; 110 | } 111 | .wrapper_e131a9:not(:empty) { 112 | padding: 0 !important; 113 | background: none !important; 114 | border-bottom: none !important; 115 | } 116 | -------------------------------------------------------------------------------- /UserReimagined/readme.md: -------------------------------------------------------------------------------- 1 | # User Areas Reimagined 2 | A fresh idea for a user area. 3 | 4 | ### Importing: 5 | #### Normal: 6 | ```css 7 | @import url("https://dablulite.github.io/css-snippets/UserReimagined/import.css"); 8 | ``` 9 | #### Condensed: 10 | ```css 11 | @import url("https://dablulite.github.io/css-snippets/UserReimagined/condensed.css"); 12 | ``` 13 | #### User Area on top: 14 | ```css 15 | @import url("https://dablulite.github.io/css-snippets/UserReimagined/import-ua-top.css"); 16 | ``` 17 | 18 | ### Screenshots: 19 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/d5e8b782-a4d2-4007-858d-335ea332da71) 20 | -------------------------------------------------------------------------------- /VesktopMica/import.css: -------------------------------------------------------------------------------- 1 | #app-mount, 2 | .app__160d8, 3 | .base_c48ade, 4 | .container_fc4f04, 5 | .sidebar_c48ade + div, 6 | .chatContent_a7d72e, 7 | .content_c48ade, 8 | .layer_d4b6c5 , 9 | .app_a3002d, 10 | .appMount__51fd7, 11 | body, 12 | .bg_d4b6c5, 13 | .container_c2efea, 14 | .container__0b563, 15 | .header__0b563 { 16 | background: none !important; 17 | } 18 | :root { 19 | --background-primary: transparent; 20 | --background-tertiary: transparent; 21 | --background-secondary: transparent; 22 | --background-secondary-alt: transparent; 23 | --scrollbar-auto-track: transparent; 24 | --channeltextarea-background: hsl(var(--primary-560-hsl)/.1); 25 | --background-modifier-active: hsl(var(--primary-560-hsl)/0.2); 26 | --background-modifier-hover: hsl(var(--primary-560-hsl)/0.1); 27 | --background-modifier-selected: hsl(var(--primary-560-hsl)/0.3); 28 | --button-secondary-background: hsl(var(--primary-560-hsl)/.1); 29 | --scrollbar-auto-thumb: hsl(var(--primary-560-hsl)/.2); 30 | --scrollbar-thin-thumb: hsl(var(--primary-560-hsl)/.2); 31 | --button-secondary-background-active: hsl(var(--primary-560-hsl)/.3); 32 | --button-secondary-background-disabled: var(--primary-430); 33 | --button-secondary-background-hover: hsl(var(--primary-560-hsl)/.2); 34 | } 35 | .base_c48ade { 36 | border-top-left-radius: 5px; 37 | } 38 | .innerWrapper_b4589b { 39 | background-color: hsl(var(--primary-560-hsl)/.3) !important; 40 | } 41 | .theme-dark { 42 | --channels-default: var(--white-560); 43 | --channel-icon: var(--white-560); 44 | --interactive-normal: var(--white-560); 45 | --interactive-hover: var(--white-530); 46 | --interactive-active: var(--white-500); 47 | --channel-text-area-placeholder: var(--white-560); 48 | --interactive-muted: var(--white-600); 49 | --text-normal: var(--white-500); 50 | --text-muted: var(--white-560); 51 | } 52 | .theme-light { 53 | --channels-default: var(--black-400); 54 | --channel-icon: var(--black-430); 55 | --interactive-normal: var(--black-400); 56 | --interactive-hover: var(--black-430); 57 | --interactive-active: var(--black-500); 58 | --channel-text-area-placeholder: var(--black-360); 59 | --interactive-muted: var(--black-360); 60 | --text-normal: var(--black-500); 61 | --text-muted: var(--black-400); 62 | } 63 | .content_a7d72e:before, 64 | .form_a7d72e:before, 65 | .children_fc4f04:after { 66 | content: none; 67 | } 68 | .header_f37cb1, 69 | .searchBar__35e86 { 70 | box-shadow: none; 71 | } 72 | -------------------------------------------------------------------------------- /VesktopMica/readme.md: -------------------------------------------------------------------------------- 1 | # Vesktop Mica 2 | A basic transparency import to make Acrylic/Mica/Tabbed effects visible 3 | 4 | ### Importing: 5 | ```css 6 | @import url("https://dablulite.github.io/css-snippets/VesktopMica/import.css"); 7 | ``` 8 | 9 | ### Screenshots: 10 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/c6352358-3d9f-4ddf-b859-79d6d0ea7bfb) 11 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/9cd6977b-01bf-4604-b510-7269d0f8e511) 12 | ![image](https://github.com/DaBluLite/css-snippets/assets/73998678/b8f645d8-3a9d-44d9-b3a4-5292e1a9998d) 13 | --------------------------------------------------------------------------------