src/main/webapp/lightpit.css

Thu, 12 Aug 2021 20:03:04 +0200

author
Mike Becker <universe@uap-core.de>
date
Thu, 12 Aug 2021 20:03:04 +0200
changeset 223
df31e4332063
parent 222
390127090ad2
child 225
87328572e36f
permissions
-rw-r--r--

update changelog + add min-width to side menu

     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: min-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     min-width: 15vw;
   112     display: flex;
   113     flex-flow: column;
   114     color: #3060f8;
   115     border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
   116     border-image-slice: 1;
   117     border-right-style: solid;
   118     border-right-width: thin;
   119     background: #f7f7ff;
   120 }
   122 #sideMenuFiller {
   123     grid-row: 2;
   124     grid-column: 1;
   125 }
   127 #mainMenu .menuEntry {
   128     padding: .25em 1em .25em 1em;
   129     border-right-style: solid;
   130     border-right-width: thin;
   131     border-right-color: #9095a1;
   132 }
   134 #sideMenu .menuEntry {
   135     white-space: nowrap;
   136     padding-right: 2em;
   137     padding-top: .25em;
   138     padding-bottom: .25em;
   139     border-bottom-style: solid;
   140     border-bottom-width: thin;
   141     border-bottom-color: #d7d7df;
   142 }
   144 #mainMenu .menuEntry[data-active] {
   145     background: #d0d0d5;
   146 }
   148 #sideMenu .menuEntry[data-active] {
   149     background: #e7e7ef
   150 }
   152 #sideMenu .level-0 {
   153     padding-left: .75em;
   154 }
   156 #sideMenu .level-1 {
   157     padding-left: 1.25em;
   158 }
   160 #sideMenu .level-2 {
   161     padding-left: 2.5em;
   162 }
   164 #content-area {
   165     grid-row: 2;
   166     grid-column: 2;
   167     padding: 1.5em;
   168 }
   170 button, a.button {
   171     display: inline-block;
   172     font-size: medium;
   173     border-style: solid;
   174     border-width: thin;
   175     border-color: #606060;
   176     color: inherit;
   177     background: #f0f0f0;
   179     padding: .25em .5em .25em .5em;
   180     cursor: default;
   181     text-decoration: none;
   182     font-variant-caps: small-caps;
   183 }
   185 button:hover, a.button:hover {
   186     background: #f0f0ff;
   187 }
   189 button[type=submit], a.button.submit {
   190     background: #20a0ff;
   191     color: white;
   192 }
   194 button[type=submit]:hover, a.button.submit:hover {
   195     background: #1090cf;
   196 }
   198 th {
   199     text-align: left;
   200 }
   202 table.datatable {
   203     border-style: solid;
   204     border-width: thin;
   205     border-color: silver;
   206     border-collapse: collapse;
   207 }
   209 table.datatable th {
   210     white-space: nowrap;
   211     font-weight: bold;
   212     background: #f7f7ff;
   213 }
   215 table.datatable th, table.datatable td {
   216     border-style: solid;
   217     border-width: thin;
   218     border-color: lightgray;
   219     padding: .4em;
   220 }
   222 table.datatable tr:nth-child(2n) {
   223     background: #faffff;
   224 }
   226 table.formtable {
   227     border-style: none;
   228     border-collapse: separate;
   229     border-spacing: 1em;
   230 }
   232 table.formtable th {
   233     font-weight: bold;
   234     text-align: left;
   235     vertical-align: center;
   236     white-space: nowrap;
   237 }
   239 table.formtable tbody td > * {
   240     width: 100%;
   241     margin: 0;
   242     box-sizing: border-box;
   243 }
   245 table.formtable input[type=date] {
   246     width: auto;
   247 }
   249 table.formtable tfoot td {
   250     text-align: right;
   251 }
   253 .fullwidth {
   254     width: 100%;
   255 }
   257 .vtop {
   258     vertical-align: top;
   259 }
   261 .hcenter {
   262     text-align: center;
   263 }
   265 .hright {
   266     text-align: right;
   267 }
   269 .smalltext {
   270     font-size: smaller;
   271 }
   273 .nowrap {
   274     white-space: nowrap;
   275 }
   277 .medskip {
   278     margin-top: .5em;
   279 }
   281 .info-box, .error-box, .warn-box {
   282     margin: 1.5em;
   283     border-style: dashed;
   284     border-width: thin;
   285     border-color: deepskyblue;
   286     padding: 1em;
   287 }
   289 .error-box {
   290     border-style: outset;
   291     border-color: red;
   292     background: lightcoral;
   293 }
   295 .warn-box {
   296     border-style: outset;
   297     border-color: gold;
   298     background: lightgoldenrodyellow;
   299 }
   301 .table {
   302     display: table;
   303     border-spacing: .5em;
   304     margin: -.5em;
   305 }
   307 .row {
   308     display: table-row;
   309 }
   311 .caption {
   312     font-weight: bold;
   313 }
   315 .row > div {
   316     display: table-cell;
   317 }
   319 /* MARKDOWN STYLES */
   321 div.markdown-styled p:first-child {
   322     margin-top: 0;
   323 }
   325 div.markdown-styled table {
   326     border-collapse: collapse;
   327 }
   329 div.markdown-styled td,
   330 div.markdown-styled th {
   331     padding: 0.25em;
   332     border-style: solid;
   333     border-color: darkgray;
   334     border-width: thin;
   335 }

mercurial