beenull/raspap-webgui-mirror
1
0
Fork 0
mirror of https://github.com/RaspAP/raspap-webgui.git synced 2024-11-21 15:10: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
*/
:root {
--raspap-content-main: #495057;
--raspap-text-muted: #858796;
--raspap-brand-color: #2b8080;
}
a {
color: #2b8080;
color: var(--raspap-brand-color);
text-decoration: none;
}
@ -17,22 +23,21 @@ a {
}
.sb-sidenav-light .sb-sidenav-menu .nav-link, .card-title, h4 {
color: #495057;
color: var(--raspap-content-main);
}
.sb-topnav.navbar-light #sidebarToggle {
color: #495057;
color: var(--raspap-content-main);
}
.sidebar-brand-text {
text-transform: none;
color: #212529;
font-size: 2.0rem;
font-weight: 500;
font-family: Helvetica, Arial, sans-serif;
}
th {
color: #495057 !important;
color: var(--raspap-content-main) !important;
}
.h-underlined {
@ -53,7 +58,7 @@ th {
.info-item {
text-transform: uppercase;
font-size: 0.7em;
color: #858796;
color: var(--raspap-text-muted);
}
.info-value {
@ -130,7 +135,7 @@ th {
display: flex;
justify-content: center;
align-items: center;
color: #858796;
color: var(--raspap-text-muted);
content: "\f1ce"; /* Unicode for the circle-notch icon */
font-family: "Font Awesome 5 Free";
font-weight: 900; /* Adjust as needed */
@ -212,7 +217,6 @@ button.btn.btn-light.js-toggle-password {
width: 4px;
border-radius: 1px;
opacity: 30%;
background: <?php echo $color; ?>;
}
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
@ -259,7 +263,7 @@ button.btn.btn-light.js-toggle-password {
}
figcaption.figure-caption a {
color: #858796;
color: var(--raspap-text-muted);
}
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');
:root {
--raspap-theme-color: <?php echo $color; ?>;
--raspap-theme-lighter: <?php echo lightenColor($color, 20); ?>;
--raspap-theme-darker: <?php echo darkenColor($color, 20); ?>;
}
body {
color: #212529;
background-color: #f8f9fc;
}
a {
color: <?php echo $color; ?>;
text-decoration: none;
color: var(--raspap-theme-color);
text-decoration: none;
}
a:focus, a:hover {
color: var(--raspap-theme-darker);
}
.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 {
background-color: <?php echo $color; ?>;
border-color: <?php echo $color; ?>;
background-color: var(--raspap-theme-color);
border-color: var(--raspap-theme-color);
}
.sidebar {
@ -44,13 +60,13 @@ a {
}
.sidebar-brand-text {
color: <?php echo $color; ?>;
color: var(--raspap-theme-color);
}
.card .card-header, .modal-header {
border-color: <?php echo $color; ?>;
border-color: var(--raspap-theme-color);
color: #fff;
background-color: <?php echo $color; ?>;
background-color: var(--raspap-theme-color);
}
.modal-header {
@ -58,17 +74,21 @@ a {
}
.btn-primary {
color: <?php echo $color; ?>;
border-color: <?php echo $color; ?>;
color: var(--raspap-theme-color);
border-color: var(--raspap-theme-color);
background-color: #fff;
}
.btn-primary:disabled {
color: <?php echo $color; ?> !important;
border-color: <?php echo $color; ?> !important;
color: var(--raspap-theme-color) !important;
border-color: var(--raspap-theme-color) !important;
background-color: #fff !important;
}
.card-body {
color: #495057;
}
.card-footer, .modal-footer {
background-color: #f2f1f0;
}
@ -103,8 +123,8 @@ a.nav-link.active {
}
.btn-primary:hover {
background-color: <?php echo $color; ?>;
border-color: <?php echo $color; ?>;
background-color: var(--raspap-theme-color);
border-color: var(--raspap-theme-color);
}
i.fa.fa-bars {
@ -133,6 +153,6 @@ pre.unstyled {
}
.signal-icon .signal-bar {
background: <?php echo $color; ?>;
background: var(--raspap-theme-color);
}