ui/app/static/css/ui.css

/*
  This file is part of CPEE.

  CPEE is free software: you can redistribute it and/or modify it under the terms
  of the GNU General Public License as published by the Free Software Foundation,
  either version 3 of the License, or (at your option) any later version.

  CPEE is distributed in the hope that it will be useful, but WITHOUT ANY
  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
  PARTICULAR PURPOSE.  See the GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along with
  CPEE (file COPYING in the main directory).  If not, see
  <http://www.gnu.org/licenses/>.
*/

:root {
  --x-ui-border-color: #a1a1a1;
  --x-ui-outside-color: #ffffff;
  --x-ui-background-color: #ffffff;
  --x-ui-light-text-color: #333;
  --x-ui-light-back-color: #e8e8e8;
  --x-ui-link-color: #425d73;
}

body {
  font-family: sans-serif;
  font-size: 1em;
}

*[is=x-ui] {
  font-family: sans-serif,Arial,Verdana,Helvetica;
  font-size: 0.85em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--x-ui-outside-color);
  padding:0;
  margin:0;
  color: var(--x-ui-light-text-color);
  overflow: hidden;
}

/* Browser Bug, set textarea explicitly */
*[is=x-ui] textarea, input, select, button {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 1em;
  resize: none;
}

*[is=x-ui] button {
  padding: .1em .2em;
  border: 1pt solid var(--x-ui-border-color);
  border-radius: 0.2em;
  margin: 0;
  font-size: 0.9em;
  background: var(--x-ui-light-back-color);
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(var(--x-ui-light-back-color)));
  background: -moz-linear-gradient(top, white, var(--x-ui-light-back-color));
}
*[is=x-ui] button::-moz-focus-inner {
  border: 0 none;
  padding: 0;
  margin: 0;
}
*[is=x-ui] button.highlight {
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(Highlight));
  background: -moz-linear-gradient(top, white, Highlight);
}

*[is=x-ui] input { font-family: sans-serif; font-size: 1em; }
*[is=x-ui] input::-webkit-input-placeholder { color: red; }
*[is=x-ui] input:-moz-placeholder { color: red; }

*[is=x-ui] a:link    { color:var(--x-ui-link-color); text-decoration:none; }
*[is=x-ui] a:visited { color:var(--x-ui-link-color); text-decoration:none; }
*[is=x-ui] a:hover   { color:var(--x-ui-light-text-color); text-decoration:underline; }
*[is=x-ui] a:active  { color:var(--x-ui-light-text-color); text-decoration:underline; }

