/*
* OIDplus 2.0
* Copyright 2019 - 2023 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(img/logo.png);
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;
}
}
/* Link colors */
#content a:not(.btn):link {
color:#FF5500;
}
#content a:not(.btn):visited {
color:#CC5500;
}
#content a:not(.btn):hover {
color:#FFAA00;
}
/* 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;
}
#oidtree {
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;
background:#fbfbfb;
color:#000;
}
#frames {
display:flex;
flex-direction:column;
align-items: flex-start;
}
#system_title_bar {
order:0;
flex:none;
}
#oidtree {
order:1;
flex:none;
/* https://stripesgenerator.com/ */
background-image: linear-gradient(0deg, #ffffff 25%, #f4f4f4 25%, #f4f4f4 50%, #ffffff 50%, #ffffff 75%, #f4f4f4 75%, #f4f4f4 100%);
background-size: 4.00px 4.00px;
}
#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_font {
/*color:#808080;*/
color:rgba(0, 0, 0, 0.5);
}
.gray_footer_font {
/*color:#808080;*/
color:rgba(0, 0, 0, 0.5);
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:#111;
margin-left:5px;
}
#system_title_2 {
color:#833;
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-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;
/* https://stripesgenerator.com/ */
background-image: linear-gradient(0deg, #ffffff 25%, #d4d4d4 25%, #d4d4d4 50%, #ffffff 50%, #ffffff 75%, #d4d4d4 75%, #d4d4d4 100%);
background-size: 4.00px 4.00px;
color:#000;
overflow:hidden;
}
#system_title_bar a {
text-decoration:none;
}
/* OID-Tree */
.jstree-clicked {
background:#FFD5AA !important;
color:#000;
}
.jstree-anchor:hover {
background:#FFE4CA;
color:#000;
}
@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;
/* https://stripesgenerator.com/ */
background-image: linear-gradient(0deg, #ffffff 25%, #f4f4f4 25%, #f4f4f4 50%, #ffffff 50%, #ffffff 75%, #f4f4f4 75%, #f4f4f4 100%);
background-size: 4.00px 4.00px;
}
#content_window {
position:absolute;
left:400px;
right:0px;
bottom:0px;
top:55px; /* required for NoScript */
padding-left:20px;
padding-right:20px;
background:#fbfbfb;
color:#000;
}
}
#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;
}
a[target='_blank']::after {
content: '\1F5D7';
}
textarea,input[type="text"],input[type="password"],select {
background: #F0F0F0;
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;*/
color:#000;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
background: #FFE4CA;
color:#000;
}
.hand, input[type=button], input[type=submit], input[type=reset] {
cursor: pointer;
color:#000;
}
.btn-success, .btn-success:visited, .btn-success:hover, .btn-success:active {
/* TODO: When the mouse enters the button, the link will be orange for a short amount of time. Why??? */
color:white !important;
}
/**
* 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;
color:#000;
top:55px !important; /* DM 13.03.2019 */
}
.ui-layout-resizer-open:hover { /* mouse-over */
background: #9D9;
color:#000;
}
.ui-layout-resizer-north:hover {
background: #DDD;
color:#000;
}
.ui-layout-resizer-north {
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: #f5f5f5;
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;
}
/* Misc */
li {
padding-bottom: 0.25em;
}
img[src="img/arrow_back.png"], img[src="img/share.png"] {
/* for dark designs (does not look good though...) */
/* TODO: how to replace all visible pixels by a specific color, e.g. white? mask-image? */
filter: drop-shadow( 1px -1px 1px white)
drop-shadow(-1px 1px 1px white)
drop-shadow(-1px -1px 1px white)
drop-shadow( 1px 1px 1px white);
}