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

4
includes/themes.php
View File

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

2
templates/about.php
View File

@@ -11,7 +11,7 @@
<div class="card-body text-center">
<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>
<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 />
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>