nmdc-webfrontend/client/dcwebui.less

426 lines
7.9 KiB
Plaintext

/* dcwebui.css */
* {
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
border:0;
font-family:Geneva,Helvetica,Arial,sans-serif;
font-size: 12px;
}
.placement-top {
height:24px;
position:absolute;
top:0;
left:0;
right:0;
}
.placement-mid {
position:absolute;
top:24px;
right:0;
bottom:40px;
left:0;
}
.placement-bottom {
height:40px;
position:absolute;
bottom:0;
left:0;
right:0;
}
.placement-panel {
width:150px;
position:absolute;
right:0;
top:24px;
bottom:40px;
}
.placement-vary {
/* Nothing, at this media query level */
}
/* WiiU placements */
.navigator-wiiu {
.placement-mid {
bottom:120px;
}
.placement-bottom {
height:120px;
}
.placement-panel {
bottom:120px;
}
}
/* Menu button */
.menubutton {
position:absolute;
right:2px;
top:2px;
cursor:pointer;
color:black;
font-weight:bold;
line-height:0;
height:18px;
width:18px;
text-align:center;
svg {
width: 18px;
height: 18px;
}
&:hover {
background:white;
}
}
/* Menu list */
.menu {
background:#DDD;
box-shadow: 0 4px 24px #CCC;
display:none; /* default state */
position:absolute; /* but not positioned anywhere specifically */
width:200px;
z-index:10; /* above placement-panel */
overflow-y:auto;
ul {
margin:0;
padding:0;
}
li {
list-style-type:none;
padding:6px;
cursor:pointer;
&:hover {
background:#333;
color:white;
}
}
}
/* Tabs */
.tabbar {
position:relative;
overflow:hidden;
background:darkgrey;
background-image: linear-gradient(bottom,#BBBBBB,#EEEEEE);
background-image: -ms-linear-gradient(bottom,#BBBBBB,#EEEEEE);
background-image: -moz-linear-gradient(bottom,#BBBBBB,#EEEEEE);
background-image: -webkit-linear-gradient(bottom,#BBBBBB,#EEEEEE);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBBBBB, endColorstr=#EEEEEE); /* IE 6-8 */
}
.tabitem {
display:inline-block;
background:white;
height:20px;
border-top:2px solid white;
border-right:1px solid lightgrey;
margin-top:2px;
padding:0 8px;
&:hover {
border-top:2px solid #EEE;
}
&.selected {
border-top:2px solid darkgreen;
}
&.unread {
background:lightyellow;
}
}
.tab-label {
cursor:pointer;
}
.tab-closer {
background:#F8F8F8;
color:grey;
font-weight:bold;
cursor:pointer;
display:inline-block;
*display:block; /* IE7 */
*zoom:1; /* IE7 */
text-align:center;
/* Cosmetic */
padding:0 3px;
border-radius:12px;
border:1px solid white;
line-height:12px;
position:relative;
top:1px;
-webkit-transition:0.1s linear all;
-moz-transition:0.1s linear all;
transition:0.1s linear all;
&:hover {
background:#FFDDDD;
border:1px solid red;
color:black;
}
}
/* */
.content {
display:block;
}
.content-inner {
overflow:hidden;
overflow-y:auto;
-webkit-transition: all 0.25s ease-in-out;
padding:0;
margin:0;
box-sizing:border-box;
position:absolute;
top:4px;
bottom:4px;
left:4px;
right:0;
}
/* */
#basebar {
border-top: 1px solid #999;
text-align:center;
font-weight:bold;
color:white;
vertical-align:middle;
background: #ACB9CA;
background-image: linear-gradient(bottom,#6E85A2,#ACB9CA);
background-image: -ms-linear-gradient(bottom,#6E85A2,#ACB9CA);
background-image: -moz-linear-gradient(bottom,#6E85A2,#ACB9CA);
background-image: -webkit-linear-gradient(bottom,#6E85A2,#ACB9CA);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6E85A2, endColorstr=#ACB9CA); /* IE 6-8 */
}
#form-none {
height:32px;
position:absolute;
right:4px;
left:4px;
top:4px;
}
#chatbox-container {
padding:1px;
padding-right: 15px; /* (6 + 1)*2 plus 1 expected */
position:absolute;
left:0;top:0;bottom:0;right:32px;
}
#chatbox {
font-size:1.2em;
font-family:Geneva,Helvetica,Arial,sans-serif;
border:1px;
border-radius:3px;
padding:0 6px;
margin:0;
display:block;
width:100%;
height:100%;
}
#submit-container {
position:absolute;
top:0;
bottom:0;
right:0;
width:32px;
}
#btsubmit {
width:100%;
height:100%;
font-size:1.2em;
font-family:Geneva,Helvetica,Arial,sans-serif;
}
/* iOS-style list view */
.ul-large {
background-color: #e9e9e9;
border: 1px solid #ccc;
width: 95%;
display: block;
position: relative;
padding: 0;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
li {
color: #333;
font: bold 15px Geneva, Arial, Helvetica, sans-serif;
vertical-align: middle;
border-bottom: 1px solid #ccc;
list-style-type: none;
text-align: left;
white-space: nowrap;
overflow: hidden;
height: 30px;
list-style-type: none;
display: block;
padding: 15px 5px 5px 10px;
cursor:pointer;
&:first-child {
border-top: 0;
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-top-left-radius: 12px;
-moz-border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
&:last-child {
border-bottom: 0;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
-moz-border-bottom-left-radius: 12px;
-moz-border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
}
}
/* Text */
.tx-sys, .tx-user, .tx-chat {
white-space:pre-wrap;
}
.tx-time {
color:grey;
}
.tx-sys {
font-weight: bold;
color: darkgreen;
}
.tx-user {
font-weight: bold;
color: black;
}
.tx-chat {
color: black;
}
/* webkit scrollbars */
::-webkit-scrollbar-track-piece{
/*background-color:#fff;*/
-webkit-border-radius:0;
}
::-webkit-scrollbar{
width:8px;
height:8px;
}
::-webkit-scrollbar-thumb{
height:50px;
background-color:#CCC;
-webkit-border-radius:4px;
outline:2px solid #fff;
outline-offset:-2px;
border: 2px solid #fff;
-webkit-transition:background-color 0.1s;
transition:background-color 0.1s;
}
::-webkit-scrollbar-thumb:hover{
height:50px;
background-color:#999;
-webkit-border-radius:4px;
}
/* Userlist */
#panel-userlist {
border-left:1px solid #EEE;
background:#F8F8F8;
overflow-y: auto;
}
.user-is-operator {
color:darkgreen;
font-weight:bold;
}
/* User sprite */
.ul-mini {
padding-left: 4px;
margin-top:4px;
li {
list-style-type:none;
min-height:13px;
line-height:13px;
padding-left:14px;
margin-bottom:5px;
cursor:pointer;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAANCAYAAACQN/8FAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAZJJREFUKJFtz71rE2EAgPHnrknbXBKkLWhx0DhoWsEOxk0taMGlQ7cimElK5uroH5DFSUQ3KQpV2qlQEDJ4mKFQ0MVS6kfN1dQP2ss1ydW79y6Xu3udBG36zL/lUaSUVKtVqes6hmGgaRqlUulUoVAw+ScV4P2bFfrEPhnF4+v2NuVy+QFHSjiNXWV2cgzh+dRqX1hsNflcr5/tgcJ14larSdDxCYIOuWEV0c3+7oEAxk4NANu2GUnFFIt3FnvgydxFZb9hSRmFCCGwmjb3i3OVo1AFyF2bZm/PxDRN4rDDo4WHt4+F77RfmKNZ1MQA9ukTPPeXXt14OvXita5f+guVJ+uPZ1brlZUJI08qG/F26AP9chDXO8RpeyzNvMyMnc+7fembmU9WYJFXL7M1YtBNhqRIEYURh1Gb/u+DH69fubqRaLQOcAccHDy++TW0pEaATzcOkFHMxs/NCQD13oV50laaH/EuQdhBhAIRClzF/W9GkVIC8Gx54dZafa3SDmxc1SEdZxgfHmdu+m7y3Jlc+AextbuG6q1RSQAAAABJRU5ErkJggg==') no-repeat 0 0;
&:hover {
background-color:#EEE;
}
}
}
/* Display userlist alongside main chat for wide screens */
#panel-userlist {
display:none;
}
@media screen and (min-width: 590px) {
.placement-vary {
right:150px;
}
#panel-userlist {
display:block;
}
#tabitem-tab-users {
display:none;
}
.position-panel {
display:block;
}
}