src/redakcja/static/css/master.css

   1 html {
   2     width: 100%;
   3     height:  100%;
   4 }
   5
   6 body {
   7     height: 100%;
   8     display: flex;
   9     flex-direction: column;
  10 }
  11
  12 #editor {
  13     flex: 1;
  14 }
  15
  16 #drag-layer {
  17     position:absolute;
  18     top:0;
  19     bottom:0;
  20     left:0;
  21     right:0;
  22     z-index:1000;
  23     display: none;
  24     cursor: col-resize;
  25 }
  26
  27 .editor {
  28     height: 100%;
  29 }
  30
  31 .image-object {
  32     padding-left: 1em;
  33     font: 12px Sans, Helvetica, Verdana, sans-serif;
  34 }
  35 .image-object:hover {
  36     cursor: pointer;
  37 }
  38 #objects-list .delete {
  39     padding-left: 3px;
  40     font: 10px Sans, Helvetica, Verdana, sans-serif;
  41 }
  42 #objects-list .delete:hover {
  43     cursor: pointer;
  44 }
  45
  46 #objects-list .active {
  47     color: #800;
  48 }
  49
  50
  51 #editor.readonly .editor {
  52         right: 0px;
  53 }
  54
  55 #html-view {
  56     overflow: auto;
  57 }
  58
  59 #header.saving {
  60         background-color: #E1C1C1;
  61 }
  62 #header.saving #save-button {
  63     display: none;
  64 }
  65 #save-attempt-info {
  66     color: #801000;
  67     display: none;
  68 }
  69 .saving #save-attempt-info {
  70     display: inline;
  71     font-weight: normal;
  72 }
  73
  74
  75 #header.out-of-date {
  76     background-color: #E1C1C1;
  77 }
  78 #header.out-of-date #save-button {
  79     display: none;
  80 }
  81 #out-of-date-info {
  82     color: #801000;
  83     display: none;
  84 }
  85 .out-of-date #out-of-date-info {
  86     display: inline;
  87 }
  88
  89
  90 p { margin: 0;}
  91
  92 #loading-overlay {
  93     background-color: #FFF;
  94     position: absolute;
  95     z-index: 1000;
  96     padding: 0;
  97     top: 0;
  98     left: 0;
  99     width: 100%;
 100     height: 100%;
 101 }
 102
 103 #loading-message {
 104     position: absolute;
 105     height: 20px;
 106     width: 120px;
 107     left: 50%;
 108     margin-left: -60px;
 109     top: 50%;
 110     margin-top: -10px;
 111 }
 112
 113 #loading-message img {
 114     float: left;
 115     margin-right: 10px;
 116     margin-top: -6px;
 117 }
 118
 119 /*
 120  * CodeMirror
 121  */
 122
 123 #source-editor {
 124     display: flex;
 125     flex-direction: column;
 126 }
 127 #source-editor .CodeMirror {
 128     flex: 1;
 129 }
 130
 131 .CodeMirror-line-numbers {
 132         padding: 0px;
 133         padding-top: 5px;
 134         text-align: right;
 135         overflow: hidden;
 136         width: 40px;
 137         border-right: 1px solid black;
 138         background-color: #e6e6fa;
 139 }
 140
 141 .CodeMirror-line-numbers div {
 142         display: block;
 143         font-family:"Lucida Console", monospace;
 144     font-size: 13px;
 145     line-height: 18px;
 146         padding-right: 5px;
 147 }
 148
 149 img.tabclose {
 150         padding-left: 8px;
 151         width: 16px;
 152         height: 16px;
 153         vertical-align: middle;
 154         vertical-align: text-bottom;
 155 }
 156
 157 /*
 158  * HTML Editor view
 159  */
 160
 161 #simple-editor {
 162     display: flex;
 163     flex-direction: column;
 164     position: relative;
 165 }
 166
 167 #simple-editor #bubbles {
 168     position: absolute;
 169     bottom: 10px;
 170     right: 20px;
 171 }
 172 #simple-editor #bubbles .badge {
 173     display: block;
 174     margin-top: 5px;
 175 }
 176
 177 .htmlview {
 178     flex: 1;
 179 }
 180
 181 .htmlview .active[x-editable] {
 182     background-color: #FAFAFA;
 183     border: 1px solid #DDD;
 184 /*    -webkit-transition: all 1s linear;*/
 185 }
 186
 187 .blockOverlay {
 188         background-color: black;
 189         opacity: 0.4;
 190 }
 191
 192
 193
 194
 195
 196 .saveNotify {
 197     position:absolute;
 198     bottom:22px;
 199     right:7px;
 200     z-index:800;
 201     background-color: #FFFF69;
 202     padding:10px;
 203     border: 1px solid black;
 204     border-radius: 5px;
 205     -moz-border-radius: 15px;
 206 }
 207
 208 .notifyTip {
 209     font-size:12px; float:right;
 210 }
 211
 212 .saveNotify span {
 213     font-weight: bold;
 214 }
 215
 216
 217 #objects-editor, #motifs-editor {
 218     display: flex;
 219     flex-direction: column;
 220 }
 221
 222 .scrolled {
 223     flex: 1;
 224     overflow: auto;
 225 }
 226
 227 #source-editor .CodeMirror-wrap pre.CodeMirror-line,
 228 #source-editor .CodeMirror-wrap pre.CodeMirror-line-like {
 229         word-wrap: anywhere;
 230 }
 231
 232
 233 #people img {
 234     margin-left: -10px;
 235     border-radius: 100%;
 236     opacity: .5;
 237 }
 238 #people img.active {
 239     opacity: 1;
 240 }