426 lines
7.9 KiB
Plaintext
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;
|
|
}
|
|
}
|