|
|
|
|
|
|
|
|
|
|
|
html, body { |
|
height: 100%; |
|
width: 100%; |
|
background-color: #1D1F21; |
|
} |
|
body { |
|
margin: 0; |
|
line-height: 1; |
|
font-size: 12px; |
|
color: white; |
|
padding-top: 5px; |
|
box-sizing: border-box; |
|
font-family: 'Raleway', monospace; |
|
} |
|
button { |
|
border: none; |
|
background: none; |
|
background-color: rgba(255,255,255,0.1); |
|
height: 1em; |
|
color: inherit; |
|
padding: 0; |
|
text-align: center; |
|
cursor: pointer; |
|
vertical-align: text-bottom; |
|
} |
|
input { |
|
border: none; |
|
background-color: transparent; |
|
padding: 0; |
|
color: inherit; |
|
} |
|
::-webkit-scrollbar { |
|
background-color: #1D1F21; |
|
} |
|
::-webkit-scrollbar-track { |
|
background-color: #1D1F21; |
|
} |
|
::-webkit-scrollbar:vertical { |
|
width: 5px; |
|
} |
|
::-webkit-scrollbar:horizontal { |
|
height: 5px; |
|
} |
|
::-webkit-scrollbar-thumb { |
|
background-color: #65799B !important; |
|
border-radius: 0 !important; |
|
} |
|
#spaneditor { |
|
position: fixed; |
|
display: none; |
|
height: 1em; |
|
} |
|
#resize { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
cursor: ns-resize; |
|
width: 100%; |
|
height: 5px; |
|
background-color: rgba(255,255,255,0.1); |
|
} |
|
#resizestyles { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
cursor: ew-resize; |
|
height: 100%; |
|
width: 5px; |
|
background-color: rgba(255,255,255,0.1); |
|
} |
|
.tabs { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
height: 15px; |
|
background-color: #191B1D; |
|
font-size: 0; |
|
box-shadow: inset 0 -0.5px 0 0 rgba(255,255,255,0.1); |
|
} |
|
.tabs li { |
|
display: inline-block; |
|
padding: 0 5px; |
|
padding-bottom: 3px; |
|
line-height: 1; |
|
cursor: pointer; |
|
transition: all .2s; |
|
border-color: transparent; |
|
font-size: 12px; |
|
} |
|
.tabs li:hover { |
|
border-bottom: 1px solid rgba(255,255,255,0.5); |
|
padding-bottom: 2px; |
|
} |
|
.tabs li.active { |
|
border-bottom: 1.5px solid #65799B; |
|
padding-bottom: 1.5px; |
|
cursor: default; |
|
} |
|
.section { |
|
display: none; |
|
position: absolute; |
|
top: 0; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
} |
|
body > .section { |
|
top: 20px; |
|
} |
|
#styles > .section { |
|
left: 5px; |
|
top: 15px; |
|
} |
|
body.main-htmlcss .section#htmlcss { |
|
display: flex; |
|
} |
|
body.styletabs-compstyles .section#compstyles { |
|
display: block; |
|
} |
|
#elements { |
|
height: 100%; |
|
overflow: auto; |
|
flex: auto; |
|
line-height: 1.5; |
|
} |
|
#styles { |
|
height: 100%; |
|
overflow: auto; |
|
width: 250px; |
|
padding-left: 5px; |
|
box-sizing: border-box; |
|
position: relative; |
|
flex: none; |
|
} |
|
button:hover, button:focus { |
|
background-color: rgba(255,255,255,0.2); |
|
} |
|
button::after { |
|
vertical-align: top; |
|
line-height: 1; |
|
} |
|
div.element-children { |
|
margin-left: 10px; |
|
} |
|
div.element-wrapper { |
|
white-space: nowrap; |
|
} |
|
div.element-wrapper > button, button.square { |
|
width: 1em; |
|
font-family: 'Inconsolata', monospace; |
|
} |
|
div.element-wrapper > button::after { |
|
content: '-'; |
|
} |
|
div.element-wrapper.collapsed > button::after { |
|
content: '+'; |
|
} |
|
div.element-wrapper.collapsed > div.element-children { |
|
display: inline; |
|
margin-left: 0; |
|
} |
|
div.element-wrapper.collapsed > div.element-children::before { |
|
content: '...'; |
|
} |
|
div.element-wrapper.collapsed > div.element-children > * { |
|
display: none; |
|
} |
|
div.element-wrapper.nochildren > button { |
|
opacity: 0; |
|
pointer-events: none; |
|
} |
|
div.element-wrapper.nochildren > div.element-children { |
|
display: none; |
|
} |
|
div.element-wrapper.active > span.element-openTag, div.element-wrapper.active > span.element-closeTag { |
|
background-color: rgba(255,255,255,0.1); |
|
border-radius: 2px; |
|
} |
|
span.syntax { |
|
white-space: pre; |
|
font-family: 'Inconsolata', monospace; |
|
} |
|
span.syntax.red {color: #CC6666;} |
|
span.syntax.orange {color: #DE935F;} |
|
span.syntax.cream {color: #F0C674;} |
|
span.syntax.yellow {color: #B5BD68;} |
|
span.syntax.aqua {color: #8ABEB7;} |
|
span.syntax.blue {color: #81A2BE;} |
|
span.syntax.purple {color: #B294BB;} |
|
span.syntax.grey {color: #969896;} |
|
span.syntax.white {color: #C5C8C6;} |
|
span.editting { |
|
opacity: 0; |
|
pointer-events: none; |
|
} |
|
span.textNode::before, span.textNode::after { |
|
content: "\""; |
|
} |
|
span.commentNode::before { |
|
content: "<!--"; |
|
} |
|
span.commentNode::after { |
|
content: "-->"; |
|
} |
|
span.doctypeNode::before { |
|
content: "<!DOCTYPE "; |
|
} |
|
span.doctypeNode::after { |
|
content: ">"; |
|
} |
|
#buttons { |
|
position: fixed; |
|
top: 5px; |
|
right: 0; |
|
} |
|
#buttons button { |
|
margin-left: 2px; |
|
} |
|
#compstyles div { |
|
display: block; |
|
} |
|
ul.context-back, ul.context-submenu { |
|
margin: 0; |
|
padding: 0; |
|
background-color: #2B2B2B; |
|
border: 1px solid #A0A0A0; |
|
list-style: none; |
|
padding: 5px 0; |
|
} |
|
ul.context-back { |
|
position: fixed; |
|
} |
|
li.context-option { |
|
padding: 5px 10px; |
|
cursor: pointer; |
|
} |
|
li.context-option:hover { |
|
background-color: #414141; |
|
} |
|
li.context-option.context-hassubmenu::after { |
|
content: '>'; |
|
display: inline-block; |
|
padding-left: 5px; |
|
} |
|
li.context-option > ul.context-submenu { |
|
position: absolute; |
|
left: 100%; |
|
display: none; |
|
transform: translateY(-23px); |
|
} |
|
li.context-option:hover > ul.context-submenu { |
|
display: block; |
|
} |