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

Terminal theme => Lights Out

Browse Source
This commit is contained in:
billz 2020-03-06 18:40:47 +00:00
parent c6fe7ebe36
commit 88f0859955
6 changed files with 137 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/css/custom.css
View File

@ -1,3 +1,11 @@
/*
Theme Name: RaspAP default
Author: @billz
Author URI: https://github.com/billz
Description: Default theme for RaspAP
License: GNU General Public License v3.0
*/
body { body {
color: #212529; color: #212529;
} }

8
app/css/hackernews.css
View File

@ -1,3 +1,11 @@
/*
Theme Name: HackerNews
Author: @billz
Author URI: https://github.com/billz
Description: A theme inspired by HackerNews for RaspAP
License: GNU General Public License v3.0
*/
html * { html * {
font-family: Verdana, Geneva, sans-serif; font-family: Verdana, Geneva, sans-serif;
font-size: 0.9rem; font-size: 0.9rem;

238
app/css/terminal.css → app/css/lightsout.css
View File

@ -1,7 +1,15 @@
/*
Theme Name: Lights Out
Author: @billz
Author URI: https://github.com/billz
Description: A dark mode theme for RaspAP
License: GNU General Public License v3.0
*/
html * { html * {
font-family: Courier New, Andale Mono, monospace; font-family: Helvetica,Arial,sans-serif;
font-size: 1.0rem; font-size: 1.0rem;
color: #2bcb02; color: #afafaf;
} }
h4 { h4 {
@ -14,24 +22,25 @@ h5.card-title {
.page-header { .page-header {
padding: 0 20px; padding: 0 20px;
border-left: .01rem solid #2bcb02; border-left: .01rem solid #d2d2d2;
} }
.navbar-logo { .navbar-logo {
margin-top: 0.5em; margin-top: 0.5em;
margin-left: 0.5em; margin-left: 0.5em;
filter: brightness(70%);
} }
.sidebar-light .nav-item.active .nav-link i { .sidebar-light .nav-item.active .nav-link i {
color: #2bcb02; color: #d2d2d2;
} }
.sidebar .nav-item.active .nav-link { .sidebar .nav-item.active .nav-link {
font-weight: 700; font-weight: 400;
} }
#wrapper #content-wrapper #content { #wrapper #content-wrapper #content {
background-color: #000; background-color: #202020;
} }
/* Small devices (portait phones, up to 576px) */ /* Small devices (portait phones, up to 576px) */
@ -46,129 +55,110 @@ h5.card-title {
} }
.topbar { .topbar {
background-color: #000; background-color: #202020;
} }
.nav-tabs {
border-bottom: 1px solid #404040;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link.active,
.nav-tabs .nav-link { .nav-tabs .nav-link {
font-size: 1.0rem; font-size: 1.0rem;
} }
.nav-tabs>li.active>a, .nav-tabs .nav-link:hover {
.nav-tabs>li.active>a:focus, border-color: transparent;
.nav-tabs>li.active>a:hover,
.nav-tabs .nav-link:hover,
.input-group-addon {
color: #2bcb02;
cursor: default;
background-color: #000;
border: .01rem solid #2bcb02;
border-bottom-color: #2bcb02;
border-radius: inherit;
} }
.nav-tabs>li>a,.nav-tabs>li>a:hover {
border: .01rem solid #2bcb02;
}
.nav-tabs {
border-bottom: .01rem solid #2bcb02;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover { .navbar-default .navbar-brand:hover {
color: #2bcb02; color: #d2d2d2;
} }
.navbar-default .navbar-toggle { .navbar-default .navbar-toggle {
border-color: #2bcb02; border-color: #d2d2d2;
} }
.navbar-default .navbar-toggle .icon-bar { .navbar-default .navbar-toggle .icon-bar {
background-color: #2bcb02; background-color: #d2d2d2;
} }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover { .navbar-default .navbar-toggle:hover {
background-color: #000; background-color: #202020;
} }
.nav-tabs .nav-link.active { .nav-tabs .nav-link.active {
color: #000; color: #d2d2d2;
background-color: #2bcb02; background-color: #141414;
border-color: #2bcb02; border-color: #404040 #404040 #141414;
border-radius: inherit;
}
.sidebar-brand-icon {
filter: invert(65%) sepia(900%) saturate(536%) hue-rotate(68deg) brightness(100%) contrast(120%);
} }
a:focus, a:hover { a:focus, a:hover {
color: #2bcb02; color: #d2d2d2;
} }
.card>.card-header { .card>.card-header {
border-color: #2bcb02; border-color: #404040;
background-color: #2bcb02; background-color: #202020;
color: #000; color: #202020;
border-radius: unset; border-top-right-radius: 3px;
border-top-left-radius: 3px;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: bold; font-weight: 400;
} }
.card>.card-header .fa { .card>.card-header .fa {
color: #000; color: #202020;
} }
.card-header [class^="fa"] { .card-header [class^="fa"] {
color: #000; color: #afafaf;
font-size: 1.0rem; font-size: 1.0rem;
} }
.col { .col {
color: #000; color: #afafaf;
} }
.card, .card-body { .card, .card-body {
margin-bottom: 20px; border-color: #343434;
border: .01rem solid #2bcb02; border-radius: 3px;
border-radius: 0px; background-color: #141414;
background-color: #000;
} }
hr { hr {
border-top: .01rem solid #2bcb02; border-top: .01rem solid #d2d2d2;
} }
.page-header { .page-header {
font-size: 24pt; font-size: 24pt;
margin: 10px 0 20px; margin: 10px 0 20px;
border-bottom: .01rem solid #2bcb02; border-bottom: .01rem solid #d2d2d2;
} }
.sidebar-brand-text { .sidebar-brand-text {
text-transform: none; text-transform: none;
color: #2bcb02; color: #ac1b3d;
font-size: 2.0rem; font-size: 2.0rem;
font-weight: 500; font-weight: 500;
font-family: inherit; font-family: inherit;
} }
.sidebar-light #sidebarToggle { .sidebar-light #sidebarToggle {
background-color: #2bcb02; background-color: #202020;
border: 1px solid #eaecf4 !important
} }
.sidebar-light #sidebarToggle::after { .sidebar-light #sidebarToggle::after {
color: #000; color: #eaecf4;
} }
.sidebar-light .nav-item .nav-link:hover i { .sidebar-light .nav-item .nav-link:hover i {
color: #81ff61; color: #d2d2d2;
} }
.sidebar-light #sidebarToggle:hover { .sidebar-light #sidebarToggle:hover {
background-color: #81ff61; background-color: #202020;
} }
.sidebar.toggled .nav-item .nav-link span { .sidebar.toggled .nav-item .nav-link span {
@ -182,8 +172,8 @@ hr {
} }
.card-footer { .card-footer {
background-color: #000; background-color: #202020;
border-top: .01rem solid #2bcb02; border-top: 0px;
} }
.card>.card-header::before, .navbar-default::before { .card>.card-header::before, .navbar-default::before {
@ -194,30 +184,35 @@ hr {
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 2; z-index: 2;
background-size: 100% 2px, 3px 100%; background-size: 100% 2px, 3px 100%;
pointer-events: none; pointer-events: none;
} }
.sidebar-light, .sticky-footer { .sidebar-light, .sticky-footer {
background-color: #000; background-color: #202020;
} }
.sidebar-light .nav-item .nav-link i { .sidebar-light .nav-item .nav-link i {
color: #2bcb02; color: rgba(230, 230, 230, .3);
} }
.sidebar .nav-item .nav-link { .sidebar .nav-item .nav-link {
padding: 0.6rem; padding: 0.6rem;
padding-left: 1.2rem;
} }
.sidebar-light hr.sidebar-divider { .sidebar-light hr.sidebar-divider {
border-top: .01rem solid #2bcb02; border-top: 1px solid #404040;
padding-top: 0.5rem;
}
.sidebar .nav-item .nav-link span {
font-size: 1.0rem;
} }
.topbar .topbar-divider { .topbar .topbar-divider {
border-right: .01rem solid #2bcb02; border-right: 1px solid #404040;
} }
.info-item { .info-item {
@ -226,9 +221,9 @@ hr {
} }
.info-item-xs { .info-item-xs {
font-family: Verdana, Arial, sans-serif;
font-size: 0.7rem; font-size: 0.7rem;
margin-left: 0.3rem; line-height: 1.5em;
margin-left: 0.5rem;
} }
.info-item-wifi { .info-item-wifi {
@ -237,11 +232,11 @@ hr {
} }
.label-warning { .label-warning {
background-color: #2bcb02; background-color: #d2d2d2;
} }
span.label.label-warning { span.label.label-warning {
color: #000; color: #202020;
} }
.table>tbody>tr>td, .table>tbody>tr>td,
@ -250,29 +245,27 @@ span.label.label-warning {
.table>tfoot>tr>th, .table>tfoot>tr>th,
.table>thead>tr>td, .table>thead>tr>td,
.table>thead>tr>th { .table>thead>tr>th {
background-color: #000; background-color: #202020;
border-top: .01rem solid #000; border-top: .01rem solid #202020;
} }
.table>thead>tr>th { .table>thead>tr>th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: .01rem solid #2bcb02; border-bottom: .01rem solid #d2d2d2;
} }
[class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled { [class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled {
background-color: #000; background-color: #202020;
border-color: #2bcb02; border-color: #404040;
border-color: #2bcb02; border-radius: 3px;
border-radius: 0px; color: #d2d2d2;
color: #2bcb02;
} }
[class*="btn"]:hover { [class*="btn"]:hover {
background-color: #81ff61; border-radius: 3px;
border-color: #81ff61; color: #d2d2d2;
border-color: #81ff61; background-color: #202020;
border-radius: 0px; border-color: #afafaf;
color: #000;
} }
[class*="btn"]:hover .disabled { [class*="btn"]:hover .disabled {
@ -281,72 +274,67 @@ span.label.label-warning {
[class*="alert"] { [class*="alert"] {
border-radius: 0px; border-radius: 0px;
color: #2bcb02; color: #d2d2d2;
background-color: #000; background-color: #202020;
border-color: #2bcb02; border-color: #d2d2d2;
border: 1px dashed; border: 1px dashed;
} }
.close { .close {
font-size: 18px; font-size: 18px;
font-weight: normal; font-weight: normal;
text-shadow: 0 0px 0 #000; text-shadow: 0 0px 0 #202020;
opacity: 1; opacity: 1;
} }
.form-control, .form-control,
.form-control:focus { .form-control:focus {
color: #2bcb02; color: #d2d2d2;
background-color: #000; background-color: #202020;
border: .01rem solid #2bcb02; border: 1px solid #404040;
border-radius: 0px; border-radius: 3px;
transition: unset;
} }
.form-control:disabled, .form-control:disabled,
.form-control[readonly] { .form-control[readonly] {
background-color: #000; background-color: #202020;
opacity: 0.5; opacity: 0.5;
} }
.form-control::-webkit-input-placeholder { color: #2bcb02; } .form-control::-webkit-input-placeholder { color: #d2d2d2; }
.form-control:-moz-placeholder { color: #2bcb02; } .form-control:-moz-placeholder { color: #d2d2d2; }
.form-control::-moz-placeholder { color: #2bcb02; } .form-control::-moz-placeholder { color: #d2d2d2; }
.form-control:-ms-input-placeholder { color: #2bcb02; } .form-control:-ms-input-placeholder { color: #d2d2d2; }
.form-control::-ms-input-placeholder { color: #2bcb02; } .form-control::-ms-input-placeholder { color: #d2d2d2; }
input[type="text"]{ input[type="text"]{
color: #2bcb02 !important color: #d2d2d2 !important
} }
.progress { .progress {
background-color: #000; background-color: #202020;
border-radius: 0px; border-radius: 0px;
} }
.progress-bar { .progress-bar {
color: #000; color: #202020;
} }
.progress-bar.progress-bar-info.progress-bar-striped.active { .progress-bar.progress-bar-info.progress-bar-striped.active {
background-color: #2bcb02; background-color: #d2d2d2;
} }
.logoutput { .logoutput {
width: 100%; width: 100%;
height: 300px; height: 300px;
background-color: #000; background-color: #202020;
border-color: #2bcb02; border-color: #404040;
} }
.webconsole { .webconsole {
width: 100%; width: 100%;
height: 100%; height: 20rem;
border-color: #2bcb02; border: 1px solid #404040;
border-bottom: .01rem solid;
border-left: .01rem solid;
border-top: 0px;
border-right: .01rem solid;
} }
#console { #console {
@ -354,11 +342,7 @@ color: #2bcb02 !important
} }
tspan, rect { tspan, rect {
fill: #2bcb02; fill: #d2d2d2;
}
.service-status {
border-width: 0;
} }
span.text.service-status { span.text.service-status {
@ -366,16 +350,24 @@ span.text.service-status {
margin-top: 0.2rem; margin-top: 0.2rem;
} }
.text-muted {
font-size: 0.8rem;
}
.fas.fa-circle { .fas.fa-circle {
font-size: 0.5rem; font-size: 0.5rem;
} }
i.fas.fa-circle.service-status-up { .service-status-up {
color: #2bcb02; color: #a1ec38 !important;
} }
i.fas.fa-circle.service-status-down { .service-status-warn {
color: #2bcb02; color: #f6f044 !important;
}
.service-status-down {
color: #f80107 !important;
animation: flash 1s linear infinite; animation: flash 1s linear infinite;
} }
@keyframes flash { @keyframes flash {
@ -385,8 +377,8 @@ i.fas.fa-circle.service-status-down {
} }
pre { pre {
background-color: #000; background-color: #202020;
border: #000; border: #202020;
} }
.dhcp-static-leases { .dhcp-static-leases {
@ -420,3 +412,7 @@ canvas#divDBChartBandwidthhourly {
.table { .table {
margin-bottom: 0rem; margin-bottom: 0rem;
} }
.figure, .authors {
filter: brightness(70%) !important;
}

2
app/js/custom.js
View File

@ -356,7 +356,7 @@ function getCookie(cname) {
var themes = { var themes = {
"default": "custom.css", "default": "custom.css",
"hackernews" : "hackernews.css", "hackernews" : "hackernews.css",
"terminal" : "terminal.css", "lightsout" : "lightsout.css",
} }
// Toggles the sidebar navigation. // Toggles the sidebar navigation.

4
includes/themes.php
View File

@ -8,12 +8,12 @@ function DisplayThemeConfig()
$themes = [ $themes = [
"default" => "RaspAP (default)", "default" => "RaspAP (default)",
"hackernews" => "HackerNews", "hackernews" => "HackerNews",
"terminal" => "Terminal" "lightsout" => "Lights Out"
]; ];
$themeFiles = [ $themeFiles = [
"default" => "custom.css", "default" => "custom.css",
"hackernews" => "hackernews.css", "hackernews" => "hackernews.css",
"terminal" => "terminal.css" "lightsout" => "lightsout.css"
]; ];
$selectedTheme = array_search($_COOKIE['theme'], $themeFiles); $selectedTheme = array_search($_COOKIE['theme'], $themeFiles);

2
templates/about.php
View File

@ -11,7 +11,7 @@
<div class="card-body text-center"> <div class="card-body text-center">
<h3><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h3> <h3><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h3>
<h5><a href="https://github.com/billz/raspap-webgui/blob/master/LICENSE">GNU General Public License v3.0</a></h5> <h5><a href="https://github.com/billz/raspap-webgui/blob/master/LICENSE">GNU General Public License v3.0</a></h5>
<p><img src="app/img/authors-8bit-200px.png"></p> <p><img class="authors" src="app/img/authors-8bit-200px.png"></p>
<p>RaspAP is a co-creation of <a href="https://github.com/billz">@billz</a> and <a href="https://github.com/sirlagz">@SirLagz</a><br /> <p>RaspAP is a co-creation of <a href="https://github.com/billz">@billz</a> and <a href="https://github.com/sirlagz">@SirLagz</a><br />
with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">community</a>.</p> with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">community</a>.</p>
<p><i class="fab fa-github"></i> <a href="https://github.com/billz/raspap-webgui">https://github.com/billz/raspap-webgui</a></p> <p><i class="fab fa-github"></i> <a href="https://github.com/billz/raspap-webgui">https://github.com/billz/raspap-webgui</a></p>