beenull/raspap-webgui-mirror
1
0
Fork 0
mirror of https://github.com/RaspAP/raspap-webgui.git synced 2024-11-21 23:20:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Define custom variables, set theme color + variants

Browse source
This commit is contained in:
billz 2024-10-26 04:52:31 -07:00
parent 3004ce49cc
commit 7e1fd32edc
2 changed files with 48 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/css/all.css
View file

@ -6,8 +6,14 @@ Description: Classes shared by all themes
License: GNU General Public License v3.0 License: GNU General Public License v3.0
*/ */
:root {
--raspap-content-main: #495057;
--raspap-text-muted: #858796;
--raspap-brand-color: #2b8080;
}
a { a {
color: #2b8080; color: var(--raspap-brand-color);
text-decoration: none; text-decoration: none;
} }
@ -17,22 +23,21 @@ a {
} }
.sb-sidenav-light .sb-sidenav-menu .nav-link, .card-title, h4 { .sb-sidenav-light .sb-sidenav-menu .nav-link, .card-title, h4 {
color: #495057; color: var(--raspap-content-main);
} }
.sb-topnav.navbar-light #sidebarToggle { .sb-topnav.navbar-light #sidebarToggle {
color: #495057; color: var(--raspap-content-main);
} }
.sidebar-brand-text { .sidebar-brand-text {
text-transform: none; text-transform: none;
color: #212529;
font-size: 2.0rem; font-size: 2.0rem;
font-weight: 500; font-weight: 500;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
} }
th { th {
color: #495057 !important; color: var(--raspap-content-main) !important;
} }
.h-underlined { .h-underlined {
@ -53,7 +58,7 @@ th {
.info-item { .info-item {
text-transform: uppercase; text-transform: uppercase;
font-size: 0.7em; font-size: 0.7em;
color: #858796; color: var(--raspap-text-muted);
} }
.info-value { .info-value {
@ -130,7 +135,7 @@ th {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #858796; color: var(--raspap-text-muted);
content: "\f1ce"; /* Unicode for the circle-notch icon */ content: "\f1ce"; /* Unicode for the circle-notch icon */
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; /* Adjust as needed */ font-weight: 900; /* Adjust as needed */
@ -212,7 +217,6 @@ button.btn.btn-light.js-toggle-password {
width: 4px; width: 4px;
border-radius: 1px; border-radius: 1px;
opacity: 30%; opacity: 30%;
background: <?php echo $color; ?>;
} }
.signal-icon .signal-bar:nth-child(1) { height: 40%; } .signal-icon .signal-bar:nth-child(1) { height: 40%; }
@ -259,7 +263,7 @@ button.btn.btn-light.js-toggle-password {
} }
figcaption.figure-caption a { figcaption.figure-caption a {
color: #858796; color: var(--raspap-text-muted);
} }
button > i.fas { button > i.fas {

50
app/css/custom.php
View file

@ -13,22 +13,38 @@ License: GNU General Public License v3.0
@import url('all.css'); @import url('all.css');
:root {
--raspap-theme-color: <?php echo $color; ?>;
--raspap-theme-lighter: <?php echo lightenColor($color, 20); ?>;
--raspap-theme-darker: <?php echo darkenColor($color, 20); ?>;
}
body { body {
color: #212529; color: #212529;
background-color: #f8f9fc; background-color: #f8f9fc;
} }
a { a {
color: <?php echo $color; ?>; color: var(--raspap-theme-color);
text-decoration: none; text-decoration: none;
} }
a:focus, a:hover {
color: var(--raspap-theme-darker);
}
.sb-sidenav-light .sb-sidenav-menu .nav-link:hover { .sb-sidenav-light .sb-sidenav-menu .nav-link:hover {
color: <?php echo $color; ?>; color: var(--raspap-theme-color);
}
.sidebar-brand-text:focus,
.sidebar-brand-text:hover {
color: var(--raspap-theme-darker);
} }
.form-check-input:checked { .form-check-input:checked {
background-color: <?php echo $color; ?>; background-color: var(--raspap-theme-color);
border-color: <?php echo $color; ?>; border-color: var(--raspap-theme-color);
} }
.sidebar { .sidebar {
@ -44,13 +60,13 @@ a {
} }
.sidebar-brand-text { .sidebar-brand-text {
color: <?php echo $color; ?>; color: var(--raspap-theme-color);
} }
.card .card-header, .modal-header { .card .card-header, .modal-header {
border-color: <?php echo $color; ?>; border-color: var(--raspap-theme-color);
color: #fff; color: #fff;
background-color: <?php echo $color; ?>; background-color: var(--raspap-theme-color);
} }
.modal-header { .modal-header {
@ -58,17 +74,21 @@ a {
} }
.btn-primary { .btn-primary {
color: <?php echo $color; ?>; color: var(--raspap-theme-color);
border-color: <?php echo $color; ?>; border-color: var(--raspap-theme-color);
background-color: #fff; background-color: #fff;
} }
.btn-primary:disabled { .btn-primary:disabled {
color: <?php echo $color; ?> !important; color: var(--raspap-theme-color) !important;
border-color: <?php echo $color; ?> !important; border-color: var(--raspap-theme-color) !important;
background-color: #fff !important; background-color: #fff !important;
} }
.card-body {
color: #495057;
}
.card-footer, .modal-footer { .card-footer, .modal-footer {
background-color: #f2f1f0; background-color: #f2f1f0;
} }
@ -103,8 +123,8 @@ a.nav-link.active {
} }
.btn-primary:hover { .btn-primary:hover {
background-color: <?php echo $color; ?>; background-color: var(--raspap-theme-color);
border-color: <?php echo $color; ?>; border-color: var(--raspap-theme-color);
} }
i.fa.fa-bars { i.fa.fa-bars {
@ -133,6 +153,6 @@ pre.unstyled {
} }
.signal-icon .signal-bar { .signal-icon .signal-bar {
background: <?php echo $color; ?>; background: var(--raspap-theme-color);
} }