openrat-workbench.css (11020B)
1 /* 2 OpenRat Content Management System 3 Copyright (C) 2002-2010 Jan Dankert 4 5 This program is free software; you can redistribute it and/or 6 modify it under the terms of the GNU General Public License 7 as published by the Free Software Foundation; either version 2 8 of the License, or (at your option) any later version. 9 10 This program is distributed in the hope that it will be useful, 11 but WITHOUT ANY WARRANTY; without even the implied warranty of 12 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 GNU General Public License for more details. 14 15 You should have received a copy of the GNU General Public License 16 along with this program; if not, write to the Free Software 17 Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. 18 */ 19 /* 20 Basis-Style for Openrat. 21 */ 22 div#dialog { 23 /* Modale Dialoge */ 24 } 25 div#dialog > .view { 26 overflow: auto; 27 /*width:60%;*/ 28 position: absolute; 29 top: 5%; 30 left: 10%; 31 width: 80%; 32 height: 80%; 33 z-index: 110; 34 border: 1px solid !important; 35 } 36 @media only screen and (max-width: 55rem) { 37 div#dialog > .view { 38 top: 2.5%; 39 left: 2.5%; 40 width: 95%; 41 height: 95%; 42 } 43 } 44 div#dialog.is-closed { 45 display: none; 46 width: 0; 47 } 48 div#dialog .filler { 49 position: absolute; 50 z-index: 100; 51 top: 0; 52 left: 0; 53 height: 100%; 54 width: 100%; 55 opacity: 0.5; 56 } 57 div#dialog .filler span.icon { 58 opacity: 1; 59 font-size: 3em; 60 font-weight: bold; 61 text-align: center; 62 width: 40px; 63 height: 40px; 64 position: absolute; 65 right: 20px; 66 top: 20px; 67 } 68 .arrow { 69 width: 0; 70 height: 0; 71 margin: 6px; 72 padding: 0; 73 font-size: 0; 74 } 75 .arrow.arrow-down { 76 border-right: 6px solid transparent; 77 border-top: 6px solid; 78 border-left: 6px solid transparent; 79 border-bottom: 4px solid transparent; 80 margin-top: 10px; 81 } 82 .arrow.arrow-right { 83 border-top: 6px solid transparent; 84 border-left: 6px solid; 85 border-bottom: 6px solid transparent; 86 border-right: 4px solid transparent; 87 margin-left: 10px; 88 } 89 #editor .dirty { 90 font-weight: bold; 91 } 92 .visible-for-nojs { 93 display: none; 94 } 95 html.nojs .noscript { 96 display: block; 97 } 98 .toggle-open-close { 99 display: flex; 100 flex-direction: column; 101 /* Geschlossen */ 102 /* Offen */ 103 } 104 .toggle-open-close .on-click-open-close { 105 cursor: pointer; 106 font-weight: normal; 107 } 108 .toggle-open-close > .closable { 109 transition: opacity 0.3s ease-out; 110 flex: 1; 111 display: block; 112 } 113 .toggle-open-close.closed > .on-click-open-close > .on-closed { 114 display: inline; 115 } 116 .toggle-open-close.closed > .on-click-open-close > .on-open { 117 display: none; 118 } 119 .toggle-open-close.closed > .closable { 120 opacity: 0; 121 max-height: 0; 122 overflow: hidden; 123 } 124 .toggle-open-close.open > .closable { 125 height: auto; 126 } 127 .toggle-open-close.open > .on-click-open-close > .on-closed { 128 display: none; 129 } 130 .toggle-open-close.open > .on-click-open-close > .on-open { 131 display: inline; 132 } 133 html, 134 body { 135 width: 100%; 136 height: 100%; 137 } 138 div#workbench { 139 width: 100%; 140 height: 100%; 141 display: flex; 142 flex-direction: column; 143 /* 144 145 div.panel.modal { 146 position: relative; 147 z-index: 101; 148 border: 1px solid !important; 149 } 150 */ 151 /* vertikale Flex-Box zwischen Header und Hauptbereich */ 152 } 153 div#workbench > header { 154 height: 3.0rem; 155 } 156 div#workbench > header .toolbar-icon .arrow-down { 157 display: inline; 158 } 159 @media only screen and (max-width: 55rem) { 160 div#workbench > header .toolbar-icon span.label, 161 div#workbench > header .toolbar-icon .arrow-down { 162 display: none; 163 } 164 } 165 div#workbench > .or-main-area { 166 flex: 1; 167 /* Horizontale Flexbox */ 168 /* 169 https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox 170 Whenever you've got an element with overflow: [hidden|scroll|auto] inside of a flex item, you need to give its ancestor flex item min-width:0 (in a horizontal flex container) or min-height:0 (in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child's min-content size. 171 */ 172 min-height: 0; 173 padding-top: 0.5em; 174 } 175 div#workbench > .or-main-area > * { 176 min-width: 0; 177 min-height: 0; 178 overflow-y: auto; 179 overflow-x: hidden; 180 height: 100%; 181 } 182 div#workbench > .or-main-area > nav { 183 width: 33%; 184 transition: width 0.15s ease-in-out; 185 position: fixed; 186 height: calc(100% - 3.0rem - 0.5em); 187 } 188 @media only screen and (max-width: 55rem) { 189 div#workbench > .or-main-area > nav { 190 width: 0; 191 } 192 } 193 div#workbench > .or-main-area > nav.small { 194 width: 5%; 195 opacity: 0.5; 196 overflow-y: hidden; 197 } 198 div#workbench > .or-main-area > nav.small:hover { 199 width: 33%; 200 overflow-y: auto; 201 opacity: 1; 202 background-color: inherit; 203 border-right: 1px solid inherit; 204 } 205 div#workbench > .or-main-area > nav.small ~ .or-workplace { 206 margin-left: 5%; 207 } 208 div#workbench > .or-main-area > nav.open { 209 overflow-y: auto; 210 } 211 @media only screen and (max-width: 55rem) { 212 div#workbench > .or-main-area > nav.open { 213 width: 95%; 214 border-right: 1px solid; 215 opacity: 0.95; 216 } 217 } 218 @media only screen and (min-width: 75rem) { 219 div#workbench > .or-main-area > nav { 220 width: 33%; 221 overflow-y: auto; 222 } 223 } 224 div#workbench > .or-main-area > nav div.view { 225 height: 100%; 226 } 227 div#workbench > .or-main-area header .or-view-icon, 228 div#workbench > .or-main-area header .or-view-headline { 229 margin: 0.3em; 230 display: inline; 231 font-size: 1.2em; 232 line-height: 1.5em; 233 } 234 div#workbench > .or-main-area > .or-workplace { 235 margin-left: 33%; 236 transition: margin-left 0.15s ease-in-out; 237 } 238 @media only screen and (max-width: 55rem) { 239 div#workbench > .or-main-area > .or-workplace { 240 margin-left: 0; 241 } 242 } 243 div#workbench > .or-main-area > .or-workplace > #editor { 244 transition: opacity 0.5s ease; 245 display: flex; 246 flex-direction: column; 247 } 248 div#workbench > .or-main-area > .or-workplace > #editor.is-closed { 249 flex: 0.5; 250 cursor: not-allowed; 251 pointer-events: none; 252 } 253 @media only screen and (max-width: 55rem) { 254 div#workbench > .or-main-area > .or-workplace > #editor.is-closed { 255 flex: 0; 256 } 257 } 258 div#workbench > .or-main-area > .or-workplace > #editor > section { 259 margin: 1.5em; 260 border: 1px solid; 261 border-radius: 5px; 262 -moz-border-radius: 5px; 263 -webkit-border-radius: 5px; 264 -khtml-border-radius: 5px; 265 } 266 @media only screen and (max-width: 55rem) { 267 div#workbench > .or-main-area > .or-workplace > #editor > section { 268 margin: 0.5em; 269 } 270 } 271 div#workbench > .or-main-area > .or-workplace > #editor > section .view-toolbar { 272 display: inline; 273 } 274 div#workbench > .or-main-area > .or-workplace > #editor > section.closed .view-toolbar { 275 display: none; 276 } 277 #title .toggle-nav-small { 278 display: inline; 279 } 280 @media only screen and (max-width: 55rem) { 281 #title .toggle-nav-small { 282 display: none; 283 } 284 } 285 #title .toggle-nav-open-close { 286 display: none; 287 } 288 @media only screen and (max-width: 55rem) { 289 #title .toggle-nav-open-close { 290 display: inline; 291 } 292 } 293 @media only screen and (max-width: 55rem) { 294 #title .toolbar-icon.search input { 295 width: 3em; 296 } 297 } 298 /* Fortschrittsbalken, fuer alle Elemente verfuegbar. */ 299 .loader { 300 background: url(../images/loader.gif) no-repeat; 301 background-position: center, top; 302 height: 30px; 303 opacity: 0.5; 304 cursor: wait; 305 pointer-events: none; 306 } 307 @media only screen and (max-width: 55rem) { 308 html { 309 font-size: 1em; 310 } 311 } 312 /* Navigation over the filler */ 313 .toggle-nav-small, 314 .or-navigation { 315 z-index: 102; 316 } 317 .toggle-nav-small:hover, 318 .or-navigation:hover { 319 z-index: 112; 320 } 321 .or-breadcrumb { 322 margin-bottom: 0.1em; 323 margin-left: 1.5em; 324 line-height: 18px; 325 font-weight: normal; 326 white-space: nowrap; 327 } 328 .or-breadcrumb li { 329 display: inline; 330 margin-right: 0.3em; 331 } 332 .or-breadcrumb .or-breadcrumb-item .image-icon { 333 margin-right: 0.2em; 334 } 335 /*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22openrat-workbench.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3BAAuCA%2CGAAG%3B%3B%3BAAAH%2CGAAG%2COAEG%3BCACE%3B%3BCAGA%3BCACA%3BCACA%3BCACA%3BCACA%3BCAUA%3BCAEA%2C4BAAA%3B%3BAAFA%3BCAAA%2CGApBL%2COAEG%3BEAWM%3BEACA%3BEACA%3BEACA%3B%3B%3BAASR%2CGAzBD%2COAyBE%3BCACG%3BCACA%3B%3BAA3BR%2CGAAG%2COA%2BBC%3BCACI%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3B%3BAAtCR%2CGAAG%2COA%2BBC%2CQASI%2CKAAI%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCACA%3BCAEA%3BCACA%3BCACA%3B%3BAAMZ%3BCACI%3BCACA%3BCACA%3BCACA%3BCACA%3B%3BAAEA%2CMAAC%3BCACG%2CmCAAA%3BCACA%2CqBAAA%3BCACA%2CkCAAA%3BCACA%2CoCAAA%3BCACA%3B%3BAAEJ%2CMAAC%3BCACG%2CiCAAA%3BCACA%2CsBAAA%3BCACA%2CoCAAA%3BCACA%2CmCAAA%3BCACA%3B%3BAAIR%2COAAQ%3BCACJ%3B%3BAAGJ%3BCACI%3B%3BAAGJ%2CIAAI%2CKAAM%3BCACN%3B%3BAAGJ%3BCAEI%3BCACA%3B%3B%3B%3BAAHJ%2CkBAKI%3BCACI%3BCACA%3B%3BAAPR%2CkBAWM%3BCAEE%2CiCAAA%3BCAEA%3BCACA%3B%3BAAKJ%2CkBAAC%2COACK%2CuBAAuB%3BCACrB%3B%3BAAFR%2CkBAAC%2COAIK%2CuBAAuB%3BCACrB%3B%3BAALR%2CkBAAC%2COAOK%3BCAEE%3BCACA%3BCACA%3B%3BAAMR%2CkBAAC%2CKACK%3BCACE%3B%3BAAFR%2CkBAAC%2CKAIK%2CuBAAuB%3BCACrB%3B%3BAALR%2CkBAAC%2CKAOK%2CuBAAuB%3BCACrB%3B%3BAASZ%3BAAAM%3BCAAO%3BCAAY%3B%3BAAEzB%2CGAAG%3BCAEC%3BCACA%3BCACA%3BCACA%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3BAALJ%2CGAAG%2CUAqBG%3BCACE%3B%3BAAtBR%2CGAAG%2CUAqBG%2CSAGE%2CcAEI%3BCACI%3B%3BAAOJ%3BCAAA%2CGAlCT%2CUAqBG%2CSAGE%2CcAMI%2CKAAI%3BCAIJ%2CGAlCT%2CUAqBG%2CSAGE%2CcAMgB%3BEAEJ%3B%3B%3BAAhCpB%2CGAAG%2CUAsCG%3BCACE%3B%3B%3B%3B%3B%3BCAWA%3BCAEA%3B%3BAApDR%2CGAAG%2CUAsCG%2CgBAgBI%3BCACE%3BCACA%3BCACA%3BCACA%3BCAEA%3B%3BAA5DZ%2CGAAG%2CUAsCG%2CgBAyBI%3BCACE%3BCACA%2CmCAAA%3BCACA%3BCACA%2CmCAAA%3B%3BAAOA%3BCAAA%2CGA1ET%2CUAsCG%2CgBAyBI%3BEAOM%3B%3B%3BAAIJ%2CGA1ET%2CUAsCG%2CgBAyBI%2CMAWG%3BCACG%3BCACA%3BCACA%3B%3BAAEA%2CGA%5C%2FEb%2CUAsCG%2CgBAyBI%2CMAWG%2CMAKI%3BCACG%3BCACA%3BCACA%3BCACA%3BCACA%2C%2BBAAA%3B%3BAAGJ%2CGAvFb%2CUAsCG%2CgBAyBI%2CMAWG%2CMAaO%3BCACA%3B%3BAAIR%2CGA5FT%2CUAsCG%2CgBAyBI%2CMA6BG%3BCAEG%3B%3BAAMJ%3BCAAA%2CGApGT%2CUAsCG%2CgBAyBI%2CMA6BG%3BEAIO%3BEACA%2CuBAAA%3BEACA%3B%3B%3BAAUR%3BCAAA%2CGA5GT%2CUAsCG%2CgBAyBI%3BEAwCM%3BEACA%3B%3B%3BAAxGhB%2CGAAG%2CUAsCG%2CgBAyBI%2CMA6CE%2CIAAG%3BCACC%3B%3BAA7GhB%2CGAAG%2CUAsCG%2CgBA2EE%2COAEI%3BAAnHZ%2CGAAG%2CUAsCG%2CgBA2EE%2COAEmB%3BCACX%3BCACA%3BCACA%3BCACA%3B%3BAAvHhB%2CGAAG%2CUAsCG%2CgBAsFI%3BCAEE%3BCACA%2CyCAAA%3B%3BAAMA%3BCAAA%2CGArIT%2CUAsCG%2CgBAsFI%3BEAMM%3B%3B%3BAAlIhB%2CGAAG%2CUAsCG%2CgBAsFI%2CgBASI%3BCAEE%2C6BAAA%3BCACA%3BCACA%3B%3BAAEA%2CGA3Ib%2CUAsCG%2CgBAsFI%2CgBASI%2CUAMG%3BCACG%3BCACA%3BCACA%3B%3BAAOA%3BCAAA%2CGArJjB%2CUAsCG%2CgBAsFI%2CgBASI%2CUAMG%3BEAOO%3B%3B%3BAAlJxB%2CGAAG%2CUAsCG%2CgBAsFI%2CgBASI%2CUAmBI%3BCACE%3BCAKA%2CiBAAA%3BCA5ThB%2CkBAAA%3BCACA%2CuBAAA%3BCACA%2C0BAAA%3BCACA%2CyBAAA%3B%3BAAyTgB%3BCAAA%2CGA9JjB%2CUAsCG%2CgBAsFI%2CgBASI%2CUAmBI%3BEAGM%3B%3B%3BAA3JxB%2CGAAG%2CUAsCG%2CgBAsFI%2CgBASI%2CUAmBI%2CUAWE%3BCACI%3B%3BAAQJ%2CGA5KjB%2CUAsCG%2CgBAsFI%2CgBASI%2CUAmBI%2CUAoBG%2COACG%3BCACI%3B%3BAAqB5B%2CMAEI%3BCACI%3B%3BAAIJ%3BCAAA%2CMALA%3BEAGQ%3B%3B%3BAALZ%2CMASI%3BCACI%3B%3BAAIJ%3BCAAA%2CMALA%3BEAGQ%3B%3B%3BAAcJ%3BCAAA%2CMAVJ%2CcAAa%2COAMT%3BEAEQ%3B%3B%3B%3BAAQhB%3BCAEI%2C%2BCAAA%3BCACA%2CgCAAA%3BCACA%3BCACA%3BCACA%3BCACA%3B%3BAAYJ%3BCANI%3BEACI%3B%3B%3B%3BAAMR%3BAACA%3BCAEI%3B%3BAAEA%2CiBAAC%3BAAAD%2CcAAC%3BCACG%3B%3BAAIR%3BCAEI%3BCACA%3BCACA%3BCACA%3BCACA%3B%3BAANJ%2CcAQI%3BCACI%3BCACA%3B%3BAAVR%2CcAaI%2CoBAAoB%3BCAChB%22%7D */