Subversion Repositories oidplus

/*

 * OIDplus 2.0

 * Copyright 2019 - 2021 Daniel Marschall, ViaThinkSoft

 *

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */

/*************************************************************************************

 ** ATTENTION:                                                                      **

 *************************************************************************************

 ** Please do NOT edit this file, since a software update will override             **

 ** your changes.                                                                   **

 ** To do changes to the design, you have following possibilities:                  **

 ** - If you just want to change colors, then the color plugin in the admin area    **

 **   could an option for you.                                                      **

 ** - Create userdata/styles/oidplus_add.css (it will be placed after this file),   **

 **   and use the "!important" statements to override style definitions.            **

 ** - You can completely REPLACE oidplus_base.css by                                **

 **   creating userdata/styles/oidplus_base.css . This is very dangerous, because   **

 **   you need to regularly check if the official oidplus_base.css gets changed or  **

 **   extended, and you need to apply the changes according to the master file.     **

 *************************************************************************************/

/* Logo */

@media only screen and (min-width: 801px) {

        /* Desktop */

        #system_title_logo {

                background-image: url(logo_anim.gif);

                background-position: left;

                background-repeat: no-repeat;

                background-size: 45px 45px;

                position:absolute;

                top:0px;

                left:0px;

                width:50px;

                height:50px;

                margin-left:5px;

        }

        #system_title_1 {

                padding-left: 50px;

        }

        #system_title_2 {

                padding-left: 50px;

        }

}

/* Basic stuff */

@media print {

        /* Printing */

        .ui-layout-west, .ui-layout-resizer {

                display:none !important;

        }

        .ui-layout-center {

                left:0px !important;

                width:100% !important;

        }

        #oidtree, .ui-layout-center {

                position:relative !important;

                width:100% !important;

                top: 0 !important;

        }

        #content_window {

                top: 0 !important;

        }

}

@media only screen and (max-width: 800px) {

        /* Mobile */

        .ui-layout-west, .ui-layout-resizer {

                display:none !important;

        }

        .ui-layout-center {

                left:0px !important;

                width:100% !important;

        }

        #oidtree, .ui-layout-center {

                position:relative !important;

                width:100% !important;

                padding-right:10px !important;

                top: 0 !important;

                padding-bottom:80px !important; /* because iPhone Safari bar at the bottom */

                                                /* Attention: If you incrase .lng_flag.margin, then you need to increase this, too */

        }

        #content_window {

                top: 0 !important;

        }

        #frames {

                display:flex;

                flex-direction:column;

                align-items: flex-start;

        }

        #system_title_bar {

                order:0;

                flex:none;

        }

        #oidtree {

                order:1;

                flex:none;

        }

        #content_window {

                order:2;

                flex:none;

        }

        #system_title_text {

                overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */

        }

}

@media only screen and (min-width: 801px) {

        /* Desktop */

        #system_title_menu {

                display:none !important;

        }

}

#system_title_bar {

        width:100% !important;

        position:relative !important;

        white-space: nowrap;

}

body, #frames {

        width:100%;

        height:100%;

}

.wrap {

        overflow-x: auto;

        margin: 0 auto;

        width:100%;

}

.gray_footer_font {

        color:#808080;

        font-size:0.9em;

}

label.padding_label {

        font-weight: normal !important;

        display: inline-block;

        clear: left;

        width: 100px;

        text-align: right;

        padding-top: 3px;

        margin-right: 8px;

}

.box {

        width:auto !important;

        padding:20px;

        background-color:#fff;

        color:#000;

        border:1px solid #ccc;

        border-radius:5px;

        margin-top:10px;

}

#titleedit {

        width:100%;

}

#system_title_1 {

        color:#2D6A9F;

        margin-left:5px;

}

#system_title_2 {

        color:#2B336F;

        font-size:2em;

        margin-left:5px;

}

/* Mobile menu button */

#bar1, #bar2, #bar3 {

        width: 27px;

        height: 5px;

        background-color: #FFA500;

        margin: 6px 0;

        transition: 0.4s;

        margin-left:14px;

}

