main
This commit is contained in:
+129
-81
@@ -1,75 +1,77 @@
|
||||
<?php
|
||||
/**
|
||||
* WiFi-config page stylesheet.
|
||||
*
|
||||
* Emits CSS to the browser with a `Content-type: text/css` header. Used
|
||||
* exclusively by admin/wifi.php to style the WiFi configuration UI
|
||||
* (network list cards, scan results, info panels). Theme colours are
|
||||
* loaded from /etc/pistar-css.ini (operator-overridable via
|
||||
* admin/expert/edit_dashboard.php) when that file exists, otherwise
|
||||
* fall back to the built-in palette below.
|
||||
*
|
||||
* The PHP header here is a near-duplicate of css/pistar-css.php's
|
||||
* theme-load block — kept in lockstep with that file. The CSS body is
|
||||
* WiFi-specific and intentionally diverges.
|
||||
*
|
||||
* Do NOT edit this file by hand. The same long-standing typos in
|
||||
* variable names ($bannerDropShaddows, $tableHeadDropShaddow) are
|
||||
* preserved here because the CSS body interpolates them by name —
|
||||
* see the matching note in css/pistar-css.php.
|
||||
*/
|
||||
|
||||
// Output CSS, not the default text/html.
|
||||
header('Content-type: text/css');
|
||||
|
||||
// Do not edit this file, instead use the new dashboard editor in the expert section.
|
||||
// New CSS Overlay for Pi-Star, to allow setting the variables from outside this file.
|
||||
// Output CSS and not plain text
|
||||
header("Content-type: text/css");
|
||||
// Check if the config file exists
|
||||
if (file_exists('/etc/pistar-css.ini')) {
|
||||
// Load the operator's theme overrides.
|
||||
// Use the values from the file
|
||||
$piStarCssFile = '/etc/pistar-css.ini';
|
||||
if (fopen($piStarCssFile, 'r')) {
|
||||
$piStarCss = parse_ini_file($piStarCssFile, true);
|
||||
}
|
||||
|
||||
// Map parsed INI values onto the variables the CSS body interpolates.
|
||||
$backgroundPage = $piStarCss['Background']['Page']; // page background (usually off-white)
|
||||
$backgroundContent = $piStarCss['Background']['Content']; // white background in the content section
|
||||
$backgroundBanners = $piStarCss['Background']['Banners']; // the ubiquitous Pi-Star red
|
||||
$textBanners = $piStarCss['Text']['Banners']; // usually white
|
||||
$bannerDropShaddows = $piStarCss['Text']['BannersDrop']; // banner drop-shadow colour
|
||||
$tableHeadDropShaddow = $piStarCss['Tables']['HeadDrop']; // table-header drop-shadow colour
|
||||
$textContent = $piStarCss['Content']['Text']; // section title colour
|
||||
$tableRowEvenBg = $piStarCss['Tables']['BgEven']; // table row background (even)
|
||||
$tableRowOddBg = $piStarCss['Tables']['BgOdd']; // table row background (odd)
|
||||
if (fopen($piStarCssFile,'r')) { $piStarCss = parse_ini_file($piStarCssFile, true); }
|
||||
|
||||
// Set the Values from the config file
|
||||
$backgroundPage = $piStarCss['Background']['Page']; // usually off-white
|
||||
$backgroundContent = $piStarCss['Background']['Content']; // The White background in the content section
|
||||
$backgroundBanners = $piStarCss['Background']['Banners']; // The ubiquitous Pi-Star Red
|
||||
$textBanners = $piStarCss['Text']['Banners']; // Usually white
|
||||
$bannerDropShaddows = $piStarCss['Text']['BannersDrop']; // Banner drop shaddow colour
|
||||
$tableHeadDropShaddow = $piStarCss['Tables']['HeadDrop']; // Table Headder drop shaddows
|
||||
$textContent = $piStarCss['Content']['Text']; // Used for the section titles
|
||||
$tableRowEvenBg = $piStarCss['Tables']['BgEven']; // Table Row BG Colour (Even)
|
||||
$tableRowOddBg = $piStarCss['Tables']['BgOdd']; // Table Row BG Colour (Odd)
|
||||
|
||||
} else {
|
||||
// Fallback palette used when /etc/pistar-css.ini is absent.
|
||||
$backgroundPage = 'edf0f5'; // page background (usually off-white)
|
||||
$backgroundContent = 'ffffff'; // white background in the content section
|
||||
$backgroundBanners = 'dd4b39'; // the ubiquitous Pi-Star red
|
||||
$textBanners = 'ffffff'; // usually white
|
||||
$bannerDropShaddows = '303030'; // banner drop-shadow colour
|
||||
$tableHeadDropShaddow = '8b0000'; // table-header drop-shadow colour
|
||||
$textContent = '000000'; // section title colour
|
||||
$tableRowEvenBg = 'f7f7f7'; // table row background (even)
|
||||
$tableRowOddBg = 'd0d0d0'; // table row background (odd)
|
||||
// Default values
|
||||
$backgroundPage = "f3f4f8"; // soft neutral page background
|
||||
$backgroundContent = "ffffff"; // The White background in the content section
|
||||
$backgroundBanners = "4f46e5"; // Accent colour (was the red dd4b39)
|
||||
$textBanners = "ffffff"; // Usually white
|
||||
$bannerDropShaddows = "1e1b4b"; // Banner drop shaddow colour
|
||||
$tableHeadDropShaddow = "3730a3"; // Table Headder drop shaddows
|
||||
$textContent = "111827"; // Used for the section titles
|
||||
$tableRowEvenBg = "f8fafc"; // Table Row BG Colour (Even)
|
||||
$tableRowOddBg = "eef0f5"; // Table Row BG Colour (Odd)
|
||||
}
|
||||
?>
|
||||
body {
|
||||
background-color: #<?php echo $backgroundBanners; ?>;
|
||||
background-color: #<?php echo $backgroundPage; ?>;
|
||||
color: #<?php echo $textContent; ?>;
|
||||
font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.red {
|
||||
color:red;
|
||||
color:#c0392b;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.green {
|
||||
color:green;
|
||||
color:#1e8f4e;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.network {
|
||||
border:1px solid;
|
||||
border:1px solid rgba(0,0,0,0.1);
|
||||
border-radius:10px;
|
||||
text-align:left;
|
||||
padding-top:5px;
|
||||
padding-left:5px;
|
||||
background-color: #<?php echo $tableRowOddBg; ?>;
|
||||
padding:12px 14px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #<?php echo $backgroundContent; ?>;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* Per-network entry box - the JS-generated markup spells this class two
|
||||
different ways ("NetworkBoxes" from PHP, "Networkboxes" from functions.js),
|
||||
so both are styled here to look right regardless of which path renders it. */
|
||||
.NetworkBoxes, .Networkboxes {
|
||||
border:1px solid rgba(0,0,0,0.08);
|
||||
border-radius:8px;
|
||||
background-color: #<?php echo $backgroundPage; ?>;
|
||||
padding: 10px 12px 12px 12px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tableft {
|
||||
@@ -81,76 +83,122 @@ body {
|
||||
textarea {
|
||||
width:699px;
|
||||
height:499px;
|
||||
border-radius:8px;
|
||||
border:1px solid rgba(0,0,0,0.18);
|
||||
}
|
||||
|
||||
input.button {
|
||||
width:80%;
|
||||
border:1px solid;
|
||||
border:1px solid rgba(0,0,0,0.2);
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
input[type=text],input[type=password] {
|
||||
border:1px solid;
|
||||
border:1px solid rgba(0,0,0,0.2);
|
||||
border-radius:6px;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
input[type=button],input[type=submit] {
|
||||
border:1px solid;
|
||||
border-radius:5px;
|
||||
background: #<?php echo $backgroundBanners; ?>;
|
||||
color: #<?php echo $textBanners; ?>;
|
||||
border:none;
|
||||
border-radius:999px;
|
||||
padding: 9px 20px;
|
||||
font-weight: 600;
|
||||
cursor:pointer;
|
||||
box-shadow: 0 2px 6px rgba(15,23,42,0.16);
|
||||
transition: filter 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
input[type=button]:hover,input[type=submit]:hover {
|
||||
filter: brightness(1.08);
|
||||
box-shadow: 0 4px 10px rgba(15,23,42,0.22);
|
||||
}
|
||||
|
||||
.infoheader {
|
||||
width:100%;
|
||||
text-align:center;
|
||||
margin-top:10px;
|
||||
border-bottom: 1px solid;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
margin-top:14px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.infobox {
|
||||
background-color: #<?php echo $backgroundBanners; ?>;
|
||||
font-weight: bold;
|
||||
background-color: #<?php echo $backgroundContent; ?>;
|
||||
width:100%;
|
||||
border-radius:12px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
||||
padding: 16px 18px;
|
||||
margin-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.infobox form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.intinfo {
|
||||
background-color: #<?php echo $tableRowOddBg; ?>;
|
||||
background-color: #<?php echo $backgroundContent; ?>;
|
||||
color: #<?php echo $textContent; ?>;
|
||||
width: 398px;
|
||||
text-align: left;
|
||||
border-right: 1px solid;
|
||||
border-left: 1px solid;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: 12px 0 0 12px;
|
||||
border-right: none;
|
||||
float: left;
|
||||
border-bottom:1px solid;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px 10px 14px;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
.wifiinfo {
|
||||
background-color: #<?php echo $tableRowOddBg; ?>;
|
||||
background-color: #<?php echo $backgroundContent; ?>;
|
||||
color: #<?php echo $textContent; ?>;
|
||||
margin: 0 0 0 400px;
|
||||
border-right: 1px solid;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: 0 12px 12px 0;
|
||||
text-align: left;
|
||||
border-bottom:1px solid;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px 10px 14px;
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
}
|
||||
|
||||
.intheader {
|
||||
background-color: #<?php echo $backgroundBanners; ?>;
|
||||
color: #<?php echo $textBanners; ?>;
|
||||
text-align:center;
|
||||
background: transparent;
|
||||
color: #<?php echo $textContent; ?>;
|
||||
text-align:left;
|
||||
width:100%;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
padding: 12px 0 10px 0;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
border-bottom: 2px solid #<?php echo $backgroundBanners; ?>;
|
||||
}
|
||||
|
||||
.intfooter {
|
||||
background-color: #<?php echo $backgroundBanners; ?>;
|
||||
color: #<?php echo $textBanners; ?>;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
width:100%;
|
||||
border-top:1px solid;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 4px 0 4px;
|
||||
border-top:1px solid rgba(0,0,0,0.08);
|
||||
float:left;
|
||||
text-align:center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tail {
|
||||
background-color: #<?php echo $backgroundBanners; ?>;
|
||||
color: #<?php echo $backgroundBanners; ?>;
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
width:100%;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user