From 878e4b24d54bd9153a43ee7d76657d2244a7a8c2 Mon Sep 17 00:00:00 2001 From: Tropical <42101043+Tropix126@users.noreply.github.com> Date: Sat, 24 Oct 2020 03:11:22 -0500 Subject: [PATCH] Creates a more consistent CSS editor + Less cramped public button (#470) * fix magnifying glass on light mode, minor text miscoloring on search bars * Better, more consistent CSS editor and less cramped public button. * stupid linter --- src/styles/builtins/customcss.css | 51 +++++++++++++++++---------- src/styles/builtins/publicservers.css | 12 +++---- src/styles/ui/floatingwindow.css | 47 +++++++++++++----------- 3 files changed, 65 insertions(+), 45 deletions(-) diff --git a/src/styles/builtins/customcss.css b/src/styles/builtins/customcss.css index db78d062..afc27464 100644 --- a/src/styles/builtins/customcss.css +++ b/src/styles/builtins/customcss.css @@ -6,7 +6,7 @@ #bd-editor-controls button { margin: 0 5px 0 0; background: none; - color: #fff; + color: var(--interactive-normal); height: 26px; font-weight: 600; border-radius: 3px; @@ -15,26 +15,28 @@ } #bd-editor-controls button:hover { - background: rgba(255, 255, 255, 0.05); + background: var(--background-modifier-hover); + color: var(--interactive-hover); +} + +#bd-editor-controls button:active { + background: var(--background-modifier-active); } #bd-editor-controls button svg { - fill: #fff; -} - -#bd-editor-controls button:last-of-type { - margin-right: 0; + fill: currentColor; } #bd-editor-controls { display: flex; align-items: center; justify-content: space-between; - background: #272822; + background: var(--background-secondary-alt); color: #fff; border: none; - box-shadow: 0 1px 0 0 #2f3129 inset; + box-shadow: var(--elevation-low); padding: 5px; + z-index: 10; } .editor-wrapper { @@ -51,22 +53,34 @@ } .bd-monokai .editor .ace_gutter { - background: #2f3136; + background: var(--background-secondary-alt); + color: var(--header-secondary); + font-size: 12px; } .bd-monokai .ace_editor { - background: #292b2f; + background: var(--background-secondary); } -.bd-monokai #bd-editor-controls { - background: #202225; +.bd-monokai .ace_line { + color: var(--text-normal); } -.theme-light #bd-editor-controls { - background: #e8e8e8; - border: 1px solid #fff; - border-top: 1px solid #adadad; - box-shadow: inset 0 1px 0 0 white; +.editor-wrapper .bd-monokai .ace_cursor { + color: var(--text-normal); +} + +.editor-wrapper .bd-monokai .ace_gutter-active-line { + background: var(--background-tertiary); +} + +.editor-wrapper .bd-monokai .ace_marker-layer .ace_active-line { + background: var(--background-secondary-alt); +} + +.editor-wrapper .bd-monokai .ace_marker-layer .ace_selection { + background: #3e82e5; + opacity: 0.5; } .controls-section { @@ -86,6 +100,7 @@ .controls-section .checkbox-label { font-size: 14px; + font-weight: 500; } /* Ace Editor Settings */ diff --git a/src/styles/builtins/publicservers.css b/src/styles/builtins/publicservers.css index 0ae19020..9ebb8118 100644 --- a/src/styles/builtins/publicservers.css +++ b/src/styles/builtins/publicservers.css @@ -1,17 +1,17 @@ #bd-pub-li { - height: 20px; + height: 24px; margin-bottom: 10px; overflow: hidden; } #bd-pub-button { - border-radius: 4px; - background-color: rgb(47, 49, 54); - color: #b9bbbe; + border-radius: 3px; + background-color: var(--background-secondary); + color: var(--interactive-normal); text-align: center; font-size: 12px; - line-height: 20px; - height: 20px; + line-height: 24px; + height: 24px; } .bd-layer { diff --git a/src/styles/ui/floatingwindow.css b/src/styles/ui/floatingwindow.css index faececad..ec2888e5 100644 --- a/src/styles/ui/floatingwindow.css +++ b/src/styles/ui/floatingwindow.css @@ -29,32 +29,34 @@ overflow: auto; resize: both; padding-bottom: 10px; - background: #202225; + background: var(--background-tertiary); } .floating-window-titlebar { width: 100%; + height: 28px; display: flex; justify-content: space-between; align-items: center; - background: #202225; /* #2F3129background-color: #202225; */ color: #fff; - border-bottom: 1px solid #272822; + background: var(--background-tertiary); /* #2F3129background-color: #202225; */ } .floating-window-content { display: flex; flex-direction: column; - background: #2f3129; + background: var(--background-secondary); color: #fff; flex: 1; } .floating-window-titlebar .title { /* font-weight: bold; */ + font-size: 0.85em; + font-weight: 600; + color: var(--header-secondary); flex: 1; - text-align: center; - padding: 2px 0; + padding: 0 8px; } .floating-window-buttons { @@ -63,28 +65,30 @@ .floating-window-buttons .button { cursor: pointer; - padding: 0 2px; + height: 28px; + width: 30px; + display: flex; + align-items: center; + justify-content: center; + color: var(--interactive-normal); } -.floating-window-buttons .button svg { - fill: #dcddde; - margin-top: 1.5px; +.floating-window-buttons .button svg, +.floating-window-buttons .close-button:hover svg path.fill { + fill: currentColor; } -.floating-window-buttons .button:hover svg { - fill: #fff; +.floating-window-buttons .maximize-button:hover { + background: var(--background-modifier-hover); } -.floating-window-buttons .button:hover { - background-color: #36393f; +.floating-window-buttons .maximize-button:active { + background: var(--background-modifier-active); } .floating-window-buttons .close-button:hover { - background-color: #f04747; -} - -.floating-window-buttons .close-button:hover svg path.fill { - fill: #fff; + background: #f04747; + color: #fff; } .floating-window-content #bd-editor-panel { @@ -103,10 +107,11 @@ } .floating-window #bd-editor-controls { + z-index: 10; height: auto; - background: #202225; + background: var(--background-secondary-alt); border: none; - box-shadow: 0 1px 0 0 #2f3129 inset; + box-shadow: var(--elevation-low); } #floating-editor-window {