#system_title_menu.active {

        background-color: #FFA500;

}

.active #bar1 {

        -webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);

        transform: rotate(-45deg) translate(-7.5px, 7.5px);

        background-color: #000;

}

.active #bar2 {

        opacity: 0;

        background-color: #000;

}

.active #bar3 {

        -webkit-transform: rotate(45deg) translate(-8px, -8px);

        transform: rotate(45deg) translate(-8px, -8px);

        background-color: #000;

}

.hover #bar1, .hover #bar2, .hover #bar3 {

        background-color:#fff;

}

#system_title_menu {

        width:55px;

        height:55px;

        padding-top:8px;

        text-decoration: none;

        font-size: 19px;

        display: none; /* will be set to 'block' by JavaScript */

        background-color: #000;

        float:left;

        cursor: pointer;

}

/* Title bar */

#system_title_bar {

        line-height:1.75em;

        height:55px !important;

        font-style:italic;

        font-weight:bolder;

        float:left;

        border-bottom:1px;

        width:100%; /* required for NoScript */

        padding-left:5px;/* required for NoScript */

        padding-right:5px;/* required for NoScript */

        padding-left:0px;

        margin-left:0px;

        display:block;

        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */

        background: #a0d8ef; /* Old browsers */

        background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6-15 */

        background: -webkit-linear-gradient(left, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */

        background: linear-gradient(to right, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=1 ); /* IE6-9 */

        color:#000;

        overflow:hidden;

}

#system_title_bar a {

        text-decoration:none;

}

/* OID-Tree */

@media only screen and (max-width: 800px) {

        /* Mobile */

        #content_window {

                padding-left:16px;

                padding-top:0px;

        }

}

@media only screen and (min-width: 801px) {

        /* Desktop */

        #oidtree {

                position:absolute;

                left:0px;

                bottom:0px;

                top:55px; /* required for NoScript */

                width:400px; /* required for NoScript */

                padding-top:5px;

                white-space:nowrap; /* required for NoScript */

                overflow:scroll; /* required for NoScript */

                padding-bottom:10px !important;

        }

        #content_window {

                position:absolute;

                left:400px;

                right:0px;

                bottom:0px;

                top:55px; /* required for NoScript */

                padding-left:20px;

                padding-right:20px;

        }

}

#oidtree {

        padding-top:5px !important;

        padding-left:5px;/* required for NoScript */

        padding-right:5px;/* required for NoScript */

}

html {

        margin:0;

        padding:0;

        height:100%;

        font-family:"Helvetica";

}

body {

        margin:0px;

        padding:0px;

        height:100%;

        /* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */

        font-family:"Arial","sans-serif" !important;

}

@media only screen and (min-width: 801px) {

        /* Desktop */

        body {

                overflow:hidden;

        }

        .borderbox {

                border:1px solid silver;

        }

}

.borderbox {

        overflow:auto;

}

h1 {

        font-size:2.2em;

}

h2 {

        font-size:1.6em !important;

}

h3 {

        font-size:1.5em !important;

}

textarea,input[type="text"],input[type="password"],select {

        /* for dark themes, this looks better */

        /*background:transparent;*/

        background:#fff;

        background-opacity: 0.4;

        border: #AAAAAA 1px solid;

        color:#000;

}

input[type=button], input[type=submit], input[type=reset],

input[type=button]:link, input[type=submit]:link, input[type=reset]:link,

input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {

        border: 1px solid #a2a2a2;

        padding-top:2px;

        padding-bottom:2px;

        padding-left:7px;

        padding-right:7px;

        text-decoration:none;

        background: #ffffff;

        color: #0066CC;

}

input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {

        background: #f4f4ff;

        color:#000;

}

.hand, input[type=button], input[type=submit], input[type=reset] {

        cursor: pointer;

}

/**

 *      Splitter / uiLayout

 */

.ui-layout-pane { /* all 'panes' */

        border: 1px solid #BBB;

}

.ui-layout-pane-center { /* content body */

        padding: 0;

        margin:  0;

}

.ui-layout-pane-west { /* west pane */

        padding: 0 10px;

        background-color: #f9f9f9 !important;

        overflow: auto;

}

