asciiblaster

- draw irc art in your web browser
git clone git://git.acid.vegas/asciiblaster.git
Log | Files | Refs | Archive | README

sally.css (7297B)

      1 textarea,input[type=text],body {
      2     margin:0;
      3     font-family: 'FixedsysExcelsior301Regular';
      4     font-size: 12pt;
      5     font-weight: 100;
      6     line-height: 11pt;
      7     color: #6d6b6d;
      8     -webkit-font-smoothing: antialiased !important;
      9 }
     10 body {
     11     background-color: #000000 !important;
     12 }
     13 @font-face {
     14     font-family: 'FixedsysExcelsior301Regular';
     15     src: url('../fonts/fsex300-webfont.eot');
     16     src: url('../fonts/fsex300-webfont.eot%3F') format('embedded-opentype'),
     17          url('../fonts/fsex300-webfont.woff') format('woff'),
     18          url('../fonts/fsex300-webfont.ttf') format('truetype'),
     19          url('../fonts/fsex300-webfont.svg') format('svg');
     20     font-weight: normal;
     21     font-style: normal;
     22 }
     23 
     24 a {display: block}
     25 a:link, a:visited {text-decoration: none; color: #6b6760}
     26 a:hover { text-decoration: underline }
     27 
     28 .faded { color: #404040; }
     29 .rapper, .block {
     30   float: left;
     31   height:auto;
     32   width:auto;
     33   background-color: #000000;
     34   -webkit-user-select: none;
     35   -moz-user-select: none;
     36   user-select: none;
     37 }
     38 .rapper {
     39   white-space:pre-wrap;
     40   word-wrap: break-word;
     41 }
     42 #gallery_rapper {
     43   display: inline
     44 }
     45 #ui_rapper .block {
     46   width: 100px;
     47 }
     48 .block {
     49   padding:4px;
     50 }
     51 .block:nth-child(n+2) {
     52   padding-left: 30px;
     53 }
     54 #textarea_mode { padding: 4px; }
     55 .tool {
     56   cursor: pointer;
     57 }
     58 .hidden {
     59   visibility: hidden;
     60 }
     61 .tool.radio {
     62   margin: 0 8px 0 0;
     63 }
     64 .tool.radio.focused {
     65   color: #000;
     66 
     67   background-color: #6d6d6d;
     68   box-shadow: none;
     69 }
     70 .transparent {
     71   background-color: transparent;
     72   background-image: url(../img/gray-dither.gif);
     73   background-size: 8px 8px;
     74 }
     75 
     76 @media (-webkit-min-device-pixel-ratio: 2) { 
     77   .transparent {
     78     background-size: 4px 4px;
     79   }
     80 }
     81 span,a { min-width: 8px; line-height: 15px; display: inline-block; }
     82 body.pixels {
     83   line-height: 8px;
     84 }
     85 .pixels #brush_rapper span,
     86 .pixels #brush_rapper a,
     87 .pixels #canvas_rapper span,
     88 .pixels #canvas_rapper a { line-height: 8px; overflow: hidden; }
     89 .rapper { cursor: crosshair; }
     90 body.grid span { border-right: 1px solid #444; border-bottom: 1px solid #444; }
     91 body.grid div { border-left: 1px solid #444; }
     92 body.grid #canvas_rapper > div:first-child,
     93 body.grid #palette_rapper > div:first-child,
     94 body.grid #letters_rapper > div:first-child,
     95 body.grid #brush_rapper > div:first-child { border-top: 1px solid #444; }
     96 body.grid .tool { border: 1px solid #444; }
     97 .ed { color: #fff; }
     98 .locked { border-bottom: 1px solid; color: #bbb; text-decoration: none; }
     99 .tool.locked.focused { box-shadow: 0 0; }
    100 .focused { box-shadow: inset 0 0px 2px #fff; border-color: #fff; }
    101 .ba.focused { box-shadow: inset 0 0px 2px #000, inset 0 0px 2px #000; border-color: #000; }
    102 .tool.focused, .ed.focused { color: white; text-decoration: underline; }
    103 .focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; }
    104 .faba.focused, .fbba.focused, .fcba.focused, .fdba.focused, .feba.focused, .ffba.focused, .fgba.focused, .fhba.focused,
    105 .fiba.focused, .fjba.focused, .fkba.focused, .flba.focused, .fmba.focused, .fnba.focused, .foba.focused, .fpba.focused 
    106   { box-shadow: inset 1px 0 2px #888, inset -1px 0 2px #888, inset 0 1px 2px #888, inset 0 -1px 2px #888; }
    107 body.loading { opacity: 0; }
    108 body { transition: 0.1s linear; }
    109 #import_textarea { font-size: 9pt; }
    110 textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;}
    111 #shader_rapper { display: none; }
    112 #import_rapper { display: none; }
    113 #canvas_rapper {
    114   white-space: pre;
    115   box-shadow: 0 0 2px rgba(255,255,255,0.3);
    116   margin: 3px;
    117 }
    118 
    119 #ui_rapper { clear:both; float: left; width: 100vw; }
    120 #workspace_rapper { width: 100%; }
    121 
    122 .loading .vertical #ui_rapper { clear: none }
    123 .vertical #ui_rapper { width: 320px; float: left; clear: none; }
    124 .vertical .rapper, .vertical .block { float: left; }
    125 .vertical #canvas_rapper,
    126 .vertical #canvas_rapper div,
    127 .vertical #tools_rapper,
    128 .vertical #palette_rapper,
    129 .vertical #brush_container { display: inline-block; float: left; }
    130 .vertical #workspace_rapper { width: auto; position: relative; float: left; }
    131 .vertical #palette_rapper { margin-right: 10px; }
    132 .vertical #tools_block { min-width: 100%; }
    133 
    134 #secret_rapper { float: left; clear: right; }
    135 #secret_rapper span { float: left; }
    136 .vertical #secret_rapper { margin-right: 10px; }
    137 .vertical #secret_rapper span { float: left; clear: both; }
    138 .nopaint #brush_rapper { min-height: 70px; min-width: 50px; }
    139 
    140 #nopaint_rapper.hidden {
    141   display: none;
    142 }
    143 
    144 .rotated #canvas_rapper {
    145   transform: translateX(-50%) translateY(-50%) translateZ(0) rotate(-90deg);
    146   transform-origin: 50% 50%;
    147   position: absolute;
    148   left: 50%;
    149 }
    150 
    151 #tools_block > * {
    152   cursor: crosshair;
    153 }
    154 #brush_rapper, #letters_rapper {
    155   cursor: crosshair;
    156 }
    157 .dropper #canvas_rapper {
    158   cursor: url(../img/dropper.gif) 0 15, auto;
    159 }
    160 .bucket #canvas_rapper {
    161   cursor: url(../img/bucket.png) 3 15, auto;
    162 }
    163 #brush_rapper {
    164   border: 1px solid;
    165   display: inline-block;
    166   margin-bottom: 13px;
    167   float: left;
    168 }
    169 #letters_rapper {
    170   display: inline-block;
    171   -webkit-user-select: none;
    172   -moz-user-select: none;
    173   user-select: none;
    174 }
    175 .close { position: absolute; top: 20px; right: 20px; z-index: 2; padding: 10px; background: black; cursor: pointer; }
    176 #webcam_rapper { display: none; position: absolute; top: 0px; left: 0px; width:100%;height:100%; box-sizing:border-box; border: 40px solid rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);  }
    177 #webcam_iframe { position: absolute; top: 0px; left: 0px; width:100%;height:100%; background-color: rgba(0,0,0,0.5); border: 0; }
    178 #experimental_palette_toggle.focused { box-shadow: none; }
    179 #cursor_input { position: fixed; top: 0; right: 0; width:30px; opacity: 0; font-size: 16px; }
    180 .selector_el {
    181   border: 1px dashed #fff !important;
    182   padding-top: 1px;
    183   position:absolute;
    184   margin-top: -1px;
    185   top:-999px;left:-999px;
    186   pointer-events: none;
    187 }
    188 .selector_el.dragging {
    189   color: #0f0;
    190 }
    191 .selector_el.creating div {
    192   display: none;
    193 }
    194 .custom {
    195   float: left;
    196   margin-right: 5px;
    197   margin-bottom: 5px;
    198 }
    199 #username_input {
    200   background: transparent;
    201   padding: 0;
    202   outline: 0;
    203   border: 1px solid transparent;
    204   width: 76px;
    205 }
    206 #username_input:focus {
    207   border: 1px solid #0f0;
    208   color: #0f0;
    209 }
    210 #upload_input {
    211   background: transparent;
    212   padding: 0;
    213   outline: 0;
    214   border: 1px solid #0f0;
    215   color: #0f0;
    216   width: 100%;
    217   max-width: 360px;
    218 }
    219 #upload_button.uploading {
    220   background: transparent;
    221   border: 0;
    222   font-size: 16px;
    223   font-family: 'FixedsysExcelsior301Regular';
    224   -webkit-animation: rainbow 1.0s infinite;
    225   animation: rainbow 2.0s infinite;
    226   padding: 0; margin: 0;
    227 }
    228 @keyframes rainbow {
    229   0% { color: hsl(0,100%,50%) }
    230   33% { color: hsl(90,100%,50%) }
    231   50% { color: #fff }
    232   66% { color: hsl(320,100%,50%) }
    233   100% { color: hsl(360,100%,50%) }
    234 }
    235 
    236 .panke #send_to_irc_el {
    237   color: white;
    238   text-decoration: underline;
    239 }
    240 .panke #shader_el,
    241 .panke #load_el,
    242 .panke #gallery_el,
    243 .panke #import_textarea,
    244 .panke #doc_el,
    245 .panke #gallery_el,
    246 .panke #save_button,
    247 .panke #upload_button,
    248 .panke #export_button,
    249 .panke #username_input,
    250 .panke #upload_input,
    251 .panke #grid_el,
    252 .panke #save_el,
    253 .panke #vertical_checkbox,
    254 .panke #add_custom_el,
    255 .panke #format_el { display: none !important; }