345 lines
6.5 KiB
CSS
345 lines
6.5 KiB
CSS
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
font-family: helvetica;
|
|
-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
|
|
}
|
|
|
|
html{overflow:hidden}
|
|
|
|
/* JQuery ui icom removal */
|
|
.ui-icon { background-image: url("") !important; }
|
|
|
|
.desktop {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-color: #222335;
|
|
background-image: url('/img/nightbliss.jpg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
z-index: -999;
|
|
}
|
|
|
|
.startbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
height: 35px;
|
|
width: 100vw;
|
|
background-color: #222335;
|
|
/*border-top: 2px solid white;*/
|
|
padding: 3px;
|
|
text-align:right
|
|
}
|
|
|
|
#startbutton {
|
|
float: left;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: #00FFFF;
|
|
height: 29px;
|
|
font-family: sans-serif;
|
|
padding: 4px;
|
|
cb=20160806162438");
|
|
background-size: auto 70%;
|
|
background-position: 5% 50%;
|
|
background-repeat: no-repeat;
|
|
transform: skew(-15deg);
|
|
}
|
|
|
|
.startbutton-off {
|
|
border-top: 2px solid #0FF;
|
|
border-left: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
}
|
|
|
|
.startbutton-on {
|
|
border-top: 2px solid #0FF;
|
|
border-left: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
}
|
|
|
|
#menu {
|
|
position: absolute;
|
|
top:35px;
|
|
left: 0;
|
|
background-color: #222335;
|
|
z-index: 10;
|
|
border-left: 2px solid #0FF;
|
|
border-top: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
display: none;
|
|
}
|
|
|
|
|
|
.menu-content{
|
|
margin-left: 25px;}
|
|
|
|
.sidebar {
|
|
height: 100%;
|
|
background: linear-gradient(to top, #000080, #1084d0);
|
|
display: inline-block;
|
|
width: 25px;
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.headline {
|
|
transform: rotate(-90deg);
|
|
transform-origin: 0% 0%;
|
|
width: 150%;
|
|
padding-top: 4px;
|
|
padding-bottom: 3px;
|
|
padding-left: 0px;
|
|
color: white;
|
|
position: absolute;
|
|
left 0;
|
|
bottom: 0;
|
|
text-align: left;
|
|
margin-bottom: -15px;
|
|
}
|
|
|
|
.item {
|
|
color: #00FFFF;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-left: 5px;
|
|
padding-right: 0px;
|
|
font-size: 13px;
|
|
background-size: auto 80%;
|
|
background-position: 5px 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.more {
|
|
position: relative;
|
|
list-style: none;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.more::after {
|
|
content: "\25b6";
|
|
left: 2px;
|
|
position: relative;
|
|
float: right;
|
|
}
|
|
|
|
.dropdown-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.dropdown-content {
|
|
background-color: #222335;
|
|
display: none;
|
|
position: absolute;
|
|
max-height: 400px;
|
|
overflow-y: scroll;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.more:hover > .dropdown-content {
|
|
display: block;
|
|
top: -2px;
|
|
left: 100%;
|
|
background-color: ##222335;
|
|
color: #00FFFF;
|
|
list-style: none;
|
|
border-left: 2px solid #0FF;
|
|
border-top: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
box-sizing: border-box;
|
|
min-width: 100%;
|
|
|
|
}
|
|
|
|
.di {
|
|
color: #00FFFF;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
font-size: 13px;
|
|
background-size: auto 70%;
|
|
background-position: 5% 50%;
|
|
background-repeat: no-repeat;
|
|
white-space:nowrap;
|
|
|
|
}
|
|
|
|
.di:hover {
|
|
color: white;
|
|
background-color: darkblue;
|
|
}
|
|
|
|
.item:hover {
|
|
background-color: darkblue;
|
|
color: white;
|
|
}
|
|
|
|
.item:first-child {}
|
|
|
|
.item:last-child {}
|
|
|
|
.menu-break::after {
|
|
content: "";
|
|
border-top: 1px solid white;
|
|
height: 1px;
|
|
display: block;
|
|
}
|
|
|
|
|
|
.time {
|
|
color: #00FFFF;
|
|
display: inline-block;
|
|
height: 29px;
|
|
float: right;
|
|
text-align: center;
|
|
padding: 4px;
|
|
border-top: 2px solid #0FF;
|
|
border-left: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
transform: skew(-15deg);
|
|
}
|
|
|
|
.window {
|
|
top: 35px;
|
|
background-color: #AAA;
|
|
box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
|
|
display: none;
|
|
height:488px;
|
|
width:810px;
|
|
}
|
|
|
|
.window-inner {
|
|
border: 1px solid #0FF;
|
|
height: 100%;
|
|
}
|
|
|
|
.window-header {
|
|
background-color: #222335;
|
|
border-bottom: 1px solid #0FF;
|
|
/*font-size: 15px;*/
|
|
overflow: auto;
|
|
|
|
|
|
}
|
|
|
|
.window-header p {
|
|
color: #0FF;
|
|
display: inline;
|
|
position: absolute;
|
|
vertical-align: middle;
|
|
display: inline;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
width: calc(100% - 105px);
|
|
padding-top: 3px;
|
|
padding-left: 3px;
|
|
transform: skew(-15deg);
|
|
}
|
|
|
|
|
|
|
|
|
|
.window-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
float: right;
|
|
text-align: center;
|
|
margin-top: 3px;
|
|
margin-right: 3px;
|
|
margin-bottom: 3px;
|
|
transform: skew(-15deg);
|
|
}
|
|
|
|
.close {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAWklEQVQ4jdWUwQ4AMARD/f9Pd6fdxlBdsh5JX4So2b8CYADm/bvRgV+9HXjaU4GXB8kY2quLjMw9XAANPYHGoB58TE+mHd9vVKOhNFzyIJKXloSQLDZlQf+LFn3iKuQ/tsRtAAAAAElFTkSuQmCC");
|
|
background-size: auto 100%;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.maximise {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAJ0lEQVQ4jWNgGLrg////VMGjBg+gweSCUYNHDR41eFAaPHQKoaECAEE4/BId7nyMAAAAAElFTkSuQmCC");
|
|
background-size: auto 100%;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.minimise {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAH0lEQVQ4jWNgGAWjYBSMglEwCigH////pwjT3+ChAACZg1+hYv0ztQAAAABJRU5ErkJggg==");
|
|
background-size: auto 100%;
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
.window-content {
|
|
height: calc( 100% - 28px);
|
|
|
|
}
|
|
|
|
.program {
|
|
color: #0FF;
|
|
float: left;
|
|
display: block;
|
|
margin-left: 5px;
|
|
height: 29px;
|
|
text-align: left;
|
|
padding: 4px;
|
|
padding-left: 4px;
|
|
border-top: 2px solid #0FF;
|
|
border-left: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
background-color: #222335;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
background-size: auto 70%;
|
|
background-position: 3px 50%;
|
|
background-repeat: no-repeat;
|
|
transform: skew(-15deg);
|
|
|
|
}
|
|
|
|
.window-header-icon {
|
|
height: 20px;
|
|
margin-left: 3px;
|
|
margin-top: 3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.focused {
|
|
border-top: 2px solid #0FF;
|
|
border-left: 2px solid #0FF;
|
|
border-bottom: 2px solid #0FF;
|
|
border-right: 2px solid #0FF;
|
|
}
|
|
#radio {
|
|
background-color: red;
|
|
border: none;
|
|
color: white;
|
|
text-align: center;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
#wccam{height:511px}
|
|
#vpilscam{width:1034px;height:829px}
|
|
|