Initial 2024-01-26
This commit is contained in:
root
558
static/cmpSwoPage.css
Normal file
558
static/cmpSwoPage.css
Normal file
@@ -0,0 +1,558 @@
|
||||
body {
|
||||
color:#ccc;
|
||||
background-color:#222;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (display-mode: fullscreen) {
|
||||
body {
|
||||
color:#ccc;
|
||||
background-color:#444;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background-color:transparent;
|
||||
border:1px solid grey;
|
||||
border-radius:3px;
|
||||
color: white;
|
||||
width:24px;
|
||||
height:24px;
|
||||
font-size:18px;
|
||||
}
|
||||
button:hover {
|
||||
background-color:transparent;
|
||||
border:1px solid white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
input[type="checkbox"]:checked,
|
||||
input[type="checkbox"]:not(:checked),
|
||||
input[type="radio"]:checked,
|
||||
input[type="radio"]:not(:checked)
|
||||
{
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
input[type="checkbox"]:checked + label,
|
||||
input[type="checkbox"]:not(:checked) + label,
|
||||
input[type="radio"]:checked + label,
|
||||
input[type="radio"]:not(:checked) + label {
|
||||
// display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 28px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:before,
|
||||
input[type="checkbox"]:not(:checked) + label:before,
|
||||
input[type="radio"]:checked + label:before,
|
||||
input[type="radio"]:not(:checked) + label:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid green;
|
||||
background-color: #444;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:before,
|
||||
input[type="checkbox"]:not(:checked) + label:before {
|
||||
border-radius: 4px;
|
||||
}
|
||||
input[type="radio"]:checked + label:before,
|
||||
input[type="radio"]:not(:checked) + label:before {
|
||||
border-radius: 100%;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:after,
|
||||
input[type="checkbox"]:not(:checked) + label:after,
|
||||
input[type="radio"]:checked + label:after,
|
||||
input[type="radio"]:not(:checked) + label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
-o-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:after,
|
||||
input[type="checkbox"]:not(:checked) + label:after {
|
||||
left: 3px;
|
||||
top: 4px;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
border-radius: 1px;
|
||||
border-left: 4px solid #ccc;
|
||||
border-bottom: 4px solid #ccc;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
input[type="radio"]:checked + label:after,
|
||||
input[type="radio"]:not(:checked) + label:after {
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 100%;
|
||||
background-color: #e145a3;
|
||||
}
|
||||
input[type="checkbox"]:not(:checked) + label:after,
|
||||
input[type="radio"]:not(:checked) + label:after {
|
||||
opacity: 0;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:after,
|
||||
input[type="radio"]:checked + label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
table tr.odd:nth-child(2n) {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
table tr.odd:hover {
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
table tbody.odd:nth-child(2n) {
|
||||
background: #2f2f2f;
|
||||
}
|
||||
|
||||
table tbody.odd:hover {
|
||||
background: #282828;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
padding:4px;
|
||||
}
|
||||
|
||||
a { color: #37a4a4; text-decoration:none; }
|
||||
a:visited { color: #37a4a4; text-decoration:none; }
|
||||
|
||||
#bodyDiv {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
border:0px solid black;
|
||||
}
|
||||
|
||||
#topper {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height:32px;
|
||||
border:0px solid grey;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
#topperTab {
|
||||
vertical-align:top;
|
||||
color:#222;
|
||||
background: {SWS_BGCOLOR};
|
||||
}
|
||||
|
||||
#topperTabLeft {
|
||||
width:33%;
|
||||
}
|
||||
|
||||
#topperTabCenter {
|
||||
width:33%;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#topperTabRight {
|
||||
width:33%;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
#footer {
|
||||
background-color: #222;
|
||||
position:absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
height:32px;
|
||||
overflow:hidden;
|
||||
border:0px solid grey;
|
||||
}
|
||||
|
||||
#footerTab {
|
||||
margin:0;
|
||||
padding:0;
|
||||
vertical-align:top;
|
||||
border:0px solid grey;
|
||||
}
|
||||
|
||||
#footerTabLeft {
|
||||
width:33%;
|
||||
}
|
||||
#footerTabCenter {
|
||||
width:33%;
|
||||
text-align:center;
|
||||
}
|
||||
#footerTabRight {
|
||||
width:33%;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
/***********************/
|
||||
|
||||
#leftMenu {
|
||||
position:absolute;
|
||||
top:32px;
|
||||
left:0px;
|
||||
width:142px;
|
||||
bottom:32px;
|
||||
border:0px solid grey;
|
||||
padding:0px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
#leftMenu input[type=button].leftMenuButton {
|
||||
white-space: normal;
|
||||
padding:4px 14px 4px 14px;
|
||||
border:1px solid grey;
|
||||
border-radius:4px;
|
||||
background: #333;
|
||||
color:#eee;
|
||||
display:block;
|
||||
width:138px;
|
||||
margin:4px;
|
||||
}
|
||||
|
||||
#leftMenu button.leftMenuButton {
|
||||
white-space: normal;
|
||||
padding:4px 14px 4px 14px;
|
||||
border:1px solid grey;
|
||||
border-radius:4px;
|
||||
background: #333;
|
||||
color:#eee;
|
||||
display:block;
|
||||
width:138px;
|
||||
height:100%;
|
||||
margin:4px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
#leftMenu a.leftMenuLink {
|
||||
white-space: normal;
|
||||
padding:4px 14px 4px 14px;
|
||||
border:0px solid grey;
|
||||
border-radius:4px;
|
||||
display:block;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
|
||||
#leftMenu div {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
#leftMenu .menuNotifyLab {
|
||||
border: 1px solid grey;
|
||||
border-radius: 4px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
#leftMenu .menuNotifyLabAnim1 {
|
||||
animation-duration: 0.8s;
|
||||
animation-name: menuNotifyLabAnim1f;
|
||||
animation-timing-function: linear;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
@keyframes menuNotifyLabAnim1f {
|
||||
from {
|
||||
bottom: 500px;
|
||||
}
|
||||
|
||||
to {
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#leftMenu .menuNotifyLabAnim2 {
|
||||
animation-duration: 0.6s;
|
||||
animation-name: menuNotifyLabAnim2f;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes menuNotifyLabAnim2f {
|
||||
from {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
#leftMenu .menuNotifyLabHide {
|
||||
opacity:0;
|
||||
animation-duration: 0.6s;
|
||||
animation-name: menuNotifyLabAnim3f;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes menuNotifyLabAnim3f {
|
||||
from {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
.leftMenuBlock {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-top:4px;
|
||||
margin-bottom:8px;
|
||||
padding-bottom:8px;
|
||||
}
|
||||
|
||||
div.leftMenuBlockName {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button.leftMenuBlockName {
|
||||
display: block;
|
||||
border:0;
|
||||
}
|
||||
|
||||
.leftMenuBlockNameButton {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right:1px;
|
||||
|
||||
border:1px solid green;
|
||||
border-radius:12px;
|
||||
padding:0px;
|
||||
width :24px;
|
||||
height :24px;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.leftMenuBlockHide > .leftMenuBlockBody {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leftMenuBlockBody {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*******************************/
|
||||
|
||||
#mainRoot {
|
||||
position:absolute;
|
||||
top:32px;
|
||||
left:150px;
|
||||
right:0;
|
||||
bottom:32px;
|
||||
border:1px solid grey;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
|
||||
input[type=text] {
|
||||
background: #333;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
padding:4px 14px 4px 14px;
|
||||
border:1px solid grey;
|
||||
border-radius:4px;
|
||||
background: #333;
|
||||
color:#eee;
|
||||
}
|
||||
|
||||
.headWord {
|
||||
display:inline-block;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.footerWord {
|
||||
display:inline-block;
|
||||
overflow:hidden;
|
||||
padding:0 2px 0 2px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*********/
|
||||
|
||||
#page {
|
||||
z-index:20;
|
||||
position:fixed;
|
||||
top:32px;
|
||||
left:2px;
|
||||
right:2px;
|
||||
bottom:0;
|
||||
border:1px solid #000;
|
||||
border-radius:4px;
|
||||
background:#222;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
#pageBody {
|
||||
border:0px solid red;
|
||||
overflow:auto;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#topRight {
|
||||
z-index:10;
|
||||
position:fixed;
|
||||
background:#000;
|
||||
top:-4px;
|
||||
left:76%;
|
||||
right:80px;
|
||||
bottom:0px;
|
||||
overflow:auto;
|
||||
border:1px solid #000;
|
||||
border-radius:4px;
|
||||
padding:8px;
|
||||
opacity:0.8;
|
||||
}
|
||||
|
||||
#topRight:hover {
|
||||
z-index:50;
|
||||
border:1px solid green;
|
||||
}
|
||||
|
||||
#topCent {
|
||||
z-index:10;
|
||||
position:fixed;
|
||||
background:#222;
|
||||
top:0;
|
||||
left:20%;
|
||||
right:20%;
|
||||
border:1px solid #222;
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
#topCent:hover {
|
||||
z-index:50;
|
||||
}
|
||||
|
||||
#topLeft {
|
||||
z-index:10;
|
||||
position:fixed;
|
||||
background:#000;
|
||||
top:-6px;
|
||||
left:-2px;
|
||||
right:80%;
|
||||
border:1px solid #444;
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
#topLeft:hover {
|
||||
z-index:50;
|
||||
border:1px solid green;
|
||||
}
|
||||
|
||||
#srvDate {
|
||||
animation-duration: 3s;
|
||||
animation-name: an1;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
#srvTime {
|
||||
animation-duration: 3s;
|
||||
animation-name: an1;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
@keyframes an1 {
|
||||
from {
|
||||
letter-spacing: 8px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
to {
|
||||
letter-spacing: normal;
|
||||
font-size: inhrerit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******/
|
||||
|
||||
.buttonIco {
|
||||
border:1px solid grey;
|
||||
border-radius:4px;
|
||||
padding:2px;
|
||||
margin:0;
|
||||
min-width:54px;
|
||||
background-color:transparent;
|
||||
color:white;
|
||||
font-size:16px;
|
||||
}
|
||||
|
||||
/*******/
|
||||
|
||||
#diag {
|
||||
z-index:50;
|
||||
position:fixed;
|
||||
border:1px solid red;
|
||||
border-radius:8px;
|
||||
background-color:#222;
|
||||
top:20px;
|
||||
left:20px;
|
||||
min-width:640px;
|
||||
min-height:480px;
|
||||
overflow:hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user