src/main/webapp/lightpit.css

Thu, 08 Oct 2020 20:16:47 +0200

author
Mike Becker <universe@uap-core.de>
date
Thu, 08 Oct 2020 20:16:47 +0200
changeset 109
2e0669e814ff
parent 103
3d0d030dffa7
child 124
ed2e7aef2a3e
permissions
-rw-r--r--

adds versions overview

includes major refactoring of side menu generation

     1 /*
     2  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER.
     3  * 
     4  * Copyright 2018 Mike Becker. All rights reserved.
     5  * 
     6  * Redistribution and use in source and binary forms, with or without
     7  * modification, are permitted provided that the following conditions are met:
     8  *
     9  *   1. Redistributions of source code must retain the above copyright
    10  *      notice, this list of conditions and the following disclaimer.
    11  *
    12  *   2. Redistributions in binary form must reproduce the above copyright
    13  *      notice, this list of conditions and the following disclaimer in the
    14  *      documentation and/or other materials provided with the distribution.
    15  *
    16  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    17  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    18  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    19  * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
    20  * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    21  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    22  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    23  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    24  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    25  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    26  * POSSIBILITY OF SUCH DAMAGE.
    27  * 
    28  */
    30 html {
    31     font-family: sans-serif;
    32     font-size: 11pt;
    33     background: white;
    34     color: #1c204e;
    35     margin: 0;
    36     padding: 0;
    37 }
    39 body {
    40     height: 100%;
    41     margin: 0;
    42     padding: 0;
    43 }
    45 a {
    46     color: #3060f8;
    47     text-decoration: none;
    48 }
    50 #mainMenu {
    51     position: fixed;
    52     z-index: 2;
    53     width: 100%;
    54     display: flex;
    55     flex-flow: row wrap;
    56     border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25));
    57     border-image-slice: 1;
    58     border-bottom-style: solid;
    59     border-bottom-width: 1pt;
    60 }
    62 #sideMenu {
    63     display: flex;
    64     z-index: 1;
    65     flex-flow: column;
    66     position: fixed;
    67     height: 100%;
    68     width: 30ch;
    69     padding-top: 2.25rem;
    70     color: #3060f8;
    71     border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
    72     border-image-slice: 1;
    73     border-right-style: solid;
    74     border-right-width: 1pt;
    75 }
    77 #content-area.sidebar-spacing {
    78     margin-left: 30ch;
    79 }
    81 #mainMenu {
    82     font-size: 1.2rem;
    83     background: #e0e0e5;
    84 }
    86 #sideMenu {
    87     background: #f7f7ff;
    88     overflow-x: scroll;
    89 }
    91 #mainMenu .menuEntry {
    92     padding: .25em 1em .25em 1em;
    93     border-right-style: solid;
    94     border-right-width: 1pt;
    95     border-right-color: #9095a1;
    96 }
    98 #sideMenu .menuEntry {
    99     padding-top: .25em;
   100     padding-bottom: .25em;
   101     border-bottom-style: solid;
   102     border-bottom-width: 1pt;
   103     border-bottom-color: #d7d7df;
   104 }
   106 #mainMenu .menuEntry[data-active] {
   107     background: #d0d0d5;
   108 }
   110 #sideMenu .menuEntry[data-active] {
   111     background: #e7e7ef
   112 }
   114 #sideMenu .level-0 {
   115     padding-left: .25em;
   116 }
   118 #sideMenu .level-1 {
   119     padding-left: .75em;
   120 }
   122 #sideMenu .level-2 {
   123     padding-left: 2em;
   124 }
   126 #content-area {
   127     padding: 2.75rem 1em 1em;
   128 }
   130 button, a.button {
   131     display: inline-block;
   132     font-size: medium;
   133     border-style: solid;
   134     border-width: 1pt;
   135     border-color: #606060;
   136     color: inherit;
   137     background: #f0f0f0;
   139     padding: .25em .5em .25em .5em;
   140     cursor: default;
   141     text-decoration: none;
   142 }
   144 button:hover, a.button:hover {
   145     background: #f0f0ff;
   146 }
   148 button[type=submit] {
   149     background: #20a0ff;
   150     color: white;
   151 }
   153 button[type=submit]:hover {
   154     background: #1090cf;
   155 }
   157 th {
   158     text-align: left;
   159 }
   161 table.datatable {
   162     border-style: solid;
   163     border-width: 1pt;
   164     border-color: silver;
   165     border-collapse: collapse;
   166 }
   168 table.datatable th {
   169     white-space: nowrap;
   170     font-weight: bold;
   171     background: #f7f7ff;
   172 }
   174 table.datatable th, table.datatable td {
   175     border-style: solid;
   176     border-width: 1pt;
   177     border-color: lightgray;
   178     padding: .4em;
   179 }
   181 table.datatable tr:nth-child(2n) {
   182     background: #faffff;
   183 }
   185 table.formtable {
   186     border-style: none;
   187     border-collapse: separate;
   188     border-spacing: 1em;
   189 }
   191 table.formtable th {
   192     font-weight: bold;
   193     text-align: left;
   194     vertical-align: center;
   195     white-space: nowrap;
   196 }
   198 table.formtable tbody td > * {
   199     width: 100%;
   200 }
   202 table.formtable input[type=date] {
   203     width: auto;
   204 }
   206 table.formtable tfoot td {
   207     text-align: right;
   208 }
   210 .fullwidth {
   211     width: 100%;
   212 }
   214 .vtop {
   215     vertical-align: top;
   216 }
   218 .hcenter {
   219     text-align: center;
   220 }
   222 .hright {
   223     text-align: right;
   224 }
   226 .smalltext {
   227     font-size: smaller;
   228 }
   230 .nowrap {
   231     white-space: nowrap;
   232 }
   234 .medskip {
   235     margin-top: .5em;
   236 }
   238 .info-box, .error-box, .warn-box {
   239     margin: 2em;
   240     border-style: dashed;
   241     border-width: 1pt;
   242     border-color: deepskyblue;
   243     padding: 1em;
   244 }
   246 .error-box {
   247     border-color: red;
   248 }
   250 .warn-box {
   251     border-color: gold;
   252 }
   254 .table {
   255     display: table;
   256     border-spacing: .5em;
   257     margin: -.5em;
   258 }
   260 .row {
   261     display: table-row;
   262 }
   264 .caption {
   265     font-weight: bold;
   266 }
   268 .row > div {
   269     display: table-cell;
   270 }

mercurial