src/main/webapp/lightpit.css

Mon, 09 Aug 2021 16:57:56 +0200

author
Mike Becker <universe@uap-core.de>
date
Mon, 09 Aug 2021 16:57:56 +0200
changeset 217
a5ad7cd5d000
parent 213
5b55a5318a83
child 219
556c03f1dd4e
permissions
-rw-r--r--

#104 changes base layout from fixed to grid

     1 /*
     2  * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER.
     3  * 
     4  * Copyright 2021 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 @font-face {
    31     font-family: LightPIT;
    32     src: url('fonts/MPLUS1p-Thin.ttf');
    33     font-weight: 100;
    34 }
    36 @font-face {
    37     font-family: LightPIT;
    38     src: url('fonts/MPLUS1p-Light.ttf');
    39     font-weight: 300;
    40 }
    42 @font-face {
    43     font-family: LightPIT;
    44     src: url('fonts/MPLUS1p-Regular.ttf');
    45     font-weight: 400;
    46 }
    48 @font-face {
    49     font-family: LightPIT;
    50     src: url('fonts/MPLUS1p-Medium.ttf');
    51     font-weight: 500;
    52 }
    54 @font-face {
    55     font-family: LightPIT;
    56     src: url('fonts/MPLUS1p-Bold.ttf');
    57     font-weight: 700;
    58 }
    60 html {
    61     font-family: LightPIT,sans-serif;
    62     font-size: 11pt;
    63     background: white;
    64     color: #1c204e;
    65     margin: 0;
    66     padding: 0;
    67     height: 100vh;
    68 }
    70 body {
    71     height: 100%;
    72     margin: 0;
    73     padding: 0;
    74 }
    76 textarea, input, button, select {
    77     font-family: inherit;
    78     font-size: inherit;
    79 }
    81 a {
    82     cursor: pointer;
    83     color: #3060f8;
    84     text-decoration: none;
    85 }
    87 #body-area {
    88     display: grid;
    89     grid-template-columns: max-content auto;
    90     grid-template-rows: max-content 1fr;
    91     height: 100%;
    92 }
    94 #mainMenu {
    95     grid-row: 1;
    96     grid-column: 1 / span 2;
    97     width: 100%;
    98     display: flex;
    99     flex-flow: row wrap;
   100     border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25));
   101     border-image-slice: 1;
   102     border-bottom-style: solid;
   103     border-bottom-width: thin;
   104     font-size: 1.2rem;
   105     background: #e0e0e5;
   106 }
   108 #sideMenu {
   109     grid-row: 2;
   110     grid-column: 1;
   111     display: flex;
   112     flex-flow: column;
   113     color: #3060f8;
   114     border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
   115     border-image-slice: 1;
   116     border-right-style: solid;
   117     border-right-width: thin;
   118     background: #f7f7ff;
   119 }
   121 #mainMenu .menuEntry {
   122     padding: .25em 1em .25em 1em;
   123     border-right-style: solid;
   124     border-right-width: thin;
   125     border-right-color: #9095a1;
   126 }
   128 #sideMenu .menuEntry {
   129     padding-right: 1em;
   130     padding-top: .25em;
   131     padding-bottom: .25em;
   132     border-bottom-style: solid;
   133     border-bottom-width: thin;
   134     border-bottom-color: #d7d7df;
   135 }
   137 #mainMenu .menuEntry[data-active] {
   138     background: #d0d0d5;
   139 }
   141 #sideMenu .menuEntry[data-active] {
   142     background: #e7e7ef
   143 }
   145 #sideMenu .level-0 {
   146     padding-left: .25em;
   147 }
   149 #sideMenu .level-1 {
   150     padding-left: .75em;
   151 }
   153 #sideMenu .level-2 {
   154     padding-left: 2em;
   155 }
   157 #content-area {
   158     grid-row: 2;
   159     grid-column: 2;
   160     padding: 1.5em;
   161 }
   163 button, a.button {
   164     display: inline-block;
   165     font-size: medium;
   166     border-style: solid;
   167     border-width: thin;
   168     border-color: #606060;
   169     color: inherit;
   170     background: #f0f0f0;
   172     padding: .25em .5em .25em .5em;
   173     cursor: default;
   174     text-decoration: none;
   175 }
   177 button:hover, a.button:hover {
   178     background: #f0f0ff;
   179 }
   181 button[type=submit], a.button.submit {
   182     background: #20a0ff;
   183     color: white;
   184 }
   186 button[type=submit]:hover, a.button.submit:hover {
   187     background: #1090cf;
   188 }
   190 th {
   191     text-align: left;
   192 }
   194 table.datatable {
   195     border-style: solid;
   196     border-width: thin;
   197     border-color: silver;
   198     border-collapse: collapse;
   199 }
   201 table.datatable th {
   202     white-space: nowrap;
   203     font-weight: bold;
   204     background: #f7f7ff;
   205 }
   207 table.datatable th, table.datatable td {
   208     border-style: solid;
   209     border-width: thin;
   210     border-color: lightgray;
   211     padding: .4em;
   212 }
   214 table.datatable tr:nth-child(2n) {
   215     background: #faffff;
   216 }
   218 table.formtable {
   219     border-style: none;
   220     border-collapse: separate;
   221     border-spacing: 1em;
   222 }
   224 table.formtable th {
   225     font-weight: bold;
   226     text-align: left;
   227     vertical-align: center;
   228     white-space: nowrap;
   229 }
   231 table.formtable tbody td > * {
   232     width: 100%;
   233     margin: 0;
   234     box-sizing: border-box;
   235 }
   237 table.formtable input[type=date] {
   238     width: auto;
   239 }
   241 table.formtable tfoot td {
   242     text-align: right;
   243 }
   245 .fullwidth {
   246     width: 100%;
   247 }
   249 .vtop {
   250     vertical-align: top;
   251 }
   253 .hcenter {
   254     text-align: center;
   255 }
   257 .hright {
   258     text-align: right;
   259 }
   261 .smalltext {
   262     font-size: smaller;
   263 }
   265 .nowrap {
   266     white-space: nowrap;
   267 }
   269 .medskip {
   270     margin-top: .5em;
   271 }
   273 .info-box, .error-box, .warn-box {
   274     margin: 1.5em;
   275     border-style: dashed;
   276     border-width: thin;
   277     border-color: deepskyblue;
   278     padding: 1em;
   279 }
   281 .error-box {
   282     border-style: outset;
   283     border-color: red;
   284     background: lightcoral;
   285 }
   287 .warn-box {
   288     border-style: outset;
   289     border-color: gold;
   290     background: lightgoldenrodyellow;
   291 }
   293 .table {
   294     display: table;
   295     border-spacing: .5em;
   296     margin: -.5em;
   297 }
   299 .row {
   300     display: table-row;
   301 }
   303 .caption {
   304     font-weight: bold;
   305 }
   307 .row > div {
   308     display: table-cell;
   309 }
   311 /* MARKDOWN STYLES */
   313 div.markdown-styled p:first-child {
   314     margin-top: 0;
   315 }
   317 div.markdown-styled table {
   318     border-collapse: collapse;
   319 }
   321 div.markdown-styled td,
   322 div.markdown-styled th {
   323     padding: 0.25em;
   324     border-style: solid;
   325     border-color: darkgray;
   326     border-width: thin;
   327 }

mercurial