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
This commit is contained in:
Tropical
GitHub
parent
954f8be8a3
commit
878e4b24d5
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue