forked from devs/PCv5
editor: improve layout and style of buttons
This commit is contained in:
parent
8bec7120c5
commit
02520f6b2d
|
@ -1,11 +1,20 @@
|
|||
.editor .btn-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 5px;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
.editor .btn-group .filler {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.editor .btn-group button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
background-color: var(--background);
|
||||
}
|
||||
.editor .btn-group button:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
.editor .btn-group button > svg {
|
||||
width: 25px;
|
||||
}
|
||||
|
@ -13,8 +22,12 @@
|
|||
.editor .btn-group button > svg > rect {
|
||||
fill: var(--icons);
|
||||
}
|
||||
.editor .btn-group button,
|
||||
.editor .btn-group .separator {
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.editor textarea {
|
||||
min-height: 10rem;
|
||||
min-height: 15rem;
|
||||
}
|
||||
.separator {
|
||||
display: inline-block;
|
||||
|
@ -23,5 +36,4 @@
|
|||
border-right: 1px solid #ffffff;
|
||||
color: transparent;
|
||||
text-indent: -10px;
|
||||
margin: 0 6px;
|
||||
}
|
|
@ -43,10 +43,12 @@
|
|||
}
|
||||
|
||||
.editor button {
|
||||
--background: #ffffff;
|
||||
--text: #000000;
|
||||
--border: 1px solid rgba(0, 0, 0, 0);
|
||||
--border-focused: 1px solid rgba(0, 0, 0, .5);
|
||||
--background: #1d2326;
|
||||
--text: #ffffff;
|
||||
--background-hover: #262c2f;
|
||||
}
|
||||
.editor svg {
|
||||
--icons: #eeeeee;
|
||||
}
|
||||
|
||||
#light-menu {
|
||||
|
@ -127,10 +129,6 @@ table tr:nth-child(odd) {
|
|||
table.codehilitetable {
|
||||
--background: #263238;
|
||||
}
|
||||
.editor svg, .editor button {
|
||||
--icons: #fff;
|
||||
--background: #0d1215;
|
||||
}
|
||||
|
||||
div.editor-toolbar, div.CodeMirror {
|
||||
--border: #404040;
|
||||
|
|
|
@ -38,10 +38,9 @@
|
|||
}
|
||||
|
||||
.editor button {
|
||||
--background: #ffffff;
|
||||
--background: #eee;
|
||||
--text: #030303;
|
||||
--border: 1px solid rgba(0, 0, 0, 0);
|
||||
--border-focused: 1px solid rgba(0, 0, 0, .5);
|
||||
--background-hover: #ddd;
|
||||
}
|
||||
|
||||
#light-menu {
|
||||
|
|
|
@ -46,10 +46,9 @@ table th {
|
|||
}
|
||||
|
||||
.editor button {
|
||||
--background: #fff;
|
||||
--background: #eee;
|
||||
--text: #000;
|
||||
--border: 1px solid rgba(0, 0, 0, 0);
|
||||
--border-focused: 1px solid rgba(0, 0, 0, .5);
|
||||
--background-hover: #ddd;
|
||||
}
|
||||
|
||||
#light-menu {
|
||||
|
|
|
@ -1,14 +1,25 @@
|
|||
@import "vars";
|
||||
|
||||
.editor {
|
||||
& .btn-group {
|
||||
.btn-group {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 5px;
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
& button {
|
||||
.filler {
|
||||
flex-grow: 1;
|
||||
}
|
||||
button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
/* This centers the 24x24 SVG in the button */
|
||||
padding: 4px;
|
||||
background-color: var(--background);
|
||||
|
||||
&:hover {
|
||||
background: var(--background-hover);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
width: 25px;
|
||||
|
||||
|
@ -17,10 +28,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
button, .separator {
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
& textarea {
|
||||
min-height: 10rem;
|
||||
textarea {
|
||||
min-height: 15rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -32,5 +47,4 @@
|
|||
border-right: 1px solid #fff;
|
||||
color: transparent;
|
||||
text-indent: -10px;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
|
|
@ -112,6 +112,8 @@
|
|||
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="filler"></div>
|
||||
</div>
|
||||
|
||||
<!-- Field & desc -->
|
||||
|
|
Loading…
Reference in New Issue