Subversion Repositories oidplus

Rev

Rev 218 | 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.                 padding-right:10px !important;
  50.                 top: 0 !important;
  51.         }
  52.         #content_window {
  53.                 top: 0 !important;
  54.         }
  55.         #frames {
  56.                 display:flex;
  57.                 flex-direction:column;
  58.                 align-items: flex-start;
  59.         }
  60.         #system_title_bar {
  61.                 order:0;
  62.                 flex:none;
  63.         }
  64.         #oidtree {
  65.                 order:1;
  66.                 flex:none;
  67.         }
  68.         #content_window {
  69.                 order:2;
  70.                 flex:none;
  71.         }
  72.         #system_title_text {
  73.                 overflow-x:scroll; /* TODO: at computer browser, you see a scroll bar */
  74.         }
  75. }
  76.  
  77. @media only screen and (min-width: 801px) {
  78.         /* Desktop */
  79.         #system_title_menu {
  80.                 display:none !important;
  81.         }
  82. }
  83.  
  84. #system_title_bar {
  85.         width:100% !important;
  86.         position:relative !important;
  87.         white-space: nowrap;
  88. }
  89.  
  90. body, #frames {
  91.         width:100%;
  92.         height:100%;
  93. }
  94.  
  95. .wrap {
  96.         overflow-x: auto;
  97.         margin: 0 auto;
  98.         width:100%;
  99. }
  100.  
  101. .gray_footer_font {
  102.         color:#808080;
  103.         font-size:0.9em;
  104. }
  105.  
  106. label.padding_label {
  107.         font-weight: normal !important;
  108.         display: inline-block;
  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: #FFA500;
  143.         margin: 6px 0;
  144.         transition: 0.4s;
  145.         margin-left:14px;
  146. }
  147.  
  148. #system_title_menu.active {
  149.         background-color: #FFA500;
  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: #000;
  156. }
  157.  
  158. .active #bar2 {
  159.         opacity: 0;
  160.         background-color: #000;
  161. }
  162.  
  163. .active #bar3 {
  164.         -webkit-transform: rotate(45deg) translate(-8px, -8px);
  165.         transform: rotate(45deg) translate(-8px, -8px);
  166.         background-color: #000;
  167. }
  168.  
  169. .hover #bar1, .hover #bar2, .hover #bar3 {
  170.         background-color:#fff;
  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: #000;
  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 {
  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.         /* Bootstrap adds "Helvetica Neue",Helvetica at the beginning which causes bold font in IE11+Win10 */
  273.         font-family:Arial,sans-serif !important;
  274. }
  275.  
  276. @media only screen and (min-width: 801px) {
  277.         /* Desktop */
  278.         body {
  279.                 overflow:hidden;
  280.         }
  281.         .borderbox {
  282.                 border:1px solid silver;
  283.         }
  284. }
  285.  
  286. .borderbox {
  287.         overflow:auto;
  288. }
  289.  
  290. h1 {
  291.         font-size:1.8em;
  292. }
  293. h2 {
  294.         font-size:1.6em !important;
  295. }
  296.  
  297. textarea,input[type="text"],input[type="password"],select {
  298.         /* for dark themes, this looks better */
  299.         /*background:transparent;*/
  300.         background:rgb(255,255,255,0.4);
  301.         border: #AAAAAA 1px solid;
  302. }
  303.  
  304. input[type=button], input[type=submit], input[type=reset],
  305. input[type=button]:link, input[type=submit]:link, input[type=reset]:link,
  306. input[type=button]:visited, input[type=submit]:visited, input[type=reset]:visited,
  307. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  308.         border: 1px solid #a2a2a2;
  309.         padding-top:2px;
  310.         padding-bottom:2px;
  311.         padding-left:7px;
  312.         padding-right:7px;
  313.         text-decoration:none;
  314.         background: #ffffff;
  315.         color: #0066CC;
  316. }
  317. input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
  318.         background: #f4f4ff;
  319. }
  320. .hand, input[type=button], input[type=submit], input[type=reset] {
  321.         /* www.drweb.de/magazin/browser-cursor-hand */
  322.         cursor: hand; cursor: pointer;
  323. }
  324.  
  325. /**
  326.  *      Splitter / uiLayout
  327.  */
  328. .ui-layout-pane { /* all 'panes' */
  329.         border: 1px solid #BBB;
  330. }
  331. .ui-layout-pane-center { /* content body */
  332.         padding: 0;
  333.         margin:  0;
  334. }
  335. .ui-layout-pane-west { /* west pane */
  336.         padding: 0 10px;
  337.         background-color: #f9f9f9 !important;
  338.         overflow: auto;
  339. }
  340. .ui-layout-resizer { /* all 'resizer-bars' */
  341.         background: #DDD;
  342.         top:55px !important; /* DM 13.03.2019 */
  343. }
  344. .ui-layout-resizer-open:hover { /* mouse-over */
  345.         background: #9D9;
  346. }
  347. .ui-layout-resizer-north {
  348.         background:#2b336f !important;
  349.         z-index:10 !important; /* DM 13.03.2019 */
  350. }
  351. .ui-layout-toggler { /* all 'toggler-buttons' */
  352.         background: #AAA;
  353.         }
  354. .ui-layout-toggler-closed { /* closed toggler-button */
  355.         background: #CCC;
  356.         border-bottom: 1px solid #BBB;
  357. }
  358. .ui-layout-toggler .content { /* toggler-text */
  359.         font: 14px bold Verdana, Verdana, Arial, Helvetica, sans-serif;
  360. }
  361. .ui-layout-toggler:hover { /* mouse-over */
  362.         background: #DCA;
  363. }
  364. .ui-layout-toggler:hover .content { /* mouse-over */
  365.         color: #009;
  366. }
  367.  
  368. /* masks are usually transparent - make them visible (must 'override' default) */
  369. .ui-layout-mask {
  370.         background: #C00 !important;
  371.         opacity: .20 !important;
  372.         filter: alpha(opacity=20) !important;
  373. }
  374.  
  375. /* Tabs */
  376.  
  377. #loginTab .tab-content {
  378.         color: #000;
  379.         background-color: #eeeeee;
  380.         padding : 5px 15px;
  381. }
  382.  
  383. #loginTab .nav-pills > li > a {
  384.         border-radius: 0;
  385. }
  386.  
  387. #loginTab .nav-pills > li.active > a {
  388.         color: #000;
  389.         font-weight: bold;
  390.         background-color: #eeeeee;
  391. }
  392.  
  393. /* Goto box */
  394.  
  395. @media only screen and (max-width: 800px) {
  396.         /* Mobile */
  397.  
  398.         #gotobox {
  399.                 /*max-width:350px;*/
  400.                 width:75%;
  401.         }
  402.  
  403.         .mobilehidden {
  404.                 display:none !important;
  405.         }
  406.  
  407. }
  408.  
  409. @media only screen and (min-width: 801px) {
  410.         /* Desktop */
  411.  
  412.         #gotobox {
  413.                 position:absolute;
  414.                 right:10px;
  415.                 top:10px;
  416.                 width:30%;
  417.                 max-width:400px;
  418.         }
  419.  
  420. }
  421.  
  422. #gotobox {
  423.         display: none; /* will be set to 'block' by JavaScript */
  424.  
  425.         line-height:1.75em;
  426.  
  427.         height:55px !important;
  428.  
  429.         font-style:italic;
  430.         font-weight:bolder;
  431.         float:left;
  432.         border-bottom:1px;
  433.  
  434.         width:100%; /* required for NoScript */
  435.         padding-left:5px;/* required for NoScript */
  436.         padding-right:5px;/* required for NoScript */
  437.  
  438.         padding-left:0px;
  439.         margin-left:0px;
  440. }
  441.  
  442. #gotobox input[type="text"] {
  443.         width:calc(100% - 45px);
  444. }
  445.  
  446. #gotobox input[type="button"] {
  447.         width:40px;
  448. }
  449.  
  450.