BetterDiscordApp-v2/tests/csseditor/main.css

295 lines
6.5 KiB
CSS
Raw Normal View History

2018-01-17 12:28:52 +01:00
html, body {
margin: 0;
padding: 0;
max-height: 100%;
2018-01-17 14:46:27 +01:00
height: 100%;
2018-01-17 12:28:52 +01:00
background: #2c383e;
min-width: 700px;
min-height: 400px;
}
2018-01-17 14:46:27 +01:00
* {
outline: none;
}
.flex-spacer {
flex-grow: 1;
}
.flex-row {
display: flex;
flex-direction: row;
}
.valign {
2018-01-17 12:28:52 +01:00
position: absolute;
2018-01-17 14:46:27 +01:00
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container {
display: flex;
flex-grow: 1;
flex-direction: column;
height: 100%;
2018-01-17 12:28:52 +01:00
}
.titlebar {
display: flex;
height: 25px;
padding: 4px 5px;
2018-01-17 12:28:52 +01:00
background: #292b2f;
border-bottom: 1px solid hsla(218,5%,47%,.3);
user-select: none;
cursor: default;
2018-01-17 14:46:27 +01:00
}
.titlebar .icon {
width: 31px;
height: 25px;
2018-01-17 14:46:27 +01:00
}
.titlebar .icon .inner {
width: 25px;
height: 25px;
2018-01-17 14:46:27 +01:00
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjAwMCAyMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMDAwIDIwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGw9IiMzRTgyRTUiIGQ9Ik0xNDAyLjIsNjMxLjdjLTkuNy0zNTMuNC0yODYuMi00OTYtNjQyLjYtNDk2SDY4LjR2NzE0LjFsNDQyLDM5OFY0OTAuN2gyNTdjMjc0LjUsMCwyNzQuNSwzNDQuOSwwLDM0NC45SDU5Ny42djMyOS41aDE2OS44YzI3NC41LDAsMjc0LjUsMzQ0LjgsMCwzNDQuOGgtNjk5djM1NC45aDY5MS4yYzM1Ni4zLDAsNjMyLjgtMTQyLjYsNjQyLjYtNDk2YzAtMTYyLjYtNDQuNS0yODQuMS0xMjIuOS0zNjguNkMxMzU3LjcsOTE1LjgsMTQwMi4yLDc5NC4zLDE0MDIuMiw2MzEuN3oiLz48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTI2Mi41LDEzNS4yTDEyNjIuNSwxMzUuMmwtNzYuOCwwYzI2LjYsMTMuMyw1MS43LDI4LjEsNzUsNDQuM2M3MC43LDQ5LjEsMTI2LjEsMTExLjUsMTY0LjYsMTg1LjNjMzkuOSw3Ni42LDYxLjUsMTY1LjYsNjQuMywyNjQuNmwwLDEuMnYxLjJjMCwxNDEuMSwwLDU5Ni4xLDAsNzM3LjF2MS4ybDAsMS4yYy0yLjcsOTktMjQuMywxODgtNjQuMywyNjQuNmMtMzguNSw3My44LTkzLjgsMTM2LjItMTY0LjYsMTg1LjNjLTIyLjYsMTUuNy00Ni45LDMwLjEtNzIuNiw0My4xaDcyLjVjMzQ2LjIsMS45LDY3MS0xNzEuMiw2NzEtNTY3LjlWNzE2LjdDMTkzMy41LDMxMi4yLDE2MDguNywxMzUuMiwxMjYyLjUsMTM1LjJ6Ii8+PC9nPjwvc3ZnPg==);
background-size: 22px 22px;
2018-01-17 14:46:27 +01:00
background-repeat: no-repeat;
background-position: center;
}
.titlebar .title {
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
line-height: 25px;
font-size: 15px;
2018-01-17 14:46:27 +01:00
}
.titlebar .controls {
margin: 0 0 0 2px;
font-size: 0;
}
2018-01-17 14:46:27 +01:00
.titlebar .controls button {
-webkit-app-region: no-drag;
2018-01-17 12:28:52 +01:00
border-radius: 3px;
width: 25px;
font-size: 12px;
font-weight: 600;
/*background: #263238;*/
background: #36393f;
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
transition: background-color .2s ease;
cursor: default;
2018-01-17 12:28:52 +01:00
border: 0;
height: 25px;
z-index: 900062;
padding: 0;
margin: 0 0 0 4px;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.titlebar .controls button:hover {
background: #44474e;
color: #FFF;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.titlebar .controls button.active {
background: #3a71c1;
2018-01-17 12:28:52 +01:00
}
.titlebar .draggable {
top: 0;
left: 0;
right: 63px;
position: absolute;
height: 33px;
-webkit-app-region: drag;
}
2018-01-17 14:46:27 +01:00
#spinner {
background: rgba(51, 48, 48, 0.41);
position: absolute;
top: 34px;
2018-01-17 14:46:27 +01:00
left: 0;
right: 0;
bottom: 0;
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
font-weight: 600;
font-size: 2em;
z-index: 90000;
user-select: none;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.editor {
2018-01-17 12:28:52 +01:00
display: flex;
flex-direction: column;
2018-01-17 14:46:27 +01:00
flex-grow: 1;
overflow: hidden;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.editor .CodeMirror {
2018-01-17 12:28:52 +01:00
flex-grow: 1;
2018-01-17 14:46:27 +01:00
}
.tools {
height: 36px;
2018-01-17 14:46:27 +01:00
background: #292b2f;
border-top: 1px solid hsla(218,5%,47%,.3);
2018-01-17 12:28:52 +01:00
display: flex;
flex-direction: column;
user-select: none;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.tools .flex-row {
flex-grow: 1;
padding: 4px 5px;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.tools button {
border-radius: 3px;
width: 100px;
padding: 3px 10px;
font-size: 12px;
font-weight: 600;
background: #36393f;
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
transition: background-color .2s ease;
cursor: pointer;
border: 0;
margin-right: 4px;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.tools button:hover {
background: #44474e;
color: #FFF;
2018-01-17 12:28:52 +01:00
}
.tools #chkboxLiveUpdate {
padding: 3px 10px;
line-height: 22px;
}
.tools #chkboxLiveUpdate input[type="checkbox"] {
margin: 0 6px 0 0;
cursor: pointer;
}
.tools #chkboxLiveUpdate span {
font-size: 12px;
font-weight: 500;
color: #bac9d2;
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
cursor: default;
}
2018-01-17 14:46:27 +01:00
/*CodeMirror styling*/
.CodeMirror-scroll {
cursor: text;
}
2018-01-17 12:28:52 +01:00
.CodeMirror-overlayscroll .CodeMirror-scrollbar-filler {
background: #38444a;
}
.CodeMirror-overlayscroll-horizontal div,
.CodeMirror-overlayscroll-vertical div {
2018-01-17 14:46:27 +01:00
background: rgb(41, 43, 47);
2018-01-17 12:28:52 +01:00
}
.CodeMirror-overlayscroll-horizontal,
2018-01-17 14:46:27 +01:00
.CodeMirror-overlayscroll-horizontal div {
height: 10px;
2018-01-17 12:28:52 +01:00
}
.CodeMirror-overlayscroll-vertical,
2018-01-17 14:46:27 +01:00
.CodeMirror-overlayscroll-vertical div {
width: 10px;
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.CodeMirror-scrollbar-filler {
width: 10px;
height: 10px;
background: rgb(41, 43, 47);
2018-01-17 12:28:52 +01:00
}
2018-01-17 14:46:27 +01:00
.cm-s-material.CodeMirror {
background: #36393f;
}
2018-01-17 12:28:52 +01:00
.CodeMirror-scroll {
cursor: text;
}
2018-01-17 14:46:27 +01:00
.cm-s-material .CodeMirror-gutters {
2018-01-17 12:28:52 +01:00
background: #292b2f;
}
.CodeMirror-gutter {
min-width: 34px;
border-right: 1px solid hsla(218,5%,47%,.3);
cursor: default;
}
2018-01-17 12:28:52 +01:00
.CodeMirror-hints {
/*background: #1e262a;*/
background: #292b2f;
box-shadow: 2px 3px 5px rgba(4, 4, 4, 0.22);
border: 1px solid #262f33;
}
2018-01-17 14:46:27 +01:00
.CodeMirror-hints::-webkit-scrollbar {
background: transparent;
}
2018-01-17 12:28:52 +01:00
2018-01-17 14:46:27 +01:00
.CodeMirror-hints::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.4);
border-color: transparent;
}
2018-01-17 12:28:52 +01:00
2018-01-17 14:46:27 +01:00
.CodeMirror-hints::-webkit-scrollbar-thumb,
.CodeMirror-hints::-webkit-scrollbar-track {
background-clip: padding-box;
border-width: 3px;
border-style: solid;
border-radius: 7px;
}
2018-01-17 12:28:52 +01:00
2018-01-17 14:46:27 +01:00
.CodeMirror-hints::-webkit-scrollbar-track {
background-color: transparent;
border-color: transparent;
}
2018-01-17 12:28:52 +01:00
.CodeMirror-linenumber,
.CodeMirror-line {
padding: 0 5px !important;
}
.CodeMirror-linenumber {
cursor: text;
}
2018-01-17 12:28:52 +01:00
.cm-s-material .CodeMirror-linenumber {
color: #f6f6f7;
}
.CodeMirror-hint {
color: #bac9d2;
}
li.CodeMirror-hint-active {
color: #bac9d2;
/*background: #3b4950;*/
background: #36393f;
}
.CodeMirror-dialog-top {
bottom: 0;
top: auto;
border: none;
background: #1e262a;
}