js2/mwEmbed/libClipEdit/pixastic-lib/pixastic-editor/pixastic.css

   1 /* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
   2
   3 html, body, div, span, applet, object, iframe,
   4 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   5 a, abbr, acronym, address, big, cite, code,
   6 del, dfn, em, font, img, ins, kbd, q, s, samp,
   7 small, strike, strong, sub, sup, tt, var,
   8 dl, dt, dd, ol, ul, li,
   9 fieldset, form, label, legend,
  10 table, caption, tbody, tfoot, thead, tr, th, td {
  11         margin: 0;
  12         padding: 0;
  13         border: 0;
  14         outline: 0;
  15         font-weight: inherit;
  16         font-style: inherit;
  17         font-size: 100%;
  18         font-family: inherit;
  19         vertical-align: baseline;
  20 }
  21 /* remember to define focus styles! */
  22 :focus {
  23         outline: 0;
  24 }
  25 body {
  26         line-height: 1;
  27         color: black;
  28         background: white;
  29 }
  30 ol, ul {
  31         list-style: none;
  32 }
  33 /* tables still need 'cellspacing="0"' in the markup */
  34 table {
  35         border-collapse: separate;
  36         border-spacing: 0;
  37 }
  38 caption, th, td {
  39         text-align: left;
  40         font-weight: normal;
  41 }
  42 blockquote:before, blockquote:after,
  43 q:before, q:after {
  44         content: "";
  45 }
  46 blockquote, q {
  47         quotes: "" "";
  48 }
  49 /* end reset */
  50
  51 /* -----------------------
  52  *   Base
  53  * -----------------------
  54  */
  55
  56 /* main container element for editor app */
  57 #pixastic-editor {
  58         margin : 0;
  59         position : absolute;
  60         left : 0;
  61         top : 0;
  62         padding: 0px;
  63         width: 100%;
  64         height: 100%;
  65         font-family : Helvetica,Arial,sans-serif;
  66         overflow : hidden;
  67         z-index : 10000000;
  68 }
  69
  70
  71 /* -----------------------
  72  *   Loading screen
  73  * -----------------------
  74  */
  75
  76 /* container for loading screen */
  77 #loading-screen {
  78         margin : 0;
  79         position : absolute;
  80         left : 0;
  81         top : 0;
  82         padding: 0px;
  83         width: 100%;
  84         height: 100%;
  85         font-family : Helvetica,Arial,sans-serif;
  86         overflow : hidden;
  87         z-index : 10000000;
  88         background-color : #111;
  89         opacity : 0.9;
  90         display : table;
  91         text-align : center;
  92 }
  93
  94 /* container for spinner in loading screen */
  95 #loading-screen-cell {
  96         display : table-cell;
  97         vertical-align : middle;
  98         text-align : center;
  99 }
 100
 101
 102 /* -----------------------
 103  *   Misc
 104  * -----------------------
 105  */
 106
 107
 108 // UI error dialog
 109 .ui-dialog .error-dialog {
 110         background-color : #544;
 111 }
 112
 113 /* loading spinner */
 114 .spinner {
 115         width : 31px;
 116         height : 31px;
 117         display : inline-block;
 118         background: url(spinner.gif);
 119         overflow : hidden;
 120 }
 121
 122 canvas.display-canvas,
 123 canvas.undo-canvas {
 124         /*
 125         background : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC1JREFUeNpiPHPmDAM2YGxsjFWciYFEMKqBGMD4//9/rBJnz54dDSX6aQAIMABCtQiAsDRF+wAAAABJRU5ErkJggg==');
 126         */
 127         background : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC5JREFUeNpiPHPmTAMDHmBsbIxPmoGJgUIwasBgMICFUDyfPXt2NBCHvwEAAQYAICIGn294LYEAAAAASUVORK5CYII=');
 128
 129 }
 130
 131 .far-far-away {
 132         position : absolute;
 133         left : -9999px;
 134         top : -9999px;
 135 }
 136
 137 #powered-by-pixastic {
 138         position : absolute;
 139         bottom : 0px;
 140         margin-bottom : 23px;
 141         margin-left : 42px;
 142 }
 143 #powered-by-pixastic a {
 144         font-size : 12px;
 145         font-family : Helvetica,Arial,sans-serif;
 146         letter-spacing : 0.1em;
 147         color : rgb(100,100,100);
 148         color : rgba(255,255,255,0.2);
 149         text-decoration : none;
 150 }
 151
 152 #powered-by-pixastic a:hover {
 153         color : rgb(200,200,200);
 154         color : rgba(255,255,255,0.7);
 155         text-decoration : underline;
 156 }
 157
 158
 159 /* -----------------------
 160  *   Skeleton structure
 161  * -----------------------
 162  */
 163
 164 /* editor background underlay */
 165 #background {
 166         background-color : #111;
 167         opacity : 0.9;
 168         width : 100%;
 169         height : 100%;
 170         position : absolute;
 171         z-index : -1;
 172 }
 173
 174 #image-area {
 175         position : relative;
 176         background-color : #222;
 177         border : 1px solid #444;
 178         width : 100%;
 179         height : 100%;
 180         -moz-box-sizing:border-box;
 181         overflow : auto;
 182         text-align : center;
 183 }
 184
 185 #image-area-sub {
 186 }
 187
 188 #image-container {
 189 }
 190
 191 #image-overlay-container {
 192         -moz-box-sizing:border-box;
 193         width:100%;
 194         height:100%;
 195         position:absolute;
 196         top:0;
 197         left:0;
 198 }
 199
 200 #image-overlay {
 201 }
 202
 203
 204 /* structure elements */
 205 #edit-ctr-1 {
 206         position : absolute;
 207         top : 0;
 208         left : 0;
 209         width : 100%;
 210         height : 100%;
 211 }
 212
 213 #edit-ctr-2 {
 214         -moz-box-sizing : border-box;
 215         box-sizing : border-box;
 216         padding-left:40px;
 217         padding-right:420px;
 218         padding-top:70px;
 219         padding-bottom : 40px;
 220         height : 100%;
 221         width : 100%;
 222 }
 223
 224
 225 /* main menu bar */
 226 #main-bar {
 227         position : absolute;
 228         width : 100%;
 229         text-align : right;
 230         margin-top : 20px;
 231         margin-right : 30px;
 232 }
 233
 234 /* area on the right with accordion widgets and undo bar */
 235 #controls-bar {
 236         margin-right : -385px;
 237         width : 372px;
 238         float : right;
 239         height : 100%;
 240 }
 241
 242 /* accordion area */
 243 #action-bar {
 244         padding : 10px;
 245         width : 290px;
 246         background-color : #222;
 247         border : 1px solid #444;
 248         -moz-box-sizing : border-box;
 249         box-sizing : border-box;
 250         height : 100%;
 251         overflow-x : hidden;
 252         overflow-y : auto;
 253         float: right;
 254         position : relative;
 255 }
 256
 257 #action-bar-overlay {
 258         position : absolute;
 259         z-index : 1000000;
 260         width : 100%;
 261         height : 100%;
 262         left : 0;
 263         top : 0;
 264         background-color : #444;
 265         opacity : 0.2;
 266         display : none;
 267 }
 268
 269
 270 /* vertical bar with undo image states */
 271 #undo-bar {
 272         -moz-box-sizing : border-box;
 273         box-sizing : border-box;
 274         background-color : #222;
 275         border : 1px solid #444;
 276         width: 70px;
 277         height: 100%;
 278         overflow: hidden;
 279         padding-top : 3px;
 280 }
 281
 282
 283
 284 /* -----------------------
 285  *   Main menu styles
 286  * -----------------------
 287  */
 288
 289 .main-tab {
 290         color : #999;
 291         display : inline-block;
 292         width : 150px;
 293         text-transform : lowercase;
 294         font-size : 22px;
 295         cursor : pointer;
 296         text-align : center;
 297         text-decoration : none;
 298         padding-top : 4px;
 299         padding-bottom : 5px;
 300         outline : 0;
 301 }
 302
 303 .main-tab.hover {
 304         color : white !important;
 305 }
 306
 307 .main-tab.active {
 308         color : white;
 309 }
 310
 311
 312
 313 /* -----------------------
 314  *   Undo list
 315  * -----------------------
 316  */
 317
 318
 319 .undo-canvas-small {
 320         width : 60px;
 321         height : 40px;
 322         cursor : pointer;
 323 }
 324
 325 .undo-link {
 326         width : 60px;
 327         height : 40px;
 328         display : block;
 329         margin : 4px;
 330         cursor : pointer;
 331         opacity : 0.8;
 332 }
 333
 334 .undo-link.hover {
 335         opacity : 1;
 336 }
 337
 338
 339
 340 /* -----------------------
 341  *   Action UI controls
 342  * -----------------------
 343  */
 344
 345
 346 .ui-slider-label,
 347 .ui-checkbox-label,
 348 .ui-textinput-label,
 349 .ui-select-label {
 350         width : 70px;
 351         text-align : right;
 352         margin-right : 5px;
 353         display : inline-block;
 354 }
 355
 356 .ui-textinput-label-right {
 357         margin-left : 5px;
 358 }
 359
 360 .ui-textinput {
 361 }
 362
 363 .ui-numericinput {
 364         width : 35px;
 365 }
 366
 367 .ui-slider {
 368         width : 125px;
 369         display : inline-block;
 370         margin-left : 3px;
 371         background-color : #222;
 372 }
 373
 374 .ui-slider-value {
 375         font-size : 11px;
 376         width : 25px;
 377         display : inline-block;
 378         margin-left : 10px;
 379 }
 380
 381 .ui-action-output {
 382         margin-bottom : 10px;
 383 }
 384
 385 .ui-accordion .ui-accordion-content-active {
 386         font-size : 11px;
 387         overflow : hidden;
 388 }
 389
 390 .ui-slider-horizontal {
 391 }
 392
 393 .ui-slider-container,
 394 .ui-checkbox-container,
 395 .ui-textinput-container,
 396 .ui-select-container {
 397         margin-top : 0px;
 398         margin-bottom : 10px;
 399         white-space : nowrap;
 400 }
 401
 402 .ui-preview-checkbox-container {
 403         display : inline-block;
 404 }
 405
 406 .ui-checkbox {
 407         margin-bottom:3px;
 408         margin-left:5px;
 409         margin-right:5px;
 410         margin-top:0px;
 411         vertical-align:middle;
 412 }
 413
 414 input::-moz-focus-inner { border: 0; }
 415
 416 .action-output-text {
 417         margin-bottom : 5px;
 418 }
 419
 420 button {
 421         margin-right : 5px;
 422 }
 423