File modules/cms/ui/themes/default/style/openrat-workbench.css

Last commit: Wed Oct 30 22:17:22 2024 +0100	Jan Dankert	UI-Refactoring: The navigation is now able to open its own dialog.


     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 /* Usage to this variable is safe to be removed */
    20 .or {
    21   /* Fortschrittsbalken, fuer alle Elemente verfuegbar. */
    22 }
    23 .or-workbench {
    24   width: 100%;
    25   height: 100%;
    26   display: flex;
    27   flex-direction: row;
    28   visibility: hidden;
    29   /*        &-section {
    30             margin: 1.5em;
    31             @media @smartphones {
    32                 margin: 0.5em;
    33             }
    34 
    35             //border: 1px solid;
    36             //.border-radius(5px);
    37 
    38 
    39             .or-view-toolbar {
    40                 display: inline;
    41             }
    42 
    43             // Wenn Sektion geschlossen, keine Toolbar anzeigen.
    44             &.or--is-closed {
    45                 .or-view-toolbar {
    46                     display: none;
    47                 }
    48 
    49             }
    50 
    51             // Diabled Sections are not displayed.
    52             &.or--disabled {
    53                 //display: none;
    54             }
    55 
    56             &.or--is-empty {
    57                 //display: none;
    58             }
    59         }*/
    60   /* */
    61 }
    62 .or-workbench--visible-on-dialog-open {
    63   z-index: 3;
    64 }
    65 .or-workbench-screen {
    66   /* vertical flexbox */
    67   display: flex;
    68   flex-direction: column;
    69   position: relative;
    70   /*
    71           https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
    72           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.
    73            */
    74 }
    75 .or-workbench-screen > * {
    76   overflow-y: auto;
    77   overflow-x: hidden;
    78 }
    79 .or-workbench-main {
    80   flex: 1;
    81   min-width: 0;
    82 }
    83 .or-workbench-title {
    84   height: 3.0rem;
    85   max-height: 3.0rem;
    86   min-height: 3.0rem;
    87   overflow: hidden;
    88   padding: 0.5em;
    89   font-size: 1.2em;
    90 }
    91 .or-workbench-title .toolbar-icon .arrow-down {
    92   display: inline;
    93 }
    94 @media only screen and (max-width: 55rem) {
    95   .or-workbench-title .toolbar-icon span.label,
    96   .or-workbench-title .toolbar-icon .arrow-down {
    97     display: none;
    98   }
    99 }
   100 .or-workbench-content {
   101   flex: 1;
   102   /*
   103             &.is-closed {
   104                 flex: 0.5;
   105                 cursor: not-allowed;
   106                 pointer-events: none;
   107 
   108                 @media @smartphones {
   109                     // do not display the views in mobile mode.
   110                     flex: 0;
   111                 }
   112 
   113                 //overflow: hidden;
   114             }*/
   115 }
   116 .or-workbench--visible-on-small {
   117   display: none;
   118 }
   119 .or-workbench--visible-on-wide {
   120   display: block;
   121 }
   122 .or-workbench--navigation-is-small .or-workbench--visible-on-wide {
   123   display: none;
   124 }
   125 .or-workbench--navigation-is-small .or-workbench--visible-on-small {
   126   display: block;
   127 }
   128 .or-workbench-navigation {
   129   display: flex;
   130   flex-direction: row;
   131   width: 30em;
   132 }
   133 .or-workbench-navigation-content {
   134   flex: 1;
   135 }
   136 @media only screen and (max-width: 55rem) {
   137   .or-workbench-navigation-content {
   138     flex: none;
   139   }
   140 }
   141 .or-workbench-navigation-filler {
   142   flex: 0;
   143   opacity: 0.6;
   144 }
   145 .or-workbench-navigation-container {
   146   width: 100%;
   147   position: relative;
   148   padding: 0.7em;
   149   overflow-x: hidden;
   150 }
   151 .or-workbench-navigation--is-small {
   152   width: 0;
   153 }
   154 .or-workbench-navigation--is-small .or-workbench-navigation-container {
   155   width: 0;
   156   overflow-y: hidden;
   157   /*
   158                     &:hover {
   159                         overflow-y: auto;
   160                         width: 33%;
   161                         opacity: 0.9;
   162 
   163                         .or-navtree {
   164                             opacity: 1;
   165                         }
   166                     }
   167                     */
   168 }
   169 .or-workbench-navigation--is-small .or-workbench-navigation-container .or-navtree {
   170   opacity: 0.2;
   171 }
   172 .or-workbench-navigation--is-small .or-navtree {
   173   opacity: 0;
   174 }
   175 @media only screen and (max-width: 55rem) {
   176   .or-workbench-navigation {
   177     width: 0;
   178   }
   179   .or-workbench-navigation .or-workbench-navigation-container {
   180     /*
   181                     width: 0;
   182                     padding: 0;
   183                     */
   184   }
   185   .or-workbench-navigation--is-open {
   186     position: fixed;
   187     width: 100%;
   188     z-index: 1;
   189     opacity: 1;
   190     height: 100%;
   191   }
   192   .or-workbench-navigation--is-open .or-workbench-navigation-content {
   193     width: 90%;
   194   }
   195   .or-workbench-navigation--is-open .or-workbench-navigation-filler {
   196     flex: 1;
   197   }
   198 }
   199 @media only screen and (min-width: 75rem) {
   200   .or-workbench-navigation {
   201     overflow-y: auto;
   202   }
   203 }
   204 .or-workbench-navigation .or-view {
   205   height: 100%;
   206 }
   207 .or--visible-on-mobile {
   208   display: none;
   209 }
   210 @media only screen and (max-width: 55rem) {
   211   .or--visible-on-mobile {
   212     display: inline;
   213   }
   214 }
   215 @media only screen and (max-width: 55rem) {
   216   .or--visible-on-desktop {
   217     display: none;
   218   }
   219 }
   220 .or-toggle-nav-small {
   221   display: inline;
   222 }
   223 @media only screen and (max-width: 55rem) {
   224   .or-toggle-nav-small {
   225     display: none;
   226   }
   227 }
   228 .or-toggle-nav-open-close {
   229   display: none;
   230 }
   231 @media only screen and (max-width: 55rem) {
   232   .or-toggle-nav-open-close {
   233     display: inline;
   234   }
   235 }
   236 .or-loader {
   237   position: absolute;
   238   top: 30%;
   239   left: 0;
   240   right: 0;
   241   margin-left: auto;
   242   margin-right: auto;
   243   border-width: 0.5em;
   244   border-style: solid;
   245   border-radius: 50%;
   246   visibility: hidden;
   247   z-index: 6;
   248 }
   249 .or-loader--is-active {
   250   visibility: visible;
   251   width: 5em;
   252   height: 5em;
   253   animation: spin 2s linear infinite;
   254 }
   255 @keyframes spin {
   256   0% {
   257     transform: rotate(0deg);
   258   }
   259   100% {
   260     transform: rotate(360deg);
   261   }
   262 }
   263 @media screen and (prefers-reduced-motion: reduce) {
   264   .or-loader--is-active {
   265     display: none;
   266   }
   267 }
   268 .or-workbench.or-user--logged-in .or--on-no-user {
   269   display: none;
   270 }
   271 .or-workbench.or-user--anonymous .or--on-user-logged-in {
   272   display: none;
   273 }
   274 @media only screen and (max-width: 55rem) {
   275   html {
   276     font-size: 1.1em;
   277   }
   278 }
   279 



Download modules/cms/ui/themes/default/style/openrat-workbench.css


History
Wed, 30 Oct 2024 22:17:22 +0100	Jan Dankert	UI-Refactoring: The navigation is now able to open its own dialog.
Sun, 13 Oct 2024 13:17:32 +0200	Jan Dankert	New Minifier for CSS and JS: Leave JS Linebreaks as they are (for better debugging); Exploded CSS files (instead of a combined one), LESS is necessary but should be avoided in the future.
Fri, 21 Aug 2020 00:22:13 +0200	Jan Dankert	Refactoring: Collect all frontend compiler scripts in update.php. Compiling of CSS and JS was extracted to a new TemplateCompiler. JS and CSS is now collected in a new openrat.[min.][js|css].
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.