cdn-star/admin/wifi/styles.php

<?php
// 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')) {
    // Use the values from the file
    $piStarCssFile = '/etc/pistar-css.ini';
	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 {
    // 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 $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:#c0392b;
	font-weight:bold;
}

.green {
	color:#1e8f4e;
	font-weight:bold;
}

.network {
        border:1px solid rgba(0,0,0,0.1);
        border-radius:10px;
	text-align:left;
        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 {
	display:inline-block;
	text-align:right;
	width:120px;
}

textarea {
        width:699px;
        height:499px;
        border-radius:8px;
	border:1px solid rgba(0,0,0,0.18);
}

input.button {
        width:80%;
        border:1px solid rgba(0,0,0,0.2);
        border-radius:8px;
}

input[type=text],input[type=password] {
	border:1px solid rgba(0,0,0,0.2);
	border-radius:6px;
	padding: 5px 8px;
}

input[type=button],input[type=submit] {
	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;
	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 $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 $backgroundContent; ?>;
	color: #<?php echo $textContent; ?>;
	width: 398px;
	text-align: left;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px 0 0 12px;
	border-right: none;
	float: left;
	box-sizing: border-box;
	padding: 0 14px 10px 14px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.wifiinfo {
	background-color: #<?php echo $backgroundContent; ?>;
	color: #<?php echo $textContent; ?>;
	margin: 0 0 0 400px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 0 12px 12px 0;
	text-align: left;
	box-sizing: border-box;
	padding: 0 14px 10px 14px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.intheader {
	background: transparent;
	color: #<?php echo $textContent; ?>;
	text-align:left;
	width:100%;
	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: transparent;
	color: #6b7280;
	width:100%;
	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: transparent;
	color: transparent;
	width:100%;
	height: 1px;
}