From 5dc472c64567536f8000625f6a3a1a404177558d Mon Sep 17 00:00:00 2001 From: Tropical <42101043+Tropix126@users.noreply.github.com> Date: Thu, 5 Nov 2020 02:28:58 -0600 Subject: [PATCH] Rewrites minimal mode, fixes various light mode issues, cleans up css, improves consistency in public servers and settings modals. (#490) * hoping i didnt fuck things up * more stuff * fix social icon in light mode --- src/styles/blankslates/emptyimage.css | 1 - src/styles/builtins/minimalmode.css | 405 ++++++++++++++------------ src/styles/builtins/publicservers.css | 29 +- src/styles/index.css | 7 +- src/styles/spinner.css | 17 +- src/styles/ui/addonlist.css | 64 ++-- src/styles/ui/bdsettings.css | 9 +- src/styles/ui/modals.css | 10 + src/ui/modals.js | 4 +- src/ui/publicservers/menu.js | 16 +- 10 files changed, 311 insertions(+), 251 deletions(-) diff --git a/src/styles/blankslates/emptyimage.css b/src/styles/blankslates/emptyimage.css index edcd48c5..1b4bed2a 100644 --- a/src/styles/blankslates/emptyimage.css +++ b/src/styles/blankslates/emptyimage.css @@ -16,6 +16,5 @@ .bd-empty-image-container .bd-button { margin-top: 10px; - font-size: 16px; padding: 10px 16px; } \ No newline at end of file diff --git a/src/styles/builtins/minimalmode.css b/src/styles/builtins/minimalmode.css index 15dd2e6c..e95db3a9 100644 --- a/src/styles/builtins/minimalmode.css +++ b/src/styles/builtins/minimalmode.css @@ -1,233 +1,252 @@ -/* Messages */ -.bd-minimal .divider-32i8lo { +/* Sidebars */ + +.bd-minimal .sidebar-2K8pFh, +.bd-minimal .members-1998pB, +.bd-minimal .membersWrap-2h-GB4, +.bd-minimal .nowPlayingColumn-2sl4cE, +.bd-minimal .bannerImage-1jOskm { + width: 200px; + min-width: auto; +} + +/* User Container */ + +.bd-minimal .container-3baos1 .noWrap-3jynv6 { + display: none; + opacity: 0; + pointer-events: none; +} + +.bd-minimal .container-3baos1:hover .noWrap-3jynv6 { + display: flex; + opacity: 1; + pointer-events: all; +} + +.bd-minimal .container-3baos1 { + height: 45px; +} + +/* Header container heights */ + +.bd-minimal .container-1r6BKw, +.bd-minimal .header-2o-2hj, +.bd-minimal .searchBar-6Kv8R2 { + height: 40px; +} + +.bd-minimal .libraryHeader-3g95kE::before { + top: 40px; +} + +/* Settings */ + +.bd-minimal .sidebarRegion-VFTUkN { + flex: 0; +} + +.bd-minimal .contentColumn-2hrIYH, +.bd-minimal .customColumn-Rb6toI { + flex-grow: 1; + max-width: 100%; +} + +.bd-minimal .customScroller-26gWhv > div, +.bd-minimal .sidebarScrollable-1qPI87 + .content-1rPSz4 { + max-width: unset; +} + +.bd-minimal .bd-addon-list .bd-addon-card { + padding: 10px; + margin-bottom: 10px; +} + +.bd-minimal .bd-addon-list.bd-grid-view { + grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); +} + +/* Friends (https://tropix126.github.io/BetterDiscordStuff/midnight/css/base.css) */ + +@keyframes slide-out-enable { + 0% { + pointer-events: none; + } + + 100% { + pointer-events: all; + } +} + +.bd-minimal .nowPlayingColumn-2sl4cE { + min-width: unset; + position: absolute; + right: 0; + height: 100%; + width: 300px; + transform: translateX(250px); + background: var(--background-secondary-alt); + transition: 250ms cubic-bezier(0.52, 0, 0.74, 0); + z-index: 1; +} + +.bd-minimal .nowPlayingColumn-2sl4cE::after { + content: '|||'; + color: var(--header-primary); + font-size: 12px; + position: absolute; + left: 25px; + top: 50%; + transform: translateY(-50%) translateX(-50%); + transition: 250ms ease; +} + +.bd-minimal .nowPlayingColumn-2sl4cE:hover::after { opacity: 0; } -/* message avatars */ -.bd-minimal .large-3ChYtB { - max-width: 20px; - max-height: 20px; - background-size: 100%; - margin-right: 2px; - margin-top: 0; - border-radius: 0; +.bd-minimal .nowPlayingColumn-2sl4cE:hover { + transform: none; } -/* message content */ -.bd-minimal .content-3dzVd8 { - border-left: 2px solid #ebebeb; - padding-left: 2px; +.bd-minimal .peopleColumn-29fq28 { + margin-right: 50px; } -.bd-minimal .theme-dark .content-3dzVd8 { - border-left: 2px solid #303030; +@media (max-width: 1200px) { + .bd-minimal .peopleColumn-29fq28 { + margin-right: 0; + } } -/* message username */ -.bd-minimal .username-_4ZSMR { - font-size: small; +.bd-minimal .nowPlayingColumn-2sl4cE .nowPlayingScroller-2XrVUt { + pointer-events: none; + opacity: 0; + transform: scale(0.95); + transition: 250ms cubic-bezier(0.52, 0, 0.74, 0); } -/* message group */ -.bd-minimal .container-1YxwTf { - padding: 5px; +.bd-minimal .nowPlayingColumn-2sl4cE:hover .nowPlayingScroller-2XrVUt { + opacity: 1; + transform: none; } -/* message embed */ -.bd-minimal .embed-IeVjo6 { - padding: 2px; +.bd-minimal .nowPlayingColumn-2sl4cE:hover .itemCard-v9viV7 { + animation: slide-out-enable 450ms linear forwards; } -/* Member List */ -.bd-minimal .membersWrap-2h-GB4 { - min-width: 0; +/* Context menus (status picker) */ + +.bd-minimal .item-1tOPte { + min-height: 18px; } -/* member list avatars */ -.bd-minimal .members-1998pB .small-5Os1Bb { - max-width: 15px; - max-height: 15px; - background-size: 15px 15px; +.bd-minimal .styleFixed-sX-yHV { + width: 180px; } -/* member list avatars */ -.bd-minimal .members-1998pB .small-5Os1Bb .status-oxiHuE { - height: 5px; - width: 5px; -} - -/* member list list item */ -.bd-minimal .members-1998pB .member-3W1lQa { - padding: 5px; -} - -/* member list item inner */ -.bd-minimal .members-1998pB .memberInner-2CPc3V { - transform: scale(0.9); -} - -/* member list role label */ -.bd-minimal .members-1998pB .membersGroup-v9BXpm { - margin-top: 3px; - transform: scale(0.9); -} - -/* channel list */ -.bd-minimal .channels-Ie2l6A { - width: 160px; -} - -/* Channel List */ -.bd-minimal.bd-minimal-chan .channels-Ie2l6A { +.bd-minimal .description-2L932D { display: none; } -/* channel list guild name */ -.bd-minimal .channels-Ie2l6A header span { - font-size: 12px; +/* Tooltips */ + +.bd-minimal .tooltip-2QfLtc { + border-radius: 4px; } -/* channel item */ -.bd-minimal .containerDefault-3GGEv_ { - transform: scale(0.9); +.bd-minimal .tooltipContent-bqVLWK { + padding: 4px 8px; + font-size: 13px; } -/* channel name */ -.bd-minimal .content-3at_AU { - transform: scale(0.9); +/* Chat input */ + +.bd-minimal .form-2fGMdU { + padding-left: 10px; + padding-right: 10px; } -/* channel icon */ -.bd-minimal .icon-1_QxNX { - width: 14px; - height: 14px; +/* Guilds */ + +.bd-minimal .base-3dtUhz { + left: 55px; } -/* Guild List */ -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .listItem-2P_4kh { - width: 20px; +.bd-minimal .wrapper-1Rf91z { + width: 55px; +} + +.bd-minimal .wrapper-1Rf91z .wrapper-sa6paO { + height: 35px; +} + +.bd-minimal .wrapper-1Rf91z .item-2hkk8m { + max-height: 20px; +} + +.bd-minimal .wrapper-1Rf91z div[style*="height: 56px"], +.bd-minimal .wrapper-1Rf91z [role=group] { + height: auto !important; +} + +.bd-minimal .wrapper-1Rf91z .listItem-2P_4kh, +.bd-minimal .wrapper-1Rf91z .unreadMentionsIndicatorBottom-BXS58x, +.bd-minimal .wrapper-1Rf91z .unreadMentionsIndicatorTop-gA6RCh, +.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc { + width: 100%; +} + +.bd-minimal .wrapper-1Rf91z .guildsError-b7zR5H, +.bd-minimal .wrapper-1Rf91z .svg-1X37T1, +.bd-minimal .wrapper-1Rf91z .wrapper-25eVIn, +.bd-minimal .wrapper-1Rf91z .placeholderMask-3K9THS { + width: 35px; + height: 35px; +} + +.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .folder-21wGz3, +.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .folderIconWrapper-226oVY { + background: transparent; +} + +.bd-minimal .wrapper-1Rf91z .wrapper-21YSNc .expandedFolderBackground-2sPsd- { + left: 10px; + width: 35px; +} + +.bd-minimal .wrapper-1Rf91z #bd-pub-button { height: 20px; - background-size: 100%; - font-size: 15px; line-height: 20px; - margin: 0 12.5px 8px; + font-size: 10px; } -/* guild link and icon */ -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .wrapper-25eVIn a, -.bd-minimal .listItem-2P_4kh .wrapper-25eVIn .icon-27yU2q { - width: 20px; - height: 20px; - background-size: 100%; - font-size: 15px; - line-height: 20px; +/* Private channels horizontal icons */ + +.bd-minimal .channel-2QD9_O[href="/channels/@me"], +.bd-minimal .channel-2QD9_O[href="/library"], +.bd-minimal .channel-2QD9_O[href="/store"] { + width: calc(33% - 8px); + margin-left: 8px; + padding: 0; + display: inline-block; } -/* guild inner */ -.bd-minimal .listItem-2P_4kh .wrapper-25eVIn { - width: 20px; - height: 20px; - background-size: 100%; - font-size: 15px; - line-height: 20px; +.bd-minimal .channel-2QD9_O[href="/channels/@me"] .content-3QAtGj, +.bd-minimal .channel-2QD9_O[href="/library"] .content-3QAtGj, +.bd-minimal .channel-2QD9_O[href="/store"] .content-3QAtGj, +.bd-minimal .channel-2QD9_O[href="/channels/@me"] .children-gzQq2t, +.bd-minimal .channel-2QD9_O[href="/library"] .children-gzQq2t, +.bd-minimal .channel-2QD9_O[href="/store"] .children-gzQq2t { + display: none; } -.bd-minimal .listItem-2P_4kh svg, -.bd-minimal .listItem-2P_4kh foreignObject[mask] { - mask: none; +.bd-minimal .channel-2QD9_O[href="/channels/@me"] .avatar-3uk_u9, +.bd-minimal .channel-2QD9_O[href="/library"] .avatar-3uk_u9, +.bd-minimal .channel-2QD9_O[href="/store"] .avatar-3uk_u9 { + margin: 0; + flex-grow: 1; } -/* home icon */ -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .homeIcon-tEMBK1 { - width: 10px; - height: 10px; - background-size: 100%; - font-size: 15px; - line-height: 20px; -} - -/* add and search */ -.bd-minimal .circleIconButton-jET_ig { - height: 20px; - width: 20px; -} - -.bd-minimal .circleIconButton-jET_ig svg { - height: 14px; - width: 14px; -} - -/* friends online */ -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .friendsOnline-_wi_fM { - margin-left: -15px; - font-size: 7px; -} - -/* public servers button */ -.bd-minimal #bd-pub-li { - height: 16px; -} - -.bd-minimal #bd-pub-button { - font-size: 8px; - line-height: 16px; - height: 16px; -} - -/* guild list */ -.bd-minimal .wrapper-1Rf91z, -.bd-minimal .wrapper-1Rf91z .scrollerWrap-1IAIlv, -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG { - width: 45px; -} - -/* separator */ -.bd-minimal .wrapper-1Rf91z .guildSeparator-3s64Iy { - margin-left: -15px; -} - -/* unread icon */ -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .listItem-2P_4kh .wrapper-sa6paO { - height: 20px; - margin-top: 0; - margin-left: -12.5px; -} - -/* audio/video */ -.bd-minimal .wrapper-1Rf91z .scroller-2FKFPG .iconBadge-2wi9r4 { - width: 12px; - height: 12px; - background-size: 12px; -} - -/* Account Container */ -.bd-minimal .container-2Thooq .avatarSmall-3ACRaI { - width: 15px; - height: 15px; - background-size: 15px 15px; -} - -/* status */ -.bd-minimal .container-2Thooq .avatarSmall-3ACRaI .status-oxiHuE { - height: 5px; - width: 5px; -} - -/* username and discrim */ -.bd-minimal .container-2Thooq .accountDetails-3k9g4n { - transform: scale(0.8); -} - -/* 3 buttons */ -.bd-minimal .container-2Thooq .button-2b6hmh { - height: 14px; - width: 14px; - background-size: 14px 14px; - margin-left: 3px; -} - -/* 3 buttons icons */ -.bd-minimal .container-2Thooq .button-2b6hmh svg { - height: 14px; - width: 14px; -} +.bd-minimal .layout-2DM8Md { + justify-content: center; +} \ No newline at end of file diff --git a/src/styles/builtins/publicservers.css b/src/styles/builtins/publicservers.css index 34575588..7d15d7a6 100644 --- a/src/styles/builtins/publicservers.css +++ b/src/styles/builtins/publicservers.css @@ -1,6 +1,19 @@ +@keyframes bd-placeholder-card-pulse { + 0% { + opacity: 0.6; + } + + 50% { + opacity: 0.8; + } + + to { + opacity: 0.6; + } +} + #bd-pub-li { height: 24px; - margin-bottom: 10px; overflow: hidden; } @@ -66,6 +79,16 @@ background-color: var(--background-secondary-alt); } +.bd-placeholder-card { + background-color: var(--background-secondary-alt); + animation: bd-placeholder-card-pulse 1.8s ease-in-out infinite; + height: 320px; + width: 100%; + overflow: hidden; + border-radius: 8px; + position: relative; +} + .bd-server-card:hover { background-color: var(--background-tertiary); transform: translateY(-1px); @@ -230,8 +253,10 @@ padding: 0; } -.bd-pagination button:hover { +.bd-pagination button:hover, +.bd-pagination button:active { opacity: 1; + background: transparent; } .bd-pagination button svg { diff --git a/src/styles/index.css b/src/styles/index.css index 797ecd09..0f6d9137 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -19,13 +19,10 @@ margin-left: 4px; } -.bd-changelog-modal { - width: 650px; -} - .bd-changelog-modal video { width: 100%; - border-radius: 20px; + border-radius: 5px; + outline: none; } .bd-link { diff --git a/src/styles/spinner.css b/src/styles/spinner.css index d2699f68..a0c502a5 100644 --- a/src/styles/spinner.css +++ b/src/styles/spinner.css @@ -1,15 +1,14 @@ .bd-spinner { - margin: 100px auto; - width: 57px; - height: 57px; + width: 32px; + height: 32px; position: relative; } .bd-cube1, .bd-cube2 { background-color: #3e82e5; - width: 15px; - height: 15px; + width: 10px; + height: 10px; position: absolute; top: 0; left: 0; @@ -22,19 +21,19 @@ @keyframes bd-sk-cubemove { 25% { - transform: translateX(42px) rotate(-90deg) scale(0.5); + transform: translateX(22px) rotate(-90deg) scale(0.5); } 50% { - transform: translateX(42px) translateY(42px) rotate(-179deg); + transform: translateX(22px) translateY(22px) rotate(-179deg); } 50.1% { - transform: translateX(42px) translateY(42px) rotate(-180deg); + transform: translateX(22px) translateY(22px) rotate(-180deg); } 75% { - transform: translateX(0) translateY(42px) rotate(-270deg) scale(0.5); + transform: translateX(0) translateY(22px) rotate(-270deg) scale(0.5); } 100% { diff --git a/src/styles/ui/addonlist.css b/src/styles/ui/addonlist.css index 68fec2e6..76e48b7d 100644 --- a/src/styles/ui/addonlist.css +++ b/src/styles/ui/addonlist.css @@ -113,33 +113,6 @@ border-radius: 0 3px 3px 0; } -.bd-addon-list .bd-footer .bd-links, -.bd-addon-list .bd-footer .bd-links a, -.bd-addon-list .bd-footer .bd-addon-button { - display: flex; - align-items: center; -} - -.bd-addon-list .bd-footer .bd-link { - color: var(--interactive-normal); -} - -.bd-addon-list .bd-footer .bd-link:hover { - color: var(--interactive-hover); -} - -.bd-addon-list .bd-footer .bd-link:active { - color: var(--interactive-active); -} - -.bd-addon-list .bd-footer .bd-link svg { - fill: currentColor; -} - -.bd-addon-list .bd-footer .bd-links .bd-addon-button { - height: 24px; -} - .bd-controls + .bd-addon-list { margin-top: 10px; } @@ -148,6 +121,8 @@ display: flex; align-items: center; justify-content: space-between; + flex-wrap: wrap; + gap: 5px; } .bd-addon-controls .bd-search { @@ -208,6 +183,14 @@ padding: 3px 4px; } +.bd-addon-views .bd-view-button svg { + fill: var(--interactive-normal); +} + +.bd-addon-views .bd-view-button.selected svg { + fill: #fff; +} + .bd-addon-views .bd-view-button:hover { background-color: var(--background-modifier-selected); } @@ -222,4 +205,31 @@ .bd-addon-views .bd-view-button + .bd-view-button { margin-left: 5px; +} + +.bd-addon-list .bd-footer .bd-links, +.bd-addon-list .bd-footer .bd-links a, +.bd-addon-list .bd-footer .bd-addon-button { + display: flex; + align-items: center; +} + +.bd-addon-list .bd-footer .bd-link { + color: var(--interactive-normal); +} + +.bd-addon-list .bd-footer .bd-link:hover { + color: var(--interactive-hover); +} + +.bd-addon-list .bd-footer .bd-link:active { + color: var(--interactive-active); +} + +.bd-addon-list .bd-footer .bd-link svg { + fill: currentColor; +} + +.bd-addon-list .bd-footer .bd-links .bd-addon-button { + height: 24px; } \ No newline at end of file diff --git a/src/styles/ui/bdsettings.css b/src/styles/ui/bdsettings.css index d36566b8..c6074041 100644 --- a/src/styles/ui/bdsettings.css +++ b/src/styles/ui/bdsettings.css @@ -1,9 +1,9 @@ -.bd-social-logo { - opacity: 0.6; +.theme-dark .bd-social-logo path { + fill: #adadad; } -.bd-social-logo path { - fill: white; +.theme-light .bd-social-logo path { + fill: #b9bbbe; } .bd-social-link:hover .bd-social-logo { @@ -165,7 +165,6 @@ height: 18px; left: 0; transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .bd-switch .bd-checkbox { diff --git a/src/styles/ui/modals.css b/src/styles/ui/modals.css index 60691e84..2381f50a 100644 --- a/src/styles/ui/modals.css +++ b/src/styles/ui/modals.css @@ -221,4 +221,14 @@ .bd-modal-wrapper .bd-content-modal .scroller { padding-top: 0; +} + +.bd-modal-close { + padding: 0; + height: 18px; +} + +.bd-modal-close svg { + width: 18px; + height: 18px; } \ No newline at end of file diff --git a/src/ui/modals.js b/src/ui/modals.js index 3ec915a3..56e7b337 100644 --- a/src/ui/modals.js +++ b/src/ui/modals.js @@ -267,11 +267,11 @@ export default class Modals { const mc = this.ModalComponents; const modal = props => { - return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.MEDIUM, className: "bd-addon-modal"}, props), + return React.createElement(mc.ModalRoot, Object.assign({size: mc.ModalSize.SMALL, className: "bd-addon-modal"}, props), React.createElement(mc.ModalHeader, {separator: false, className: "bd-addon-modal-header"}, React.createElement(this.FormTitle, {tag: "h4"}, `${name} Settings`), React.createElement(this.FlexElements.Child, {grow: 0}, - React.createElement(mc.ModalCloseButton, {onClick: props.onClose}) + React.createElement(mc.ModalCloseButton, {className: "bd-modal-close", onClick: props.onClose}) ) ), React.createElement(mc.ModalContent, {className: "bd-addon-modal-settings"}, diff --git a/src/ui/publicservers/menu.js b/src/ui/publicservers/menu.js index 3f32e18c..ba971c37 100644 --- a/src/ui/publicservers/menu.js +++ b/src/ui/publicservers/menu.js @@ -160,7 +160,7 @@ export default class PublicServers extends React.Component { }); let content = React.createElement(EmptyResults); - if (this.state.loading) content = this.loadingIndicator; + if (this.state.loading) content = this.loadingScreen; else if (this.state.results.total) content = React.createElement("div", {className: "bd-card-list"}, servers); return [React.createElement(SettingsTitle, {text: this.title, button: connectButton}), @@ -171,12 +171,14 @@ export default class PublicServers extends React.Component { ]; } - get loadingIndicator() { - return
-
-
-
-
+ get loadingScreen() { + return
+
+
+
+
+
+
; }