roar/assets/css/sally.css

/* {{{ BODY.grid styles */
body.grid div {
  border-left:              1px solid #444444;
}
body.grid span {
  border-bottom:            1px solid #444444;
  border-right:             1px solid #444444;
}
body.grid .tool {
  border:                   1px solid #444444;
}
body.grid #brush_wrapper > div:first-child,
body.grid #canvas_wrapper > div:first-child,
body.grid #letters_wrapper > div:first-child,
body.grid #palette_wrapper > div:first-child {
  border-top:               1px solid #444444;
}
/* }}} */
/* {{{ .initial styles */
.initial #add_custom_el,
.initial #doc_el,
.initial #export_button,
.initial #format_el,
.initial #grid_el,
.initial #import_textarea,
.initial #load_el,
.initial #save_el,
.initial #vertical_checkbox {
}
/* }}} */
/* {{{ .selector_el styles */
.selector_el {
  border:                   1px dashed white !important;
  left:                     -999px;
  margin-top:               -1px;
  padding-top:              1px;
  pointer-events:           none;
  position:                 absolute;
  top:                      -999px;
}
.selector_el.creating div {
  display:                  none; }
.selector_el.dragging {
  color:                    #00FF00;
}
/* }}} */
/* {{{ .tool styles */
.tool {
  cursor:                   pointer;
}
.tool.focused {
  color:                    white;
  text-decoration:          underline;
}
.tool.locked.focused {
  box-shadow:               0 0;
}
.tool.radio {
  margin:                   0 8px 0 0;
}
.tool.radio.focused {
  background-color:         #6D6D6D;
  box-shadow:               none;
  color:                    black;
}
/* }}} */
/* {{{ .vertical styles */
.vertical .wrapper, .vertical .block {
  float:                    left;
}
.vertical #brush_container {
  display:                  inline-block;
  float:                    left;
}
.vertical #canvas_wrapper,
.vertical #canvas_wrapper div,
.vertical #palette_wrapper,
.vertical #palette_wrapper {
  margin-right:             10px;
}
.vertical #secret_wrapper {
  margin-right:             10px;
}
.vertical #secret_wrapper span {
  clear:                    both;
  float:                    left;
}
.vertical #tools_block {
  min-width:                100%;
}
.vertical #tools_wrapper,
.vertical #ui_wrapper {
  clear:                    none;
  float:                    left;
  width:                    320px;
}
.vertical #workspace_wrapper {
  float:                    left;
  position:                 relative;
  width:                    auto;
}
/* }}} */

/* {{{ Class & id styles (simple) */
.bucket #canvas_wrapper { cursor: url(../images/bucket.png) 3 15, auto; }
.dropper #canvas_wrapper { cursor: url(../images/dropper.gif) 0 15, auto; }
.faded { color: #404040; }
.hidden { visibility: hidden; }
.loading .vertical #ui_wrapper { clear: none }
#experimental_palette_toggle.focused { box-shadow: none; }
#import_wrapper { display: none; }
#tools_block > * { cursor: crosshair; }
#workspace_wrapper { width: 100%; }
/* }}} */
/* {{{ Class styles (complex) */
.ba.focused {
  box-shadow:               inset 0 0px 2px #000, inset 0 0px 2px black;
  border-color:             black;
}
.block {
  background-color:         black;
  float:                    left;
  height:                   auto;
  user-select:              none;
  -moz-user-select:         none;
  -webkit-user-select:      none;
  width:                    auto;
}
.block {
  padding:                  4px;
}
.block:nth-child(n+2) {
  padding-left:             30px;
}
.close {
  background:               black;
  cursor:                   pointer;
  padding:                  10px;
  position:                 absolute;
  right:                    20px;
  top:                      20px;
  z-index:                  2;
}
.custom {
  float:                    left;
  margin-bottom:            5px;
  margin-right:             5px;
}
.ed {
  color:                    white;
}
.ed.focused {
  color:                    white;
  text-decoration:          underline;
}
.faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
.fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused {
  box-shadow:               inset 1px 0 2px #888888, inset -1px 0 2px #888888, inset 0 1px 2px #888888, inset 0 -1px 2px #888888;
}
.focused {
  box-shadow:               inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white;
  border-color:             white;
}
.locked {
  border-bottom:            1px solid;
  color:                    #bbbbbb;
  text-decoration:          none;
}
.transparent {
  background-color:         transparent;
  background-image:         url(../images/gray-dither.gif);
  background-size:          8px 8px;
}
@media (-webkit-min-device-pixel-ratio: 2) {
  .transparent {
    background-size:        4px 4px;
  }
}
.wrapper {
  background-color:         black;
  cursor:                   crosshair;
  float:                    left;
  height:                   auto;
  user-select:              none;
  -moz-user-select:         none;
  -webkit-user-select:      none;
  white-space:              pre-wrap;
  width:                    auto;
  word-wrap:                break-word;
}
/* }}} */
/* {{{ Element styles */
a {
  display:                  block;
}
a:link, a:visited {
  color:                    #6B6760;
  text-decoration:          none;
}
a:hover {
  text-decoration:          underline;
}
body {
	background-color:         black !important;
  transition:               0.1s linear;
}
body.loading {
  opacity:                  0;
}
span {
  display:                  inline-block;
  line-height:              15px;
  min-width:                8px;
}
textarea, input[type=text], body {
  color:                    #6D6B6D;
  font-family:              'FixedsysExcelsior301Regular';
  -webkit-font-smoothing:   antialiased !important;
  line-height:              11pt;
  font-size:                12pt;
  font-weight:              100;
  margin:                   0;
}
/* }}} */
/* {{{ Id styles (complex) */
#brush_wrapper {
  border:                   1px solid;
  display:                  inline-block;
  float:                    left;
  margin-bottom:            13px;
  padding-right:            10px;
}
#brush_wrapper, #letters_wrapper {
  cursor:                   crosshair;
}
#canvas_wrapper {
  box-shadow:               0 0 2px rgba(255,255,255,0.3);
  margin:                   3px;
  white-space:              pre;
}
#cursor_input {
  font-size:                16px;
  opacity:                  0;
  position:                 fixed;
  right:                    0;
  top:                      0;
  width:                    30px;
}
#import_textarea {
  background:               #001100;
  border:                   1px solid #333333;
  color:                    #00FF00;
  font-family:              'FixedsysExcelsior301Regular';
  font-size:                12pt;
  height:                   300px;
  outline:                  0;
  width:                    37vw;
}
#letters_wrapper {
  display:                  inline-block;
  user-select:              none;
  -webkit-user-select:      none;
  -moz-user-select:         none;
}
#secret_wrapper {
  clear:                    right;
  float:                    left;
}
#secret_wrapper span {
  float:                    left;
}
#textarea_mode {
  float:                    left;
  padding:                  4px;
}
#ui_wrapper {
  clear:                    both;
  float:                    left;
  width:                    100vw;
}
#ui_wrapper .block {
  width:                    100px;
}
/* }}} */

/*
 * vim:ts=2 sw=2 expandtab fenc=utf-8 foldmethod=marker nowrap tw=0
 */