frodovdr/raspap-webgui
1
0
Fork 0
mirror of https://github.com/billz/raspap-webgui.git synced 2023-10-10 13:37:24 +02:00
Code Issues Releases Wiki Activity

Update terminal theme

Browse Source
This commit is contained in:
billz 2019-10-20 18:24:56 +01:00
parent 75ab458377
commit d0e5bd5692
1 changed files with 151 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
app/css/terminal.css
View File

@ -4,25 +4,43 @@ html * {
color: #33ff00; color: #33ff00;
} }
#page-wrapper { h4 {
font-size: 1.3rem;
}
h5.card-title {
font-size: 1.2rem;
}
.page-header {
padding: 0 20px; padding: 0 20px;
border-left: 1px solid #33ff00; border-left: 1px solid #33ff00;
} }
.nav>li>a { #wrapper #content-wrapper #content {
font-size: 10pt;
}
.nav>li>a:focus, .nav>li>a:hover {
background-color: #000; background-color: #000;
} }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .input-group-addon { .topbar {
background-color: #000;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link {
font-size: 1.0rem;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs .nav-link:hover,
.input-group-addon {
color: #33ff00; color: #33ff00;
cursor: default; cursor: default;
background-color: #000; background-color: #000;
border: 1px solid #33ff00; border: 1px solid #33ff00;
border-bottom-color: #33ff00; border-bottom-color: #33ff00;
border-radius: inherit;
} }
.nav-tabs>li>a,.nav-tabs>li>a:hover { .nav-tabs>li>a,.nav-tabs>li>a:hover {
@ -33,11 +51,8 @@ html * {
border-bottom: 1px solid #33ff00; border-bottom: 1px solid #33ff00;
} }
.navbar-default { .navbar-default .navbar-brand,
border-color: #33ff00; .navbar-default .navbar-brand:hover {
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
color: #33ff00; color: #33ff00;
} }
@ -49,11 +64,19 @@ html * {
background-color: #33ff00; background-color: #33ff00;
} }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { .navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color: #000; background-color: #000;
} }
.logo { .nav-tabs .nav-link.active {
color: #000;
background-color: #33ff00;
border-color: #33ff00;
border-radius: inherit;
}
.sidebar-brand-icon {
visibility: collapse; visibility: collapse;
width: 0px; width: 0px;
} }
@ -62,22 +85,30 @@ a:focus, a:hover {
color: #33ff00; color: #33ff00;
} }
.panel-primary { .card>.card-header {
border-color: #33ff00;
}
.panel-primary>.panel-heading, .panel-default>.panel-heading {
border-color: #33ff00; border-color: #33ff00;
background-color: #33ff00; background-color: #33ff00;
color: #000; color: #000;
font-size: 12pt; border-radius: unset;
font-size: 1.1rem;
font-weight: bold;
} }
.panel-primary>.panel-heading .fa { .card>.card-header .fa {
color: #000; color: #000;
} }
.panel { .card-header [class^="fa"] {
color: #000;
font-size: 1.0rem;
}
.col {
color: #000;
font-size: 1.2rem;
}
.card, .card-body {
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid #33ff00; border: 1px solid #33ff00;
border-radius: 0px; border-radius: 0px;
@ -94,16 +125,36 @@ hr {
border-bottom: 1px solid #33ff00; border-bottom: 1px solid #33ff00;
} }
#wrapper,#page-wrapper,.panel-body,.nav>li>a,.navbar-default { .sidebar-brand-text {
background-color: #000; text-transform: none;
color: #33ff00;
font-size: 2.0rem;
font-weight: 500;
font-family: inherit;
} }
.panel-footer { .sidebar-light #sidebarToggle {
background-color: #33ff00;
}
.sidebar-light #sidebarToggle::after {
color: #000;
}
.sidebar-light .nav-item .nav-link:hover i {
color: #81ff61;
}
.sidebar-light #sidebarToggle:hover {
background-color: #81ff61;
}
.card-footer {
background-color: #000; background-color: #000;
border-top: 1px solid #33ff00; border-top: 1px solid #33ff00;
} }
.panel-primary>.panel-heading::before, .navbar-default::before { .card>.card-header::before, .navbar-default::before {
content: " "; content: " ";
display: block; display: block;
position: absolute; position: absolute;
@ -117,43 +168,29 @@ hr {
pointer-events: none; pointer-events: none;
} }
.sidebar ul li a.active,.sidebar ul li a.hover { .sidebar-light, .sticky-footer {
background-color: #000; background-color: #000;
} }
.sidebar ul li { .sidebar-light .nav-item .nav-link i {
border-bottom: 1px solid #33ff00;
}
.btn-default.active, .btn-default.active:focus, .btn-default.active:hover {
color: #33ff00;
background-color: #000;
}
.btn-primary.btn-outline,.btn-warning,.btn-default,.btn-danger {
color: #33ff00;
border-color: #33ff00;
}
.btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus,.btn-primary:active,.btn-default:hover,.btn-danger:hover,.btn-default:active,.btn-default:focus {
color: #33ff00;
background-color: #000;
border-color: #33ff00;
}
.btn-primary.btn-outline:hover,.btn-success, .btn-success.btn-outline:hover, .btn-info.btn-outline:hover, .btn-warning.btn-outline:hover, .btn-danger.btn-outline:hover {
color: #33ff00; color: #33ff00;
} }
label.btn.btn-primary { .sidebar .nav-item .nav-link {
color: #33ff00; padding: 0.6rem;
} }
label.btn.btn-primary.active, label.btn.btn-warning.active { .sidebar-light hr.sidebar-divider {
background-color: #33ff00; border-top: 1px solid #33ff00;
border-color: #33ff00; }
color: #000;
.topbar .topbar-divider {
border-right: 1px solid #33ff00;
}
.info-item-wifi {
width: 6rem;
float: left;
} }
.label-warning { .label-warning {
@ -164,11 +201,12 @@ span.label.label-warning {
color: #000; color: #000;
} }
.btn.btn-primary { .table>tbody>tr>td,
border-color: #33ff00; .table>tbody>tr>th,
} .table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th { .table>thead>tr>td,
.table>thead>tr>th {
background-color: #000; background-color: #000;
border-top: 1px solid #000; border-top: 1px solid #000;
} }
@ -178,22 +216,28 @@ span.label.label-warning {
border-bottom: 1px solid #33ff00; border-bottom: 1px solid #33ff00;
} }
.btn-info, .btn-info:hover, .btn-info[disabled], .btn-danger.disabled, .btn-danger.disabled.active, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled:focus, .btn-danger.disabled:hover, .btn-danger[disabled], .btn-danger[disabled].active, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled]:focus, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger.active, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger:hover, .btn-info:hover { [class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
background-color: #000; background-color: #000;
border-color: #33ff00; border-color: #33ff00;
border-color: #33ff00;
border-radius: 0px;
color: #33ff00; color: #33ff00;
} }
.btn { [class*="btn"]:hover {
background-color: #000; background-color: #81ff61;
border-color: #81ff61;
border-color: #81ff61;
border-radius: 0px; border-radius: 0px;
color: #000;
} }
.alert { [class*="btn"]:hover .disabled {
border-radius: 0px; background-color:red;
} }
.alert-success,.alert-warning,.alert-info,.alert-dismissable,.alert-danger { [class*="alert"] {
border-radius: 0px;
color: #33ff00; color: #33ff00;
background-color: #000; background-color: #000;
border-color: #33ff00; border-color: #33ff00;
@ -207,7 +251,8 @@ span.label.label-warning {
opacity: 1; opacity: 1;
} }
.form-control, .form-control:focus { .form-control,
.form-control:focus {
color: #33ff00; color: #33ff00;
background-color: #000; background-color: #000;
border: 1px solid #33ff00; border: 1px solid #33ff00;
@ -215,8 +260,10 @@ span.label.label-warning {
transition: unset; transition: unset;
} }
input[type="text"]{ .form-control:disabled,
color: #33ff00 !important .form-control[readonly] {
background-color: #000;
opacity: 0.5;
} }
.form-control::-webkit-input-placeholder { color: #33ff00; } .form-control::-webkit-input-placeholder { color: #33ff00; }
@ -225,6 +272,10 @@ input[type="text"]{
.form-control:-ms-input-placeholder { color: #33ff00; } .form-control:-ms-input-placeholder { color: #33ff00; }
.form-control::-ms-input-placeholder { color: #33ff00; } .form-control::-ms-input-placeholder { color: #33ff00; }
input[type="text"]{
color: #33ff00 !important
}
.progress { .progress {
background-color: #000; background-color: #000;
border-radius: 0px; border-radius: 0px;
@ -264,38 +315,49 @@ input[type="text"]{
height: 500px; height: 500px;
} }
.systemtabcontent {
height: 100%;
min-height: 500px;
}
tspan, rect { tspan, rect {
fill: #33ff00; fill: #33ff00;
} }
.morris-hover.morris-default-style { .service-status {
background: none; border-width: 0;
border-radius: 0px;
border-color: #33ff00;
border: dashed 1px #33ff00;
} }
.morris-hover-point { .service-status-running {
color: #33ff00 !important; color: green;
} }
path { .service-status-stopped {
stroke: #33ff00; color: red;
animation: flash 1s linear infinite;
} }
@keyframes flash {
span.service-status-running { 50% {
color: #000; opacity: 0;
font-size: 10pt; }
text-transform: uppercase;
line-height: inherit;
} }
pre { pre {
background-color: #000; background-color: #000;
border: #000; border: #000;
} }
.dhcp-static-leases {
margin-top: 1em;
margin-bottom: 1em;
}
.dhcp-static-lease-row {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
/* change transition animation when sidebar is toggled */
#accordionSidebar.toggled {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}