*[is=x-ui] ui-tabbed {
  background-color: var(--x-ui-outside-color);
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
*[is=x-ui] ui-rest {
  display: flex;
  background-color: var(--x-ui-background-color);
  align-items: stretch;
  flex-direction: column;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}

*[is=x-ui] ui-tabbed.off {
  border-bottom: 0.2em solid var(--x-ui-border-color);
  border-radius: 0;
}
*[is=x-ui] ui-tabbed.off > ui-content {
  display: none;
}
*[is=x-ui] ui-tabbed.off > ui-tabbar > ui-behind {
  display: none;
}

*[is=x-ui] ui-tabbar {
  background-color: var(--x-ui-outside-color);
  display: flex;
  align-items: stretch;
  flex-direction: row;
  padding: 0;
  margin: 0;
  padding-top: 0.5em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
*[is=x-ui] ui-tabbed > ui-tabbar > ui-tab.switch {
  background-color: var(--x-ui-light-back-color);
}
*[is=x-ui] ui-tabbed > ui-tabbar > ui-tab.switch:after {
  content: "▽";
  font-weight: bold;
  vertical-align:top;
  color: var(--x-ui-light-text-color);
}
*[is=x-ui] ui-tabbed.off > ui-tabbar > ui-tab.switch:after {
  content: "▶";
  font-weight: bold;
  color: var(--x-ui-light-text-color);
  vertical-align:top;
}

*[is=x-ui] ui-tabbar > ui-tab {
  font-size: 1.4em;
  font-weight: bold;
  white-space: nowrap;

  cursor: pointer;
  padding: 0.3em 0.5em;
  border: 1pt solid var(--x-ui-border-color);
  border-bottom: 1pt solid var(--x-ui-background-color);
  border-radius: 0.7em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  background: var(--x-ui-background-color);
}
*[is=x-ui] ui-tabbar > ui-tab.inactive, ui-tabbed > ui-tabbar > ui-tab.switch {
  border: 1pt solid var(--x-ui-border-color);
  border-radius: 0.7em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
}

*[is=x-ui] ui-tabbar > ui-behind {
  flex: 1 1 auto;
  vertical-align:bottom;
  padding: 0;
  padding-top: 0.9em;
  border-bottom: 1pt solid var(--x-ui-border-color);
  border-radius: 0.7em;
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  text-align:right;
  white-space: nowrap;
}
*[is=x-ui] ui-rest > ui-tabbar > ui-behind {
  padding-right: 0.5em;
}

*[is=x-ui] ui-rest > ui-tabbar > ui-before {
  border-bottom: 1pt solid var(--x-ui-border-color);
  padding-left:0.5em;
}

*[is=x-ui] ui-content {
  background-color: var(--x-ui-background-color);
  padding: 1em;
  margin: 0;
  border-bottom: 1pt solid var(--x-ui-border-color);
  border-left: 1pt solid var(--x-ui-border-color);
  border-right: 1pt solid var(--x-ui-border-color);
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}

*[is=x-ui] ui-rest > ui-content {
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: 0 none;

  display: flex;
  height: 0;
  flex-direction: row;
  flex: 1 1 auto;
}

*[is=x-ui] ui-rest > ui-content > ui-area {
  flex: 1 1 0%;
  overflow-x: auto;
  overflow-y: scroll;
}

*[is=x-ui] ui-rest > ui-content > ui-resizehandle {
  width: 0em;
}
*[is=x-ui] ui-rest > ui-content > ui-resizehandle + ui-area > ui-tabbed {
  margin-left: 1.5em;
}
*[is=x-ui] ui-rest > ui-content > ui-resizehandle + ui-area > ui-rest > ui-tabbar > ui-before {
  padding-left: 1.5em;
}

*[is=x-ui] ui-close {
  margin-left: 0.5em;
}

*[is=x-ui] ui-rest > ui-content > ui-resizehandle::before {
  display: block;
  position: absolute;
  color: var(--x-ui-border-color);
  white-space:nowrap;
  cursor: ew-resize;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform: rotate(90deg);
  -moz-transform-origin: left top;
  margin-left: 1.4em;
  margin-top: 0.2em;
  content: attr(data-label);
}

*[is=x-ui] ui-content > ui-area {
  margin: 0;
  padding: 0;
}

*[is=x-ui] > ui-resizehandle {
  color: var(--x-ui-border-color);
  white-space:nowrap;
  z-index: 99999;
  cursor: s-resize;
  text-align: right;
  margin-top: 0.2em;
  margin-right: 0.5em;
}

*[is=x-ui] ui-tabbed, ui-content, ui-area { display: block; }
*[is=x-ui] ui-content > ui-area.inactive, ui-content > ui-resizehandle.inactive, ui-rest > ui-content > ui-resizehandle.inactive { display: none }

*[is=x-ui] ui-content > ui-area .x-ui-layout {
  width: 100%;
  border-collapse:collapse;
  border-spacing:0;
  border: 0 none;
  padding:0;
  margin:0;
}
*[is=x-ui] ui-rest > ui-content > ui-area .x-ui-layout {
  border:1em solid var(--x-ui-background-color);
  box-sizing:border-box;
}
*[is=x-ui] ui-content > ui-area .x-ui-layout td {
  border:0 none;
  padding:0;
  margin:0;
}
*[is=x-ui] ui-content > ui-area .x-ui-layout tr {
  border:0 none;
  padding:0;
  margin:0;
}
*[is=x-ui] ui-content > ui-area .x-ui-compact {
  border-collapse:collapse;
  border-spacing:0;
  border:0 none;
  padding:0;
  margin:0;
}

*[is=x-ui] ui-content > ui-area .x-ui-compact td {
  border:0 none;
  padding:0;
  margin:0;
}
*[is=x-ui] ui-content > ui-area .x-ui-compact tr {
  border:0 none;
  padding:0;
  margin:0;
}
*[is=x-ui] ui-content > ui-area .x-ui-layout .fixed { white-space:nowrap; }
*[is=x-ui] ui-content > ui-area .x-ui-layout .top { vertical-align: top; }

*[is=x-ui] .hidden {
  display: none;
}