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; }