Create sadbooks.css

sadbooks.css

@@ -0,0 +1,258 @@
+/*
+  PRIMARY COLOUR IS #65799B
+  from http://colorhunt.co/c/80280
+*/
+
+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;
+}