src/main/webapp/lightpit.css

Mon, 09 Aug 2021 15:50:37 +0200

author
Mike Becker <universe@uap-core.de>
date
Mon, 09 Aug 2021 15:50:37 +0200
changeset 213
5b55a5318a83
parent 211
8066895cc57e
child 217
a5ad7cd5d000
permissions
-rw-r--r--

#105 fixes wrong font for form controls

     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 }
    69 body {
    70     height: 100%;
    71     margin: 0;
    72     padding: 0;
    73 }
    75 textarea, input, button, select {
    76     font-family: inherit;
    77     font-size: inherit;
    78 }
    80 a {
    81     cursor: pointer;
    82     color: #3060f8;
    83     text-decoration: none;
    84 }
    86 #mainMenu {
    87     position: fixed;
    88     z-index: 2;
    89     width: 100%;
    90     display: flex;
    91     flex-flow: row wrap;
    92     border-image-source: linear-gradient(to right, #606060, rgba(60, 60, 60, .25));
    93     border-image-slice: 1;
    94     border-bottom-style: solid;
    95     border-bottom-width: thin;
    96 }
    98 #sideMenu {
    99     display: flex;
   100     z-index: 1;
   101     flex-flow: column;
   102     position: fixed;
   103     height: 100%;
   104     width: 40ch; /* adjust with sidebar-spacing.margin-left */
   105     padding-top: 2.25rem;
   106     color: #3060f8;
   107     border-image-source: linear-gradient(to bottom, #606060, rgba(60, 60, 60, .25));
   108     border-image-slice: 1;
   109     border-right-style: solid;
   110     border-right-width: thin;
   111 }
   113 #content-area.sidebar-spacing {
   114     margin-left: 40ch; /* adjust with sideMenu.width */
   115 }
   117 #mainMenu {
   118     font-size: 1.2rem;
   119     background: #e0e0e5;
   120 }
   122 #sideMenu {
   123     background: #f7f7ff;
   124     overflow-x: scroll;
   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     padding-top: .25em;
   136     padding-bottom: .25em;
   137     border-bottom-style: solid;
   138     border-bottom-width: thin;
   139     border-bottom-color: #d7d7df;
   140 }
   142 #mainMenu .menuEntry[data-active] {
   143     background: #d0d0d5;
   144 }
   146 #sideMenu .menuEntry[data-active] {
   147     background: #e7e7ef
   148 }
   150 #sideMenu .level-0 {
   151     padding-left: .25em;
   152 }
   154 #sideMenu .level-1 {
   155     padding-left: .75em;
   156 }
   158 #sideMenu .level-2 {
   159     padding-left: 2em;
   160 }
   162 #content-area {
   163     padding: 2.75rem 1em 1em;
   164 }
   166 button, a.button {
   167     display: inline-block;
   168     font-size: medium;
   169     border-style: solid;
   170     border-width: thin;
   171     border-color: #606060;
   172     color: inherit;
   173     background: #f0f0f0;
   175     padding: .25em .5em .25em .5em;
   176     cursor: default;
   177     text-decoration: none;
   178 }
   180 button:hover, a.button:hover {
   181     background: #f0f0ff;
   182 }
   184 button[type=submit], a.button.submit {
   185     background: #20a0ff;
   186     color: white;
   187 }
   189 button[type=submit]:hover, a.button.submit:hover {
   190     background: #1090cf;
   191 }
   193 th {
   194     text-align: left;
   195 }
   197 table.datatable {
   198     border-style: solid;
   199     border-width: thin;
   200     border-color: silver;
   201     border-collapse: collapse;
   202 }
   204 table.datatable th {
   205     white-space: nowrap;
   206     font-weight: bold;
   207     background: #f7f7ff;
   208 }
   210 table.datatable th, table.datatable td {
   211     border-style: solid;
   212     border-width: thin;
   213     border-color: lightgray;
   214     padding: .4em;
   215 }
   217 table.datatable tr:nth-child(2n) {
   218     background: #faffff;
   219 }
   221 table.formtable {
   222     border-style: none;
   223     border-collapse: separate;
   224     border-spacing: 1em;
   225 }
   227 table.formtable th {
   228     font-weight: bold;
   229     text-align: left;
   230     vertical-align: center;
   231     white-space: nowrap;
   232 }
   234 table.formtable tbody td > * {
   235     width: 100%;
   236     margin: 0;
   237     box-sizing: border-box;
   238 }
   240 table.formtable input[type=date] {
   241     width: auto;
   242 }
   244 table.formtable tfoot td {
   245     text-align: right;
   246 }
   248 .fullwidth {
   249     width: 100%;
   250 }
   252 .vtop {
   253     vertical-align: top;
   254 }
   256 .hcenter {
   257     text-align: center;
   258 }
   260 .hright {
   261     text-align: right;
   262 }
   264 .smalltext {
   265     font-size: smaller;
   266 }
   268 .nowrap {
   269     white-space: nowrap;
   270 }
   272 .medskip {
   273     margin-top: .5em;
   274 }
   276 .info-box, .error-box, .warn-box {
   277     margin: 1.5em;
   278     border-style: dashed;
   279     border-width: thin;
   280     border-color: deepskyblue;
   281     padding: 1em;
   282 }
   284 .error-box {
   285     border-style: outset;
   286     border-color: red;
   287     background: lightcoral;
   288 }
   290 .warn-box {
   291     border-style: outset;
   292     border-color: gold;
   293     background: lightgoldenrodyellow;
   294 }
   296 .table {
   297     display: table;
   298     border-spacing: .5em;
   299     margin: -.5em;
   300 }
   302 .row {
   303     display: table-row;
   304 }
   306 .caption {
   307     font-weight: bold;
   308 }
   310 .row > div {
   311     display: table-cell;
   312 }
   314 /* MARKDOWN STYLES */
   316 div.markdown-styled p:first-child {
   317     margin-top: 0;
   318 }
   320 div.markdown-styled table {
   321     border-collapse: collapse;
   322 }
   324 div.markdown-styled td,
   325 div.markdown-styled th {
   326     padding: 0.25em;
   327     border-style: solid;
   328     border-color: darkgray;
   329     border-width: thin;
   330 }

mercurial