.ui-layout-resizer { /* all 'resizer-bars' */

        background: #DDD;

        top:55px !important; /* DM 13.03.2019 */

        color:#000;

}

.ui-layout-resizer-open:hover { /* mouse-over */

        background: #9D9;

        color:#000;

}

.ui-layout-resizer-north {

        background:#2b336f !important;

        color:#000;

        z-index:10 !important; /* DM 13.03.2019 */

}

.ui-layout-toggler { /* all 'toggler-buttons' */

        background: #AAA;

        color:#000;

        }

.ui-layout-toggler-closed { /* closed toggler-button */

        background: #CCC;

        color:#000;

        border-bottom: 1px solid #BBB;

}

.ui-layout-toggler .content { /* toggler-text */

        font-size: 14px;

        font-family: "Verdana", "Arial", "Helvetica", "sans-serif";

        font-weight: bold;

}

.ui-layout-toggler:hover { /* mouse-over */

        background: #DCA;

        color:#000;

}

.ui-layout-toggler:hover .content { /* mouse-over */

        color: #009;

}

/* masks are usually transparent - make them visible (must 'override' default) */

.ui-layout-mask {

        background: #C00 !important;

        color:#000;

        opacity: .20 !important;

        filter: alpha(opacity=20) !important;

}

/* Language box */

@media only screen and (min-width: 801px) {

        /* Desktop */

        #languageBox {

                position:absolute;

                right:420px;

                top:15px;

        }

}

@media only screen and (max-width: 800px) {

        /* Mobile */

        #languageBox {

                margin: 10px;

        }

        .lang_flag_bg {

                margin-right: 10px;

        }

}

.lng_flag {

        cursor: pointer;

        border: 1px solid #000 !important;

        height: 20px;

        margin: 0px;

}

.lang_flag_bg {

        /* to avoid that the stripes shine through a ghost image */

        background:#fff;

        color:#000;

        display: inline-block;

}

.picture_ghost {

        opacity: 0.4;

}

/* Goto box */

@media only screen and (max-width: 800px) {

        /* Mobile */

        #gotobox {

                /*max-width:350px;*/

                width:75%;

        }

        .mobilehidden {

                display:none !important;

        }

}

@media only screen and (min-width: 801px) {

        /* Desktop */

        #gotobox {

                position:absolute;

                right:10px;

                top:10px;

                width:30%;

                max-width:400px;

        }

}

#gotoedit {

        font-style:italic;

        font-weight:bolder;

}

#gotobox {

        display: none; /* will be set to 'block' by JavaScript */

        line-height:1.75em;

        height:55px !important;

        float:left;

        border-bottom:1px;

        width:100%; /* required for NoScript */

        padding-left:5px;/* required for NoScript */

        padding-right:5px;/* required for NoScript */

        padding-left:0px;

        margin-left:0px;

}

#gotobox input[type="text"] {

        width:calc(100% - 45px);

}

#gotobox input[type="button"] {

        width:40px;

}

/* Logbook severities (shared between plugins ra099, ra200, admin600) */

.severity_0 {

        /* Undefined */

}

.severity_1 {

        /* Success */

        color: DarkGreen;

}

.severity_2 {

        /* Informational */

        color: CornflowerBlue;

}

.severity_3 {

        /* Warning */

        color: DarkGoldenRod;

}

.severity_4 {

        /* Error */

        color: DarkRed;

}

.severity_5 {

        /* Critical */

        color: DarkMagenta;

}

/* Tabs */

.tab-content {

        color: #000;

        background-color: #eeeeee;

        padding : 15px;

}

.nav-link.active {

        color: #000;

        font-weight: bold;

        background-color: #eeeeee !important;

        border-radius: 0;

}

/* Let Bootstrap 4 look like Bootstrap 3 (more or less) */

/* see https://www.geeksforgeeks.org/difference-between-bootstrap-3-and-bootstrap-4/ */

.container {

        max-width: unset !important;

}

body {

        font-size:14px;

}

h1, h2, h3 {

        margin-top: 20px;

        margin-bottom: 10px;

}