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

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 
    20 
    21 /* Usage to this variable is safe to be removed */
    22 @color-overridden-by-theme: black;
    23 
    24 .border-radius (@radius) {
    25     border-radius: @radius;
    26     -moz-border-radius: @radius;
    27     -webkit-border-radius: @radius;
    28     -khtml-border-radius: @radius;
    29 }
    30 
    31 
    32 @smartphones: ~"only screen and (max-width: 55rem)";
    33 @wide: ~"only screen and (min-width: 75rem)";
    34 
    35 
    36 
    37 .or {
    38 
    39     &-workbench {
    40 
    41         width: 100%;
    42         height: 100%;
    43         display: flex;
    44         flex-direction: row;
    45         visibility: hidden;
    46 
    47         &--visible-on-dialog-open {
    48           // make the menu buttons visible if a dialog is open.
    49           z-index: 3;
    50         }
    51 
    52 
    53         &-screen {
    54           /* vertical flexbox */
    55           display: flex;
    56           flex-direction: column;
    57           position: relative;
    58 
    59           /*
    60           https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox
    61           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.
    62            */
    63           //min-width: 0;
    64           //min-height: 0;
    65 
    66           //padding-top: 0.5em;
    67 
    68           > * {
    69             //min-width: 0;
    70             //min-height: 0;
    71             overflow-y: auto;
    72             overflow-x: hidden;
    73 
    74             //width: 100%;
    75           }
    76 
    77 
    78         }
    79 
    80         &-main {
    81           flex: 1;
    82           min-width: 0; // min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto. This can make block elements take up much more space than desired, resulting in overflow.
    83         }
    84 
    85         &-title {
    86             height: 3.0rem;
    87             max-height: 3.0rem;
    88             min-height: 3.0rem;
    89             overflow: hidden;
    90             padding: 0.5em;
    91             //opacity: 0.9;
    92 
    93             font-size: 1.2em;
    94 
    95             .toolbar-icon {
    96 
    97                 .arrow-down {
    98                     display: inline;
    99                 }
   100 
   101                 span.label, .arrow-down {
   102                     @media @smartphones {
   103                         display: none;
   104                     }
   105                 }
   106             }
   107         }
   108 
   109 
   110 
   111         &-content {
   112             flex: 1;
   113             //margin-left: 33%;
   114             //transition: margin-left 0.15s ease-in-out;
   115 
   116             @media @smartphones {
   117                 //margin-left: 0;
   118             }
   119 
   120             //transition: opacity 0.5s ease;
   121             //display: flex;
   122             //flex-direction: column;
   123 
   124             /*
   125             &.is-closed {
   126                 flex: 0.5;
   127                 cursor: not-allowed;
   128                 pointer-events: none;
   129 
   130                 @media @smartphones {
   131                     // do not display the views in mobile mode.
   132                     flex: 0;
   133                 }
   134 
   135                 //overflow: hidden;
   136             }*/
   137 
   138 
   139         }
   140 
   141 /*        &-section {
   142             margin: 1.5em;
   143             @media @smartphones {
   144                 margin: 0.5em;
   145             }
   146 
   147             //border: 1px solid;
   148             //.border-radius(5px);
   149 
   150 
   151             .or-view-toolbar {
   152                 display: inline;
   153             }
   154 
   155             // Wenn Sektion geschlossen, keine Toolbar anzeigen.
   156             &.or--is-closed {
   157                 .or-view-toolbar {
   158                     display: none;
   159                 }
   160 
   161             }
   162 
   163             // Diabled Sections are not displayed.
   164             &.or--disabled {
   165                 //display: none;
   166             }
   167 
   168             &.or--is-empty {
   169                 //display: none;
   170             }
   171         }*/
   172 
   173 
   174         /* */
   175         &--visible-on-small {
   176             display: none;
   177         }
   178 
   179         &--visible-on-wide {
   180             display: block;
   181         }
   182 
   183         &--navigation-is-small {
   184             .or-workbench--visible-on-wide {
   185                 display: none;
   186             }
   187 
   188             .or-workbench--visible-on-small {
   189                 display: block;
   190             }
   191         }
   192 
   193         &-navigation {
   194 
   195             display: flex;
   196             flex-direction: row;
   197             width: 30em;
   198 
   199             &-content {
   200               //width: 100%;
   201               flex: 1;
   202               @media @smartphones {
   203                 flex: none;
   204               }
   205             }
   206             &-filler {
   207               flex: 0;
   208               opacity: 0.6;
   209             }
   210 
   211             &-container {
   212 
   213                 width: 100%;
   214                 position: relative;
   215 
   216                 //position: fixed;
   217                 //z-index: 1;
   218                 //opacity: 0.9;
   219                 //transition: width 0.15s ease-in-out;
   220                 //height: 100%;
   221                 padding:0.7em;
   222                 overflow-x:hidden; // no horizontal scrolling
   223 
   224             }
   225 
   226 
   227           .or-navtree {
   228             //transition: opacity 0.1s ease-in-out;
   229           }
   230 
   231           &--is-small {
   232                 width: 0;
   233 
   234                 //& ~ .or-workbench-workplace {
   235                 //    margin-left: 0;
   236                 //}
   237 
   238                 .or-workbench-navigation-container {
   239                     //opacity: 0.2;
   240                     width: 0;
   241                     overflow-y: hidden;
   242 
   243                     .or-navtree {
   244                       opacity: 0.2;
   245                     }
   246 
   247                     /*
   248                     &:hover {
   249                         overflow-y: auto;
   250                         width: 33%;
   251                         opacity: 0.9;
   252 
   253                         .or-navtree {
   254                             opacity: 1;
   255                         }
   256                     }
   257                     */
   258                 }
   259 
   260                 .or-navtree {
   261                     opacity: 0;
   262                 }
   263             }
   264 
   265             @media @smartphones {
   266 
   267                 width: 0;
   268 
   269                 .or-workbench-navigation-container {
   270 
   271                     /*
   272                     width: 0;
   273                     padding: 0;
   274                     */
   275                 }
   276 
   277                 &--is-open {
   278 
   279                   .or-workbench-navigation-content {
   280                     width:90%;
   281                   }
   282                   .or-workbench-navigation-filler {
   283                     flex: 1;
   284                   }
   285 
   286                   position: fixed;
   287                   width: 100%;
   288                   z-index: 1;
   289                   opacity: 1;
   290                   height:100%;
   291                 }
   292             }
   293 
   294 
   295             @media @wide {
   296                 overflow-y: auto;
   297             }
   298 
   299 
   300             .or-view {
   301                 height: 100%;
   302             }
   303 
   304         }
   305     }
   306 
   307 
   308     &--visible-on-mobile {
   309         display: none;
   310         @media @smartphones {
   311             display: inline;
   312         }
   313 
   314     }
   315     &--visible-on-desktop {
   316         //display: inline;
   317         @media @smartphones {
   318             display: none;
   319         }
   320     }
   321 
   322     &-toggle-nav-small {
   323         display: inline;
   324         @media @smartphones {
   325             display: none;
   326         }
   327     }
   328 
   329     &-toggle-nav-open-close {
   330         display: none;
   331         @media @smartphones {
   332             display: inline;
   333         }
   334     }
   335 
   336     &-toolbar-icon.or-search {
   337         //width: 8em;
   338         @media @smartphones {
   339             //width: 8em;
   340         }
   341 
   342         input {
   343             @media @smartphones {
   344                 //width: 3em;
   345             }
   346         }
   347     }
   348 
   349 
   350     /* Fortschrittsbalken, fuer alle Elemente verfuegbar. */
   351     &-loader
   352     {
   353       position: absolute;
   354       top: 30%;
   355       left: 0;
   356       right: 0;
   357       margin-left: auto;
   358       margin-right: auto;
   359 
   360       border-width: 0.5em;
   361       border-style: solid;
   362       border-radius: 50%;
   363       visibility: hidden;
   364       z-index: 6;
   365 
   366       &--is-active {
   367 
   368         visibility: visible;
   369         width: 5em;
   370         height: 5em;
   371         animation: spin 2s linear infinite;
   372 
   373         @keyframes spin {
   374             0% { transform: rotate(  0deg); }
   375           100% { transform: rotate(360deg); }
   376         }
   377 
   378         // Reduced Motion
   379         @media screen and (prefers-reduced-motion: reduce) {
   380           display: none;
   381         }
   382       }
   383     }
   384 
   385 
   386 
   387 }
   388 
   389 
   390 .or-workbench {
   391   &.or-user--logged-in {
   392     // Not displaying public things for logged in users
   393     .or--on-no-user {
   394       display: none;
   395     }
   396   }
   397   &.or-user--anonymous {
   398     // Not displaying things for anonymous users.
   399     .or--on-user-logged-in {
   400       display: none;
   401     }
   402   }
   403 }
   404 
   405 
   406 @media @smartphones {
   407     html {
   408         font-size: 1.1em;
   409     }
   410 }
   411 



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


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 Feb 2022 21:52:29 +0100	dankert	Fix: Very long text should not crash the UI, so the overflow is now hidden.
Sat, 18 Dec 2021 03:44:18 +0100	dankert	New: Display Workbench after Theme-CSS is loaded.
Tue, 30 Nov 2021 00:25:32 +0100	Jan Dankert	Cleanup the notices.
Mon, 29 Nov 2021 23:54:33 +0100	Jan Dankert	New: Spinner image with pure css. So we can colorize it now.
Mon, 29 Nov 2021 01:22:40 +0100	Jan Dankert	New: Themes may contain multiple color schemes (for now only "dark" and "light"), modern browsers are selecting the right scheme.
Sat, 13 Feb 2021 00:11:23 +0100	Jan Dankert	New: Transition-Duration is controllable via style configuration. So there is no need for a dedicated FX on/off-switch in the profile.
Sat, 13 Feb 2021 00:01:53 +0100	Jan Dankert	Fix: Navigation is available, while dialog is open; Fix: Shrink Action title text if necessary.
Fri, 12 Feb 2021 20:08:11 +0100	Jan Dankert	Fix: Show search result on top of the navigation.
Fri, 12 Feb 2021 00:43:08 +0100	Jan Dankert	New: Style colors; Fix: Mobile navigation, global search.
Wed, 10 Feb 2021 23:56:07 +0100	Jan Dankert	Fix: Colourize images; Fix: Mobile navigation.
Wed, 10 Feb 2021 23:05:46 +0100	Jan Dankert	Moving the search form upon the navigation, because the search is more like a navigation.
Wed, 10 Feb 2021 00:00:21 +0100	Jan Dankert	Using only fullscreen views; Navigate to parent instead of complete breadcrumb.
Wed, 11 Nov 2020 13:30:22 +0100	Jan Dankert	 A little transparent background for the menu.
Wed, 11 Nov 2020 13:11:14 +0100	Jan Dankert	Fixed navigation layout issues.
Wed, 11 Nov 2020 00:31:13 +0100	Jan Dankert	Fixing layout problems in the mobile navigation.
Tue, 10 Nov 2020 01:16:21 +0100	Jan Dankert	New: Background image
Mon, 9 Nov 2020 22:29:34 +0100	Jan Dankert	UI-Refactoring: The navigation is now on the left side with full height.
Thu, 5 Nov 2020 22:56:49 +0100	Jan Dankert	box-shadow should only be set in the theme css (because a color is needed and a color is theming)
Thu, 5 Nov 2020 22:51:14 +0100	Jan Dankert	Cleaned up the LESS files, more use of the BEM schema.
Sat, 24 Oct 2020 23:51:11 +0200	Jan Dankert	Cleanup LESS files, introduce BEM.
Sun, 18 Oct 2020 01:30:49 +0200	Jan Dankert	New component "fieldset" for better form layout.
Sat, 10 Oct 2020 01:29:41 +0200	Jan Dankert	Refactoring: Only using CSS classes with the 'or-'-prefix.
Sun, 4 Oct 2020 23:53:25 +0200	Jan Dankert	New: The tree is now hidable with a dedicated button. No more hover effect in the navigation.
Sun, 4 Oct 2020 16:33:53 +0200	Jan Dankert	Refactoring: Using the icon font for displaying arrows.
Sun, 27 Sep 2020 04:09:05 +0200	Jan Dankert	Refactoring: The tree functions should use normal templates as the other actions. Beware of the JS hell.
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.