Subversion Repositories oidplus

Rev

Rev 126 | Go to most recent revision | View as "text/css" | Blame | Last modification | View Log | RSS feed

  1. /*
  2.  * OIDplus 2.0
  3.  * Copyright 2019 Daniel Marschall, ViaThinkSoft
  4.  *
  5.  * Licensed under the Apache License, Version 2.0 (the "License");
  6.  * you may not use this file except in compliance with the License.
  7.  * You may obtain a copy of the License at
  8.  *
  9.  *     http://www.apache.org/licenses/LICENSE-2.0
  10.  *
  11.  * Unless required by applicable law or agreed to in writing, software
  12.  * distributed under the License is distributed on an "AS IS" BASIS,
  13.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14.  * See the License for the specific language governing permissions and
  15.  * limitations under the License.
  16.  */
  17.  
  18. @media print {
  19.         /* Printing */
  20.         .ui-layout-west, .ui-layout-resizer {
  21.                 display:none !important;
  22.         }
  23.         .ui-layout-center {
  24.                 left:0px !important;
  25.                 width:100% !important;
  26.         }
  27.         #oidtree, .ui-layout-center {
  28.                 position:relative !important;
  29.                 width:100% !important;
  30.                 top: 0 !important;
  31.         }
  32.         #content_window {
  33.                 top: 0 !important;
  34.         }
  35. }
  36.  
  37. @media only screen and (max-width: 800px) {
  38.         /* Mobile */
  39.         .ui-layout-west, .ui-layout-resizer {
  40.                 display:none !important;
  41.         }
  42.         .ui-layout-center {
  43.                 left:0px !important;
  44.                 width:100% !important;
  45.         }
  46.         #oidtree, .ui-layout-center {
  47.                 position:relative !important;
  48.                 width:100% !important;
  49.                 top: 0 !important;
  50.         }
  51.         #content_window {
  52.                 top: 0 !important;
  53.         }
  54.         #frames {
  55.                 display:flex;
  56.                 flex-direction:column;
  57.                 align-items: flex-start;
  58.         }
  59.         #system_title_bar {
  60.                 order:0;
  61.                 flex:none;
  62.         }
  63.         #oidtree {
  64.                 order:1;
  65.                 flex:none;
  66.         }
  67.         #content_window {
  68.                 order:2;
  69.                 flex:none;
  70.         }
  71.         #system_title_text {
  72.                 overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
  73.         }
  74. }
  75.  
  76. @media only screen and (min-width: 801px) {
  77.         /* Desktop */
  78.         #system_title_menu {
  79.                 display:none !important;
  80.         }
  81. }
  82.  
  83. #system_title_bar {
  84.         width:100% !important;
  85.         position:relative !important;
  86.         white-space: nowrap;
  87. }
  88.  
  89. body, #frames {
  90.         width:100%;
  91.         height:100%;
  92. }
  93.  
  94. .wrap {
  95.         overflow-x: auto;
  96.         margin: 0 auto;
  97.         width:100%;
  98. }
  99.  
  100. .gray_footer_font {
  101.         color:gray;
  102.         font-size:0.9em;
  103. }
  104.  
  105. label.padding_label {
  106.         font-weight: normal !important;
  107.         display: inline-block;
  108.         float: left;
  109.         clear: left;
  110.         width: 100px;
  111.         text-align: right;
  112.         padding-top: 3px;
  113.         margin-right: 8px;
  114. }
  115.  
  116. .box {
  117.         width:auto !important;
  118.         padding:20px;
  119.         background-color:#fff;
  120.         border:1px solid #ccc;
  121.         border-radius:5px;
  122.         margin-top:10px;
  123. }
  124. #titleedit {
  125.         width:100%;
  126. }
  127. #system_title_1 {
  128.         color:#2D6A9F;
  129.         margin-left:5px;
  130. }
  131. #system_title_2 {
  132.         color:#2B336F;
  133.         font-size:2em;
  134.         margin-left:5px;
  135. }
  136.  
  137. /* Mobile menu button */
  138.  
  139. #bar1, #bar2, #bar3 {
  140.         width: 27px;
  141.         height: 5px;
  142.         background-color: orange;
  143.         margin: 6px 0;
  144.         transition: 0.4s;
  145.         margin-left:14px;
  146. }
  147.  
  148. #system_title_menu.active {
  149.         background-color:orange;
  150. }
  151.  
  152. .active #bar1 {
  153.         -webkit-transform: rotate(-45deg) translate(-7.5px, 7.5px);
  154.         transform: rotate(-45deg) translate(-7.5px, 7.5px);
  155.         background-color: black;
  156. }
  157.  
  158. .active #bar2 {
  159.         opacity: 0;
  160.         background-color: black;
  161. }
  162.  
  163. .active #bar3 {
  164.         -webkit-transform: rotate(45deg) translate(-8px, -8px);
  165.         transform: rotate(45deg) translate(-8px, -8px);
  166.         background-color: black;
  167. }
  168.  
  169. .hover #bar1, .hover #bar2, .hover #bar3 {
  170.         background-color:white;
  171. }
  172.  
  173. #system_title_menu {
  174.         width:55px;
  175.         height:55px;
  176.         padding-top:8px;
  177.         text-decoration: none;
  178.         font-size: 19px;
  179.         display: none; /* will be set to 'block' by JavaScript */
  180.         background-color: black;
  181.         float:left;
  182.         cursor: pointer;
  183. }
  184.  
  185. /* Title bar */
  186.  
  187. #system_title_bar {
  188.         line-height:1.75em;
  189.  
  190.         height:55px !important;
  191.  
  192.         font-style:italic;
  193.         font-weight:bolder;
  194.         float:left;
  195.         border-bottom:1px;
  196.  
  197.         width:100%; /* required for NoScript */
  198.         padding-left:5px;/* required for NoScript */
  199.         padding-right:5px;/* required for NoScript */
  200.  
  201.         padding-left:0px;
  202.         margin-left:0px;
  203.  
  204.         display:block;
  205.  
  206.         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */
  207.         background: #a0d8ef; /* Old browsers */
  208.         background: -moz-linear-gradient(left, #a0d8ef 0%, #ddf1f9 65%, #feffff 100%); /* FF3.6-15 */
  209.         background: -webkit-linear-gradient(left, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
  210.         background: linear-gradient(to right, #a0d8ef 0%,#ddf1f9 65%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  211.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=1 ); /* IE6-9 */
  212.  
  213.         overflow:hidden;
  214. }
  215. #system_title_bar a:hover, #system_title_bar a:active, #system_title_bar a:focus, #system_title_bar a:visited, #system_title_bar a:link {
  216.         text-decoration:none;
  217. }
  218.  
  219. /* OID-Tree */
  220.  
  221. @media only screen and (max-width: 800px) {
  222.         /* Mobile */
  223.  
  224.         #content_window {
  225.                 padding-left:16px;
  226.                 padding-top:0px;
  227.         }
  228.  
  229. }
  230. @media only screen and (min-width: 801px) {
  231.         /* Desktop */
  232.  
  233.         #oidtree {
  234.                 position:absolute;
  235.                 left:0px;
  236.                 bottom:0px;
  237.                 top:55px; /* required for NoScript */
  238.                 width:400px; /* required for NoScript */
  239.                 padding-top:5px;
  240.                 white-space:nowrap; /* required for NoScript */
  241.                 overflow:scroll; /* required for NoScript */
  242.         }
  243.        
  244.         #content_window {
  245.                 position:absolute;
  246.                 left:400px;
  247.                 right:0px;
  248.                 bottom:0px;
  249.                 top:55px; /* required for NoScript */
  250.                 padding-left:20px;
  251.                 padding-right:20px;
  252.         }
  253. }
  254.  
  255. #oidtree {
  256.         padding-top:5px !important;
  257.         padding-left:5px;/* required for NoScript */
  258.         padding-right:5px;/* required for NoScript */
  259. }
  260.  
  261. html {
  262.         margin:0;
  263.         padding:0;
  264.         height:100%;
  265.         font-family:Helvetica;
  266. }
  267. body {
  268.         margin:0px;
  269.         padding:0px;
  270.         font-size:0.85em;
  271.         height:100%;
  272. }
  273.  
  274. @media only screen and (min-width: 801px) {
  275.         /* Desktop */
  276.         body {
  277.                 overflow:hidden;
  278.         }
  279.         .borderbox {
  280.                 border:1px solid silver;
  281.         }
  282. }
  283.  
  284. .borderbox {
  285.         overflow:auto;
  286. }
  287.  
  288. h1 {
  289.         font-size:1.8em;
  290. }
  291. h2 {
  292.         font-size:1.6em !important;
  293. }
  294.  
  295. /**
  296.  *      Splitter / uiLayout
  297.  */
  298. .ui-layout-pane { /* all 'panes' */
  299.         border: 1px solid #BBB;
  300. }
  301. .ui-layout-pane-center { /* content body */
  302.         padding: 0;
  303.         margin:  0;
  304. }
  305. .ui-layout-pane-west { /* west pane */
  306.         padding: 0 10px;
  307.         background-color: #f9f9f9 !important;
  308.         overflow: auto;
  309. }
  310. .ui-layout-resizer { /* all 'resizer-bars' */
  311.         background: #DDD;
  312.         top:55px !important; /* DM 13.03.2019 */
  313. }
  314. .ui-layout-resizer-open:hover { /* mouse-over */
  315.         background: #9D9;
  316. }
  317. .ui-layout-resizer-north {
  318.         background:#2b336f !important;
  319.         z-index:10 !important; /* DM 13.03.2019 */
  320. }
  321. .ui-layout-toggler { /* all 'toggler-buttons' */
  322.         background: #AAA;
  323.         }
  324. .ui-layout-toggler-closed { /* closed toggler-button */
  325.         background: #CCC;
  326.         border-bottom: 1px solid #BBB;
  327. }
  328. .ui-layout-toggler .content { /* toggler-text */
  329.         font: 14px bold Verdana, Verdana, Arial, Helvetica, sans-serif;
  330. }
  331. .ui-layout-toggler:hover { /* mouse-over */
  332.         background: #DCA;
  333. }
  334. .ui-layout-toggler:hover .content { /* mouse-over */
  335.         color: #009;
  336. }
  337.  
  338. /* masks are usually transparent - make them visible (must 'override' default) */
  339. .ui-layout-mask {
  340.         background: #C00 !important;
  341.         opacity: .20 !important;
  342.         filter: alpha(opacity=20) !important;
  343. }
  344.  
  345. /* Tabs */
  346.  
  347. #loginTab .tab-content {
  348.         color: black;
  349.         background-color: #eeeeee;
  350.         padding : 5px 15px;
  351. }
  352.  
  353. #loginTab .nav-pills > li > a {
  354.         border-radius: 0;
  355. }
  356.  
  357. #loginTab .nav-pills > li.active > a {
  358.         color: black;
  359.         font-weight: bold;
  360.         background-color: #eeeeee;
  361. }
  362.