/* Mobile-First CSS for Innerscene Controller */
/* ====== RESET & BASE STYLES ====== */
html {
/* Prevent iOS edge swipe by fixing viewport */
overscroll-behavior: none;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
html,
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
font-size: 17px;
line-height: 1.47;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: #f2f2f7;
color: #000;
min-height: 100vh;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
/* Make body scrollable vertically */
position: relative;
/* Prevent iOS edge swipe navigation */
touch-action: pan-y pinch-zoom;
/* Allow vertical pan and zoom only */
overscroll-behavior-x: contain;
/* Contain horizontal overscroll */
-webkit-overflow-scrolling: touch;
/* Smooth scrolling on iOS */
}
/* ====== iOS-STYLE SCROLLBAR ====== */
/* Custom scrollbar that mimics iOS behavior */
::-webkit-scrollbar {
width: 6px;
/* Thin scrollbar like iOS */
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
/* No visible track */
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
/* Initially invisible (black with 0 opacity) */
border-radius: 3px;
transition: background-color 0.2s ease;
}
/* Class to show scrollbar when scrolling */
.scrolling ::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.5);
/* Thin white line when visible */
}
/* Dark mode scrollbar */
.theme-dark.scrolling ::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
/* Slightly dimmer in dark mode */
}
/* Firefox scrollbar support */
* {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.scrolling * {
scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}
.theme-dark.scrolling * {
scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
/* ====== CORE APP LAYOUT ====== */
/* ====== DARK GRADIENT BACKGROUND ====== */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: #f2f2f7;
}
/* Dark mode body background */
body.theme-dark {
background: #000000;
color: #ffffff;
}
#app {
flex: 1 1 auto;
position: relative;
overflow-x: hidden;
overflow-y: auto;
scroll-behavior: smooth;
padding-top: 20px !important;
/* minimal space for pages without nav headers - !important prevents flash */
width: 100%;
max-width: none;
/* Allow full width, content constraints handled by main_container_div */
}
/* Banner is now inline, no extra app padding needed */
.page {
display: none;
animation: fadeIn 0.2s ease;
/* Ensure all pages clear the fixed tab bar (60px) plus iOS captive-portal chrome (~50-70px banners) */
padding-bottom: 160px;
padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
}
.page.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ====== PAGE HEADERS ====== */
/* ====== TAB BAR ====== */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: calc(60px + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 0.5px solid #e5e5ea;
display: flex;
align-items: center;
z-index: 1000;
justify-content: space-around;
z-index: 999;
}
.tab-button {
flex: 1;
height: 100%;
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: inherit;
font-size: 11px;
color: #8e8e93;
letter-spacing: -0.2px;
padding-bottom: env(safe-area-inset-bottom, 0px);
transition: color 0.15s ease;
}
.tab-button .tab-icon {
font-size: 22px;
line-height: 1;
margin-bottom: 2px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.tab-button .tab-icon svg {
width: 24px;
height: 24px;
}
.tab-button.active {
background: rgba(0, 0, 0, 0.15);
color: #ffffff;
border-radius: 8px;
}
.tab-button:active {
background: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
.tab-bar {
background: rgba(28, 28, 30, 0.8);
border-top: 0.5px solid #38383a;
}
.tab-button {
color: #c7c7cc;
}
.tab-button.active {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border-radius: 8px;
}
}
/* ====== MOBILE APP LAYOUT ====== */
#main_container_div {
margin: 0;
width: 100%;
box-sizing: border-box;
padding: 0;
transition: margin-top 0.3s ease;
}
/* Ensure consistent horizontal padding for navigation pages */
.page.has-nav-header #main_container_div>.settings-section {
margin-left: 20px;
margin-right: 20px;
}
/* ====== HEADER SECTION ====== */
.topContainerOuter {
position: relative;
background: rgba(248, 248, 248, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 100;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
pointer-events: auto;
/* Ensure header is clickable */
}
.topContainer {
display: flex;
align-items: center;
justify-content: space-between;
/* logo left, icons right */
padding: 8px 20px 12px 20px;
/* Increased horizontal padding to 20px */
margin: 0;
min-height: 44px;
padding-top: calc(8px + env(safe-area-inset-top, 0px));
/* Subtle vertical gradient and contrasting borders */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.02));
border-top: 0.5px solid rgba(255, 255, 255, 0.3);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
}
.topContainerLeft {
display: flex;
align-items: center;
justify-content: flex-start;
/* logo aligned left */
padding-left: 4px;
/* small amount of padding from left edge */
pointer-events: none;
/* logo non-interactive */
}
/* visually hide empty spacer element if present */
.topContainerLeft:empty {
display: none;
}
#topbar_clock {
flex: 1;
text-align: center;
font-size: 13px;
font-weight: 500;
opacity: 0.55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.02em;
cursor: pointer;
color: #333;
min-width: 0;
}
@keyframes setting-highlight {
0%, 20% { background-color: rgba(0,122,255,0.35); }
100% { background-color: transparent; }
}
@media (prefers-color-scheme: dark) {
#topbar_clock { color: #ddd; }
}
.theme-dark #topbar_clock { color: #ddd; }
.theme-light #topbar_clock { color: #333; }
.topContainerRight {
display: flex;
align-items: center;
gap: 8px;
justify-content: flex-end;
}
#logo_image {
height: 40px;
width: auto;
max-width: 120px;
max-height: 40px;
min-height: 32px;
pointer-events: auto;
/* Allow clicks on logo to show device info */
cursor: pointer;
object-fit: contain;
/* Prevent layout shift during load */
display: inline-block;
/* Smooth transition if size changes */
transition: none;
}
/* Ensure logo doesn't flash large on load */
#logo_image:not([src]),
#logo_image[src=""] {
visibility: hidden;
}
/* Prevent SVG from displaying at intrinsic size before CSS loads */
img[src$=".svg"] {
max-width: 100%;
height: auto;
}
/* Specific containment for logos */
.header-left img,
.device-info-logo img {
max-height: 60px;
max-width: 60px;
}
/* Wireless Group Badge */
.wireless-group-badge {
background: rgba(10, 132, 255, 0.1);
border: 1px solid rgba(10, 132, 255, 0.3);
border-radius: 12px;
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
color: #0a84ff;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
margin-right: 8px;
pointer-events: auto;
}
.wireless-group-badge:hover {
background: rgba(10, 132, 255, 0.2);
border-color: rgba(10, 132, 255, 0.5);
transform: scale(1.05);
}
.wireless-group-badge:active {
transform: scale(0.95);
}
/* Wireless Group Configuration Page - now uses dropdown */
/* Peer discovery list styling */
#peers_list .setting-row {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
opacity: 0;
animation: fadeInPeer 0.3s ease-in-out forwards;
}
#peers_list .setting-row:last-child {
border-bottom: none;
}
@keyframes fadeInPeer {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Empty state for peers */
#peers_list:empty::before {
content: "Scanning for network devices...";
display: block;
text-align: center;
color: var(--secondary-text-color, #98989f);
padding: 20px;
font-style: italic;
}
/* Peer list header styling */
.peer-header {
padding: 8px 16px;
background: #f8f8f8;
border-bottom: 1px solid #e5e5ea;
font-size: 12px;
color: #8e8e93;
text-transform: uppercase;
font-weight: 600;
align-items: center;
gap: 12px;
}
/* Wireless Group Message Styling - Simple Dark Colors */
.wireless-group-message {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
padding: 14px 16px;
border-radius: 10px;
margin: 8px 0;
border: none;
letter-spacing: -0.08px;
position: relative;
background: var(--ios-tertiary-background, #f2f2f7);
color: var(--ios-secondary-label, #8e8e93);
}
.wireless-group-message::before {
content: '';
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
}
.wireless-group-message.has-icon::before {
display: none;
}
.wireless-group-message.suggestion {
background: var(--ios-system-blue-background, rgba(0, 122, 255, 0.12));
color: var(--ios-system-blue, #007aff);
padding-left: 16px;
}
.wireless-group-message.warning {
background: var(--ios-system-orange-background, rgba(255, 149, 0, 0.12));
color: var(--ios-system-orange, #ff9500);
padding-left: 16px;
}
.wireless-group-message.error {
background: var(--ios-system-red-background, rgba(255, 59, 48, 0.12));
color: var(--ios-system-red, #ff3b30);
padding-left: 16px;
}
.wireless-group-message.success {
background: var(--ios-system-green-background, rgba(52, 199, 89, 0.12));
color: var(--ios-system-green, #34c759);
padding-left: 16px;
}
/* Channel Scan Styles */
.scan-progress-container {
width: 100%;
height: 8px;
background: var(--ios-tertiary-background, #f2f2f7);
border-radius: 4px;
margin: 12px 0;
overflow: hidden;
}
.scan-progress-bar {
height: 100%;
background: var(--ios-system-blue, #007aff);
border-radius: 4px;
width: 0%;
transition: width 0.3s ease;
}
.scan-result-row {
padding: 12px 16px;
border-bottom: 0.5px solid var(--ios-separator-color, #c6c6c8);
display: flex;
align-items: center;
justify-content: space-between;
}
.scan-result-info {
flex: 1;
}
.scan-result-mac {
font-size: 15px;
font-weight: 500;
color: var(--ios-label-color, #000000);
}
.scan-result-details {
font-size: 13px;
color: var(--ios-secondary-label, #8e8e93);
margin-top: 2px;
}
.scan-result-rssi {
font-size: 13px;
color: var(--ios-secondary-label, #8e8e93);
min-width: 50px;
text-align: right;
}
/* Enhanced peer row layout with group column and flash button */
.peer-row {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px !important;
min-height: 60px;
}
/* Device info button rows - display values on the right like other elements */
#device_timezone_button .setting-content,
#device_wireless_group_button .setting-content {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Make IP address row match device info button row behavior */
#network_address_display_row .setting-content {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Ensure proper spacing for chevrons in device info button rows */
#device_timezone_button .setting-chevron,
#device_wireless_group_button .setting-chevron {
margin-left: 8px;
color: #c7c7cc;
font-size: 18px;
font-weight: 400;
}
.peer-row .setting-icon {
flex-shrink: 0;
width: 30px;
display: flex;
justify-content: center;
}
.peer-row .setting-content {
flex: 1;
min-width: 160px;
/* Increased width to prevent MAC address truncation */
overflow: hidden;
}
.peer-row .setting-label {
white-space: nowrap;
overflow: visible;
font-family: monospace;
/* Better for MAC addresses */
font-size: 14px;
}
.peer-signal-column {
width: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.peer-actions {
flex-shrink: 0;
}
.peer-flash-button {
background: #2c2c2e;
border: none;
border-radius: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
color: #ffcc02;
}
.peer-flash-button:hover {
background: #3a3a3c;
transform: scale(1.05);
}
.peer-flash-button:active {
transform: scale(0.95);
}
.peer-flash-button.flashing {
background: #ff9500;
animation: flash-pulse 0.5s ease-in-out infinite alternate;
}
.peer-flash-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.flash-icon {
font-size: 18px;
}
@keyframes flash-pulse {
0% {
background: #ff9500;
transform: scale(1);
}
100% {
background: #ffb84d;
transform: scale(1.1);
}
}
/* Dark theme styles for wireless group components */
@media (prefers-color-scheme: dark) {
.wireless-group-badge {
background: rgba(10, 132, 255, 0.15);
border-color: rgba(10, 132, 255, 0.4);
color: #64b5f6;
}
.peer-flash-button {
background: #1c1c1e;
color: #ffcc02;
}
.peer-flash-button:hover {
background: #2c2c2e;
}
.peer-flash-button.flashing {
background: #ff9f0a;
}
.peer-header {
background: #1c1c1e;
border-bottom: 1px solid #3a3a3c;
color: #98989d;
}
/* Dark mode message styling - Simple Dark Colors */
.wireless-group-message {
background: #2c2c2e;
color: #98989d;
box-shadow: none;
}
.wireless-group-message.suggestion {
background: rgba(10, 132, 255, 0.18);
color: #0a84ff;
}
.wireless-group-message.warning {
background: rgba(255, 159, 10, 0.18);
color: #ff9f0a;
}
.wireless-group-message.error {
background: rgba(255, 69, 58, 0.18);
color: #ff453a;
}
.wireless-group-message.success {
background: rgba(48, 209, 88, 0.18);
color: #30d158;
}
.scan-progress-container {
background: #2c2c2e;
}
.scan-progress-bar {
background: #0a84ff;
}
.scan-result-row {
border-bottom-color: #38383a;
}
.scan-result-mac {
color: #ffffff;
}
.scan-result-details,
.scan-result-rssi {
color: #98989d;
}
@keyframes flash-pulse {
0% {
background: #ff9f0a;
transform: scale(1);
}
100% {
background: #ffcc5a;
transform: scale(1.1);
}
}
.wireless-group-badge:hover {
background: rgba(10, 132, 255, 0.25);
border-color: rgba(10, 132, 255, 0.6);
}
}
.theme-dark .wireless-group-badge {
background: rgba(10, 132, 255, 0.15) !important;
border-color: rgba(10, 132, 255, 0.4) !important;
color: #64b5f6 !important;
}
.theme-dark .wireless-group-badge:hover {
background: rgba(10, 132, 255, 0.25) !important;
border-color: rgba(10, 132, 255, 0.6) !important;
}
/* ====== STATUS ICONS ====== */
.topBut {
background-color: transparent;
color: #007aff;
width: 44px;
height: 44px;
padding: 0;
border-radius: 22px;
border: none;
font-size: 16px;
display: none;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
position: relative;
z-index: 10000;
/* Ensure buttons are clickable */
pointer-events: auto;
cursor: pointer;
}
.topBut:hover {
background-color: rgba(0, 122, 255, 0.1);
}
/* Multi-client paused indicator */
#MultiClientPausedIcon {
color: #ff9f0a;
}
#MultiClientPausedIcon svg {
animation: mc-pause-pulse 2s ease-in-out infinite;
}
@keyframes mc-pause-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
#MessageIcon {
display: flex;
position: relative;
}
#IdentifyIcon {
display: flex;
/* Show flash icon by default */
}
/* Identify button pressed animation */
.identify-pressed {
animation: identifyFlash 0.6s ease-out;
}
@keyframes identifyFlash {
0% {
transform: scale(1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(255, 255, 0, 0);
}
15% {
transform: scale(1.1);
background-color: rgba(255, 255, 0, 0.3);
box-shadow: 0 0 15px rgba(255, 255, 0, 0.6);
}
30% {
transform: scale(1.05);
background-color: rgba(255, 255, 0, 0.2);
box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
}
50% {
transform: scale(1.08);
background-color: rgba(255, 255, 0, 0.1);
box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}
100% {
transform: scale(1);
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(255, 255, 0, 0);
}
}
.message-badge {
position: absolute;
top: -4px;
right: -4px;
background-color: #ff3b30;
color: white;
border-radius: 10px;
padding: 2px 7px;
font-size: 12px;
min-width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 600;
border: 1.5px solid #f8f8f8;
}
.message-badge.has-errors {
animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.7); }
50% { box-shadow: 0 0 8px 4px rgba(255,59,48,0.4); }
}
.skysync-discovery-badge {
position: absolute;
top: 8px;
right: 36px;
background: #007aff;
color: white;
border-radius: 10px;
padding: 2px 7px;
font-size: 11px;
font-weight: 600;
border: 1.5px solid var(--bg-primary, #f8f8f8);
}
/* ====== WEATHER ICON ====== */
.weather-icon-btn {
font-size: 20px;
cursor: pointer;
}
.weather-icon-btn:hover {
transform: scale(1.1);
}
.weather-icon-display {
font-size: 20px;
line-height: 1;
}
/* ====== HOME SCREEN NOTICE BANNERS ====== */
/* Shared style for password reminder, developer mode, secondary fixture notices */
.home-notice {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
margin: 6px 16px;
border-radius: 10px;
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary, #8e8e93);
}
.home-notice--password { background: rgba(255, 204, 0, 0.10); }
.home-notice--dev { background: rgba(118, 118, 128, 0.12); cursor: pointer; }
.home-notice--warning { background: rgba(255, 149, 0, 0.12); }
.home-notice--info { background: rgba(0, 122, 255, 0.12); }
.home-notice-icon { font-size: 15px; flex-shrink: 0; }
.home-notice-text { flex: 1; min-width: 0; }
.home-notice-text a {
color: inherit;
text-decoration: underline;
font-weight: 600;
cursor: pointer;
}
.home-notice-dismiss {
background: none;
border: none;
color: var(--text-secondary, #8e8e93);
font-size: 18px;
cursor: pointer;
padding: 2px 4px;
opacity: 0.6;
flex-shrink: 0;
line-height: 1;
}
.home-notice-dismiss:hover { opacity: 1; }
.home-notice-chevron {
color: var(--text-secondary, #8e8e93);
font-size: 15px;
opacity: 0.5;
flex-shrink: 0;
}
/* ====== PASSWORD CONFIGURATION SCREEN ====== */
.password-input-container {
position: relative;
display: flex;
align-items: center;
}
/* Password input fields on device password screen - slightly wider */
#new_password_input,
#confirm_password_input {
max-width: 150px !important;
/* Increased from 120px for ~3 extra characters */
}
.password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 16px;
color: #8e8e93;
user-select: none;
z-index: 1;
padding: 4px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.password-toggle:hover {
background-color: rgba(142, 142, 147, 0.1);
}
.theme-dark .password-toggle {
color: #8e8e93;
}
.theme-dark .password-toggle:hover {
background-color: rgba(142, 142, 147, 0.2);
}
.info-box {
background: rgba(255, 149, 0, 0.1);
border: 1px solid rgba(255, 149, 0, 0.3);
border-radius: 8px;
padding: 16px;
margin: 8px 0;
}
.info-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.info-icon {
font-size: 18px;
flex-shrink: 0;
}
.info-title {
font-size: 16px;
font-weight: 600;
color: #ffffff;
}
.info-content {
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
}
.info-content p {
margin: 0 0 12px 0;
}
.info-content p:last-child {
margin-bottom: 0;
}
.info-content ol {
margin: 8px 0;
padding-left: 20px;
}
.info-content li {
margin: 4px 0;
}
.info-content strong {
color: #ffffff;
font-weight: 600;
}
.theme-dark .info-box {
background: rgba(255, 149, 0, 0.15);
border-color: rgba(255, 149, 0, 0.4);
}
/* Tablet layout adjustments */
@media (min-width: 481px) and (max-width: 767px) {
.ios-nav-title {
max-width: calc(100% - 140px);
/* Medium spacing for tablets */
margin-left: 70px;
margin-right: 70px;
}
}
/* ====== IOS NATIVE SETTINGS LAYOUT ====== */
/* Schedule Graphs Styling */
#scheduleGraphsContainer {
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0;
}
.graph-title {
font-size: 18px;
font-weight: 600;
color: #000;
margin-bottom: 16px;
text-align: center;
letter-spacing: -0.2px;
}
/* Schedule graph components will use their own internal styling */
schedule-graph {
display: block;
margin: 0 auto 8px auto;
width: 100%;
max-width: 400px;
border: 1px solid #e5e5ea;
border-radius: 12px;
overflow: hidden;
--text-color: #6d6d70;
}
/* Remove extra spacing between graphs */
schedule-graph:first-child {
margin-bottom: 0;
}
schedule-graph:last-child {
margin-top: 0;
margin-bottom: 16px;
}
/* Dark mode border for schedule graphs */
@media (prefers-color-scheme: dark) {
schedule-graph {
border: 1px solid #3a3a3c;
}
}
/* ====== SCHEDULE VIEW MODES ====== */
.schedule-mode-toggle {
display: flex;
background: rgba(118, 118, 128, 0.12);
border-radius: 8px;
padding: 2px;
gap: 2px;
}
.mode-toggle-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
border: none;
border-radius: 6px;
background: transparent;
color: #8e8e93;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.mode-toggle-btn.active {
background: #fff;
color: #000;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mode-toggle-btn:hover:not(.active) {
background: rgba(118, 118, 128, 0.08);
}
.mode-icon {
font-size: 16px;
}
.mode-label {
font-size: 14px;
}
.schedule-view {
transition: opacity 0.3s ease;
}
/* ====== SCHEDULE LIST VIEW ====== */
.schedule-list-section {
margin-bottom: 32px;
}
.list-section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px 12px;
border-bottom: 0.5px solid rgba(60, 60, 67, 0.29);
}
.list-section-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #000;
}
.add-point-btn {
background: #007aff;
color: white;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.add-point-btn:hover {
background: #0056b3;
transform: translateY(-1px);
}
.add-point-btn:active {
transform: translateY(0);
}
/* ====== INLINE ADD POINT BUTTONS ====== */
.add-point-divider {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 8px 0;
background: #fff;
}
.add-point-line {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 1px;
background: rgba(60, 60, 67, 0.18);
z-index: 1;
}
.add-point-btn-inline {
position: relative;
z-index: 2;
width: 24px;
height: 24px;
border-radius: 50%;
background: #000;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.add-point-btn-inline:hover {
background: #333;
transform: scale(1.1);
}
.add-point-btn-inline:active {
transform: scale(0.95);
}
.add-point-plus {
color: white;
font-size: 14px;
font-weight: 600;
line-height: 1;
pointer-events: none;
}
.add-point-fallback-btn {
background: #000;
color: white;
border: none;
border-radius: 20px;
padding: 12px 24px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.add-point-fallback-btn:hover {
background: #333;
transform: translateY(-1px);
}
.add-point-fallback-btn:active {
transform: translateY(0);
}
.schedule-points-list {
background: #fff;
}
.schedule-point-item {
border-bottom: 0.5px solid rgba(60, 60, 67, 0.29);
background: #fff;
border-radius: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.schedule-point-item:last-child {
border-bottom: none;
}
/* Compact Header Styles */
.point-header {
padding: 16px 20px;
transition: background-color 0.2s ease;
user-select: none;
display: flex;
align-items: center;
}
.point-header-content {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
cursor: pointer;
}
.point-header-content:hover {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 8px;
margin: -4px;
padding: 4px;
}
.point-header-actions {
display: flex;
align-items: center;
padding-right: 12px;
}
.point-time-compact {
font-size: 16px;
font-weight: 600;
color: #000;
flex: 0 0 100px;
}
.point-time-compact.point-time-clickable {
color: #007aff !important;
cursor: pointer !important;
text-decoration: underline !important;
transition: opacity 0.2s ease;
}
.point-time-compact.point-time-clickable:hover {
opacity: 0.7;
}
.point-value-compact {
font-size: 16px;
font-weight: 500;
color: #8e8e93;
flex: 1;
text-align: center;
}
.point-expand-arrow {
font-size: 18px;
color: #c7c7cc;
transition: transform 0.3s ease;
flex: 0 0 20px;
text-align: right;
}
.point-expand-arrow.expanded {
transform: rotate(90deg);
}
/* Expandable Details Styles */
.point-details {
padding: 0 16px 16px 16px;
background: rgba(248, 248, 248, 0.8);
border-top: 1px solid rgba(60, 60, 67, 0.18);
}
.point-detail-section {
margin-bottom: 12px;
padding: 12px;
background: rgba(248, 248, 248, 0.5);
border-radius: 8px;
border: 1px solid rgba(60, 60, 67, 0.12);
}
.point-detail-section:last-child {
margin-bottom: 0;
}
.point-detail-label {
font-size: 13px;
font-weight: 600;
color: #000;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.point-time-controls {
display: flex;
align-items: center;
gap: 12px;
}
.point-time-display-edit {
font-size: 16px;
color: #007aff;
cursor: pointer;
padding: 8px 12px;
border-radius: 8px;
background: rgba(0, 122, 255, 0.1);
border: 1px solid rgba(0, 122, 255, 0.2);
transition: all 0.2s ease;
}
.point-time-display-edit:hover {
background: rgba(0, 122, 255, 0.15);
}
.point-time-display-readonly {
font-size: 16px;
color: #8e8e93;
padding: 8px 12px;
border-radius: 8px;
background: rgba(142, 142, 147, 0.1);
border: 1px solid rgba(142, 142, 147, 0.2);
cursor: not-allowed;
opacity: 0.7;
}
.time-mode-indicator {
font-size: 11px;
color: #8e8e93;
font-weight: 500;
margin-top: 4px;
padding: 3px 6px;
background: rgba(142, 142, 147, 0.08);
border-radius: 4px;
display: inline-block;
}
.point-value-controls {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.point-time-controls {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
}
/* Legacy expanded delete button styles - no longer used */
/* Compact delete button */
.point-delete-compact {
background: none;
border: none;
color: #ff3b30;
font-size: 18px;
font-weight: bold;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;
line-height: 1;
min-width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.point-delete-compact:hover {
background: rgba(255, 59, 48, 0.1);
transform: scale(1.1);
}
.point-delete-compact:active {
transform: scale(0.9);
}
/* Add point dividers and buttons */
.add-point-divider {
position: relative;
height: 1px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.add-point-line {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(60, 60, 67, 0.29);
}
.add-point-btn-inline {
background: #007aff;
border: 2px solid #fff;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.add-point-btn-inline:hover {
background: #0056cc;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.add-point-btn-inline:active {
transform: scale(0.95);
}
.add-point-plus {
color: white;
font-size: 16px;
font-weight: bold;
line-height: 1;
}
.add-point-fallback-btn {
background: #007aff;
color: white;
border: none;
border-radius: 8px;
padding: 12px 20px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.add-point-fallback-btn:hover {
background: #0056cc;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
}
.add-point-fallback-btn:active {
transform: translateY(0);
}
.point-time-input {
padding: 8px 12px;
border: 1px solid rgba(60, 60, 67, 0.29);
border-radius: 8px;
font-size: 16px;
background: #fff;
min-width: 120px;
}
.point-value-input {
padding: 8px 12px;
border: 1px solid rgba(60, 60, 67, 0.29);
border-radius: 8px;
font-size: 16px;
background: #fff;
width: 80px;
}
.point-value-slider {
flex: 1;
margin: 0 12px;
}
.point-value-display {
min-width: 60px;
text-align: right;
font-weight: 500;
color: #8e8e93;
font-size: 14px;
}
/* Motion sensor slider rows — re-add horizontal padding for label and value */
.setting-row.slider-row .setting-label.motion-param-label {
padding: 0 16px;
}
/* Motion sensor parameter value row (below slider) */
.motion-param-value-row {
display: flex;
align-items: center;
gap: 6px;
align-self: flex-end;
margin-top: 2px;
padding: 0 16px;
}
.motion-param-input {
padding: 6px 10px;
border: 1px solid #e5e5ea;
border-radius: 8px;
font-size: 16px;
background: #ffffff;
color: #000000;
width: 72px;
text-align: right;
}
.motion-param-input:focus {
outline: none;
border-color: #007aff;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}
.motion-param-unit {
font-size: 15px;
color: #8e8e93;
min-width: 14px;
}
.theme-dark .motion-param-input {
background: #2c2c2e;
color: #ffffff;
border-color: #48484a;
}
.theme-dark .motion-param-input:focus {
border-color: #0a84ff;
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.3);
}
/* Legacy styles - now handled by accordion structure */
.sunrise-offset-toggle {
flex: 0 0 auto;
font-size: 12px;
color: #007aff;
cursor: pointer;
user-select: none;
padding: 4px 8px;
background: rgba(0, 122, 255, 0.1);
border-radius: 6px;
border: 1px solid rgba(0, 122, 255, 0.2);
transition: all 0.2s ease;
margin-top: 3px;
}
.sunrise-offset-toggle:hover {
background: rgba(0, 122, 255, 0.15);
transform: scale(1.05);
}
/* iOS Settings Style Sections */
.settings-section {
background: #fff;
border-radius: 0;
margin-bottom: 16px;
overflow: hidden;
box-shadow: none;
border-top: 0.5px solid #e5e5ea;
border-bottom: 0.5px solid #e5e5ea;
}
/* Add extra spacing for different section types */
.settings-section:first-of-type {
margin-top: 0;
border-top: none;
}
.settings-section:last-of-type {
margin-bottom: 32px;
/* Increased bottom margin for last section */
border-bottom: none;
}
/* divider between button rows */
.setting-row.button-row:not(:last-child)::after {
content: "";
position: absolute;
left: 16px;
right: 0;
bottom: 0;
height: 0.5px;
background: #e5e5ea;
transform: scaleY(0.5);
/* render crisp on retina */
}
.setting-row {
display: flex;
align-items: center;
padding: 8px 16px;
min-height: 44px;
position: relative;
}
.setting-row:not(:last-child)::after {
content: "";
position: absolute;
left: 16px;
right: 0;
bottom: 0;
height: 0.5px;
background: #e5e5ea;
transform: scaleY(0.5);
/* render crisp on retina */
}
.setting-row.button-row {
cursor: pointer;
transition: background-color 0.15s ease;
}
.setting-row.button-row:active {
background-color: #d1d1d6;
transition: background-color 0.1s ease;
}
.setting-row.button-row:hover {
background-color: #f2f2f7;
}
/* Colored CTA button rows — preserve inline background on hover/active */
.setting-row.button-row[style*="background"]:hover {
filter: brightness(1.15);
background-color: unset;
}
.setting-row.button-row[style*="background"]:active {
filter: brightness(0.85);
background-color: unset;
}
.setting-row.button-row.active {
background-color: #48484a;
color: #fff;
}
.setting-row.button-row.active .setting-icon {
color: #fff;
}
.setting-row.button-row.active .setting-label {
color: #fff;
font-weight: 500;
}
.setting-row.button-row.active .setting-subtitle {
color: rgba(255, 255, 255, 0.8);
}
.setting-row.button-row.active .setting-arrow {
color: rgba(255, 255, 255, 0.6);
}
/* Demo mode active state */
.setting-row.button-row.demo-active {
background-color: rgba(0, 255, 0, 0.08) !important;
border-left: 3px solid #00cc00;
padding-left: 13px;
/* Adjust for border */
}
.setting-row.button-row.demo-active .setting-icon {
color: #00cc00 !important;
}
.setting-row.button-row.demo-active .setting-label {
color: #00cc00 !important;
font-weight: 600;
}
.setting-row.button-row.demo-active .setting-subtitle {
color: rgba(0, 204, 0, 0.8);
}
/* Add New Key Button - prevent text clipping */
#add_new_key_button .setting-label {
max-width: none;
overflow: visible;
text-overflow: none;
}
/* Reload All Values Button - prevent text clipping */
#reload_all_values_button .setting-label {
max-width: none;
overflow: visible;
text-overflow: none;
}
/* iOS-style dark theme colors for Add New Key and Reload All Values buttons - FORCE OVERRIDE */
#add_new_key_button,
#reload_all_values_button {
background: #1c1c1e !important;
background-color: #1c1c1e !important;
background-image: none !important;
border: 1px solid #2c2c2e !important;
border-color: #2c2c2e !important;
color: #ffffff !important;
box-shadow: none !important;
}
#add_new_key_button:hover,
#reload_all_values_button:hover {
background: #2c2c2e !important;
background-color: #2c2c2e !important;
background-image: none !important;
border-color: #3a3a3c !important;
box-shadow: none !important;
}
#add_new_key_button:active,
#reload_all_values_button:active {
background: #3a3a3c !important;
background-color: #3a3a3c !important;
background-image: none !important;
border-color: #48484a !important;
box-shadow: none !important;
}
#add_new_key_button .setting-icon,
#reload_all_values_button .setting-icon {
color: #ffffff !important;
}
#add_new_key_button .setting-label,
#reload_all_values_button .setting-label {
color: #ffffff !important;
font-weight: 500 !important;
}
#add_new_key_button .setting-subtitle,
#reload_all_values_button .setting-subtitle {
color: rgba(255, 255, 255, 0.7) !important;
}
.setting-row.slider-row {
padding: 16px 0;
/* Remove horizontal padding for full-width sliders */
flex-direction: column;
align-items: stretch;
min-height: auto;
width: 100%;
/* Ensure full width */
display: block;
/* Fallback for older WebView */
}
.slider-row > .home-card-gear {
position: absolute;
top: 16px;
right: 16px;
}
/* Schedule header: title + gear inline */
.schedule-header-row {
display: flex;
align-items: center;
}
.schedule-header-row .setting-label {
flex: 1;
}
.schedule-header-row .idle-resume-status {
flex-shrink: 0;
}
.schedule-header-row .home-card-gear {
flex-shrink: 0;
padding: 4px;
margin-left: auto;
}
/* Schedule preview — narrower padding than slider (no thumb overhang to account for) */
.schedule-preview-full {
width: 100%;
padding: 0 16px !important;
margin: 8px 0 4px 0;
}
/* Loading placeholder — covers the graph until it draws */
.schedule-preview-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary, #8e8e93);
font-size: 13px;
border-radius: 8px;
background: var(--card-bg-secondary, rgba(0,0,0,0.03));
z-index: 5;
}
@media (prefers-color-scheme: dark) {
.schedule-preview-loading {
background: rgba(255,255,255,0.04);
}
}
.theme-dark .schedule-preview-loading {
background: rgba(255,255,255,0.04) !important;
}
/* Fix for older WebView - ensure setting-content takes full width */
.setting-row.slider-row .setting-content {
width: 100%;
display: block;
margin: 0;
padding: 0;
}
/* Fix for older WebView - ensure setting-header takes full width */
.setting-row.slider-row .setting-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
/* Fallback for older WebView */
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Fix for older WebView - ensure button rows with subtitles display vertically */
.setting-row.button-row:has(.setting-subtitle) .setting-content {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
}
/* Button rows without subtitles display horizontally */
.setting-row.button-row:not(:has(.setting-subtitle)) .setting-content {
width: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
/* Button rows with subtitles need vertical layout */
.setting-row.button-row:has(.setting-subtitle) .setting-label {
display: block !important;
width: 100% !important;
margin-bottom: 2px !important;
}
.setting-row.button-row .setting-subtitle {
display: block !important;
width: 100% !important;
}
/* Button rows without subtitles keep label inline */
.setting-row.button-row:not(:has(.setting-subtitle)) .setting-label {
flex: 1;
min-width: 0;
}
.setting-row.button-row:not(:has(.setting-subtitle)) .setting-value {
flex-shrink: 0;
margin-left: 8px;
}
.setting-icon {
font-size: 20px;
width: 32px;
text-align: center;
margin-right: 12px;
transition: transform 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Make back button arrows more prominent */
.setting-icon:has-text("←"),
.setting-icon[data-icon="back"] {
font-size: 24px;
font-weight: bold;
}
/* Better fallback for back arrows */
.setting-row[id*="back"] .setting-icon,
.setting-row[id$="_back"] .setting-icon,
.setting-row[id$="_back_button"] .setting-icon {
font-size: 24px;
font-weight: bold;
}
.setting-row.button-row:active .setting-icon {
transform: scale(1.1);
}
.setting-content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
/* When setting-content contains subtitle, use vertical layout */
.setting-content:has(.setting-subtitle),
.slider-row .setting-content {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
/* Button rows with only label and value (no subtitle) should stay horizontal */
.button-row .setting-content:not(:has(.setting-subtitle)) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.setting-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
padding: 0 16px;
/* Maintain label alignment while sliders are full width */
width: 100%;
box-sizing: border-box;
}
.setting-label {
font-size: 16px;
font-weight: 400;
color: #000;
letter-spacing: -0.4px;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 140px);
/* Leave space for input + margins */
}
/* Button rows don't have inputs, so allow more space for labels */
.setting-row.button-row .setting-label {
max-width: calc(100% - 60px);
/* Only leave space for arrow + margins */
}
/* Add a specific class for toggle rows to avoid text truncation */
.setting-row.toggle-row .setting-label {
max-width: calc(100% - 80px);
/* Leave space for toggle switch + margins */
}
/* Make IP Address row use exact same styling as MAC address row */
#network_address_display_row .setting-label {
white-space: nowrap !important;
max-width: none !important;
flex-shrink: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
}
#network_address_display_row .setting-value {
font-family: monospace;
color: #8e8e93;
}
.setting-value {
font-size: 16px;
font-weight: 400;
color: #8e8e93;
text-align: right;
letter-spacing: -0.4px;
}
.setting-subtitle {
font-size: 12px;
color: #8e8e93;
margin-top: 2px;
letter-spacing: -0.1px;
width: 100%;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Lux display - hidden by default, controlled by diagnostics toggle */
#lux_value {
display: none;
}
.setting-arrow {
font-size: 17px;
color: #c7c7cc;
font-weight: 400;
margin-left: 8px;
flex-shrink: 0;
}
.setting-input {
background: none;
border: none;
font-size: 17px;
color: #007aff;
text-align: right;
width: 100%;
max-width: 120px;
padding: 0;
letter-spacing: -0.4px;
flex-shrink: 0;
}
.setting-input:focus {
outline: none;
background: none;
border: none;
box-shadow: none;
}
.setting-input::placeholder {
color: #c7c7cc;
}
.setting-select {
border: none;
font-size: 16px;
color: #000000;
font-weight: 500;
text-align: right;
padding: 8px 32px 8px 12px;
letter-spacing: -0.4px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
flex-shrink: 0;
border-radius: 8px;
background: rgba(118, 118, 128, 0.12) url('data:image/svg+xml;charset=UTF-8,') no-repeat right 10px center / 12px;
max-width: 220px;
min-width: 180px;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
font-weight: 400;
min-width: 120px;
max-width: 160px;
/* Reduced from 200px to prevent overflow */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.setting-select:focus {
outline: none;
background-color: rgba(118, 118, 128, 0.16);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}
.setting-select:hover {
background-color: rgba(118, 118, 128, 0.16);
}
.setting-select:active {
background-color: rgba(118, 118, 128, 0.2);
}
/* ====== RADIO BUTTONS & TEXT INPUTS ====== */
/* Radio buttons */
.setting-radio-group {
display: flex;
gap: 16px;
margin-top: 8px;
}
.radio-option {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 16px;
color: #000;
}
.radio-option input[type="radio"] {
width: 20px;
height: 20px;
accent-color: #007aff;
cursor: pointer;
}
.radio-label {
font-weight: 400;
user-select: none;
}
/* Text inputs */
.setting-input {
background: rgba(118, 118, 128, 0.12);
border: none;
border-radius: 8px;
padding: 8px 12px;
font-size: 16px;
color: #000;
outline: none;
transition: all 0.15s ease;
width: 120px;
text-align: right;
flex-shrink: 0;
}
.setting-input:focus {
background: rgba(118, 118, 128, 0.16);
box-shadow: 0 0 0 1px #007aff;
}
.setting-input::placeholder {
color: rgba(0, 0, 0, 0.4);
}
/* ====== MODERN SLIDER DESIGN ====== */
/* Slider container - full width for iOS style */
.slider-container {
margin: 8px 0 4px 0;
padding: 0 30px;
/* Increased padding to keep fingers away from screen edges (was 18px) */
/* This prevents iOS edge swipe navigation from being triggered */
position: relative;
width: 100%;
/* Ensure full width */
display: block;
/* Fallback for older WebView */
box-sizing: border-box;
/* Include padding/border in width calculation */
overflow: visible;
/* Allow slider to extend beyond container for visual effect */
/* Prevent iOS edge swipe navigation */
-webkit-touch-callout: none;
-webkit-user-select: none;
touch-action: pan-y pinch-zoom;
/* Only allow vertical scrolling and zoom, not horizontal swipes */
}
.ios-slider {
-webkit-appearance: none !important;
appearance: none !important;
width: 100% !important;
/* Full width */
height: 8px !important;
border-radius: 4px !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
outline: none;
background: transparent;
transition: all 0.15s ease;
position: relative;
z-index: 2;
margin: 0;
/* No margins for full width */
box-sizing: border-box;
/* Ensure consistent box model */
/* Prevent edge swipe when interacting with slider */
touch-action: none;
/* Disable all touch gestures on slider itself */
-webkit-user-select: none;
user-select: none;
}
.ios-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 32px;
height: 32px;
border-radius: 16px;
background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
border: 2px solid #888888;
/* Medium grey outline for visibility */
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.15),
0 2px 4px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.15s ease;
}
.ios-slider::-webkit-slider-thumb:active {
transform: scale(1.15);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.2),
0 2px 6px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
/* SkySync target chevron below sliders — upward-pointing triangle marks target */
.ss-slider-target {
position: absolute;
top: calc(50% + 14px);
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid rgba(90, 200, 250, 0.9);
z-index: 3;
pointer-events: none;
filter: drop-shadow(0 0 2px rgba(90, 200, 250, 0.5));
transition: left 0.3s ease;
}
/* Enhanced gradient sliders with visual padding for thumb alignment */
.ios-slider.cct-slider {
/* Account for thumb radius (16px) + border (2px) = 18px visual radius */
/* This ensures the thumb edge perfectly touches the gradient edges */
background: linear-gradient(to right,
transparent 0%,
transparent 18px,
#ff8c00 18px,
#ffbf00 calc(15% + 13px),
#fff5cc calc(35% + 5px),
#ffffff 50%,
#ccf0ff calc(65% - 5px),
#7faaff calc(85% - 13px),
#0064c8 calc(100% - 18px),
transparent calc(100% - 18px),
transparent 100%) !important;
height: 8px;
border-radius: 4px;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(0, 0, 0, 0.05);
padding: 0 18px;
/* Add horizontal padding for gradient */
margin: 0 -18px;
/* Compensate with negative margin to maintain layout */
box-sizing: content-box;
/* Ensure padding is added to width */
}
.ios-slider.brightness-slider {
/* Account for thumb radius (16px) + border (2px) = 18px visual radius */
background: linear-gradient(to right,
transparent 0%,
transparent 18px,
#1a1a1a 18px,
#333333 calc(20% + 10px),
#666666 calc(40% + 3px),
#cccccc calc(60% - 3px),
#f0f0f0 calc(80% - 10px),
#ffffff calc(100% - 18px),
transparent calc(100% - 18px),
transparent 100%) !important;
height: 8px;
border-radius: 4px;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(0, 0, 0, 0.05);
padding: 0 18px;
/* Add horizontal padding for gradient */
margin: 0 -18px;
/* Compensate with negative margin to maintain layout */
box-sizing: content-box;
/* Ensure padding is added to width */
}
/* Legacy compatibility */
.control-card {
display: none;
}
/* ====== SLIDER IMPROVEMENTS ====== */
.cct_bright_container {
margin: 0;
}
.slider_holder {
width: 100%;
padding: 20px 0;
}
.sliderLabel {
text-align: center;
font-size: 28px;
font-weight: 600;
margin-bottom: 16px;
color: #000;
letter-spacing: -0.5px;
}
.luxLabel {
text-align: center;
padding-top: 8px;
color: #8e8e93;
font-size: 15px;
font-weight: 400;
}
/* Enhanced slider styling */
.cct_bright_container input[type=range] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 60px;
border-radius: 30px;
background-color: #e5e5ea;
outline: none;
padding: 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.15s ease;
}
.cct_bright_container input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 56px;
height: 56px;
background: #fff;
cursor: pointer;
border-radius: 28px;
border: 0.5px solid rgba(0, 0, 0, 0.04);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.15),
0 0 0 0.5px rgba(0, 0, 0, 0.04);
transition: all 0.15s ease;
}
.cct_bright_container input[type=range]::-webkit-slider-thumb:active {
transform: scale(1.05);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.2),
0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
.thickSliderCCT {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
outline: none;
border-radius: 4px;
background: linear-gradient(to right,
#ffbf00,
#ffdf7f,
#ffffff,
#7faaff,
#0064c8);
transition: opacity 0.15s;
margin: 16px 0;
}
.thickSliderBrightness {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
outline: none;
border-radius: 4px;
background: linear-gradient(to right,
#666666,
#f0f0f0);
transition: opacity 0.15s;
margin: 16px 0;
}
/* Thumb styling for thickSlider classes */
.thickSliderCCT::-webkit-slider-thumb,
.thickSliderBrightness::-webkit-slider-thumb,
#cct_slider::-webkit-slider-thumb,
#brightness_slider::-webkit-slider-thumb,
.ios-slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
appearance: none !important;
width: 32px !important;
height: 32px !important;
border-radius: 16px !important;
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%) !important;
border: 2px solid #666666 !important;
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
}
.thickSliderCCT::-webkit-slider-thumb:active,
.thickSliderBrightness::-webkit-slider-thumb:active,
#cct_slider::-webkit-slider-thumb:active,
#brightness_slider::-webkit-slider-thumb:active,
.ios-slider::-webkit-slider-thumb:active {
transform: scale(1.15) !important;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.4),
0 2px 6px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
/* ====== SCHEDULE SECTION ====== */
#scheduleContainer {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 0;
}
.scheduleDivClass {
background: transparent;
border-radius: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/* ====== BUTTON IMPROVEMENTS ====== */
.lower_button_container {
display: flex;
flex-direction: column;
gap: 8px;
margin: 16px 0;
}
button {
background: #007aff;
color: white;
border: none;
border-radius: 10px;
padding: 14px 20px;
font-size: 17px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: none;
min-height: 50px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
button:hover {
background: #0056cc;
}
button:active {
background: #004499;
transform: scale(0.98);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #666;
transform: none;
box-shadow: none;
}
/* ====== ADVANCED CONTROLS (HIDDEN BY DEFAULT) ====== */
#advanced_controls {
display: none;
}
.api_div {
background: rgba(23, 62, 104, 0.9);
border-radius: 16px;
padding: 20px;
margin: 16px 0;
border: 1px solid rgba(48, 110, 157, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
/* ====== FORM ELEMENTS ====== */
input,
textarea,
select {
background: #f2f2f7;
color: #000;
border: 1px solid #d1d1d6;
border-radius: 10px;
padding: 12px 16px;
font-size: 17px;
transition: all 0.15s ease;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: #007aff;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
background: #fff;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgba(221, 221, 221, 0.9);
color: #333;
cursor: pointer;
}
/* ====== TESTING/CHANNEL CONTROLS ====== */
.testingDiv {
display: none;
background: rgba(23, 62, 104, 0.9);
border-radius: 16px;
padding: 20px;
margin: 16px 0;
border: 1px solid rgba(48, 110, 157, 0.3);
}
.test_slider_holder {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
gap: 16px;
}
.testSlider {
-webkit-appearance: none;
flex: 1;
height: 8px;
background: #ddd;
border-radius: 4px;
outline: none;
transition: opacity 0.2s;
}
.testSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 24px;
height: 24px;
background: #58acff;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* ====== MODAL & OVERLAY STYLES ====== */
.modal {
display: none;
position: fixed;
z-index: 100000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
}
/* ====== REBOOT MODAL STYLES ====== */
.reboot-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10001;
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
/* When opacity is 0 (initial 10ms before .show, or 300ms during fade-out
dismissal), don't capture clicks. Without this, taps land on the
invisible overlay instead of the UI underneath, which has burned us
repeatedly — most recently as "tapping the wireless group badge does
nothing after dismissing the timezone modal". */
pointer-events: none;
}
.reboot-modal-overlay.show {
opacity: 1;
pointer-events: auto;
}
.reboot-modal {
background: #ffffff;
border-radius: 12px;
padding: 24px;
max-width: 340px;
width: calc(100% - 32px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.reboot-modal-overlay.show .reboot-modal {
transform: scale(1);
}
.reboot-modal-title {
font-size: 18px;
font-weight: 600;
color: #000000;
margin: 0 0 8px 0;
text-align: center;
}
.reboot-modal-message {
font-size: 14px;
color: #666666;
margin: 0 0 16px 0;
text-align: center;
line-height: 1.4;
}
.reboot-modal-buttons {
display: flex;
gap: 12px;
}
.reboot-modal-btn {
flex: 1;
padding: 12px 16px;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.reboot-modal-btn.cancel {
background: #f1f3f4;
color: #5f6368;
}
.reboot-modal-btn.cancel:hover {
background: #e8eaed;
}
.reboot-modal-btn.confirm {
background: #ea4335;
color: white;
}
.reboot-modal-btn.confirm:hover {
background: #d33b2c;
}
/* Dark theme support for reboot modal */
@media (prefers-color-scheme: dark) {
.reboot-modal {
background: #2c2c2e;
}
.reboot-modal-title {
color: #ffffff;
}
.reboot-modal-message {
color: #a1a1a6;
}
.reboot-modal-btn.cancel {
background: #48484a;
color: #ffffff;
}
.reboot-modal-btn.cancel:hover {
background: #5a5a5c;
}
}
.theme-dark .reboot-modal {
background: #2c2c2e;
}
.theme-dark .reboot-modal-title {
color: #ffffff;
}
.theme-dark .reboot-modal-message {
color: #a1a1a6;
}
.theme-dark .reboot-modal-btn.cancel {
background: #48484a;
color: #ffffff;
}
.theme-dark .reboot-modal-btn.cancel:hover {
background: #5a5a5c;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(145deg, #1f2833, #0f1419);
padding: 24px;
border-radius: 16px;
border: 1px solid rgba(170, 170, 170, 0.3);
max-width: 90vw;
width: 320px;
max-height: 80vh;
overflow-y: auto;
color: #c5c6c7;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* ====== NETWORK INFO ====== */
.network_info {
display: none;
position: fixed;
background: rgba(0, 0, 0, 0.9);
color: #aaa;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid rgba(38, 38, 38, 0.8);
top: 60px;
left: 50%;
transform: translateX(-50%);
max-width: 90vw;
backdrop-filter: blur(10px);
}
/* ====== REBOOT NOTIFICATION ====== */
#rebootNotification {
display: none;
background-color: #ffcc00;
color: black;
text-align: center;
padding: 12px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10001;
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* ====== ANIMATIONS ====== */
@keyframes vibrate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.vibrate {
animation: vibrate 0.15s ease-in-out infinite;
}
@keyframes messageIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 12px 16px;
margin-bottom: 8px;
background-color: rgba(0, 0, 0, 0.03);
border-radius: 12px;
transition: background-color 0.2s;
animation: messageIn 0.3s ease-out;
/* Fix: Ensure messages are visible after animation */
opacity: 1 !important;
animation-fill-mode: forwards;
}
.message-item:last-child {
margin-bottom: 0;
}
.message-item.error {
background-color: rgba(255, 59, 48, 0.1);
border-left: 3px solid #ff3b30;
}
.message-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.message-text {
font-size: 14px;
font-weight: 400;
color: #000;
line-height: 1.4;
}
.message-time {
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
}
.message-dismiss {
background: none;
border: none;
color: rgba(0, 0, 0, 0.4);
font-size: 16px;
cursor: pointer;
width: 24px;
height: 24px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
margin-left: 12px;
flex-shrink: 0;
}
.message-dismiss:hover {
background-color: rgba(0, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.6);
}
.message-dismiss:active {
background-color: rgba(0, 0, 0, 0.1);
transform: scale(0.9);
}
/* Dark mode message styles */
.theme-dark .message-item {
background-color: rgba(255, 255, 255, 0.05);
}
.theme-dark .message-item.error {
background-color: rgba(255, 59, 48, 0.15);
}
.theme-dark .message-text {
color: #ffffff;
}
.theme-dark .message-time {
color: rgba(255, 255, 255, 0.6);
}
.theme-dark .message-dismiss {
color: rgba(255, 255, 255, 0.5);
}
.theme-dark .message-dismiss:hover {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
}
.theme-dark .message-dismiss:active {
background-color: rgba(255, 255, 255, 0.15);
}
/* ====== SCHEDULE CONTROLS ====== */
.schedule-controls {
margin: 24px 0;
padding: 0 16px;
}
.schedule-controls .setting-row {
background: rgba(255, 59, 48, 0.1);
/* Light red background for reset */
border-radius: 12px;
border: none;
margin: 0;
}
.schedule-controls .setting-row:hover {
background: rgba(255, 59, 48, 0.15);
}
.schedule-controls .setting-row:active {
background: rgba(255, 59, 48, 0.2);
transform: scale(0.98);
}
.schedule-controls .setting-icon {
color: #ff3b30;
/* Red color for reset icon */
font-size: 22px;
}
.schedule-controls .setting-label {
color: #ff3b30;
/* Red color for reset text */
font-weight: 500;
}
.schedule-controls .setting-subtitle {
color: rgba(255, 59, 48, 0.7);
}
/* ====== RESPONSIVE BREAKPOINTS ====== */
@media (max-width: 480px) {
.topContainer {
padding: 8px 12px;
}
#main_container_div {
padding: 0;
}
/* Banner is now inline, no conditional app padding needed */
/* Adjust iOS nav title spacing for small screens */
.ios-nav-title {
max-width: calc(100% - 120px);
/* Less reserved space on mobile */
margin-left: 60px;
/* Reduced margin for smaller screens */
margin-right: 60px;
font-size: 16px;
/* Slightly smaller font on mobile */
}
.control-card {
margin: 12px 0;
padding: 16px;
}
}
@media (min-width: 481px) {
.lower_button_container {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
}
.lower_button_container button {
flex: 1;
min-width: 160px;
}
}
/* ====== DESKTOP LAYOUT ====== */
@media (min-width: 768px) {
/* Apply desktop layout to all main content containers */
#main_container_div {
max-width: 520px;
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
/* Apply desktop layout to pages without main_container_div */
.page:not(.has-nav-header) {
max-width: 520px;
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
/* Apply desktop layout to all settings sections and content areas */
.settings-section,
.schedule-view,
.schedule-controls,
.schedule-list-section {
max-width: 520px;
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
}
/* Override for content that's already inside main_container_div */
#main_container_div .settings-section,
#main_container_div .schedule-view,
#main_container_div .schedule-controls,
#main_container_div .schedule-list-section {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
/* Header container stays full width, but content is constrained */
.topContainer {
max-width: 520px;
/* 496px + 12px padding on each side */
margin: 0 auto;
}
/* iOS navigation header should also be constrained */
.ios-nav-header {
width: 520px !important;
/* 496px + 12px padding on each side */
margin: 0 auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
/* Tab bar content should be constrained while container stays full width */
.tab-bar {
max-width: 520px;
left: 50% !important;
right: auto !important;
width: 520px !important;
transform: translateX(-50%);
}
/* Ensure setting rows have proper space management on desktop */
.setting-content {
min-width: 0;
width: 100%;
box-sizing: border-box;
}
/* Adjust label width for better space utilization on desktop */
.setting-label {
max-width: 60%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Desktop overrides for location settings */
#sunriseLocationButton .setting-label {
max-width: 70%;
/* More space available on desktop */
}
#predefinedCitiesRow .setting-label,
#latitudeRow .setting-label,
#longitudeRow .setting-label {
max-width: 50%;
/* Slightly less to account for longer text + links */
}
}
/* ====== LARGE DESKTOP LAYOUT ====== */
@media (min-width: 1200px) {
/* Apply larger desktop layout to all main content containers */
#main_container_div {
max-width: 580px;
padding-left: 20px;
padding-right: 20px;
}
/* Apply larger desktop layout to pages without main_container_div */
.page:not(.has-nav-header) {
max-width: 580px;
padding-left: 20px;
padding-right: 20px;
}
/* Apply larger desktop layout to all settings sections and content areas */
.settings-section,
.schedule-view,
.schedule-controls,
.schedule-list-section {
max-width: 580px;
padding-left: 20px;
padding-right: 20px;
}
/* Override for content that's already inside main_container_div */
#main_container_div .settings-section,
#main_container_div .schedule-view,
#main_container_div .schedule-controls,
#main_container_div .schedule-list-section {
padding-left: 0;
padding-right: 0;
}
/* Header content should have more padding on large screens */
.topContainer {
max-width: 580px;
/* 540px + 20px padding on each side */
}
/* iOS navigation header should also have more padding */
.ios-nav-header {
width: 580px !important;
/* 540px + 20px padding on each side */
margin: 0 auto !important;
}
/* Tab bar should be wider on large screens */
.tab-bar {
max-width: 580px;
width: 580px !important;
}
}
/* ====== ACCESSIBILITY ====== */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus indicators for keyboard navigation */
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid #3d81ba;
outline-offset: 2px;
}
/* ====== MOBILE APP ENHANCEMENTS ====== */
.warning-text {
color: #ff9500;
font-size: 14px;
background: rgba(255, 149, 0, 0.1);
padding: 12px;
border-radius: 8px;
border-left: 4px solid #ff9500;
margin: 16px 0;
}
.file-upload-container {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
margin: 12px 0;
}
.button-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.button-group button {
flex: 1;
min-width: 120px;
}
.calibration-controls {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin: 16px 0;
}
.calibration-controls select {
flex: 1;
min-width: 200px;
}
/* Touch-friendly improvements */
input[type="range"] {
min-height: 44px;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
max-width: 100%;
}
button {
min-height: 44px;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/* Better focus states for accessibility */
.topBut:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Loading states */
.loading {
opacity: 0.7;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Large loading spinner for Device Values page */
.loading-large {
opacity: 1;
pointer-events: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
min-height: 240px;
}
.loading-large::after {
content: '';
position: absolute;
width: 160px;
height: 160px;
border: 10px solid #f3f3f3;
border-top: 10px solid #007aff;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
/* Loading status text styling */
#values_loading_status .setting-content {
text-align: center;
}
#values_loading_status .setting-label {
margin-top: 16px;
font-size: 16px;
color: #007aff;
font-weight: 500;
}
/* Ensure loading status container has enough space for large spinner */
#values_loading_status .setting-row {
min-height: 280px;
align-items: center;
justify-content: center;
}
/* Status indicators */
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
background-color: #666;
}
.status-indicator.connected {
background-color: #34c759;
box-shadow: 0 0 8px rgba(52, 199, 89, 0.3);
}
.status-indicator.disconnected {
background-color: #ff3b30;
box-shadow: 0 0 8px rgba(255, 59, 48, 0.3);
}
.status-indicator.warning {
background-color: #ff9500;
box-shadow: 0 0 8px rgba(255, 149, 0, 0.3);
}
/* Success/Error states */
.success {
color: #34c759;
background: rgba(52, 199, 89, 0.1);
border: 1px solid rgba(52, 199, 89, 0.3);
}
.error {
color: #ff3b30;
background: rgba(255, 59, 48, 0.1);
border: 1px solid rgba(255, 59, 48, 0.3);
}
/* Card hover effects for non-touch devices */
@media (hover: hover) and (pointer: fine) {
.control-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.topBut:hover {
background-color: rgba(15, 40, 50, 1);
}
}
/* Dark mode adjustments - class-based for JS control, with media query fallback */
body.theme-dark .topContainerOuter {
background: rgba(28, 28, 30, 0.8);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}
body.theme-dark .topContainer {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.05));
border-top: 0.5px solid rgba(255, 255, 255, 0.15);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.4);
}
body.theme-dark .topBut {
color: #fff;
}
body.theme-dark .settings-section {
background: #1c1c1e;
border-top: 0.5px solid #38383a;
border-bottom: 0.5px solid #38383a;
}
body.theme-dark .setting-row:not(:last-child)::after {
background: #38383a;
}
body.theme-dark .setting-label {
color: #fff;
}
body.theme-dark .setting-value {
color: #8e8e93;
}
body.theme-dark .setting-subtitle {
color: #8e8e93;
}
body.theme-dark .setting-arrow {
color: #48484a;
}
body.theme-dark .setting-icon {
color: #fff;
}
body.theme-dark .graph-title {
color: #fff;
}
body.theme-dark schedule-graph {
--text-color: #a1a1a6;
border: 1px solid #3a3a3c;
}
body.theme-dark .setting-select {
color: #ffffff;
font-weight: 500;
background-color: rgba(118, 118, 128, 0.24);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
max-width: 220px;
min-width: 180px;
}
body.theme-dark .setting-select:focus {
background-color: rgba(118, 118, 128, 0.32);
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);
}
body.theme-dark .setting-select:hover {
background-color: rgba(118, 118, 128, 0.32);
}
body.theme-dark .setting-select:active {
background-color: rgba(118, 118, 128, 0.4);
}
body.theme-dark .setting-input {
background: #1c1c1e;
color: #007aff;
border: 1px solid #38383a;
max-width: 120px;
}
/* Developer page inputs need full width for server URLs */
body.theme-dark #page_developer .setting-input {
max-width: none;
}
body.theme-dark .setting-row.button-row:active {
background-color: #48484a;
}
body.theme-dark .setting-row.button-row:hover {
background-color: #2c2c2e;
}
/* Dark mode: colored CTA buttons — keep background, ensure white text */
body.theme-dark .setting-row.button-row[style*="background"] .setting-label {
color: #fff !important;
}
body.theme-dark .setting-row.button-row[style*="background"] .setting-subtitle {
color: rgba(255, 255, 255, 0.85) !important;
}
body.theme-dark .setting-row.button-row[style*="background"] .setting-icon {
color: #fff !important;
}
body.theme-dark .setting-row.button-row[style*="background"]:hover {
filter: brightness(1.15);
background-color: unset !important;
}
body.theme-dark .setting-row.button-row[style*="background"]:active {
filter: brightness(0.85);
background-color: unset !important;
}
body.theme-dark .setting-row.button-row.active {
background-color: #3a3a3c;
color: #fff;
}
body.theme-dark .setting-row.button-row.active .setting-icon {
color: #fff;
}
body.theme-dark .setting-row.button-row.active .setting-label {
color: #fff;
font-weight: 500;
}
body.theme-dark .setting-row.button-row.active .setting-subtitle {
color: rgba(255, 255, 255, 0.8);
}
body.theme-dark .setting-row.button-row.active .setting-arrow {
color: rgba(255, 255, 255, 0.6);
}
/* Demo mode active state - dark mode */
body.theme-dark .setting-row.button-row.demo-active {
background-color: rgba(0, 255, 0, 0.1) !important;
border-left: 3px solid #00ff00;
}
body.theme-dark .setting-row.button-row.demo-active .setting-icon {
color: #00ff00 !important;
}
body.theme-dark .setting-row.button-row.demo-active .setting-label {
color: #00ff00 !important;
}
body.theme-dark .setting-row.button-row.demo-active .setting-subtitle {
color: rgba(0, 255, 0, 0.7) !important;
}
/* Add New Key Button - prevent text clipping in dark mode */
body.theme-dark #add_new_key_button .setting-label {
max-width: none;
overflow: visible;
text-overflow: none;
}
/* Dark mode slider gradients */
body.theme-dark .ios-slider.cct-slider {
background: linear-gradient(to right,
#cc6600 0%,
#cc9500 15%,
#ccc199 35%,
#cccccc 50%,
#99bccc 65%,
#5f88cc 85%,
#003d99 100%) !important;
}
body.theme-dark .ios-slider.brightness-slider {
background: linear-gradient(to right,
#0d0d0d 0%,
#1a1a1a 20%,
#404040 40%,
#808080 60%,
#b3b3b3 80%,
#cccccc 100%) !important;
}
/* Device info modal dark mode */
body.theme-dark .device-info-content {
background: #1c1c1e;
}
body.theme-dark .device-info-header {
border-bottom: 0.5px solid rgba(56, 56, 58, 0.6);
}
body.theme-dark .device-info-header h2 {
color: #fff;
}
body.theme-dark .device-info-close {
color: #8e8e93;
}
body.theme-dark .device-info-close:hover {
background-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .device-info-close:active {
background-color: rgba(255, 255, 255, 0.15);
}
/* Radio buttons and inputs dark mode */
body.theme-dark .radio-option {
color: #ffffff;
}
body.theme-dark .setting-input {
background: rgba(118, 118, 128, 0.24);
color: #ffffff;
}
body.theme-dark .setting-input:focus {
background: rgba(118, 118, 128, 0.32);
box-shadow: 0 0 0 1px #0a84ff;
}
body.theme-dark .setting-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
/* Schedule controls dark mode */
body.theme-dark .schedule-controls .setting-row {
background: rgba(255, 69, 58, 0.15);
}
body.theme-dark .schedule-controls .setting-row:hover {
background: rgba(255, 69, 58, 0.2);
}
body.theme-dark .schedule-controls .setting-row:active {
background: rgba(255, 69, 58, 0.25);
}
body.theme-dark .schedule-controls .setting-icon {
color: #ff453a;
}
body.theme-dark .schedule-controls .setting-label {
color: #ff453a;
}
body.theme-dark .schedule-controls .setting-subtitle {
color: rgba(255, 69, 58, 0.7);
}
/* Schedule view modes dark mode */
body.theme-dark .schedule-mode-toggle {
background: rgba(118, 118, 128, 0.24);
}
body.theme-dark .mode-toggle-btn.active {
background: #48484a;
color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
body.theme-dark .mode-toggle-btn:hover:not(.active) {
background: rgba(118, 118, 128, 0.16);
}
/* Schedule list view dark mode */
body.theme-dark .list-section-header {
border-bottom: 0.5px solid rgba(84, 84, 88, 0.6);
}
body.theme-dark .list-section-header h3 {
color: #fff;
}
body.theme-dark .add-point-btn {
background: #0a84ff;
}
body.theme-dark .add-point-btn:hover {
background: #007aff;
}
body.theme-dark .schedule-points-list {
background: #1c1c1e;
}
body.theme-dark .schedule-point-item {
background: #1c1c1e;
border-bottom: 0.5px solid rgba(84, 84, 88, 0.6);
}
body.theme-dark .point-time-input,
body.theme-dark .point-value-input {
background: #2c2c2e;
border: 1px solid #38383a;
color: #fff;
}
body.theme-dark .point-time-input::placeholder,
body.theme-dark .point-value-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
body.theme-dark .point-value-display {
color: #8e8e93;
}
body.theme-dark .sunrise-offset-toggle {
color: #0a84ff;
background: rgba(10, 132, 255, 0.15);
border: 1px solid rgba(10, 132, 255, 0.3);
}
body.theme-dark .sunrise-offset-toggle:hover {
background: rgba(10, 132, 255, 0.2);
}
/* Accordion dark mode styles */
body.theme-dark .point-header-content:hover {
background-color: rgba(255, 255, 255, 0.05);
}
body.theme-dark .point-time-compact {
color: #fff;
}
body.theme-dark .point-time-compact.point-time-clickable {
color: #007aff !important;
}
body.theme-dark .point-value-compact {
color: #8e8e93;
}
body.theme-dark .point-expand-arrow {
color: #8e8e93;
}
body.theme-dark .point-details {
background: rgba(28, 28, 30, 0.95);
border-top: 1px solid rgba(84, 84, 88, 0.6);
}
body.theme-dark .point-detail-section {
background: rgba(44, 44, 46, 0.5);
border: 1px solid rgba(84, 84, 88, 0.36);
}
body.theme-dark .point-detail-label {
color: #fff;
}
body.theme-dark .point-time-display-edit {
color: #0a84ff;
background: rgba(10, 132, 255, 0.2);
border: 1px solid rgba(10, 132, 255, 0.3);
}
body.theme-dark .point-time-display-edit:hover {
background: rgba(10, 132, 255, 0.3);
}
body.theme-dark .point-time-display-readonly {
color: #8e8e93;
background: rgba(142, 142, 147, 0.15);
border: 1px solid rgba(142, 142, 147, 0.2);
}
body.theme-dark .time-mode-indicator {
color: #8e8e93;
background: rgba(142, 142, 147, 0.12);
}
/* Compact delete button dark mode */
body.theme-dark .point-delete-compact {
color: #ff453a;
}
body.theme-dark .point-delete-compact:hover {
background: rgba(255, 69, 58, 0.2);
}
/* Add point buttons dark mode */
body.theme-dark .add-point-divider {
background: #1c1c1e;
}
body.theme-dark .add-point-line {
background: rgba(84, 84, 88, 0.6);
}
body.theme-dark .add-point-btn-inline {
background: #333;
border: 2px solid #1c1c1e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.theme-dark .add-point-btn-inline:hover {
background: #555;
}
body.theme-dark .add-point-fallback-btn {
background: #333;
}
body.theme-dark .add-point-fallback-btn:hover {
background: #555;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* ====== SUNRISE LOCATION VISIBILITY ====== */
#sunriseLocationButton,
#latitudeRow,
#longitudeRow,
#mapRow {
transition: all 0.3s ease;
}
/* ====== LOCATION SETTINGS LAYOUT FIXES ====== */
/* Prevent wrapping at the row level for location settings */
#sunriseLocationButton,
#predefinedCitiesRow,
#latitudeRow,
#longitudeRow {
flex-wrap: nowrap;
}
/* Fix for Sunrise Location button-row structure */
#sunriseLocationButton .setting-label {
max-width: calc(100% - 40px);
/* Less space needed, just for arrow */
}
/* Fix for Predefined Cities longer label */
#predefinedCitiesRow .setting-label {
max-width: calc(100% - 160px);
/* More space for wider dropdown */
}
/* Fix for Latitude/Longitude with inline links */
#latitudeRow .setting-label,
#longitudeRow .setting-label {
max-width: calc(100% - 160px);
/* More space needed for input + link */
}
/* Ensure setting-content layout works properly for location elements */
#predefinedCitiesRow .setting-content,
#latitudeRow .setting-content,
#longitudeRow .setting-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
min-width: 0;
}
/* Sunrise Location has button-row structure with subtitle - different layout */
#sunriseLocationButton .setting-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
flex: 1;
min-width: 0;
}
#latitudeRow .setting-label a,
#longitudeRow .setting-label a {
display: inline;
white-space: nowrap;
flex-shrink: 0;
font-size: 12px;
color: #007aff;
text-decoration: none;
margin-left: 4px;
}
#latitudeRow .setting-label a:hover,
#longitudeRow .setting-label a:hover {
text-decoration: underline;
}
/* ====== SCHEDULE STATUS ====== */
#ScheduleActiveIcon {
display: none;
/* Hidden by default, shown when schedule is active */
}
/* ====== WORLDMAP FULL WIDTH ====== */
#map-container {
width: 100% !important;
margin-top: 8px;
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
}
/* Map zoom controls */
.map-zoom-controls {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 20;
}
.map-zoom-btn {
width: 32px;
height: 32px;
background: rgba(28, 28, 30, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #fff;
font-size: 18px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, transform 0.1s;
-webkit-tap-highlight-color: transparent;
}
.map-zoom-btn:hover {
background: rgba(58, 58, 60, 0.95);
}
.map-zoom-btn:active {
transform: scale(0.95);
}
.map-zoom-btn.reset {
font-size: 12px;
margin-top: 4px;
}
/* Zoom level indicator */
.map-zoom-indicator {
position: absolute;
top: 10px;
left: 10px;
background: rgba(28, 28, 30, 0.75);
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', monospace;
z-index: 20;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.map-zoom-indicator.visible {
opacity: 1;
}
/* Panning cursor states */
.worldmap.panning {
cursor: grabbing !important;
}
.worldmap.can-pan {
cursor: grab;
}
.worldmap {
width: 100%;
height: auto;
aspect-ratio: 800 / 333;
/* NASA Blue Marble cropped map ratio (90°N to 60°S) */
border-radius: 8px;
object-fit: contain;
/* Show full map without cropping */
cursor: crosshair;
transition: opacity 0.2s ease;
/* Zoom/pan support */
transform-origin: center center;
touch-action: none; /* Prevent default touch behaviors for custom gestures */
user-select: none;
-webkit-user-select: none;
}
.worldmap:hover {
opacity: 0.9;
}
/* Override parent setting-content alignment for map container */
.setting-content:has(#map-container) {
justify-content: stretch !important;
}
/* Make map row take full width without padding constraints */
#mapRow {
padding-left: 0 !important;
padding-right: 0 !important;
}
#mapRow .setting-content {
width: 100%;
padding-left: 0;
padding-right: 0;
}
/* ====== WORLDMAP PIN STYLING ====== */
.map-pin {
position: absolute;
width: 16px;
height: 16px;
background: #ff3b30;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
border: 2px solid #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 10;
pointer-events: none;
}
.map-pin::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 8px;
height: 8px;
background: #ffffff;
border-radius: 50%;
opacity: 0.8;
}
/* Pin drop animation */
@keyframes pinDrop {
0% {
transform: rotate(-45deg) translateY(-50px) scale(0.5);
opacity: 0;
}
50% {
transform: rotate(-45deg) translateY(5px) scale(1.1);
opacity: 1;
}
100% {
transform: rotate(-45deg) translateY(0) scale(1);
opacity: 1;
}
}
/* Dark mode support for map pin */
@media (prefers-color-scheme: dark) {
.map-pin {
background: #ff453a;
border-color: #1c1c1e;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.map-pin::after {
background: #1c1c1e;
}
}
/* Mobile optimizations for map */
@media (max-width: 767px) {
.worldmap {
max-width: 100%;
width: 100%;
}
.map-pin {
width: 14px;
height: 14px;
}
.map-pin::after {
top: 1px;
left: 1px;
width: 6px;
height: 6px;
}
}
/* ====== LEGACY SSID STYLING (now handled by expandable editor) ====== */
/* Keeping minimal styles for backward compatibility */
/* ====== WIFI PASSWORD INPUT ====== */
.password-input-container {
position: relative;
display: flex;
align-items: center;
}
.password-input-container .setting-input {
padding-right: 40px;
/* Space for toggle button */
text-align: left;
/* Left-align password text like iOS */
max-width: none;
/* Full width for password inputs */
font-size: 16px;
/* Prevent iOS auto-zoom on focus */
}
.password-toggle {
position: absolute;
right: 10px;
cursor: pointer;
font-size: 18px;
color: #8e8e93;
user-select: none;
transition: color 0.15s ease;
}
.password-toggle:hover {
color: #007aff;
}
.password-toggle:active {
color: #0051d5;
}
@media (prefers-color-scheme: dark) {
.password-toggle {
color: #8e8e93;
}
.password-toggle:hover {
color: #0a84ff;
}
.password-toggle:active {
color: #409cff;
}
}
/* ====== REBOOT NOTIFICATION ====== */
#rebootNotification {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100001;
/* Higher than all other elements including modals */
background: linear-gradient(135deg, #ff6b35 0%, #ff8f42 100%);
color: white;
padding: 12px 16px;
text-align: center;
font-size: 15px;
font-weight: 600;
box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#rebootNotification .reboot-content {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
max-width: 400px;
margin: 0 auto;
}
#rebootNotification .reboot-message {
flex: 1;
text-align: left;
line-height: 1.3;
}
#rebootNotification .reboot-icon {
font-size: 18px;
opacity: 0.9;
}
#rebootNowButton {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
#rebootNowButton:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
}
#rebootNowButton:active {
background: rgba(255, 255, 255, 0.4);
transform: translateY(0px);
}
#dismissRebootButton {
background: transparent;
border: none;
color: white;
font-size: 24px;
font-weight: bold;
padding: 4px 8px;
margin-left: 8px;
border-radius: 50%;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.8;
transition: all 0.2s ease;
}
#dismissRebootButton:hover {
background: rgba(255, 255, 255, 0.1);
opacity: 1;
transform: translateY(-1px);
}
#dismissRebootButton:active {
background: rgba(255, 255, 255, 0.2);
transform: translateY(0px);
}
/* No adjustments needed for inline navigation headers when notification is shown */
/* Headers are now part of normal document flow and will naturally flow below notifications */
/* Adjust page content when only notification is present (no nav header) */
body.has-notification .page:not(.has-nav-header) #main_container_div {
padding-top: 96px !important;
/* 90px notification + 6px spacing */
}
body.has-notification #main_container_div {
/* margin-top removed */
}
@media (prefers-color-scheme: dark) {
#rebootNotification {
background: linear-gradient(135deg, #ff453a 0%, #ff6b35 100%);
box-shadow: 0 2px 10px rgba(255, 69, 58, 0.4);
}
}
body.theme-dark #rebootNotification {
background: linear-gradient(135deg, #ff453a 0%, #ff6b35 100%);
box-shadow: 0 2px 10px rgba(255, 69, 58, 0.4);
}
/* ====== SCHEDULE DAYS CHECKBOXES ====== */
.checkbox-row {
padding: 12px 16px;
}
.day-checkbox-label {
display: flex;
align-items: center;
width: 100%;
cursor: pointer;
font-size: 16px;
font-weight: 400;
color: #000;
user-select: none;
}
.day-checkbox {
width: 20px;
height: 20px;
margin-right: 12px;
border-radius: 4px;
border: 2px solid #c7c7cc;
background-color: #fff;
cursor: pointer;
transition: all 0.15s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
flex-shrink: 0;
}
.day-checkbox:checked {
background-color: #007aff;
border-color: #007aff;
}
.day-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 14px;
font-weight: bold;
}
.day-checkbox:hover {
border-color: #007aff;
transform: scale(1.05);
}
.day-checkbox:active {
transform: scale(0.95);
}
.day-checkbox-text {
font-size: 16px;
line-height: 1.2;
}
@media (prefers-color-scheme: dark) {
.day-checkbox-label {
color: #fff;
}
.day-checkbox {
border-color: #636366;
background-color: #1c1c1e;
}
.day-checkbox:checked {
background-color: #0a84ff;
border-color: #0a84ff;
}
.day-checkbox:hover {
border-color: #0a84ff;
}
}
body.theme-dark .day-checkbox-label {
color: #fff;
}
body.theme-dark .day-checkbox {
border-color: #636366;
background-color: #1c1c1e;
}
body.theme-dark .day-checkbox:checked {
background-color: #0a84ff;
border-color: #0a84ff;
}
body.theme-dark .day-checkbox:hover {
border-color: #0a84ff;
}
/* ====== DEMO MODE INDICATOR ====== */
#previewSchedule.demo-active {
background-color: rgba(255, 69, 58, 0.1) !important;
border-left: 4px solid #ff453a !important;
}
@media (prefers-color-scheme: dark) {
#previewSchedule.demo-active {
background-color: rgba(255, 69, 58, 0.15) !important;
border-left: 4px solid #ff453a !important;
}
}
body.theme-dark #previewSchedule.demo-active {
background-color: rgba(255, 69, 58, 0.15) !important;
border-left: 4px solid #ff453a !important;
}
/* High contrast mode */
@media (prefers-contrast: high) {
.control-card {
border: 2px solid #fff;
}
button {
border: 1px solid #fff;
}
}
/* Reduced transparency for better performance on older devices */
@media (max-width: 480px) {
.control-card {
backdrop-filter: none;
background: #1c1c1e;
}
}
/* ====== CHART FULLSCREEN MODAL ====== */
.chart-expand-btn {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 14px;
width: 26px;
height: 26px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 0.2s;
}
.chart-expand-btn:active {
color: rgba(255, 255, 255, 0.8);
}
.chart-fullscreen-modal {
position: fixed;
z-index: 10001;
inset: 0;
background: var(--background-color, #000000);
display: flex;
flex-direction: column;
animation: fadeIn 0.2s ease;
}
.chart-fullscreen-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
padding-top: max(12px, env(safe-area-inset-top));
flex-shrink: 0;
}
.chart-fullscreen-title {
font-size: 17px;
font-weight: 600;
color: var(--text-color, #ffffff);
}
.chart-fullscreen-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: var(--text-color, #ffffff);
font-size: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.chart-fullscreen-close:active {
background: rgba(255, 255, 255, 0.2);
}
.chart-fullscreen-body {
flex: 1;
padding: 0 12px;
min-height: 0;
position: relative;
}
.chart-fullscreen-body canvas {
border-radius: 12px;
background: var(--chart-background, #1c1c1e);
}
.chart-fullscreen-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 12px 16px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
/* ====== DEVICE INFO MODAL ====== */
.device-info-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s ease;
}
.device-info-content {
position: relative;
margin: 5% auto;
width: 90%;
max-width: 400px;
background: #f2f2f7;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
transform: translateY(-20px);
animation: slideInDown 0.3s ease forwards;
}
.device-info-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.device-info-header h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #000;
letter-spacing: -0.4px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
}
.device-info-close {
background: none;
border: none;
font-size: 24px;
color: #c7c7cc;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
font-weight: 300;
}
.device-info-close:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.device-info-close:active {
background-color: rgba(0, 0, 0, 0.1);
transform: scale(0.95);
}
.device-info-body {
padding: 0;
}
@keyframes slideInDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* ====== UTILITY CLASSES ====== */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-center {
text-align: center;
}
.mb-2 {
margin-bottom: 8px;
}
.mb-4 {
margin-bottom: 16px;
}
.mt-2 {
margin-top: 8px;
}
.mt-4 {
margin-top: 16px;
}
/* ====== LEGACY STYLES (maintaining compatibility) ====== */
/* Keep essential legacy styles for functionality */
/* Device info styling */
#ip_address {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
#ip_address span {
font-size: 17px;
font-weight: 600;
color: #000;
}
#dateTime {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-top: 0.5px solid #e5e5ea;
}
#dateTime span {
font-size: 15px;
color: #8e8e93;
}
.channel_container {
display: flex;
background: rgba(23, 62, 104, 0.9);
border-radius: 16px;
padding: 16px;
gap: 12px;
margin: 16px 0;
}
.channel_text-box {
border: 1px solid #aaa;
border-radius: 8px;
padding: 12px;
flex: 1;
}
.radio_text-box {
border: 1px solid #aaa;
border-radius: 8px;
padding: 12px;
width: 150px;
}
#varsTable {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
background: rgba(23, 62, 104, 0.9);
border-radius: 8px;
overflow: hidden;
}
#varsTable th,
#varsTable td {
border: 1px solid rgba(221, 221, 221, 0.3);
padding: 12px;
text-align: left;
}
#varsTable th {
background-color: rgba(31, 40, 51, 0.9);
font-weight: 600;
}
#consoleLog {
width: 100%;
height: 300px;
overflow-y: auto;
white-space: pre-wrap;
background: rgba(29, 79, 133, 0.9);
color: white;
border-radius: 8px;
padding: 16px;
font-family: 'Courier New', monospace;
font-size: 14px;
}
/* Configuration modal styles */
#controlsConfig {
position: fixed;
display: none;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(30, 30, 30, 0.95);
z-index: 100000;
justify-content: center;
align-items: center;
overflow: auto;
backdrop-filter: blur(4px);
}
#controlsConfigInner {
background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
border-radius: 16px;
padding: 24px;
width: 90%;
max-width: 450px;
max-height: 90vh;
overflow-y: auto;
border: 1px solid rgba(129, 129, 129, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.analogComponentContainer {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 16px;
margin: 12px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.analogDescription {
color: #aaa;
font-size: 14px;
line-height: 1.4;
margin: 12px 0;
padding: 12px;
}
/* Advanced Settings Styling */
/* Test Buttons */
.test-button {
background: #007aff;
color: white;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
min-width: 60px;
text-align: center;
}
.test-button:hover {
background: #0056b3;
transform: translateY(-1px);
}
.test-button:active {
background: #004494;
transform: translateY(0);
}
@media (prefers-color-scheme: dark) {
.test-button {
background: #0a84ff;
}
.test-button:hover {
background: #0056b3;
}
.test-button:active {
background: #004494;
}
}
/* API Buttons Container */
#api_buttons_container button {
background: #48484a;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
#api_buttons_container button:hover {
background: #5a5a5c;
transform: translateY(-1px);
}
#api_buttons_container button:active {
background: #3a3a3c;
transform: translateY(0);
}
@media (prefers-color-scheme: dark) {
#api_buttons_container button {
background: #48484a;
color: #ffffff;
}
#api_buttons_container button:hover {
background: #5a5a5c;
}
#api_buttons_container button:active {
background: #3a3a3c;
}
}
@media (prefers-color-scheme: light) {
#api_buttons_container button {
background: #8e8e93;
color: #ffffff;
}
#api_buttons_container button:hover {
background: #6d6d70;
}
#api_buttons_container button:active {
background: #48484a;
}
}
/* Advanced Settings Table Styling */
#key_value_table {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
#key_value_table th {
font-weight: 600;
font-size: 14px;
color: #1d1d1f;
}
#key_value_table td {
padding: 8px;
border-bottom: 1px solid #e5e5ea;
font-size: 12px;
vertical-align: middle;
}
#key_value_table tr:last-child td {
border-bottom: none;
}
#key_value_table .action-button {
background: #ff3b30;
color: white;
border: none;
border-radius: 4px;
padding: 4px 8px;
font-size: 10px;
cursor: pointer;
margin: 0 2px;
transition: all 0.15s ease;
}
#key_value_table .action-button.edit {
background: #007aff;
}
#key_value_table .action-button.save {
background: #34c759;
}
#key_value_table .action-button:hover {
opacity: 0.8;
transform: translateY(-1px);
}
#key_value_table .action-button:active {
transform: translateY(0);
}
/* Editable table cells */
#key_value_table .editable-cell {
background: #f2f2f7;
border: 1px solid #007aff;
border-radius: 4px;
padding: 4px 6px;
font-size: 12px;
min-width: 100px;
}
@media (prefers-color-scheme: dark) {
#key_value_table {
background: #1c1c1e;
}
#key_value_table th {
background: #2c2c2e;
color: #ffffff;
border-color: #48484a;
}
#key_value_table td {
background: #1c1c1e;
color: #ffffff;
border-color: #48484a;
}
#key_value_table .action-button {
background: #ff453a;
}
#key_value_table .action-button.edit {
background: #0a84ff;
}
#key_value_table .action-button.save {
background: #30d158;
}
#key_value_table .editable-cell {
background: #2c2c2e;
border-color: #0a84ff;
color: #ffffff;
}
}
/* Progress Bar Styling */
#firmware_progress_container {
margin-bottom: 16px;
}
#firmware_progress_bar {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Console Log Dark Theme - iOS Style */
#console_log_display::-webkit-scrollbar {
width: 6px;
}
#console_log_display::-webkit-scrollbar-track {
background: transparent;
}
#console_log_display::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0);
/* Initially invisible */
border-radius: 3px;
transition: background-color 0.2s ease;
}
.scrolling #console_log_display::-webkit-scrollbar-thumb,
#console_log_display.scrolling::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.3);
/* Visible when scrolling */
}
/* Advanced Settings specific text areas */
#api_status_display,
#calibration_results_display,
#firmware_update_log {
resize: vertical;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
#api_status_display,
#calibration_results_display,
#firmware_update_log {
background: #1c1c1e !important;
color: #ffffff !important;
border-color: #48484a !important;
}
}
/* Secure OTA progress text colors for dark mode */
#secure_ota_stage_label,
#secure_ota_progress_text {
color: #1d1d1f;
}
#secure_ota_error_text {
color: #8e8e93;
}
@media (prefers-color-scheme: dark) {
#secure_ota_stage_label,
#secure_ota_progress_text {
color: #ffffff;
}
#secure_ota_error_text {
color: #8e8e93;
}
}
/* Advanced Settings Input Styling */
.setting-input[type="file"] {
font-size: 14px;
color: #1d1d1f;
}
@media (prefers-color-scheme: dark) {
.setting-input[type="file"] {
color: #ffffff;
background: #2c2c2e;
border-color: #48484a;
}
}
/* Status indicators */
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.status-indicator.connected {
background: #34c759;
}
.status-indicator.disconnected {
background: #ff3b30;
}
.status-indicator.warning {
background: #ff9500;
}
/* Checkbox container for console log */
.checkbox-container {
display: flex;
align-items: center;
padding: 0 !important;
}
/* Advanced settings page transitions */
.page {
transition: opacity 0.2s ease-in-out;
}
.page:not(.active) {
opacity: 0;
pointer-events: none;
}
.page.active {
opacity: 1;
pointer-events: auto;
}
/* Navigation headers are inline and shown only when explicitly made visible */
.ios-nav-header.nav-positioned {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
height: 64px !important;
z-index: 100 !important;
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
margin: 0 !important;
float: none !important;
transition: none !important;
animation: none !important;
}
/* INLINE POSITIONING: Navigation headers are part of normal document flow */
.ios-nav-header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
height: 64px !important;
z-index: 100 !important;
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
transform: none !important;
margin: 0 !important;
padding: 0 20px !important;
/* Increased from 16px to match topContainer */
float: none !important;
transition: none !important;
animation: none !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.29) !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
/* Ensure padding is included in width */
}
/* Visible headers override the hidden state - NO POSITION CHANGES */
.ios-nav-header.nav-visible {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure visible class always wins over default hidden state */
.page .ios-nav-header.nav-visible,
div.ios-nav-header.nav-visible,
.page.has-nav-header .ios-nav-header.nav-visible {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Dark mode background override - still locked at 0,0 */
@media (prefers-color-scheme: dark) {
.ios-nav-header {
background: rgba(28, 28, 30, 0.95) !important;
border-bottom-color: rgba(84, 84, 88, 0.6) !important;
}
}
.theme-dark .ios-nav-header {
background: rgba(28, 28, 30, 0.95) !important;
border-bottom-color: rgba(84, 84, 88, 0.6) !important;
}
.theme-light .ios-nav-header {
background: rgba(255, 255, 255, 0.95) !important;
border-bottom-color: rgba(0, 0, 0, 0.29) !important;
}
/* Remove this rule - it was interfering with nav-visible class */
/* Primary controls configuration styles */
.setting-input {
background: #f2f2f7;
border: 1px solid #e5e5ea;
border-radius: 8px;
padding: 8px 12px;
font-size: 16px;
font-family: inherit;
width: 80px;
text-align: center;
}
.setting-description {
padding: 8px 16px;
font-size: 13px;
color: #8e8e93;
line-height: 1.4;
font-style: italic;
}
.setting-toggle {
display: flex;
align-items: center;
}
.toggle-input {
display: none;
}
.toggle-label {
position: relative;
display: inline-block;
width: 48px;
height: 28px;
background-color: #e5e5ea;
border-radius: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.toggle-label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 24px;
height: 24px;
background-color: white;
border-radius: 12px;
transition: transform 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-input:checked+.toggle-label {
background-color: #007aff;
}
.toggle-input:checked+.toggle-label::after {
transform: translateX(20px);
}
@media (prefers-color-scheme: dark) {
.setting-input {
background: #2c2c2e;
border: 1px solid #38383a;
color: #ffffff;
}
.setting-description {
color: #8e8e93;
}
.toggle-label {
background-color: #48484a;
}
.toggle-input:checked+.toggle-label {
background-color: #0a84ff;
}
}
/* Schedule status banner on home page - matches password reminder styling */
.schedule-status-banner {
background: rgba(48, 48, 50, 0.95);
color: #ffffff !important;
padding: 12px 16px;
margin: 16px 0;
font-size: 14px;
font-weight: 400;
text-align: left;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
display: none;
animation: scheduleStatusSlideIn 0.3s ease-out;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}
.schedule-status-banner.demo-active {
background: rgba(48, 48, 50, 0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.1);
}
@keyframes scheduleStatusSlideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Tab visual feedback for schedule running */
.tab-button.schedule-running .tab-icon {
animation: scheduleActivePulse 2s ease-in-out infinite;
}
@keyframes scheduleActivePulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
/* Light mode - use same colors as password reminder banner */
@media (prefers-color-scheme: light) {
.schedule-status-banner {
background: rgba(48, 48, 50, 0.95) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.schedule-status-banner.demo-active {
background: rgba(48, 48, 50, 0.95) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
}
.theme-light .schedule-status-banner {
background: rgba(48, 48, 50, 0.95) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.theme-light .schedule-status-banner.demo-active {
background: rgba(48, 48, 50, 0.95) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
/* Dark mode support for schedule banner - matches password reminder dark theme */
@media (prefers-color-scheme: dark) {
.schedule-status-banner {
background: rgba(58, 58, 62, 0.95) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
.schedule-status-banner.demo-active {
background: rgba(58, 58, 62, 0.95) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
}
.theme-dark .schedule-status-banner {
background: rgba(58, 58, 62, 0.95) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
.theme-dark .schedule-status-banner.demo-active {
background: rgba(58, 58, 62, 0.95) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* iOS 17+ style banner notifications — top-of-screen pill */
.ios-message-container {
position: fixed;
top: calc(8px + env(safe-area-inset-top, 0px));
left: 0;
right: 0;
z-index: 10000;
pointer-events: none;
padding: 0 8px;
display: flex;
flex-direction: column;
align-items: center;
}
.ios-message {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border-radius: 22px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
margin: 4px 0;
padding: 12px 18px;
display: flex;
align-items: center;
gap: 12px;
max-width: 380px;
width: fit-content;
transform: translateY(-120px) scale(0.9);
opacity: 0;
transition: all 0.45s cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: auto;
font-size: 14px;
font-weight: 500;
color: #1c1c1e;
letter-spacing: -0.15px;
line-height: 1.35;
}
.ios-message-icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
}
.ios-message-text {
flex: 1;
line-height: 1.35;
}
/* Type colors — icon-only tinting, no border accents (iOS 17+ style) */
.ios-message-success .ios-message-icon {
background: #34c759;
color: #fff;
}
.ios-message-error .ios-message-icon {
background: #ff3b30;
color: #fff;
}
.ios-message-warning .ios-message-icon {
background: #ff9500;
color: #fff;
}
.ios-message-info .ios-message-icon {
background: #007aff;
color: #fff;
}
/* Animation states */
.ios-message-show {
transform: translateY(0) scale(1);
opacity: 1;
}
.ios-message-hide {
transform: translateY(-120px) scale(0.9);
opacity: 0;
transition: all 0.35s cubic-bezier(0.32, 0, 0.67, 0);
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.ios-message {
background: rgba(44, 44, 46, 0.88) !important;
color: #f2f2f7 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08) !important;
}
}
.theme-dark .ios-message {
background: rgba(44, 44, 46, 0.88) !important;
color: #f2f2f7 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08) !important;
}
/* Ultra-aggressive back button color fix */
.page .ios-nav-back,
.page.has-nav-header .ios-nav-back,
div .ios-nav-back,
.ios-nav-header .ios-nav-back {
color: #007aff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure proper spacing for advanced settings pages */
#page_advanced_main .settings-section:first-child {
margin-top: 0;
}
/* Advanced table search styling */
#key_value_search {
margin-bottom: 8px;
}
/* File input styling improvements */
input[type="file"] {
cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
background: #007aff;
color: white;
border: none;
border-radius: 6px;
padding: 6px 12px;
margin-right: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
input[type="file"]::-webkit-file-upload-button:hover {
background: #0056b3;
}
@media (prefers-color-scheme: dark) {
input[type="file"]::-webkit-file-upload-button {
background: #0a84ff;
}
input[type="file"]::-webkit-file-upload-button:hover {
background: #0056b3;
}
}
/* ====================================
* MESSAGES PAGE STYLING
* ==================================== */
/* Messages Container */
#messages_container {
display: flex;
flex-direction: column;
gap: 0;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
#messages_container:empty {
display: none;
}
/* Message Items */
.message-item {
display: flex;
align-items: flex-start;
padding: 16px;
border-bottom: 0.5px solid #c6c6c8;
background: #ffffff;
transition: background-color 0.15s ease;
gap: 12px;
}
.message-item:last-child {
border-bottom: none;
}
.message-item:hover {
background-color: #f2f2f7;
}
.message-item.error {
background-color: #fff5f5;
}
.message-item.error:hover {
background-color: #ffebeb;
}
/* Message Content */
.message-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.message-text {
font-size: 16px;
font-weight: 500;
color: #1d1d1f;
line-height: 1.4;
word-wrap: break-word;
}
.message-time {
font-size: 13px;
color: #6d6d70;
line-height: 1.2;
}
/* Message Type Icons */
.message-item::before {
content: 'ℹ️';
font-size: 18px;
flex-shrink: 0;
width: 24px;
text-align: center;
}
.message-item.error::before {
content: '⚠️';
}
/* Message Dismiss Button */
.message-dismiss {
background: none;
border: none;
color: #8e8e93;
font-size: 24px;
font-weight: 300;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
transition: all 0.15s ease;
flex-shrink: 0;
}
.message-dismiss:hover {
background-color: #e5e5ea;
color: #1d1d1f;
}
.message-dismiss:active {
background-color: #d1d1d6;
transform: scale(0.95);
}
/* Empty State */
.empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
}
.empty-state-title {
font-size: 20px;
font-weight: 600;
color: #1d1d1f;
margin-bottom: 8px;
}
.empty-state-subtitle {
font-size: 16px;
color: #6d6d70;
line-height: 1.4;
max-width: 300px;
margin: 0 auto;
}
/* Dark mode for empty state */
@media (prefers-color-scheme: dark) {
.empty-state-title {
color: #ffffff;
}
.empty-state-subtitle {
color: #8e8e93;
}
#messages_empty_state {
background: #1c1c1e;
color: #ffffff;
}
#messages_empty_state .setting-row {
background: #1c1c1e;
}
#messages_empty_state .setting-content {
background: #1c1c1e;
color: #ffffff;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
#messages_container {
background: #1c1c1e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.message-item {
background: #1c1c1e;
border-bottom-color: #48484a;
}
.message-item:hover {
background-color: #2c2c2e;
}
.message-item.error {
background-color: #2d1b1b;
}
.message-item.error:hover {
background-color: #3d2525;
}
.message-text {
color: #ffffff;
}
.message-time {
color: #a1a1a6;
}
.message-dismiss {
color: #a1a1a6;
}
.message-dismiss:hover {
background-color: #3a3a3c;
color: #ffffff;
}
.message-dismiss:active {
background-color: #48484a;
}
.empty-state-title {
color: #ffffff;
}
.empty-state-subtitle {
color: #a1a1a6;
}
}
/* Mobile Optimizations */
@media (max-width: 767px) {
.message-item {
padding: 14px 16px;
gap: 10px;
}
.message-text {
font-size: 15px;
}
.message-time {
font-size: 12px;
}
.message-item::before {
font-size: 16px;
width: 20px;
}
.message-dismiss {
width: 28px;
height: 28px;
font-size: 20px;
}
.empty-state-icon {
font-size: 40px;
margin-bottom: 12px;
}
.empty-state-title {
font-size: 18px;
}
.empty-state-subtitle {
font-size: 14px;
}
}
/* ====================================
* ENHANCED WIFI SSID VISIBILITY STYLING
* ==================================== */
/* Section header improvements */
.section-header .setting-content {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.section-header .setting-label {
font-size: 18px;
font-weight: 600;
color: #1d1d1f;
}
.section-header .setting-subtitle {
font-size: 14px;
color: #6d6d70;
line-height: 1.3;
margin: 0;
}
/* WiFi Radio Group */
.wifi-radio-group {
display: flex;
flex-direction: column;
gap: 0;
margin: 16px 0 24px 0;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.wifi-radio-option {
position: relative;
border-bottom: 0.5px solid #c6c6c8;
transition: background-color 0.15s ease;
}
.wifi-radio-option:last-child {
border-bottom: none;
}
.wifi-radio-option:hover {
background-color: #f2f2f7;
}
.wifi-radio-option:active {
background-color: #e5e5ea;
}
.wifi-radio-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.wifi-radio-label {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
user-select: none;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
/* Custom Radio Indicator */
.radio-indicator {
width: 22px;
height: 22px;
border: 2px solid #c6c6c8;
border-radius: 50%;
background: #ffffff;
position: relative;
flex-shrink: 0;
transition: all 0.2s ease;
}
.radio-indicator::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: #007aff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease;
}
.wifi-radio-option input[type="radio"]:checked+.wifi-radio-label .radio-indicator {
border-color: #007aff;
background: #ffffff;
}
.wifi-radio-option input[type="radio"]:checked+.wifi-radio-label .radio-indicator::after {
transform: translate(-50%, -50%) scale(1);
}
/* Radio Content */
.radio-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.radio-title {
font-size: 16px;
font-weight: 500;
color: #1d1d1f;
line-height: 1.3;
}
.radio-description {
font-size: 13px;
color: #6d6d70;
line-height: 1.3;
}
/* WiFi Checkbox Option */
.wifi-checkbox-option {
margin-top: 8px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: background-color 0.15s ease;
}
.wifi-checkbox-option:hover {
background-color: #f2f2f7;
}
.wifi-checkbox-option:active {
background-color: #e5e5ea;
}
.wifi-checkbox-option input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.wifi-checkbox-label {
display: flex;
align-items: center;
padding: 16px;
cursor: pointer;
user-select: none;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
/* Custom Checkbox Indicator */
.checkbox-indicator {
width: 22px;
height: 22px;
border: 2px solid #c6c6c8;
border-radius: 6px;
background: #ffffff;
position: relative;
flex-shrink: 0;
transition: all 0.2s ease;
}
.checkbox-indicator::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
color: #ffffff;
font-size: 14px;
font-weight: 600;
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s ease;
}
.wifi-checkbox-option input[type="checkbox"]:checked+.wifi-checkbox-label .checkbox-indicator {
border-color: #007aff;
background: #007aff;
}
.wifi-checkbox-option input[type="checkbox"]:checked+.wifi-checkbox-label .checkbox-indicator::after {
transform: translate(-50%, -50%) scale(1);
}
/* Checkbox Content */
.checkbox-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.checkbox-title {
font-size: 16px;
font-weight: 500;
color: #1d1d1f;
line-height: 1.3;
}
.checkbox-description {
font-size: 13px;
color: #6d6d70;
line-height: 1.3;
}
/* ====== THEME TOGGLE ====== */
.theme-toggle-container {
display: flex;
align-items: center;
padding-left: 10px;
}
.theme-toggle {
position: relative;
width: 51px;
height: 31px;
cursor: pointer;
user-select: none;
}
.theme-toggle-track {
width: 100%;
height: 100%;
background: #e5e5ea;
border-radius: 16px;
position: relative;
transition: background-color 0.2s ease;
border: 1px solid #d1d1d6;
}
.theme-toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
background: #ffffff;
border-radius: 50%;
transition: transform 0.2s ease, background-color 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* System preference state (default) */
.theme-toggle.system .theme-toggle-track {
background: #8e8e93;
}
.theme-toggle.system .theme-toggle-thumb {
transform: translateX(10px);
background: #f2f2f7;
}
/* Light theme forced state */
.theme-toggle.light .theme-toggle-track {
background: #e5e5ea;
}
.theme-toggle.light .theme-toggle-thumb {
transform: translateX(0);
background: #ffffff;
}
/* Dark theme forced state */
.theme-toggle.dark .theme-toggle-track {
background: #0a84ff;
}
.theme-toggle.dark .theme-toggle-thumb {
transform: translateX(20px);
background: #ffffff;
}
/* Active/pressed state */
.theme-toggle:active .theme-toggle-thumb {
width: 30px;
}
/* Force override classes for manual theme control */
.theme-light {
color-scheme: light !important;
}
.theme-dark {
color-scheme: dark !important;
}
.theme-dark .topContainer {
/* Dark theme gradient and contrasting borders */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.05)) !important;
border-top: 0.5px solid rgba(255, 255, 255, 0.15) !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.4) !important;
}
/* Override media queries when theme is manually set */
.theme-light .topContainer {
/* Light theme gradient and contrasting borders */
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.02)) !important;
border-top: 0.5px solid rgba(255, 255, 255, 0.3) !important;
border-bottom: 0.5px solid rgba(0, 0, 0, 0.2) !important;
}
.theme-light .tab-bar {
background: rgba(249, 249, 249, 0.8) !important;
border-top: 0.5px solid #c6c6c8 !important;
}
.theme-light .tab-button {
color: #8e8e93 !important;
}
.theme-light .tab-button.active {
background: rgba(0, 0, 0, 0.15) !important;
color: #ffffff !important;
border-radius: 8px;
}
.theme-dark .tab-bar {
background: rgba(28, 28, 30, 0.8) !important;
border-top: 0.5px solid #38383a !important;
}
.theme-dark .tab-button {
color: #c7c7cc !important;
}
.theme-dark .tab-button.active {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
border-radius: 8px;
}
/* Dark theme overrides for all dark mode elements */
.theme-dark .settings-section {
background: #1c1c1e !important;
border-top: 0.5px solid #38383a !important;
border-bottom: 0.5px solid #38383a !important;
}
.theme-dark .setting-row:not(:last-child)::after {
background: #38383a !important;
}
.theme-dark .setting-label {
color: #fff !important;
}
.theme-dark .setting-value {
color: #8e8e93 !important;
}
.theme-dark .setting-subtitle {
color: #8e8e93 !important;
}
.theme-dark .setting-arrow {
color: #48484a !important;
}
.theme-dark .setting-icon {
color: #fff !important;
}
.theme-dark .setting-row.button-row:active {
background-color: #48484a !important;
}
.theme-dark .setting-row.button-row:hover {
background-color: #2c2c2e !important;
}
/* Dark theme: colored CTA buttons — keep background, ensure white text */
.theme-dark .setting-row.button-row[style*="background"] .setting-label {
color: #fff !important;
}
.theme-dark .setting-row.button-row[style*="background"] .setting-subtitle {
color: rgba(255, 255, 255, 0.85) !important;
}
.theme-dark .setting-row.button-row[style*="background"] .setting-icon {
color: #fff !important;
}
.theme-dark .setting-row.button-row[style*="background"]:hover {
filter: brightness(1.15);
background-color: unset !important;
}
.theme-dark .setting-row.button-row[style*="background"]:active {
filter: brightness(0.85);
background-color: unset !important;
}
.theme-dark .setting-row.button-row.active {
background-color: #3a3a3c !important;
color: #fff !important;
}
.theme-dark .setting-row.button-row.active .setting-icon {
color: #fff !important;
}
.theme-dark .setting-row.button-row.active .setting-label {
color: #fff !important;
font-weight: 500 !important;
}
.theme-dark .setting-row.button-row.active .setting-subtitle {
color: rgba(255, 255, 255, 0.8) !important;
}
.theme-dark .setting-row.button-row.active .setting-arrow {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Demo mode active state - dark theme */
.theme-dark .setting-row.button-row.demo-active {
background-color: rgba(0, 255, 0, 0.1) !important;
border-left: 3px solid #00ff00;
}
.theme-dark .setting-row.button-row.demo-active .setting-icon {
color: #00ff00 !important;
}
.theme-dark .setting-row.button-row.demo-active .setting-label {
color: #00ff00 !important;
}
.theme-dark .setting-row.button-row.demo-active .setting-subtitle {
color: rgba(0, 255, 0, 0.7) !important;
}
/* Dark theme - Add New Key Button - prevent text clipping */
.theme-dark #add_new_key_button .setting-label {
max-width: none !important;
overflow: visible !important;
text-overflow: none !important;
}
/* Dark theme - Reload All Values Button - prevent text clipping */
.theme-dark #reload_all_values_button .setting-label {
max-width: none !important;
overflow: visible !important;
text-overflow: none !important;
}
/* Dark theme - iOS-style colors for Add New Key and Reload All Values buttons - FORCE OVERRIDE */
.theme-dark #add_new_key_button,
.theme-dark #reload_all_values_button {
background: #1c1c1e !important;
background-color: #1c1c1e !important;
background-image: none !important;
border: 1px solid #2c2c2e !important;
border-color: #2c2c2e !important;
color: #ffffff !important;
box-shadow: none !important;
}
.theme-dark #add_new_key_button:hover,
.theme-dark #reload_all_values_button:hover {
background: #2c2c2e !important;
background-color: #2c2c2e !important;
background-image: none !important;
border-color: #3a3a3c !important;
box-shadow: none !important;
}
.theme-dark #add_new_key_button:active,
.theme-dark #reload_all_values_button:active {
background: #3a3a3c !important;
background-color: #3a3a3c !important;
background-image: none !important;
border-color: #48484a !important;
box-shadow: none !important;
}
.theme-dark #add_new_key_button .setting-icon,
.theme-dark #reload_all_values_button .setting-icon {
color: #ffffff !important;
}
.theme-dark #add_new_key_button .setting-label,
.theme-dark #reload_all_values_button .setting-label {
color: #ffffff !important;
font-weight: 500 !important;
}
.theme-dark #add_new_key_button .setting-subtitle,
.theme-dark #reload_all_values_button .setting-subtitle {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Light theme - iOS-style colors for Add New Key and Reload All Values buttons - FORCE OVERRIDE */
@media (prefers-color-scheme: light) {
#add_new_key_button,
#reload_all_values_button {
background: #f2f2f7 !important;
background-color: #f2f2f7 !important;
background-image: none !important;
border: 1px solid #d1d1d6 !important;
border-color: #d1d1d6 !important;
color: #000000 !important;
box-shadow: none !important;
}
#add_new_key_button:hover,
#reload_all_values_button:hover {
background: #e5e5ea !important;
background-color: #e5e5ea !important;
background-image: none !important;
border-color: #d1d1d6 !important;
box-shadow: none !important;
}
#add_new_key_button:active,
#reload_all_values_button:active {
background: #d1d1d6 !important;
background-color: #d1d1d6 !important;
background-image: none !important;
border-color: #c7c7cc !important;
box-shadow: none !important;
}
#add_new_key_button .setting-icon,
#reload_all_values_button .setting-icon {
color: #000000 !important;
}
#add_new_key_button .setting-label,
#reload_all_values_button .setting-label {
color: #000000 !important;
font-weight: 500 !important;
}
#add_new_key_button .setting-subtitle,
#reload_all_values_button .setting-subtitle {
color: rgba(0, 0, 0, 0.6) !important;
}
}
/* Bake All Values button specific styling */
#bake_all_values_button {
background-color: rgba(0, 122, 255, 0.1);
border: 1px solid rgba(0, 122, 255, 0.2);
border-radius: 10px;
margin-bottom: 16px;
}
#bake_all_values_button:hover {
background-color: rgba(0, 122, 255, 0.15) !important;
border-color: rgba(0, 122, 255, 0.3);
}
#bake_all_values_button:active {
background-color: rgba(0, 122, 255, 0.2) !important;
transform: scale(0.98);
}
#bake_all_values_button .setting-icon {
font-size: 18px;
}
#bake_all_values_button .setting-label {
color: #007aff;
font-weight: 600;
}
#bake_all_values_button .setting-subtitle {
color: #8e8e93;
}
/* Dark theme for Bake All button */
@media (prefers-color-scheme: dark) {
#bake_all_values_button {
background-color: rgba(10, 132, 255, 0.15);
border-color: rgba(10, 132, 255, 0.3);
}
#bake_all_values_button:hover {
background-color: rgba(10, 132, 255, 0.2) !important;
border-color: rgba(10, 132, 255, 0.4);
}
#bake_all_values_button:active {
background-color: rgba(10, 132, 255, 0.25) !important;
}
#bake_all_values_button .setting-label {
color: #0a84ff;
}
#bake_all_values_button .setting-subtitle {
color: #a1a1a6;
}
}
.theme-dark #bake_all_values_button {
background-color: rgba(10, 132, 255, 0.15) !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
.theme-dark #bake_all_values_button:hover {
background-color: rgba(10, 132, 255, 0.2) !important;
border-color: rgba(10, 132, 255, 0.4) !important;
}
.theme-dark #bake_all_values_button:active {
background-color: rgba(10, 132, 255, 0.25) !important;
}
.theme-dark #bake_all_values_button .setting-label {
color: #0a84ff !important;
}
.theme-dark #bake_all_values_button .setting-subtitle {
color: #a1a1a6 !important;
}
#fixtureRoleSelect {
min-width: auto !important;
max-width: 110px !important;
}
#fixture_role_row .setting-label {
max-width: none !important;
overflow: visible !important;
}
#wireless_group_select {
min-width: auto !important;
max-width: 140px !important;
}
.theme-dark .setting-select {
color: #ffffff !important;
font-weight: 500 !important;
background-color: rgba(118, 118, 128, 0.24) !important;
background-image: url('data:image/svg+xml;charset=UTF-8,') !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 12px !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
max-width: 220px !important;
min-width: 180px !important;
}
.theme-dark .setting-select:focus {
background-color: rgba(118, 118, 128, 0.32) !important;
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);
}
.theme-dark .setting-select:hover {
background-color: rgba(118, 118, 128, 0.32) !important;
}
.theme-dark .setting-select:active {
background-color: rgba(118, 118, 128, 0.4) !important;
}
.theme-light .setting-select {
color: #000000 !important;
font-weight: 500 !important;
background-color: rgba(118, 118, 128, 0.12) !important;
background-image: url('data:image/svg+xml;charset=UTF-8,') !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 12px !important;
transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
max-width: 220px !important;
min-width: 180px !important;
}
.theme-light .setting-select:focus {
background-color: rgba(118, 118, 128, 0.16) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3) !important;
}
.theme-light .setting-select:hover {
background-color: rgba(118, 118, 128, 0.16) !important;
}
.theme-light .setting-select:active {
background-color: rgba(118, 118, 128, 0.2) !important;
}
/* Dark mode styles for theme toggle */
@media (prefers-color-scheme: dark) {
.theme-toggle-track {
background: #48484a;
border-color: #38383a;
}
.theme-toggle.system .theme-toggle-track {
background: #8e8e93;
}
.theme-toggle.light .theme-toggle-track {
background: #8e8e93;
}
.theme-toggle.dark .theme-toggle-track {
background: #0a84ff;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.section-header .setting-label {
color: #ffffff;
}
.section-header .setting-subtitle {
color: #a1a1a6;
}
.wifi-radio-group,
.wifi-checkbox-option {
background: #1c1c1e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.wifi-radio-option {
border-bottom-color: #48484a;
}
.wifi-radio-option:hover,
.wifi-checkbox-option:hover {
background-color: #2c2c2e;
}
.wifi-radio-option:active,
.wifi-checkbox-option:active {
background-color: #3a3a3c;
}
.radio-indicator,
.checkbox-indicator {
border-color: #48484a;
background: #1c1c1e;
}
.wifi-radio-option input[type="radio"]:checked+.wifi-radio-label .radio-indicator,
.wifi-checkbox-option input[type="checkbox"]:checked+.wifi-checkbox-label .checkbox-indicator {
border-color: #0a84ff;
}
.wifi-checkbox-option input[type="checkbox"]:checked+.wifi-checkbox-label .checkbox-indicator {
background: #0a84ff;
}
.radio-indicator::after {
background: #0a84ff;
}
.radio-title,
.checkbox-title {
color: #ffffff;
}
.radio-description,
.checkbox-description {
color: #a1a1a6;
}
}
/* Enhanced interaction feedback */
.wifi-radio-option:focus-within .radio-indicator,
.wifi-checkbox-option:focus-within .checkbox-indicator {
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}
/* Mobile optimizations */
@media (max-width: 767px) {
/* Adjust navigation and header padding for smaller screens */
.ios-nav-header {
padding: 0 16px !important;
}
.topContainer {
padding: 8px 16px 12px 16px !important;
}
.page.has-nav-header #main_container_div>.settings-section {
margin-left: 16px;
margin-right: 16px;
}
.wifi-radio-label,
.wifi-checkbox-label {
padding: 14px 16px;
}
.radio-title,
.checkbox-title {
font-size: 15px;
}
.radio-description,
.checkbox-description {
font-size: 12px;
}
.radio-indicator,
.checkbox-indicator {
width: 20px;
height: 20px;
}
.radio-indicator::after {
width: 7px;
height: 7px;
}
.checkbox-indicator::after {
font-size: 12px;
}
}
/* ====== iOS-STYLE NAVIGATION HEADERS ====== */
.ios-nav-header {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
height: 64px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.29);
z-index: 100 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 0 20px;
/* Increased from 16px to match topContainer */
transform: none !important;
transition: none !important;
animation: none !important;
margin: 0 !important;
float: none !important;
box-sizing: border-box;
/* Ensure padding is included in width */
}
/* Desktop alignment: constrain nav header width to match topContainer so back links
and right action buttons align with the top bar logo and icons.
These rules must appear AFTER the base .ios-nav-header block to win the cascade. */
@media (min-width: 768px) {
.ios-nav-header {
max-width: 520px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
.ios-nav-back {
padding-left: 4px !important; /* Align with topContainerLeft logo padding */
}
}
@media (min-width: 1200px) {
.ios-nav-header {
max-width: 580px !important;
}
}
.ios-nav-back {
display: flex !important;
align-items: center !important;
background: none !important;
border: none !important;
color: #007aff !important;
font-size: 17px !important;
font-weight: 400 !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
text-decoration: none !important;
min-height: 44px !important;
padding-right: 8px !important;
z-index: 10001 !important;
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
flex-shrink: 0;
/* Prevent button from shrinking */
}
.ios-nav-back:hover {
opacity: 0.6 !important;
}
.ios-nav-back:active {
opacity: 0.3 !important;
}
.ios-nav-back-arrow {
font-size: 18px;
margin-right: 6px;
font-weight: 600;
}
.ios-nav-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 17px;
font-weight: 600;
color: #000;
text-align: center;
/* Center title properly without margins affecting position */
max-width: calc(100% - 200px);
/* Reserve space for back button (left) and right actions */
pointer-events: none;
/* Prevent title from blocking button clicks */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ios-nav-right {
/* Container for right-side buttons */
width: auto;
min-width: 44px;
padding-left: 8px;
margin: 0;
/* Remove negative margin */
flex-shrink: 0;
/* Prevent container from shrinking */
}
.ios-nav-button {
background: none;
border: none;
color: #007aff;
font-size: 17px;
font-weight: 400;
cursor: pointer;
padding: 0;
min-height: 44px;
padding: 0 8px;
}
.ios-nav-button:hover {
opacity: 0.6;
}
.ios-nav-button:active {
opacity: 0.3;
}
.refresh-icon {
font-size: 22px;
display: inline-block;
}
.ios-nav-button.spinning .refresh-icon {
animation: spin-once 0.6s ease-in-out;
}
@keyframes spin-once {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.ios-nav-button {
color: #0a84ff;
}
}
.theme-dark .ios-nav-button {
color: #0a84ff !important;
}
.theme-light .ios-nav-button {
color: #007aff !important;
}
/* Pages without nav headers - no padding needed with inline header */
.page:not(.has-nav-header) {
padding-top: 0;
/* No padding needed - topContainerOuter is inline */
}
/* Home page uses normal flow with inline header */
#page_home {
position: relative;
padding-top: 0 !important;
/* No padding needed with inline header */
overflow-y: auto;
/* Allow scrolling */
}
/* Override #app padding when home page is active */
#app:has(#page_home.active) {
padding-top: 0 !important;
/* Remove #app padding for home page */
}
/* Fallback for browsers that don't support :has() selector */
body.home-page-active #app {
padding-top: 0 !important;
}
/* Adjust page content to account for navigation header */
.page.has-nav-header {
position: relative;
/* Ensure navigation header is positioned relative to page */
padding-top: 0;
}
/* Compensate for app padding on pages with nav headers */
.page.has-nav-header.active {
margin-top: -20px;
/* Compensate for #app padding-top: 20px */
}
/* Main container for pages with navigation header - no padding needed since header is inline */
.page.has-nav-header #main_container_div {
padding-top: 0 !important;
/* No padding needed - navigation header is inline, not fixed */
}
/* Override for messages page - inline headers don't need special handling */
#page_messages.page.has-nav-header #main_container_div {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Override for schedule edit page - use positioning instead of padding */
#page_schedule_edit.page.has-nav-header #main_container_div {
padding-top: 0 !important;
/* Remove padding */
position: absolute !important;
/* Use absolute positioning */
top: 64px !important;
/* Position below nav header (64px height) */
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
/* Fill remaining space */
}
/* Messages page follows standard page behavior */
#page_messages {
/* Uses standard .page and .page.has-nav-header rules */
background: #f2f2f7;
}
/* This rule moved above with higher specificity */
/* Mobile adjustments for messages page */
@media (max-width: 480px) {
#page_messages.page.has-nav-header #main_container_div {
margin-top: 0 !important;
/* No special spacing needed with inline headers */
}
}
/* 0-10V Config page slider containers */
#page_010v_config .slider-container {
width: 100%;
margin-top: 8px;
}
/* Remove padding/margin between top nav and Live Voltage Readings for 0-10V config */
#page_010v_config.page.has-nav-header {
padding-top: 0;
}
#page_010v_config #main_container_div {
padding-top: 0;
margin-top: 0;
}
#page_010v_config .settings-section:first-of-type {
margin-top: 0;
}
/* Force slider component text to be visible */
slider-component {
--slider-text-color: #000000;
}
/* Dark mode slider text */
@media (prefers-color-scheme: dark) {
slider-component {
--slider-text-color: #ffffff;
}
}
/* Voltage trim sliders container - side by side layout */
.voltage-trim-container {
display: flex;
justify-content: center;
align-items: flex-start;
width: 100%;
gap: 0;
padding: 0;
box-sizing: border-box;
}
.voltage-trim-container .slider-group {
flex: 0 0 auto;
min-width: 0;
margin: 0;
padding: 0;
}
.voltage-trim-container slider-component {
display: block;
width: 185px;
margin: 0;
}
#page_010v_config slider-component {
display: block;
margin: 0;
}
/* Voltage plot canvas styling */
#page_010v_config #voltage_plot_canvas {
max-width: 100%;
height: auto;
}
/* Dual slider text colors */
#page_010v_config slider-component {
color: #000000;
}
/* Dark mode styling for voltage plot and sliders */
@media (prefers-color-scheme: dark) {
#page_010v_config #voltage_plot_canvas {
background: #1c1c1e !important;
border-color: #3a3a3c !important;
}
/* Fix dual slider text colors in dark mode */
#page_010v_config slider-component {
color: #ffffff;
}
}
/* Dark mode for messages page */
@media (prefers-color-scheme: dark) {
#page_messages {
background: #000000;
}
}
#page_messages.active {
display: block !important;
min-height: 100vh !important;
height: 100vh !important;
width: 100% !important;
}
/* Force all messages page containers to have dimensions */
#page_messages * {
box-sizing: border-box !important;
}
#page_messages #main_container_div {
min-height: calc(100vh - 64px) !important;
height: auto !important;
width: 100% !important;
padding: 0 !important;
display: block !important;
}
#page_messages .settings-section {
width: 100% !important;
display: block !important;
padding: 0 16px !important;
background: transparent;
}
/* Remove bottom margin from settings-section on schedule page */
#page_schedule .settings-section {
margin-bottom: 0 !important;
}
/* Remove top padding/margin from setting-content on schedule page */
#page_schedule .setting-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Fix truncated text on schedule page reset buttons */
#page_schedule .schedule-controls .setting-label {
max-width: 100% !important;
white-space: normal !important;
}
#page_messages #messages_container {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: transparent;
overflow: visible !important;
}
/* Force message items to have proper dimensions and colors */
#page_messages .message-item {
display: flex !important;
width: 100% !important;
min-height: 60px !important;
padding: 16px !important;
background: #ffffff !important;
color: #000000 !important;
border-bottom: 1px solid #e0e0e0;
border-left: none !important;
margin-bottom: 8px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Dark mode for message items */
@media (prefers-color-scheme: dark) {
#page_messages .message-item {
background: #2c2c2e !important;
color: #ffffff !important;
border-bottom: 1px solid #3a3a3c;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
}
#page_messages .message-content {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 4px;
}
#page_messages .message-text {
color: #000000 !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
margin: 0 !important;
word-wrap: break-word;
}
#page_messages .message-time {
color: #666666 !important;
font-size: 13px !important;
line-height: 1.2;
margin: 0 !important;
}
#page_messages .message-dismiss {
margin-left: 12px;
flex-shrink: 0;
}
/* Dark mode for message text */
@media (prefers-color-scheme: dark) {
#page_messages .message-text {
color: #ffffff !important;
}
#page_messages .message-time {
color: #8e8e93 !important;
}
}
/* Dark mode overrides for messages page */
.theme-dark #page_messages {
background: #1c1c1e !important;
}
.theme-dark #page_messages #messages_container {
background: #2c2c2e !important;
}
.theme-dark #page_messages .message-item {
background: #2c2c2e !important;
color: #ffffff !important;
border-bottom-color: #3a3a3c !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.theme-dark #page_messages .message-text {
color: #ffffff !important;
}
.theme-dark #page_messages .message-time {
color: #8e8e93 !important;
}
/* Message item colors are handled by existing rules above */
/* Dark mode styles for iOS navigation */
@media (prefers-color-scheme: dark) {
.ios-nav-header {
background: rgba(28, 28, 30, 0.95) !important;
border-bottom-color: rgba(84, 84, 88, 0.6) !important;
}
.ios-nav-back {
color: #0a84ff;
}
.ios-nav-title {
color: #fff;
}
/* Ultra-aggressive background fix for dark mode */
.page .ios-nav-header,
.page.has-nav-header .ios-nav-header,
div .ios-nav-header {
background: rgba(28, 28, 30, 0.95) !important;
border-bottom-color: rgba(84, 84, 88, 0.6) !important;
}
/* Ultra-aggressive back button fix for dark mode */
.page .ios-nav-back,
.page.has-nav-header .ios-nav-back,
div .ios-nav-back,
.ios-nav-header .ios-nav-back {
color: #0a84ff !important;
opacity: 1 !important;
visibility: visible !important;
}
}
/* Theme override styles for iOS navigation */
.theme-dark .ios-nav-header {
background: rgba(28, 28, 30, 0.95) !important;
border-bottom-color: rgba(84, 84, 88, 0.6) !important;
}
.theme-dark .ios-nav-back {
color: #0a84ff !important;
}
.theme-dark .ios-nav-title {
color: #fff !important;
}
.theme-light .ios-nav-header {
background: rgba(255, 255, 255, 0.95) !important;
border-bottom-color: rgba(0, 0, 0, 0.29) !important;
}
.theme-light .ios-nav-back {
color: #007aff !important;
}
/* Ultra-aggressive theme background overrides */
.theme-dark .page .ios-nav-header,
.theme-dark .page.has-nav-header .ios-nav-header,
.theme-dark div .ios-nav-header,
.theme-dark .ios-nav-header {
background: rgba(28, 28, 30, 0.95) !important;
border-bottom-color: rgba(84, 84, 88, 0.6) !important;
}
.theme-light .page .ios-nav-header,
.theme-light .page.has-nav-header .ios-nav-header,
.theme-light div .ios-nav-header,
.theme-light .ios-nav-header {
background: rgba(255, 255, 255, 0.95) !important;
border-bottom-color: rgba(0, 0, 0, 0.29) !important;
}
/* Ultra-aggressive theme overrides for back button */
.theme-dark .page .ios-nav-back,
.theme-dark .page.has-nav-header .ios-nav-back,
.theme-dark div .ios-nav-back,
.theme-dark .ios-nav-header .ios-nav-back {
color: #0a84ff !important;
opacity: 1 !important;
visibility: visible !important;
}
.theme-light .page .ios-nav-back,
.theme-light .page.has-nav-header .ios-nav-back,
.theme-light div .ios-nav-back,
.theme-light .ios-nav-header .ios-nav-back {
color: #007aff !important;
opacity: 1 !important;
visibility: visible !important;
}
.theme-light .ios-nav-title {
color: #000 !important;
}
/* ====== DEVICE VALUES TABLE STYLING ====== */
.values-table-container {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin: 0;
}
.values-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.values-table thead {
background: #f8f9fa;
border-bottom: 1px solid #e1e5e9;
}
.values-table th {
padding: 12px 8px;
text-align: left;
font-weight: 600;
color: #495057;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.values-table td {
padding: 10px 6px;
border-bottom: 1px solid #f1f3f4;
vertical-align: middle;
}
.values-table tbody tr:hover {
background: #f8f9fa;
}
.values-table tbody tr:last-child td {
border-bottom: none;
}
/* Column sizing */
.col-check {
width: 28px;
text-align: center;
padding: 0 4px !important;
}
.col-check input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
accent-color: #007AFF;
}
.col-key {
width: 26%;
}
.col-type {
width: 10%;
}
.col-location {
width: 15%;
}
.col-actions {
width: 22%;
}
.col-value {
width: 22%;
}
/* Bulk delete bar */
#bulk_delete_bar {
position: sticky;
bottom: 0;
background: #f8f8f8;
border-top: 1px solid #e0e0e0;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
}
#bulk_delete_count {
font-size: 14px;
font-weight: 500;
color: var(--text-primary, #000);
}
#bulk_delete_button {
background: #ff3b30;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
#bulk_delete_button:active {
background: #d63029;
}
/* Calibration delete confirmation page */
.cal-delete-warning-card {
background: var(--card-bg, #fff);
border-radius: 12px;
padding: 24px 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.cal-delete-key-chip {
display: inline-block;
font-family: monospace;
font-size: 13px;
background: rgba(255, 59, 48, 0.1);
color: #ff3b30;
padding: 3px 8px;
border-radius: 4px;
margin: 2px 4px 2px 0;
}
.cal-delete-safe-chip {
display: inline-block;
font-family: monospace;
font-size: 13px;
background: rgba(0, 122, 255, 0.1);
color: #007AFF;
padding: 3px 8px;
border-radius: 4px;
margin: 2px 4px 2px 0;
}
.cal-delete-btn {
flex: 1;
padding: 14px 16px;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.cal-delete-btn-cancel {
background: var(--card-bg, #f2f2f7);
color: #007AFF;
}
.cal-delete-btn-skip {
background: #007AFF;
color: #fff;
}
.cal-delete-btn-confirm {
background: #ff3b30;
color: #fff;
}
@media (prefers-color-scheme: dark) {
#bulk_delete_bar {
background: #1c1c1e;
border-top-color: #38383a;
}
#bulk_delete_count {
color: #f2f2f7;
}
.cal-delete-warning-card {
background: #1c1c1e;
}
.cal-delete-key-chip {
background: rgba(255, 69, 58, 0.2);
color: #ff453a;
}
.cal-delete-safe-chip {
background: rgba(10, 132, 255, 0.2);
color: #0A84FF;
}
.cal-delete-btn-cancel {
background: #2c2c2e;
color: #0A84FF;
}
.cal-delete-btn-skip {
background: #0A84FF;
}
.cal-delete-btn-confirm {
background: #ff453a;
}
}
.theme-dark #bulk_delete_bar {
background: #1c1c1e !important;
border-top-color: #38383a !important;
}
.theme-dark #bulk_delete_count {
color: #f2f2f7 !important;
}
.theme-dark .cal-delete-warning-card {
background: #1c1c1e !important;
}
.theme-dark .cal-delete-key-chip {
background: rgba(255, 69, 58, 0.2) !important;
color: #ff453a !important;
}
.theme-dark .cal-delete-safe-chip {
background: rgba(10, 132, 255, 0.2) !important;
color: #0A84FF !important;
}
.theme-dark .cal-delete-btn-cancel {
background: #2c2c2e !important;
color: #0A84FF !important;
}
.theme-dark .cal-delete-btn-skip {
background: #0A84FF !important;
}
.theme-dark .cal-delete-btn-confirm {
background: #ff453a !important;
}
.theme-light .cal-delete-btn-cancel {
background: #f2f2f7 !important;
color: #007AFF !important;
}
/* Remove padding from type column to save space */
.values-table td.col-type,
.values-table .col-type {
padding-left: 2px !important;
padding-right: 2px !important;
}
/* Value cell styling */
.value-cell {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
font-size: 12px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value-cell:hover {
overflow: visible;
white-space: normal;
z-index: 10;
position: relative;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px;
padding: 8px;
}
/* Type and location styling */
.location-persistent {
color: #28a745;
font-weight: 500;
}
.location-resettable {
color: #ffc107;
font-weight: 500;
}
.location-both {
color: #dc3545;
font-weight: 500;
}
.type-select {
background: none;
border: none;
font-size: 14px;
color: #000000;
font-weight: 500;
text-align: center;
padding: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 6px;
background-color: rgba(118, 118, 128, 0.12);
background-image: url('data:image/svg+xml;charset=UTF-8,');
background-repeat: no-repeat;
background-position: right 2px center;
background-size: 10px;
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
min-width: 60px;
max-width: 80px;
}
.type-select:focus {
outline: none;
background-color: rgba(118, 118, 128, 0.16);
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}
.type-select:hover {
background-color: rgba(118, 118, 128, 0.16);
}
.type-select:active {
background-color: rgba(118, 118, 128, 0.2);
}
/* Action buttons */
.value-actions {
display: flex;
gap: 4px;
align-items: center;
}
.value-action-btn {
background: none;
border: 1px solid #ddd;
border-radius: 6px;
padding: 6px 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
min-width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.value-action-btn:hover {
background: #f8f9fa;
border-color: #adb5bd;
}
.value-action-btn:active {
transform: scale(0.95);
}
.value-action-btn.edit-btn {
color: #007bff;
}
.value-action-btn.edit-btn:hover {
background: #e3f2fd;
border-color: #007bff;
}
.value-action-btn.delete-btn {
color: #dc3545;
}
.value-action-btn.delete-btn:hover {
background: #fce4ec;
border-color: #dc3545;
}
.value-action-btn.bake-btn {
color: #fd7e14;
}
.value-action-btn.bake-btn:hover {
background: #fff3cd;
border-color: #fd7e14;
}
.value-action-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* iOS navigation action button */
.ios-nav-action {
background: #007aff;
color: #fff;
border: none;
border-radius: 8px;
padding: 6px 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
z-index: inherit;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ios-nav-action:hover {
background: #0056b3;
transform: scale(1.05);
}
.ios-nav-action:active {
transform: scale(0.95);
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
.values-table-container {
background: #2c2c2e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.values-table thead {
background: #3a3a3c;
border-bottom-color: #48484a;
}
.values-table th {
color: #f2f2f7;
}
.values-table td {
border-bottom-color: #48484a;
color: #f2f2f7;
}
.values-table tbody tr:hover {
background: #3a3a3c;
}
.value-cell:hover {
background: #2c2c2e;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.type-select {
color: #ffffff;
background-color: rgba(118, 118, 128, 0.24);
background-image: url('data:image/svg+xml;charset=UTF-8,');
}
.type-select:focus {
background-color: rgba(118, 118, 128, 0.32);
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);
}
.type-select:hover {
background-color: rgba(118, 118, 128, 0.32);
}
.type-select:active {
background-color: rgba(118, 118, 128, 0.4);
}
/* Device values modal form elements */
.modal-content textarea,
.modal-content select {
background: #3a3a3c;
color: #f2f2f7;
border: 1px solid #48484a;
border-radius: 6px;
}
.modal-content textarea:focus,
.modal-content select:focus {
border-color: #0a84ff;
outline: none;
}
.modal-content label {
color: #f2f2f7;
}
/* Device values table dark theme */
.values-table-container {
background: #2c2c2e;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.values-table thead th {
background: #1c1c1e;
color: #f2f2f7;
border-bottom: 1px solid #48484a;
}
.values-table tbody td {
border-bottom: 1px solid #48484a;
color: #f2f2f7;
}
.values-table tbody tr:hover {
background: #3a3a3c;
}
.value-cell {
background: #2c2c2e;
color: #f2f2f7;
}
.value-cell:hover {
background: #2c2c2e;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.value-action-btn {
border-color: #48484a;
color: #f2f2f7;
}
.value-action-btn:hover {
background: #3a3a3c;
border-color: #636366;
}
.ios-nav-action {
background: #0a84ff;
}
.ios-nav-action:hover {
background: #007aff;
}
}
/* Theme override styles */
.theme-dark .values-table-container {
background: #2c2c2e !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.theme-dark .values-table thead {
background: #3a3a3c !important;
border-bottom-color: #48484a !important;
}
.theme-dark .values-table th {
color: #f2f2f7 !important;
}
.theme-dark .values-table td {
border-bottom-color: #48484a !important;
color: #f2f2f7 !important;
}
.theme-dark .values-table tbody tr:hover {
background: #3a3a3c !important;
}
.theme-dark .value-cell:hover {
background: #2c2c2e !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.theme-dark .type-select {
color: #ffffff !important;
background-color: rgba(118, 118, 128, 0.24) !important;
background-image: url('data:image/svg+xml;charset=UTF-8,') !important;
}
.theme-dark .type-select:focus {
background-color: rgba(118, 118, 128, 0.32) !important;
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5) !important;
}
.theme-dark .type-select:hover {
background-color: rgba(118, 118, 128, 0.32) !important;
}
.theme-dark .type-select:active {
background-color: rgba(118, 118, 128, 0.4) !important;
}
/* Dark theme for device values edit modal */
@media (prefers-color-scheme: dark) {
.modal-content textarea,
.modal-content select {
background: #3a3a3c;
color: #f2f2f7;
border: 1px solid #48484a;
border-radius: 6px;
}
.modal-content textarea:focus,
.modal-content select:focus {
border-color: #0a84ff;
outline: none;
}
.modal-content label {
color: #f2f2f7;
}
}
.theme-dark .modal-content textarea,
.theme-dark .modal-content select {
background: #3a3a3c !important;
color: #f2f2f7 !important;
border: 1px solid #48484a !important;
border-radius: 6px !important;
}
.theme-dark .modal-content textarea:focus,
.theme-dark .modal-content select:focus {
border-color: #0a84ff !important;
outline: none !important;
}
.theme-dark .modal-content label {
color: #f2f2f7 !important;
}
/* Ensure device values table elements follow dark theme */
.theme-dark .values-table-container {
background: #2c2c2e !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.theme-dark .values-table thead th {
background: #1c1c1e !important;
color: #f2f2f7 !important;
border-bottom: 1px solid #48484a !important;
}
.theme-dark .values-table tbody td {
border-bottom: 1px solid #48484a !important;
color: #f2f2f7 !important;
}
.theme-dark .value-cell {
background: #2c2c2e !important;
color: #f2f2f7 !important;
}
.theme-dark .value-action-btn {
border-color: #48484a !important;
color: #f2f2f7 !important;
}
.theme-dark .value-action-btn:hover {
background: #3a3a3c !important;
border-color: #636366 !important;
}
.theme-dark .ios-nav-action {
background: #0a84ff !important;
}
.theme-dark .ios-nav-action:hover {
background: #007aff !important;
}
.theme-light .values-table-container {
background: #fff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.theme-light .values-table thead {
background: #f8f9fa !important;
border-bottom-color: #e1e5e9 !important;
}
.theme-light .values-table th {
color: #495057 !important;
}
.theme-light .values-table td {
border-bottom-color: #f1f3f4 !important;
color: #212529 !important;
}
.theme-light .values-table tbody tr:hover {
background: #f8f9fa !important;
}
.theme-light .value-cell:hover {
background: #fff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.theme-light .type-select {
color: #000000 !important;
background-color: rgba(118, 118, 128, 0.12) !important;
background-image: url('data:image/svg+xml;charset=UTF-8,') !important;
}
.theme-light .type-select:focus {
background-color: rgba(118, 118, 128, 0.16) !important;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3) !important;
}
.theme-light .type-select:hover {
background-color: rgba(118, 118, 128, 0.16) !important;
}
.theme-light .type-select:active {
background-color: rgba(118, 118, 128, 0.2) !important;
}
/* Type Select Dropdown Option Styling */
.type-select option {
background: #ffffff;
color: #000000;
font-weight: 500;
padding: 8px 12px;
border: none;
font-size: 14px;
}
.type-select option:hover {
background: #f0f0f0;
}
.type-select option:checked,
.type-select option:selected {
background: #007aff;
color: #ffffff;
}
/* Dark mode type select dropdown options */
@media (prefers-color-scheme: dark) {
.type-select option {
background: #2c2c2e;
color: #ffffff;
}
.type-select option:hover {
background: #3a3a3c;
}
.type-select option:checked,
.type-select option:selected {
background: #0a84ff;
color: #ffffff;
}
}
/* Theme-specific type select dropdown options */
.theme-dark .type-select option {
background: #2c2c2e !important;
color: #ffffff !important;
font-weight: 500 !important;
}
.theme-dark .type-select option:hover {
background: #3a3a3c !important;
}
.theme-dark .type-select option:checked,
.theme-dark .type-select option:selected {
background: #0a84ff !important;
color: #ffffff !important;
}
.theme-light .type-select option {
background: #ffffff !important;
color: #000000 !important;
font-weight: 500 !important;
}
.theme-light .type-select option:hover {
background: #f0f0f0 !important;
}
.theme-light .type-select option:checked,
.theme-light .type-select option:selected {
background: #007aff !important;
color: #ffffff !important;
}
/* Add New Key Input Styles */
.add-key-name-input {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(60, 60, 67, 0.12);
border-radius: 8px;
font-size: 16px;
background: rgba(118, 118, 128, 0.12);
color: #000000;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
transition: all 0.15s ease;
box-sizing: border-box;
}
.add-key-name-input:focus {
outline: none;
background: rgba(118, 118, 128, 0.16);
border-color: #007aff;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
}
.add-key-name-input::placeholder {
color: rgba(60, 60, 67, 0.6);
}
.input-help-text {
font-size: 12px;
color: rgba(60, 60, 67, 0.6);
margin-top: 6px;
font-style: italic;
}
/* Dark theme for add key input */
@media (prefers-color-scheme: dark) {
.add-key-name-input {
background: rgba(118, 118, 128, 0.24);
color: #ffffff;
border-color: rgba(84, 84, 88, 0.6);
}
.add-key-name-input:focus {
background: rgba(118, 118, 128, 0.32);
border-color: #0a84ff;
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);
}
.add-key-name-input::placeholder {
color: rgba(235, 235, 245, 0.6);
}
.input-help-text {
color: rgba(235, 235, 245, 0.6);
}
}
.theme-dark .add-key-name-input {
background: rgba(118, 118, 128, 0.24) !important;
color: #ffffff !important;
border-color: rgba(84, 84, 88, 0.6) !important;
}
.theme-dark .add-key-name-input:focus {
background: rgba(118, 118, 128, 0.32) !important;
border-color: #0a84ff !important;
box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5) !important;
}
.theme-dark .add-key-name-input::placeholder {
color: rgba(235, 235, 245, 0.6) !important;
}
.theme-dark .input-help-text {
color: rgba(235, 235, 245, 0.6) !important;
}
.theme-light .add-key-name-input {
background: rgba(118, 118, 128, 0.12) !important;
color: #000000 !important;
border-color: rgba(60, 60, 67, 0.12) !important;
}
.theme-light .add-key-name-input:focus {
background: rgba(118, 118, 128, 0.16) !important;
border-color: #007aff !important;
box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3) !important;
}
.theme-light .add-key-name-input::placeholder {
color: rgba(60, 60, 67, 0.6) !important;
}
.theme-light .input-help-text {
color: rgba(60, 60, 67, 0.6) !important;
}
.theme-light .value-action-btn {
border-color: #ddd !important;
color: #495057 !important;
}
.theme-light .value-action-btn:hover {
background: #f8f9fa !important;
border-color: #adb5bd !important;
}
.theme-light .ios-nav-action {
background: #007aff !important;
}
.theme-light .ios-nav-action:hover {
background: #0056b3 !important;
}
/* ====== SSID EDITOR SCREEN STYLING ====== */
.ssid-editor-container {
padding: 0;
}
.ssid-editor-header {
text-align: center;
margin-bottom: 32px;
padding: 0 16px;
}
.ssid-editor-header h2 {
font-size: 24px;
font-weight: 600;
color: #000;
margin: 0 0 12px 0;
letter-spacing: -0.3px;
}
.ssid-editor-description {
font-size: 16px;
color: #6d6d70;
line-height: 1.4;
margin: 0;
}
.ssid-input-section {
padding: 0 16px;
}
.ssid-save-section {
padding: 24px 16px 0;
text-align: center;
}
.ssid-save-button {
background: #007aff;
color: #fff;
border: none;
border-radius: 12px;
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}
.ssid-save-button:hover {
background: #0056b3;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.ssid-save-button:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2);
}
.ssid-save-button:disabled {
background: #c7c7cc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.ssid-input-wrapper {
position: relative;
margin-bottom: 8px;
}
.ssid-main-input {
width: 100%;
padding: 16px;
border: 2px solid #48484a;
border-radius: 12px;
font-size: 18px;
font-weight: 400;
background: #2c2c2e;
color: #f2f2f7;
transition: all 0.2s ease;
box-sizing: border-box;
}
.ssid-main-input:focus {
outline: none;
border-color: #0a84ff;
box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2);
background: #2c2c2e !important;
color: #f2f2f7 !important;
}
.ssid-main-input::placeholder {
color: #636366;
}
.ssid-char-counter {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: #8e8e93;
font-weight: 500;
pointer-events: none;
}
.ssid-char-counter.warning {
color: #ff9500;
}
.ssid-char-counter.error {
color: #ff3b30;
}
.ssid-validation-message {
color: #ff3b30;
font-size: 14px;
font-weight: 500;
margin-top: 8px;
padding-left: 16px;
}
.ssid-guidelines {
padding: 16px;
}
.ssid-guidelines h3 {
font-size: 18px;
font-weight: 600;
color: #000;
margin: 0 0 16px 0;
}
.ssid-guidelines ul {
margin: 0;
padding: 0;
list-style: none;
}
.ssid-guidelines li {
font-size: 16px;
color: #6d6d70;
line-height: 1.5;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.ssid-guidelines li:before {
content: '•';
color: #007aff;
font-weight: bold;
position: absolute;
left: 0;
}
.ssid-guidelines li:last-child {
margin-bottom: 0;
}
/* Dark mode styles for SSID editor */
@media (prefers-color-scheme: dark) {
.ssid-editor-header h2 {
color: #f2f2f7;
}
.ssid-editor-description {
color: #98989f;
}
.ssid-main-input {
background: #2c2c2e;
color: #f2f2f7;
border-color: #48484a;
}
.ssid-main-input:focus {
border-color: #0a84ff;
box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2);
background: #2c2c2e !important;
color: #f2f2f7 !important;
}
.ssid-main-input::placeholder {
color: #636366;
}
.ssid-char-counter {
color: #98989f;
}
.ssid-guidelines h3 {
color: #f2f2f7;
}
.ssid-guidelines li {
color: #98989f;
}
.ssid-guidelines li:before {
color: #0a84ff;
}
.ssid-save-button {
background: #0a84ff;
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.2);
}
.ssid-save-button:hover {
background: #409cff;
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}
.ssid-save-button:active {
box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2);
}
.ssid-save-button:disabled {
background: #48484a;
color: #8e8e93;
}
}
/* Theme override styles for SSID editor */
.theme-dark .ssid-editor-header h2 {
color: #f2f2f7 !important;
}
.theme-dark .ssid-editor-description {
color: #98989f !important;
}
.theme-dark .ssid-save-button {
background: #0a84ff !important;
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.2) !important;
}
.theme-dark .ssid-save-button:hover {
background: #409cff !important;
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3) !important;
}
.theme-dark .ssid-save-button:active {
box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2) !important;
}
.theme-dark .ssid-save-button:disabled {
background: #48484a !important;
color: #8e8e93 !important;
}
.theme-dark .ssid-main-input {
background: #2c2c2e !important;
color: #f2f2f7 !important;
border-color: #48484a !important;
}
.theme-dark .ssid-main-input:focus {
border-color: #0a84ff !important;
box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2) !important;
background: #2c2c2e !important;
color: #f2f2f7 !important;
}
.theme-dark .ssid-main-input::placeholder {
color: #636366 !important;
}
.theme-dark .ssid-char-counter {
color: #98989f !important;
}
.theme-dark .ssid-guidelines h3 {
color: #f2f2f7 !important;
}
.theme-dark .ssid-guidelines li {
color: #98989f !important;
}
.theme-dark .ssid-guidelines li:before {
color: #0a84ff !important;
}
.theme-light .ssid-editor-header h2 {
color: #000 !important;
}
.theme-light .ssid-editor-description {
color: #6d6d70 !important;
}
.theme-light .ssid-save-button {
background: #007aff !important;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2) !important;
}
.theme-light .ssid-save-button:hover {
background: #0056b3 !important;
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3) !important;
}
.theme-light .ssid-save-button:active {
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2) !important;
}
.theme-light .ssid-save-button:disabled {
background: #c7c7cc !important;
color: #8e8e93 !important;
}
.theme-light .ssid-main-input {
background: #fff !important;
color: #000 !important;
border-color: #e5e5ea !important;
}
.theme-light .ssid-main-input:focus {
border-color: #007aff !important;
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1) !important;
}
.theme-light .ssid-main-input::placeholder {
color: #c7c7cc !important;
}
.theme-light .ssid-char-counter {
color: #8e8e93 !important;
}
.theme-light .ssid-guidelines h3 {
color: #000 !important;
}
.theme-light .ssid-guidelines li {
color: #6d6d70 !important;
}
.theme-light .ssid-guidelines li:before {
color: #007aff !important;
}
/* ====== DEVICE INFO SCREEN STYLING ====== */
.device-info-header-section {
display: flex;
align-items: center;
padding: 24px 16px;
text-align: left;
}
.device-info-logo {
margin-right: 16px;
flex-shrink: 0;
}
.device-info-logo img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.device-info-title {
flex: 1;
}
.device-info-title h2 {
font-size: 24px;
font-weight: 600;
color: #000;
margin: 0 0 4px 0;
letter-spacing: -0.3px;
}
.device-info-title p {
font-size: 16px;
color: #6d6d70;
margin: 0;
font-weight: 400;
}
.section-header {
background: transparent;
padding: 8px 0 0 0;
border-bottom: none;
}
.section-header .setting-label {
font-size: 13px;
font-weight: 600;
color: #6d6d70;
text-transform: uppercase;
letter-spacing: -0.08px;
margin-left: 16px;
}
.section-header .setting-subtitle {
margin-left: 16px;
}
#ss_op_start, #ss_op_end {
max-width: 240px;
}
/* Dark mode styles for device info */
@media (prefers-color-scheme: dark) {
.device-info-logo img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.device-info-title h2 {
color: #f2f2f7;
}
.device-info-title p {
color: #98989f;
}
.section-header .setting-label {
color: #98989f;
}
}
/* Theme override styles for device info */
.theme-dark .device-info-logo img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.theme-dark .device-info-title h2 {
color: #f2f2f7 !important;
}
.theme-dark .device-info-title p {
color: #98989f !important;
}
.theme-dark .section-header .setting-label {
color: #98989f !important;
}
.theme-light .device-info-logo img {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.theme-light .device-info-title h2 {
color: #000 !important;
}
.theme-light .device-info-title p {
color: #6d6d70 !important;
}
.theme-light .section-header .setting-label {
color: #6d6d70 !important;
}
/* Empty state dark mode support */
@media (prefers-color-scheme: dark) {
.empty-state-title {
color: #f2f2f7 !important;
}
.empty-state-subtitle {
color: #a1a1a6 !important;
}
}
.theme-dark .empty-state-title {
color: #f2f2f7 !important;
}
.theme-dark .empty-state-subtitle {
color: #a1a1a6 !important;
}
/* ====== FIXTURE SIZE DROPDOWN OPTGROUP STYLING ====== */
.setting-select optgroup {
font-weight: 600;
font-style: normal;
color: #007aff;
background: rgba(0, 122, 255, 0.1);
margin: 4px 0;
border-radius: 4px;
}
.setting-select optgroup option {
font-weight: 400;
color: #000;
background: #fff;
padding-left: 16px;
}
/* Dark mode styles for optgroups */
@media (prefers-color-scheme: dark) {
.setting-select optgroup {
color: #0a84ff;
background: rgba(10, 132, 255, 0.2);
}
.setting-select optgroup option {
color: #fff;
background: #2c2c2e;
}
}
/* Theme override styles for optgroups */
.theme-dark .setting-select optgroup {
color: #0a84ff !important;
background: rgba(10, 132, 255, 0.2) !important;
}
.theme-dark .setting-select optgroup option {
color: #fff !important;
background: #2c2c2e !important;
}
.theme-light .setting-select optgroup {
color: #007aff !important;
background: rgba(0, 122, 255, 0.1) !important;
}
.theme-light .setting-select optgroup option {
color: #000 !important;
background: #fff !important;
}
/* Preview Toggle Styles */
.point-preview-controls {
display: flex;
align-items: center;
margin-top: 6px;
}
.preview-toggle-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
font-size: 14px;
color: #333;
font-weight: 500;
}
.preview-toggle-checkbox {
display: none;
}
.preview-toggle-slider {
position: relative;
width: 44px;
height: 24px;
background: #e5e5ea;
border-radius: 12px;
transition: all 0.3s ease;
cursor: pointer;
}
.preview-toggle-slider::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.preview-toggle-checkbox:checked+.preview-toggle-slider {
background: #007aff;
}
.preview-toggle-checkbox:checked+.preview-toggle-slider::before {
transform: translateX(20px);
}
.preview-toggle-text {
font-size: 14px;
color: #333;
font-weight: 500;
}
/* Dark mode preview toggle styles */
.theme-dark .preview-toggle-label {
color: #e5e5e7 !important;
}
.theme-dark .preview-toggle-text {
color: #e5e5e7 !important;
}
.theme-dark .preview-toggle-slider {
background: #39393d;
}
.theme-dark .preview-toggle-checkbox:checked+.preview-toggle-slider {
background: #0a84ff;
}
/* Dropdown Option Styling */
.setting-select option {
background: #ffffff;
color: #000000;
font-weight: 500;
padding: 8px 12px;
border: none;
font-size: 16px;
}
.setting-select option:hover {
background: #f0f0f0;
}
.setting-select option:checked,
.setting-select option:selected {
background: #007aff;
color: #ffffff;
}
/* Dark mode dropdown options */
@media (prefers-color-scheme: dark) {
.setting-select option {
background: #2c2c2e;
color: #ffffff;
}
.setting-select option:hover {
background: #3a3a3c;
}
.setting-select option:checked,
.setting-select option:selected {
background: #0a84ff;
color: #ffffff;
}
}
/* Theme-specific dropdown options */
.theme-dark .setting-select option {
background: #2c2c2e !important;
color: #ffffff !important;
font-weight: 500 !important;
}
.theme-dark .setting-select option:hover {
background: #3a3a3c !important;
}
.theme-dark .setting-select option:checked,
.theme-dark .setting-select option:selected {
background: #0a84ff !important;
color: #ffffff !important;
}
.theme-light .setting-select option {
background: #ffffff !important;
color: #000000 !important;
font-weight: 500 !important;
}
.theme-light .setting-select option:hover {
background: #f0f0f0 !important;
}
.theme-light .setting-select option:checked,
.theme-light .setting-select option:selected {
background: #007aff !important;
color: #ffffff !important;
}
/* Mobile responsive option styling */
@media (max-width: 768px) {
.setting-select option {
font-size: 16px;
padding: 12px;
}
.theme-dark .setting-select {
color: #ffffff !important;
}
/* Ensure proper scrolling and padding on mobile */
/* Extra padding accounts for fixed tab bar (60px) + iOS captive-portal chrome (~50-70px top/bottom banners) */
#app {
padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
-webkit-overflow-scrolling: touch;
}
.page {
padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
-webkit-overflow-scrolling: touch;
}
/* Ensure last element in any page has extra space */
.page>*:last-child {
margin-bottom: 20px;
}
}
/* Edit Value Page Styles */
.settings-section-header {
padding: 16px 20px 8px 20px;
border-bottom: none;
}
.settings-section-header h3 {
font-size: 13px;
font-weight: 600;
color: #8e8e93;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
}
.edit-value-input-section {
padding: 0;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
}
.edit-value-textarea {
width: 100%;
min-height: 150px;
padding: 16px;
border: none;
border-radius: 0;
font-size: 16px;
color: #000000;
background: #ffffff;
resize: vertical;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
box-sizing: border-box;
}
.edit-value-textarea:focus {
outline: none;
box-shadow: none;
}
.edit-value-textarea::placeholder {
color: #8e8e93;
}
.setting-row-clickable {
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
}
.setting-row-clickable:hover {
background-color: rgba(0, 122, 255, 0.05);
}
.setting-row-clickable:active {
background-color: rgba(0, 122, 255, 0.1);
transform: scale(0.995);
}
.setting-row-clickable .setting-label {
font-size: 16px;
color: #000000;
font-weight: 400;
flex-shrink: 0;
}
.setting-row-clickable .setting-value {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 1;
min-width: 0;
}
.setting-row-clickable .setting-value span:first-child {
color: #8e8e93;
font-size: 16px;
text-align: right;
}
.setting-arrow {
color: #c7c7cc;
font-size: 18px;
font-weight: 300;
}
/* Edit Value Apply Button */
.edit-value-save-section {
padding: 0;
background: transparent;
}
.edit-value-apply-btn {
width: 100%;
display: flex;
align-items: center;
padding: 16px 20px;
background: #007aff;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}
.edit-value-apply-btn:hover {
background: #0056b3;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
}
.edit-value-apply-btn:active {
background: #004a9e;
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2);
}
.edit-value-apply-btn:disabled {
cursor: not-allowed;
transform: none !important;
}
.apply-btn-icon {
font-size: 20px;
margin-right: 16px;
flex-shrink: 0;
}
.apply-btn-content {
text-align: left;
flex: 1;
}
.apply-btn-label {
font-size: 16px;
font-weight: 600;
color: #ffffff;
margin: 0;
line-height: 1.2;
}
.apply-btn-subtitle {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
margin: 2px 0 0 0;
line-height: 1.2;
}
.info-row {
background: rgba(0, 122, 255, 0.05);
border: 1px solid rgba(0, 122, 255, 0.1);
border-radius: 8px;
}
.info-row .setting-subtitle {
font-size: 14px;
line-height: 1.5;
color: #666666;
}
/* Dark mode for edit value page */
@media (prefers-color-scheme: dark) {
.settings-section-header h3 {
color: #a1a1a6;
}
.edit-value-input-section {
background: #2c2c2e !important;
}
.edit-value-textarea {
background: #2c2c2e;
color: #ffffff;
}
.edit-value-textarea:focus {
background: #2c2c2e !important;
color: #ffffff !important;
}
.edit-value-textarea::placeholder {
color: #a1a1a6;
}
.setting-row-clickable:hover {
background-color: rgba(10, 132, 255, 0.1);
}
.setting-row-clickable:active {
background-color: rgba(10, 132, 255, 0.15);
}
.setting-row-clickable .setting-label {
color: #ffffff;
}
.setting-row-clickable .setting-value span:first-child {
color: #a1a1a6;
}
.setting-arrow {
color: #636366;
}
.edit-value-apply-btn {
background: #0a84ff;
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}
.edit-value-apply-btn:hover {
background: #0066cc;
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4);
}
.edit-value-apply-btn:active {
background: #0055aa;
box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2);
}
.edit-value-apply-btn:disabled {
cursor: not-allowed;
transform: none !important;
}
/* Dark theme for edit value page navigation - simplified */
#page_edit_device_value .ios-nav-header {
/* Use standard dark theme navigation styling */
}
#page_edit_device_value .ios-nav-back {
/* Use standard back button styling */
}
#page_edit_device_value .ios-nav-title {
/* Use standard title styling */
}
.info-row {
background: rgba(10, 132, 255, 0.1);
border-color: rgba(10, 132, 255, 0.2);
}
.info-row .setting-subtitle {
color: #a1a1a6;
}
}
.theme-dark .settings-section-header h3 {
color: #a1a1a6 !important;
}
.theme-dark .edit-value-input-section {
background: #2c2c2e !important;
}
.theme-dark .edit-value-textarea {
background: #2c2c2e !important;
color: #ffffff !important;
}
.theme-dark .edit-value-textarea:focus {
background: #2c2c2e !important;
color: #ffffff !important;
}
.theme-dark .edit-value-textarea::placeholder {
color: #a1a1a6 !important;
}
.theme-dark .setting-row-clickable:hover {
background-color: rgba(10, 132, 255, 0.1) !important;
}
.theme-dark .setting-row-clickable:active {
background-color: rgba(10, 132, 255, 0.15) !important;
}
.theme-dark .setting-row-clickable .setting-label {
color: #ffffff !important;
}
.theme-dark .setting-row-clickable .setting-value span:first-child {
color: #a1a1a6 !important;
}
.theme-dark .setting-arrow {
color: #636366 !important;
}
.theme-dark .edit-value-apply-btn {
background: #0a84ff !important;
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3) !important;
}
.theme-dark .edit-value-apply-btn:hover {
background: #0066cc !important;
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.4) !important;
}
.theme-dark .edit-value-apply-btn:active {
background: #0055aa !important;
box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2) !important;
}
.theme-dark .edit-value-apply-btn:disabled {
cursor: not-allowed !important;
transform: none !important;
}
/* Theme-dark class overrides for edit value page navigation */
.theme-dark #page_edit_device_value .ios-nav-header {
/* Use standard dark theme navigation styling */
}
.theme-dark #page_edit_device_value .ios-nav-back {
/* Use standard dark theme back button styling */
}
.theme-dark #page_edit_device_value .ios-nav-title {
/* Use standard dark theme title styling */
}
.theme-dark .info-row {
background: rgba(10, 132, 255, 0.1) !important;
border-color: rgba(10, 132, 255, 0.2) !important;
}
.theme-dark .info-row .setting-subtitle {
color: #a1a1a6 !important;
}
/* Edit value page follows standard page behavior */
#page_edit_device_value {
/* Uses standard .page and .page.has-nav-header rules */
}
#page_edit_device_value.active {
display: block !important;
}
/* Edit value page navigation - use standard iOS nav styling */
.theme-light #page_edit_device_value .ios-nav-header,
#page_edit_device_value .ios-nav-header {
/* Let NavigationManager and standard styles handle the appearance */
/* Remove fixed positioning that conflicts with NavigationManager */
}
/* Dark theme for edit value page - let standard styles handle positioning */
.theme-dark #page_edit_device_value .ios-nav-header {
/* Use standard dark theme navigation styling */
}
@media (prefers-color-scheme: dark) {
#page_edit_device_value .ios-nav-header {
/* Use standard dark theme navigation styling */
}
}
/* Ensure page content doesn't get hidden behind fixed header */
#page_edit_device_value #main_container_div {
padding-top: 70px !important;
}
.theme-light #page_edit_device_value .ios-nav-back,
#page_edit_device_value .ios-nav-back {
display: flex !important;
align-items: center !important;
color: #007aff !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
visibility: visible !important;
opacity: 1 !important;
font-size: 16px !important;
padding: 8px 0 !important;
}
/* Dark theme override for back button */
.theme-dark #page_edit_device_value .ios-nav-back {
color: #0a84ff !important;
}
@media (prefers-color-scheme: dark) {
#page_edit_device_value .ios-nav-back {
color: #0a84ff !important;
}
}
#page_edit_device_value .ios-nav-back-arrow {
font-size: 24px !important;
margin-right: 4px !important;
display: inline-block !important;
}
#page_edit_device_value .ios-nav-back-text {
font-size: 16px !important;
display: inline-block !important;
}
#page_edit_device_value .ios-nav-back-arrow {
font-size: 24px !important;
margin-right: 4px !important;
line-height: 1 !important;
}
#page_edit_device_value .ios-nav-back-text {
font-size: 16px !important;
line-height: 1 !important;
}
#page_edit_device_value .ios-nav-title {
font-size: 18px !important;
font-weight: 600 !important;
/* Removed forced black color - let theme handle it */
text-align: center !important;
flex: 1 !important;
}
#page_edit_device_value .ios-nav-action {
background: transparent !important;
border: none !important;
color: #007aff !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
padding: 8px 0 !important;
}
#page_edit_device_value #main_container_div {
padding: 0 16px;
padding-top: 16px !important;
}
#page_edit_device_value .settings-section {
margin-bottom: 20px;
}
#page_edit_device_value .settings-section:last-child {
margin-bottom: 40px;
}
/* Add New Key page styles */
#page_add_new_key .settings-section {
margin-bottom: 20px;
}
#page_add_new_key .settings-section:last-child {
margin-bottom: 40px;
}
#keep_default_password_label {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
max-width: none !important;
}
/* ====== SCHEDULE TIME CHEVRON INDICATOR ====== */
/* Home Schedule Preview Section */
#schedule_preview_section {
transition: all 0.3s ease;
cursor: pointer;
position: relative;
box-sizing: border-box;
}
/* Schedule mode active - now handled by unified .active-controller system */
/* Hover effect on the section */
#schedule_preview_section:hover {
background: rgba(255, 255, 255, 0.02);
}
/* Active/pressed state */
#schedule_preview_section:active {
transform: scale(0.98);
}
/* Loading state */
#schedule_preview_section.loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
/* Loading spinner overlay */
.schedule-loading-spinner {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
}
.spinner-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Spinner animation */
.spinner {
width: 24px;
height: 24px;
border: 3px solid rgba(0, 122, 255, 0.3);
border-top-color: #007aff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Dark mode adjustments for schedule preview section */
@media (prefers-color-scheme: dark) {
#schedule_preview_section.active-controller {
background: rgba(255, 204, 0, 0.08) !important;
}
#schedule_preview_section.active-controller-demo {
background: rgba(0, 255, 0, 0.08) !important;
}
#schedule_preview_section:hover {
background: rgba(255, 255, 255, 0.05);
}
.schedule-loading-spinner {
background: rgba(0, 0, 0, 0.9);
}
.spinner {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
}
}
.theme-dark #schedule_preview_section.active-controller {
background: rgba(255, 204, 0, 0.08) !important;
}
.theme-dark #schedule_preview_section.active-controller-demo {
background: rgba(0, 255, 0, 0.08) !important;
}
.theme-dark #schedule_preview_section:hover {
background: rgba(255, 255, 255, 0.05);
}
.theme-dark .schedule-loading-spinner {
background: rgba(0, 0, 0, 0.9);
}
.theme-dark .spinner {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
}
/* Home Schedule Preview Graph */
compressed-schedule-graph,
#home_schedule_preview {
display: block;
width: 100%;
min-height: 60px;
border-radius: 8px;
position: relative;
box-sizing: border-box;
}
.schedule-time-chevron {
position: absolute;
top: -8px;
/* Position so chevron point touches the top of schedule preview */
left: 0;
pointer-events: none;
z-index: 10;
transition: left 1s linear;
transform: translateX(-50%);
/* Center the chevron on the time position */
}
.chevron-arrow {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 9px solid #00cc00;
/* Solid green for demo mode */
position: relative;
}
/* Dark theme support for chevron - keep green in demo mode */
@media (prefers-color-scheme: dark) {
.chevron-arrow {
border-top-color: #00cc00;
/* Keep green for demo mode visibility */
}
}
.theme-dark .chevron-arrow {
border-top-color: #0a84ff !important;
}
.theme-light .chevron-arrow {
border-top-color: #007aff !important;
}
/* ====== SCHEDULE TIME DISPLAY ====== */
.schedule-time-display {
position: absolute;
top: -35px;
/* Position above the chevron */
left: 0;
pointer-events: none;
z-index: 11;
/* Above chevron */
transition: left 1s linear, transform 0.3s ease;
transform: translateX(-50%);
/* Default center alignment, will be overridden by JS */
background: rgba(0, 0, 0, 0.9);
color: #00cc00;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid #00cc00;
}
.time-text {
display: inline-block;
}
/* Dark theme support for time display */
@media (prefers-color-scheme: dark) {
.schedule-time-display {
background: rgba(0, 0, 0, 0.9);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.15);
}
}
.theme-dark .schedule-time-display {
background: rgba(0, 0, 0, 0.9) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
.theme-light .schedule-time-display {
background: rgba(0, 0, 0, 0.85) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Device Values Location Color Coding */
/* Full cell background for table cells */
td.location-resettable {
background-color: rgba(255, 193, 7, 0.15) !important;
/* Amber background */
color: #e65100 !important;
/* Dark orange text */
font-weight: 600;
}
td.location-persistent {
background-color: rgba(76, 175, 80, 0.15) !important;
/* Green background */
color: #2e7d32 !important;
/* Dark green text */
font-weight: 600;
}
td.location-unknown {
background-color: rgba(158, 158, 158, 0.15) !important;
/* Gray background */
color: #424242 !important;
/* Dark gray text */
font-weight: 600;
}
td.location-both {
background-color: rgba(33, 150, 243, 0.15) !important;
/* Blue background */
color: #1565c0 !important;
/* Dark blue text */
font-weight: 600;
}
/* Span elements within cells (for basic table) */
.location-resettable,
.location-resettable span {
background-color: rgba(255, 193, 7, 0.2) !important;
/* Amber background */
color: #e65100 !important;
/* Dark orange text */
font-weight: 600;
border-radius: 4px;
padding: 2px 6px;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.location-persistent,
.location-persistent span {
background-color: rgba(76, 175, 80, 0.2) !important;
/* Green background */
color: #2e7d32 !important;
/* Dark green text */
font-weight: 600;
border-radius: 4px;
padding: 2px 6px;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.location-unknown,
.location-unknown span {
background-color: rgba(158, 158, 158, 0.2) !important;
/* Gray background */
color: #424242 !important;
/* Dark gray text */
font-weight: 600;
border-radius: 4px;
padding: 2px 6px;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
/* Dark mode adjustments for location colors */
@media (prefers-color-scheme: dark) {
td.location-resettable {
background-color: rgba(255, 193, 7, 0.25) !important;
color: #ffb74d !important;
}
td.location-persistent {
background-color: rgba(76, 175, 80, 0.25) !important;
color: #81c784 !important;
}
td.location-unknown {
background-color: rgba(158, 158, 158, 0.25) !important;
color: #bdbdbd !important;
}
td.location-both {
background-color: rgba(33, 150, 243, 0.25) !important;
color: #64b5f6 !important;
}
.location-resettable,
.location-resettable span {
background-color: rgba(255, 193, 7, 0.3) !important;
color: #ffb74d !important;
}
.location-persistent,
.location-persistent span {
background-color: rgba(76, 175, 80, 0.3) !important;
color: #81c784 !important;
}
.location-unknown,
.location-unknown span {
background-color: rgba(158, 158, 158, 0.3) !important;
color: #bdbdbd !important;
}
}
.theme-dark td.location-resettable {
background-color: rgba(255, 193, 7, 0.25) !important;
color: #ffb74d !important;
}
.theme-dark td.location-persistent {
background-color: rgba(76, 175, 80, 0.25) !important;
color: #81c784 !important;
}
.theme-dark td.location-unknown {
background-color: rgba(158, 158, 158, 0.25) !important;
color: #bdbdbd !important;
}
.theme-dark td.location-both {
background-color: rgba(33, 150, 243, 0.25) !important;
color: #64b5f6 !important;
}
/* Device Values Legend */
.device-values-legend {
margin-top: 16px;
padding: 16px;
background-color: rgba(0, 0, 0, 0.02);
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.device-values-legend h4 {
margin: 0 0 12px 0;
font-size: 14px;
font-weight: 600;
color: #333;
}
.legend-items {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 4px;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.legend-color.location-resettable {
background-color: rgba(255, 193, 7, 0.6) !important;
}
.legend-color.location-persistent {
background-color: rgba(76, 175, 80, 0.6) !important;
}
.legend-color.location-both {
background-color: rgba(33, 150, 243, 0.6) !important;
}
.legend-text {
font-size: 13px;
color: #555;
font-weight: 500;
}
/* Dark mode legend styles */
@media (prefers-color-scheme: dark) {
.device-values-legend {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
.device-values-legend h4 {
color: #e0e0e0;
}
.legend-text {
color: #b0b0b0;
}
.legend-color {
border-color: rgba(255, 255, 255, 0.3);
}
}
.theme-dark .device-values-legend {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}
.theme-dark .device-values-legend h4 {
color: #e0e0e0 !important;
}
.theme-dark .legend-text {
color: #b0b0b0 !important;
}
.theme-dark .legend-color {
border-color: rgba(255, 255, 255, 0.3) !important;
}
.theme-dark .location-resettable,
.theme-dark .location-resettable span {
background-color: rgba(255, 193, 7, 0.3) !important;
color: #ffb74d !important;
}
.theme-dark .location-persistent,
.theme-dark .location-persistent span {
background-color: rgba(76, 175, 80, 0.3) !important;
color: #81c784 !important;
}
.theme-dark .location-unknown,
.theme-dark .location-unknown span {
background-color: rgba(158, 158, 158, 0.3) !important;
color: #bdbdbd !important;
}
/* Wireless Group Peer List Styles */
.peer-group-container {
border: 1.5px solid rgba(0, 122, 255, 0.25);
border-radius: 10px;
margin: 8px 12px;
overflow: hidden;
background: rgba(0, 122, 255, 0.03);
}
.peer-group-container + .peer-group-container {
margin-top: 12px;
}
.peer-group-label {
font-size: 12px;
font-weight: 600;
color: #007aff;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 14px;
background: rgba(0, 122, 255, 0.08);
border-bottom: 0.5px solid rgba(0, 122, 255, 0.15);
}
.peer-group-container .peer-row {
border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
}
.peer-group-container .peer-row:last-child {
border-bottom: none;
}
.peer-header {
display: flex;
align-items: center;
padding: 8px 16px;
background: rgba(0, 0, 0, 0.03);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
font-size: 12px;
font-weight: 600;
color: #6d6d70;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.peer-row {
display: flex;
align-items: center;
min-height: 60px;
}
.peer-signal-column {
width: 30px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.peer-channel-column {
width: 45px;
text-align: center;
flex-shrink: 0;
}
.peer-channel-number {
font-weight: 600;
font-size: 14px;
color: #007aff;
padding: 4px 8px;
border-radius: 6px;
background: rgba(0, 122, 255, 0.1);
min-width: 20px;
display: inline-block;
}
.peer-actions {
width: 50px;
text-align: center;
flex-shrink: 0;
}
.peer-flash-button {
background: #333333;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #ff6b35;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.peer-flash-button:hover {
background: #444444;
color: #ff8a5b;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.peer-flash-button:active {
transform: translateY(0);
background: #222222;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.peer-flash-button.flashing {
animation: flash-pulse 0.5s ease-in-out infinite alternate;
}
.peer-flash-button:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
@keyframes flash-pulse {
0% {
background: #333333;
color: #ff6b35;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
100% {
background: #ff6b35;
color: #ffffff;
box-shadow: 0 4px 16px rgba(255, 107, 53, 0.6);
}
}
.flash-icon {
font-size: 16px;
display: inline-block;
}
/* Narrow screen: hide channel column, shrink peer row for small devices */
@media (max-width: 420px) {
.peer-channel-column,
.peer-channel-header {
display: none !important;
}
.peer-row .setting-content {
min-width: 100px;
}
}
/* Channel mismatch warning styles */
.channel-warning {
background: rgba(255, 152, 0, 0.1);
border: 1px solid rgba(255, 152, 0, 0.3);
border-radius: 8px;
padding: 12px 16px;
margin: 8px 0;
color: #ff9800;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.channel-warning-icon {
font-size: 18px;
flex-shrink: 0;
}
/* Dark mode styles for wireless group */
@media (prefers-color-scheme: dark) {
.peer-group-container {
border-color: rgba(10, 132, 255, 0.3);
background: rgba(10, 132, 255, 0.05);
}
.peer-group-label {
color: #0a84ff;
background: rgba(10, 132, 255, 0.12);
border-bottom-color: rgba(10, 132, 255, 0.2);
}
.peer-group-container .peer-row {
border-bottom-color: rgba(255, 255, 255, 0.06);
}
.peer-header {
background: rgba(255, 255, 255, 0.03);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
color: #a1a1a1;
}
.peer-channel-number {
color: #0a84ff;
background: rgba(10, 132, 255, 0.15);
}
.channel-warning {
background: rgba(255, 152, 0, 0.15);
border: 1px solid rgba(255, 152, 0, 0.4);
color: #ffb347;
}
}
.theme-dark .peer-group-container {
border-color: rgba(10, 132, 255, 0.3) !important;
background: rgba(10, 132, 255, 0.05) !important;
}
.theme-dark .peer-group-label {
color: #0a84ff !important;
background: rgba(10, 132, 255, 0.12) !important;
border-bottom-color: rgba(10, 132, 255, 0.2) !important;
}
.theme-dark .peer-group-container .peer-row {
border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
.theme-dark .peer-header {
background: rgba(255, 255, 255, 0.03) !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1) !important;
color: #a1a1a1 !important;
}
.theme-dark .peer-channel-number {
color: #0a84ff !important;
background: rgba(10, 132, 255, 0.15) !important;
}
.theme-dark .channel-warning {
background: rgba(255, 152, 0, 0.15) !important;
border: 1px solid rgba(255, 152, 0, 0.4) !important;
color: #ffb347 !important;
}
/* Schedule Edit Page Styles */
.setting-label-input-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
min-height: 38px;
background: #1c1c1e;
border-bottom: none;
}
.setting-label-input-row .setting-icon {
font-size: 20px;
width: 26px;
text-align: center;
color: #007aff;
flex-shrink: 0;
}
.setting-label-input-row .setting-label {
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 20px;
flex: 1;
word-wrap: break-word;
overflow-wrap: break-word;
}
.setting-controls {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* When time input is hidden in sunrise mode, expand the select */
.setting-controls:has(#editTimeInput[style*="display: none"]) #editTimeSelect,
.setting-controls:has(#editTimeInput:not([style*="display: inline"])) #editTimeSelect {
flex: 1;
min-width: 0;
}
/* Fallback for browsers that don't support :has() */
.setting-controls #editTimeSelect {
min-width: 150px;
}
/* Improve dropdown appearance for sunrise times */
#editTimeSelect {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 14px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ensure dropdown options don't get clipped */
#editTimeSelect option {
padding: 4px 8px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 14px;
}
.setting-slider-row {
padding: 8px 16px 12px 16px;
background: #1c1c1e;
position: relative;
}
/* CCT Slider Tick Marks */
.cct-tick-mark {
position: absolute;
top: 50%;
width: 2px;
height: 8px;
background: #8e8e93;
transform: translateX(-50%) translateY(-50%);
border-radius: 1px;
z-index: 1;
pointer-events: none;
}
.cct-tick-mark.major {
height: 10px;
background: #ffffff;
width: 2px;
}
.setting-slider-ios {
width: 100%;
height: 27px;
-webkit-appearance: none;
appearance: none;
background: transparent;
outline: none;
margin: 0;
cursor: pointer;
}
.setting-slider-ios::-webkit-slider-track {
width: 100%;
height: 3px;
background: #48484a;
}
.setting-slider-ios::-webkit-slider-runnable-track {
width: 100%;
height: 3px;
background: #48484a;
}
.setting-slider-ios::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 27px;
height: 27px;
background: #ffffff;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
transition: all 0.15s ease;
margin-top: -12px;
}
.setting-slider-ios::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.2);
}
.setting-slider-ios::-webkit-slider-thumb:active {
transform: scale(0.95);
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.setting-slider-ios::-moz-range-thumb {
width: 27px;
height: 27px;
background: #ffffff;
border-radius: 50%;
cursor: pointer;
border: none;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
margin-top: -12px;
}
.setting-slider-ios::-moz-range-track {
width: 100%;
height: 3px;
background: #48484a;
border: none;
}
/* Enhanced dark theme styles for active/focused sliders */
.setting-slider-ios:focus {
outline: none;
}
.setting-slider-ios:focus::-webkit-slider-track {
background: linear-gradient(to right, #007aff 0%, #007aff var(--slider-progress, 50%), #3a3a3c var(--slider-progress, 50%), #3a3a3c 100%);
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3);
}
.setting-slider-ios:focus::-webkit-slider-runnable-track {
background: linear-gradient(to right, #007aff 0%, #007aff var(--slider-progress, 50%), #3a3a3c var(--slider-progress, 50%), #3a3a3c 100%);
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3);
}
.setting-slider-ios:focus::-webkit-slider-thumb {
background: #ffffff;
box-shadow: 0 0 0 2px #007aff, 0 0 0 4px rgba(0, 122, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.15);
transform: scale(1.05);
}
.setting-slider-ios:active::-webkit-slider-track {
background: linear-gradient(to right, #0056cc 0%, #0056cc var(--slider-progress, 50%), #3a3a3c var(--slider-progress, 50%), #3a3a3c 100%);
}
.setting-slider-ios:active::-webkit-slider-runnable-track {
background: linear-gradient(to right, #0056cc 0%, #0056cc var(--slider-progress, 50%), #3a3a3c var(--slider-progress, 50%), #3a3a3c 100%);
}
.setting-slider-ios:active::-webkit-slider-thumb {
background: #ffffff;
box-shadow: 0 0 0 2px #0056cc, 0 0 0 4px rgba(0, 86, 204, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
transform: scale(0.98);
}
/* Firefox focus/active styles */
.setting-slider-ios:focus::-moz-range-track {
background: linear-gradient(to right, #007aff 0%, #007aff var(--slider-progress, 50%), #3a3a3c var(--slider-progress, 50%), #3a3a3c 100%);
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3);
}
.setting-slider-ios:focus::-moz-range-thumb {
background: #ffffff;
box-shadow: 0 0 0 2px #007aff, 0 0 0 4px rgba(0, 122, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.15);
transform: scale(1.05);
}
.setting-slider-ios:active::-moz-range-track {
background: linear-gradient(to right, #0056cc 0%, #0056cc var(--slider-progress, 50%), #3a3a3c var(--slider-progress, 50%), #3a3a3c 100%);
}
.setting-slider-ios:active::-moz-range-thumb {
background: #ffffff;
box-shadow: 0 0 0 2px #0056cc, 0 0 0 4px rgba(0, 86, 204, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
transform: scale(0.98);
}
.setting-input-ios {
background: #2c2c2e;
border: 1px solid #48484a;
border-radius: 6px;
color: #ffffff;
padding: 6px 10px;
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
text-align: center;
min-width: 70px;
height: 28px;
flex-shrink: 0;
}
.setting-input-ios:focus {
border-color: #007aff;
outline: none;
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3);
}
/* Ensure edit point screen inputs have dark background */
#page_schedule_edit .setting-input-ios {
background: #2c2c2e !important;
border: 1px solid #48484a !important;
color: #ffffff !important;
}
#page_schedule_edit .setting-input-ios:focus {
background: #2c2c2e !important;
border-color: #007aff !important;
}
/* Override any conflicting input styles on edit point screen */
#page_schedule_edit input[type="text"],
#page_schedule_edit input[type="number"] {
background: #2c2c2e !important;
border: 1px solid #48484a !important;
color: #ffffff !important;
}
#page_schedule_edit input[type="text"]:focus,
#page_schedule_edit input[type="number"]:focus {
background: #2c2c2e !important;
border-color: #007aff !important;
outline: none;
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3);
}
.preview-box {
width: 22px;
height: 22px;
border-radius: 4px;
border: 1px solid #48484a;
flex-shrink: 0;
}
.input-unit {
font-size: 15px;
color: #8e8e93;
font-weight: 400;
margin-left: 2px;
margin-right: 2px;
}
/* Settings section styling for edit page */
#page_schedule_edit .settings-section {
background: #1c1c1e;
border-top: 0.5px solid #48484a;
border-bottom: 0.5px solid #48484a;
margin-bottom: 20px;
border-radius: 0;
}
#page_schedule_edit .settings-section:first-of-type {
margin-top: 0;
}
#page_schedule_edit .settings-section .setting-row:last-child {
border-bottom: none;
}
.delete-button {
background: #1c1c1e !important;
}
.delete-button:hover {
background: rgba(255, 59, 48, 0.1) !important;
}
.delete-button .setting-label {
color: #ff3b30 !important;
white-space: nowrap !important;
max-width: none !important;
flex-shrink: 0 !important;
}
.delete-button .setting-content {
flex: 1 !important;
min-width: 0 !important;
}
/* More specific targeting for delete button to override any constraints */
#editDeleteButton.delete-button {
width: auto !important;
min-width: 0 !important;
flex: 1 !important;
}
#editDeleteButton.delete-button .setting-label {
color: #ff3b30 !important;
white-space: nowrap !important;
max-width: none !important;
flex-shrink: 0 !important;
width: auto !important;
min-width: max-content !important;
}
#editDeleteButton.delete-button .setting-content {
flex: 1 !important;
min-width: 0 !important;
width: auto !important;
}
/* Ensure the entire delete button row can expand */
#page_schedule_edit #editDeleteButton.setting-row.button-row.delete-button {
width: 100% !important;
min-width: 0 !important;
flex: none !important;
display: flex !important;
}
#page_schedule_edit #editDeleteButton.setting-row.button-row.delete-button .setting-label {
white-space: nowrap !important;
max-width: none !important;
flex-shrink: 0 !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Fix close button text wrapping */
#editCloseButton .setting-label {
white-space: nowrap !important;
max-width: none !important;
flex-shrink: 0 !important;
}
#editCloseButton .setting-content {
flex: 1 !important;
min-width: 0 !important;
}
/* Fix firmware version button to look like other device info rows */
#firmware_version_button .setting-label {
white-space: nowrap !important;
max-width: none !important;
flex-shrink: 0 !important;
}
#firmware_version_button .setting-content {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
}
#firmware_version_button .setting-value {
white-space: nowrap !important;
flex-shrink: 0 !important;
font-family: monospace;
color: #8e8e93;
}
/* Hardware control channel styling */
.channel-input-right {
text-align: right;
}
.channel-slider-full {
width: 100%;
margin: 8px 0 4px 0;
}
/* Channel slider: dark-appropriate styling */
.setting-slider-ios.channel-slider-full {
background: transparent !important;
}
.setting-slider-ios.channel-slider-full::-webkit-slider-track {
height: 4px;
background: #636366 !important;
border-radius: 2px;
}
.setting-slider-ios.channel-slider-full::-webkit-slider-runnable-track {
height: 4px;
background: #636366 !important;
border-radius: 2px;
}
.setting-slider-ios.channel-slider-full::-moz-range-track {
height: 4px;
background: #636366 !important;
border-radius: 2px;
border: none;
}
.setting-slider-ios.channel-slider-full::-webkit-slider-thumb {
background: #e5e5ea !important;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.setting-slider-ios.channel-slider-full::-moz-range-thumb {
background: #e5e5ea !important;
box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.setting-slider-ios.channel-slider-full:active::-webkit-slider-thumb {
background: #007aff !important;
box-shadow: 0 0 0 2px #0056cc, 0 0 0 4px rgba(0, 86, 204, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.setting-slider-ios.channel-slider-full:active::-moz-range-thumb {
background: #007aff !important;
box-shadow: 0 0 0 2px #0056cc, 0 0 0 4px rgba(0, 86, 204, 0.3), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
/* Hardware control page: ensure dark background behind sliders */
#page_hardware_control .setting-row {
background: transparent !important;
}
#page_hardware_control .channel-slider-full {
background: transparent !important;
-webkit-appearance: none !important;
appearance: none !important;
}
/* Hardware Control page: dark theme for channel number inputs */
.theme-dark #page_hardware_control .setting-input {
background: #2c2c2e !important;
border: 1px solid #48484a !important;
color: #ffffff !important;
}
.theme-dark #page_hardware_control .setting-input:focus {
background: #3a3a3c !important;
border-color: #007aff !important;
box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.3) !important;
}
@media (prefers-color-scheme: dark) {
#page_hardware_control .setting-input {
background: #2c2c2e !important;
border: 1px solid #48484a !important;
color: #ffffff !important;
}
#page_hardware_control .setting-input:focus {
background: #3a3a3c !important;
border-color: #007aff !important;
}
}
/* Custom file upload button (translatable replacement for native "Choose File") */
.custom-file-btn {
display: inline-block;
padding: 6px 14px;
font-size: 14px;
font-weight: 500;
color: #007aff;
background: rgba(0, 122, 255, 0.1);
border: 1px solid rgba(0, 122, 255, 0.3);
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
}
.custom-file-btn:active {
background: rgba(0, 122, 255, 0.2);
}
.theme-dark .custom-file-btn {
color: #0a84ff;
background: rgba(10, 132, 255, 0.15);
border-color: rgba(10, 132, 255, 0.3);
}
/* Calibration page: dark theme for textarea and file input */
.theme-dark #calibration_results_display {
background: #1c1c1e !important;
border-color: #48484a !important;
color: #e5e5ea !important;
}
@media (prefers-color-scheme: dark) {
#calibration_results_display {
background: #1c1c1e !important;
border-color: #48484a !important;
color: #e5e5ea !important;
}
}
/* Console resize controls */
.console-size-btn {
padding: 6px 12px;
border: 1px solid #333;
border-radius: 6px;
background: #2c2c2e;
color: white;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
min-width: 60px;
}
.console-size-btn:hover {
background: #3a3a3c;
border-color: #007aff;
}
.console-size-btn.active {
background: #007aff;
border-color: #007aff;
color: white;
}
.console-size-btn:active {
transform: scale(0.95);
}
/* Dark mode console size buttons */
@media (prefers-color-scheme: dark) {
.console-size-btn {
background: #1c1c1e;
border-color: #38383a;
color: #ffffff;
}
.console-size-btn:hover {
background: #2c2c2e;
border-color: #007aff;
}
}
/* Console Modal Styles */
.console-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 10000;
backdrop-filter: blur(4px);
}
.console-modal-content {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #1c1c1e;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
resize: both;
overflow: hidden;
min-width: 400px;
min-height: 300px;
}
.console-modal-header {
background: #2c2c2e;
padding: 16px 20px;
border-bottom: 1px solid #38383a;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
/* For dragging */
}
.console-modal-header h3 {
margin: 0;
color: #ffffff;
font-size: 18px;
font-weight: 600;
}
.console-modal-controls {
display: flex;
gap: 8px;
}
.console-modal-btn {
padding: 6px 12px;
border: 1px solid #48484a;
border-radius: 6px;
background: #3a3a3c;
color: white;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
}
.console-modal-btn:hover {
background: #48484a;
border-color: #007aff;
}
.console-modal-btn:active {
transform: scale(0.95);
}
.console-modal-display {
flex: 1;
padding: 16px;
background: #1c1c1e;
color: #ffffff;
font-family: monospace;
font-size: 12px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
}
/* Fullscreen modal */
.console-modal.fullscreen .console-modal-content {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
resize: none;
}
/* Mobile/Desktop responsive behavior */
@media (max-width: 768px) {
/* Mobile: Hide desktop controls, show mobile controls */
.console-desktop-only {
display: none !important;
}
.console-subtitle-desktop {
display: none !important;
}
.console-mobile-only {
display: block;
}
.console-subtitle-mobile {
display: block;
}
/* Mobile modal adjustments */
.console-modal-content {
top: 5%;
left: 5%;
width: 90%;
height: 90%;
min-width: unset;
}
}
@media (min-width: 769px) {
/* Desktop: Show desktop controls, hide mobile controls */
.console-desktop-only {
display: flex;
}
.console-subtitle-desktop {
display: block;
}
.console-mobile-only {
display: none !important;
}
.console-subtitle-mobile {
display: none !important;
}
}
/* ====== RECONNECTION MODAL STYLES ====== */
.reconnection-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10001;
display: flex;
align-items: center;
justify-content: center;
}
.reconnection-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
}
.reconnection-content {
position: relative;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
max-width: 300px;
width: 90%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(20px);
}
/* Dark mode for reconnection modal */
@media (prefers-color-scheme: dark) {
.reconnection-content {
background: rgba(28, 28, 30, 0.95);
}
.reconnection-title {
color: #f2f2f7;
}
.reconnection-message {
color: #a1a1a6;
}
}
.theme-dark .reconnection-content {
background: rgba(28, 28, 30, 0.95) !important;
}
.theme-dark .reconnection-title {
color: #f2f2f7 !important;
}
.theme-dark .reconnection-message {
color: #a1a1a6 !important;
}
.reconnection-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(0, 122, 255, 0.3);
border-top: 3px solid #007AFF;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.reconnection-title {
color: #1c1c1e;
font-size: 20px;
font-weight: 600;
margin: 0 0 8px 0;
}
.reconnection-message {
color: #8e8e93;
font-size: 16px;
margin: 0 0 30px 0;
line-height: 1.4;
}
.reconnection-cancel-btn {
background: #ff3b30;
color: white;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.reconnection-cancel-btn:hover {
background: #d70015;
transform: scale(1.02);
}
.reconnection-cancel-btn:active {
transform: scale(0.98);
}
.reconnection-wifi-tip {
color: #a1a1a6;
font-size: 13px;
margin: 0;
line-height: 1.4;
text-align: center;
}
/* ====== BLE CONNECTION SCREEN STYLES - NATIVE MOBILE APP DESIGN ====== */
#bleConnectionScreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 10000;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.ble-connection-container {
flex: 1;
display: flex;
flex-direction: column;
background: #000;
}
.ble-content {
flex: 1;
display: flex;
flex-direction: column;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
.ble-header {
text-align: center;
padding: 60px 20px 40px 20px;
}
.ble-logo {
width: 100px;
height: 100px;
margin: 0 auto 24px auto;
background: linear-gradient(135deg, #007aff 0%, #5856d6 100%);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25);
}
.ble-header h1 {
color: #fff;
font-size: 32px;
margin: 0 0 8px 0;
font-weight: 700;
letter-spacing: -0.8px;
}
.ble-subtitle {
color: #8e8e93;
font-size: 17px;
margin: 0;
font-weight: 400;
line-height: 1.4;
}
.ble-status {
background: transparent;
margin: 0 20px 30px 20px;
text-align: center;
}
.status-icon {
font-size: 24px;
margin-bottom: 8px;
display: block;
}
.status-text {
color: #8e8e93;
font-size: 17px;
font-weight: 400;
}
.ble-controls {
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 30px;
}
.ble-btn {
background: #007aff;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.ble-btn:active {
transform: scale(0.96);
background: #0056cc;
}
.ble-btn-primary {
background: #007aff;
}
.ble-btn-secondary {
background: #1c1c1e;
color: #007aff;
border: 1px solid #38383a;
}
.ble-btn-secondary:active {
background: #2c2c2e;
color: #0056cc;
}
.ble-btn-text {
background: transparent;
color: #007aff;
border: none;
padding: 16px;
font-size: 17px;
font-weight: 400;
cursor: pointer;
min-height: auto;
}
.ble-btn-text:active {
color: #0056cc;
transform: none;
}
.ble-device-list {
flex: 1;
margin: 0 20px;
background: #1c1c1e;
border-radius: 12px;
overflow: hidden;
max-height: 400px;
overflow-y: auto;
border: 0.5px solid #38383a;
position: relative;
}
.ble-device-list h3 {
color: #8e8e93;
font-size: 13px;
margin: 0;
padding: 16px 20px 8px 20px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ble-device-item {
background: #1c1c1e;
border: none;
border-bottom: 0.5px solid #38383a;
padding: 12px 20px;
margin: 0;
cursor: pointer;
transition: background-color 0.15s ease;
display: flex;
align-items: center;
min-height: 44px;
}
.ble-device-item:last-child {
border-bottom: none;
}
.ble-device-item:active {
background: #2c2c2e;
}
.ble-device-info {
flex: 1;
}
.ble-device-name {
color: #fff;
font-weight: 400;
font-size: 17px;
margin: 0 0 2px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.me-indicator {
color: #007aff;
font-weight: 500;
font-size: 15px;
}
.ble-device-item.current-device {
border-left: 3px solid #007aff;
background: rgba(0, 122, 255, 0.08);
}
.ble-disconnect-btn {
background: rgba(118, 118, 128, 0.24);
color: #ff453a;
border: none;
border-radius: 14px;
padding: 4px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
}
.ble-disconnect-btn:active {
background: rgba(118, 118, 128, 0.4);
}
.ble-identify-btn {
background: none !important;
border: none;
color: #8e8e93;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease;
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline: none;
box-shadow: none !important;
background-color: transparent !important;
}
.ble-identify-btn:active {
color: #fff;
}
.ble-identify-btn:focus {
outline: none;
background: none !important;
box-shadow: none !important;
}
.ble-identify-btn.identify-pressed {
animation: bleIdentifyFlash 0.6s ease-out infinite;
}
@keyframes bleIdentifyFlash {
0% { color: #8e8e93; transform: scale(1); }
15% { color: #ffd60a; transform: scale(1.3); }
30% { color: #ffc107; transform: scale(1.15); }
50% { color: #ffd60a; transform: scale(1.2); }
100% { color: #8e8e93; transform: scale(1); }
}
.ble-identify-btn.identify-success {
color: #30d158;
}
.ble-identify-btn.identify-error {
color: #ff453a;
}
.ble-last-seen {
color: #636366;
font-size: 12px;
font-variant-numeric: tabular-nums;
min-width: 20px;
text-align: right;
}
.ble-connected-icon {
color: #007aff;
display: flex;
align-items: center;
}
.ble-device-address {
color: #8e8e93;
font-size: 13px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}
.ble-device-status {
display: flex;
align-items: center;
gap: 6px;
margin-top: 3px;
flex-wrap: wrap;
}
.ble-status-tag {
font-size: 11px;
color: #8e8e93;
line-height: 1;
}
.ble-status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 3px;
vertical-align: middle;
}
.ble-status-dot.primary { background: #ffd60a; }
.ble-status-dot.active { background: #30d158; }
.ble-status-dot.warning { background: #ff9f0a; }
.ble-status-dot.error { background: #ff453a; }
.ble-status-dot.idle { background: #636366; }
.ble-group-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(118, 118, 128, 0.24);
color: #fff;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
margin-right: 6px;
vertical-align: middle;
}
.ble-device-name.is-primary {
font-weight: 600;
}
.ble-crown-icon {
display: inline-block;
margin-left: 4px;
vertical-align: middle;
color: #ffd60a;
}
.ble-hub-icon {
display: inline-block;
margin-left: 4px;
vertical-align: middle;
color: #64d2ff;
}
.ble-fixture-badge {
display: inline-block;
margin-left: 5px;
padding: 1px 5px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, monospace;
vertical-align: middle;
line-height: 1.4;
}
.ble-peer-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background: #0a84ff;
color: #fff;
font-size: 11px;
font-weight: 600;
margin-left: 6px;
vertical-align: middle;
line-height: 1;
}
.ble-scroll-hint {
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 40px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 6px;
background: linear-gradient(transparent, rgba(28,28,30,0.95));
pointer-events: none;
transition: opacity 0.3s ease;
}
.ble-scroll-hint svg {
opacity: 0.5;
}
.ble-device-meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.ble-device-rssi {
color: #8e8e93;
font-size: 15px;
font-weight: 400;
width: 20px;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
}
.ble-signal-bars {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 16px;
vertical-align: middle;
}
.ble-signal-bars .bar {
width: 3px;
border-radius: 1px;
background: #48484a;
}
.ble-signal-bars .bar.active {
background: #30d158;
}
.ble-signal-bars .bar:nth-child(1) { height: 4px; }
.ble-signal-bars .bar:nth-child(2) { height: 7px; }
.ble-signal-bars .bar:nth-child(3) { height: 10px; }
.ble-signal-bars .bar:nth-child(4) { height: 14px; }
.ble-device-chevron {
color: #48484a;
font-size: 14px;
margin-left: 12px;
}
.ble-footer {
margin-top: auto;
text-align: center;
padding: 20px;
}
.ble-footer-text {
color: #8e8e93;
font-size: 15px;
margin: 0 0 16px 0;
line-height: 1.4;
}
/* BLE Title Bar Styles */
.ble-title-bar {
position: relative;
background: rgba(28, 28, 30, 0.94);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
z-index: 10001;
}
.ble-title-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 16px 16px 16px;
min-height: 120px;
padding-top: calc(16px + env(safe-area-inset-top, 0px));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.05));
border-top: 0.5px solid rgba(255, 255, 255, 0.15);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.4);
}
.ble-title-left {
display: flex;
align-items: center;
gap: 12px;
}
.ble-title-image {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
}
.ble-logo-img {
width: 96px;
height: 96px;
object-fit: contain;
}
.ble-title-text {
display: flex;
flex-direction: column;
}
.ble-title-brand {
font-size: 24px;
font-weight: 700;
color: #e5e5e5;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
letter-spacing: -0.5px;
}
.ble-title-status {
font-size: 13px;
color: #8e8e93;
font-weight: 400;
white-space: nowrap;
}
.ble-title-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Adjust BLE content to account for title bar */
.ble-content {
padding-top: 0 !important;
}
.ble-controls {
margin-bottom: 12px !important;
padding: 8px 20px !important;
}
.ble-device-list h3 {
padding: 10px 20px 6px 20px !important;
}
#bleSimulatorSection {
flex: 0 0 auto !important;
max-height: none !important;
overflow: visible !important;
border-radius: 0 !important;
border: none !important;
background: transparent !important;
margin: 0 20px !important;
}
#bleSimulatorSection .ble-device-item {
border-radius: 12px;
border: 0.5px solid #38383a;
padding: 10px 16px;
min-height: 36px;
}
#bleSimulatorSection .ble-device-name {
font-size: 15px;
}
#bleSimulatorSection .ble-device-address {
font-size: 12px;
}
/* WiFi Firmware Upgrade Screen */
.wifi-upgrade-screen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 10001;
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.wifi-upgrade-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 24px 24px;
overflow-y: auto;
}
.wifi-upgrade-step {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.wifi-upgrade-icon {
margin-bottom: 20px;
}
.wifi-upgrade-title {
color: #fff;
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
}
.wifi-upgrade-desc {
color: #8e8e93;
font-size: 15px;
line-height: 1.5;
margin: 0 0 24px;
}
.wifi-upgrade-instructions {
width: 100%;
background: #1c1c1e;
border-radius: 12px;
padding: 16px;
text-align: left;
}
.wifi-upgrade-instruction-step {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
color: #e5e5ea;
font-size: 15px;
line-height: 1.4;
border-bottom: 0.5px solid #38383a;
}
.wifi-upgrade-instruction-step:last-child {
border-bottom: none;
}
.wifi-upgrade-step-num {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 12px;
background: #007aff;
color: #fff;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.wifi-upgrade-check-status {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
color: #8e8e93;
font-size: 14px;
}
.wifi-upgrade-spinner {
width: 20px;
height: 20px;
border: 2px solid #48484a;
border-top-color: #007aff;
border-radius: 50%;
animation: wifi-spin 0.8s linear infinite;
}
@keyframes wifi-spin {
to { transform: rotate(360deg); }
}
.wifi-upgrade-version-info {
width: 100%;
background: #1c1c1e;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.wifi-upgrade-version-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.wifi-upgrade-version-label {
color: #8e8e93;
font-size: 15px;
}
.wifi-upgrade-version-value {
color: #fff;
font-size: 17px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wifi-upgrade-version-new {
color: #30d158;
}
.wifi-upgrade-version-arrow {
display: flex;
justify-content: center;
padding: 4px 0;
}
.wifi-upgrade-warning {
color: #ff9f0a;
font-size: 13px;
font-weight: 500;
margin: 0;
padding: 10px 14px;
background: rgba(255, 159, 10, 0.1);
border-radius: 8px;
width: 100%;
text-align: center;
}
.wifi-upgrade-progress-container {
width: 100%;
margin-top: 24px;
}
.wifi-upgrade-progress-bar {
width: 100%;
height: 8px;
background: #2c2c2e;
border-radius: 4px;
overflow: hidden;
}
.wifi-upgrade-progress-fill {
height: 100%;
background: #007aff;
border-radius: 4px;
transition: width 0.3s ease;
}
.wifi-upgrade-progress-text {
color: #8e8e93;
font-size: 14px;
margin-top: 12px;
text-align: center;
}
/* Network icon for main UI */
.network-status-btn {
background: transparent;
border: none;
color: #66b3ff;
font-size: 20px;
cursor: pointer;
padding: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.network-status-btn.connected::after {
content: '';
position: absolute;
bottom: 2px;
right: 2px;
width: 8px;
height: 8px;
background: #007aff;
border-radius: 50%;
border: 2px solid #1a1a2e;
}
/* Auto-scan message styling */
.auto-scan-message {
color: #66b3ff;
text-align: center;
padding: 20px;
font-style: italic;
background: rgba(102, 179, 255, 0.05);
border-radius: 8px;
border: 1px dashed rgba(102, 179, 255, 0.3);
}
/* ========================================
iOS-Style Setup Wizard (Device Provisioning)
======================================== */
.setup-wizard {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
/* Provision page uses standard has-nav-header margin-top: -20px like all other pages */
.setup-wizard .ios-nav-header {
background: rgba(26, 26, 46, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.setup-container {
display: flex;
flex-direction: column;
min-height: auto; /* Let content determine height */
padding: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.setup-step {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px 24px 100px;
min-height: auto; /* Let content determine height */
box-sizing: border-box;
}
/* Progress dots */
.setup-progress {
display: flex;
gap: 10px;
margin-bottom: 12px;
flex-shrink: 0;
}
.setup-progress-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: background 0.3s ease;
}
.setup-progress-dot.active {
background: #007AFF;
}
.setup-progress-dot.completed {
background: #34C759;
}
/* Icon */
.setup-icon {
font-size: 48px;
margin-bottom: 12px;
margin-top: 8px;
line-height: 1;
flex-shrink: 0;
}
.setup-icon-success {
width: 72px;
height: 72px;
background: #34C759;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
color: white;
margin-bottom: 20px;
margin-top: 20px;
flex-shrink: 0;
}
.setup-icon-error {
color: #FF3B30;
}
/* Title and description */
.setup-title {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
text-align: center;
}
.setup-description {
font-size: 17px;
color: rgba(255, 255, 255, 0.6);
text-align: center;
max-width: 300px;
line-height: 1.4;
margin: 0 0 8px 0;
}
.setup-email-display {
font-size: 17px;
color: #007AFF;
font-weight: 600;
margin: 8px 0 16px 0;
}
.setup-status {
font-size: 15px;
color: rgba(255, 255, 255, 0.5);
margin-top: 16px;
}
/* Input field */
.setup-input {
width: 100%;
max-width: 320px;
padding: 14px 18px;
font-size: 17px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
color: #ffffff;
margin-top: 16px;
box-sizing: border-box;
transition: border-color 0.2s ease, background 0.2s ease;
}
.setup-input:focus {
outline: none;
border-color: #007AFF;
background: rgba(255, 255, 255, 0.15);
}
.setup-input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
/* Action buttons */
.setup-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: auto;
width: 100%;
max-width: 320px;
padding-top: 24px;
flex-shrink: 0;
}
.setup-button {
width: 100%;
padding: 16px;
font-size: 17px;
font-weight: 600;
background: #007AFF;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
}
.setup-button:hover {
background: #0066DD;
}
.setup-button:active {
transform: scale(0.98);
}
.setup-button-secondary {
width: 100%;
padding: 16px;
font-size: 17px;
font-weight: 600;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
cursor: pointer;
transition: background 0.2s ease;
}
.setup-button-secondary:hover {
background: rgba(255, 255, 255, 0.15);
}
/* Theme-aware secondary button for use outside setup wizard */
.theme-light .setup-button-secondary {
background: rgba(0, 0, 0, 0.05);
color: var(--text-color, #333);
border: 1px solid rgba(0, 0, 0, 0.15);
}
.theme-light .setup-button-secondary:hover {
background: rgba(0, 0, 0, 0.1);
}
.theme-dark .setup-button-secondary {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-dark .setup-button-secondary:hover {
background: rgba(255, 255, 255, 0.15);
}
.setup-skip {
font-size: 15px;
color: #007AFF;
background: none;
border: none;
cursor: pointer;
padding: 8px 16px;
}
.setup-skip:hover {
text-decoration: underline;
}
/* WiFi network list */
.setup-wifi-list {
width: 100%;
max-width: 320px;
margin-top: 24px;
border-radius: 12px;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
max-height: 300px;
overflow-y: auto;
}
.setup-wifi-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: background 0.2s ease;
}
.setup-wifi-item:last-child {
border-bottom: none;
}
.setup-wifi-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.setup-wifi-item:active {
background: rgba(255, 255, 255, 0.15);
}
.setup-wifi-name {
font-size: 17px;
color: #ffffff;
}
.setup-wifi-signal {
font-size: 12px;
color: #34C759;
letter-spacing: 2px;
}
/* Loading state */
.setup-loading {
padding: 40px 20px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 15px;
}
/* Spinner */
.setup-spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: #007AFF;
border-radius: 50%;
animation: setup-spin 1s linear infinite;
margin: 40px 0 32px 0;
}
.setup-spinner-small {
width: 24px;
height: 24px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-top-color: #007AFF;
border-radius: 50%;
animation: setup-spin 1s linear infinite;
margin-top: 24px;
}
@keyframes setup-spin {
to {
transform: rotate(360deg);
}
}
/* Mobile responsive */
@media (max-width: 480px) {
.setup-step {
padding: 20px 20px 90px;
min-height: calc(100vh - 120px);
}
.setup-title {
font-size: 22px;
margin-bottom: 8px;
}
.setup-description {
font-size: 15px;
margin-bottom: 4px;
}
.setup-icon {
font-size: 56px;
margin-bottom: 16px;
margin-top: 12px;
}
.setup-icon-success {
width: 64px;
height: 64px;
font-size: 32px;
margin-bottom: 16px;
margin-top: 12px;
}
.setup-input,
.setup-actions,
.setup-wifi-list {
max-width: 100%;
}
.setup-actions {
padding-top: 16px;
gap: 10px;
}
.setup-button,
.setup-button-secondary {
padding: 14px;
font-size: 16px;
}
.setup-skip {
padding: 10px;
font-size: 14px;
}
}
/* ====== WEATHER PAGE STYLES ====== */
/* Weather page follows standard has-nav-header behavior */
#page_weather.page.has-nav-header {
padding-top: 0;
}
#page_weather.page.has-nav-header.active {
margin-top: -20px; /* Compensate for #app padding-top: 20px */
}
#page_weather #main_container_div {
padding-top: 0;
margin-top: 0;
}
/* Weather page section headers */
#page_weather .section-header .setting-label {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Light theme */
.theme-light #page_weather .section-header .setting-label {
color: #6d6d72;
}
/* Dark theme */
.theme-dark #page_weather .section-header .setting-label {
color: #8e8e93;
}
/* Ensure weather page inherits theme colors */
.theme-dark #page_weather .setting-label,
.theme-dark #page_weather .setting-value,
.theme-dark #page_weather .setting-subtitle {
color: inherit;
}
.theme-dark #page_weather .settings-section {
background: #1c1c1e;
}
.theme-light #page_weather .settings-section {
background: #ffffff;
}
/* ============================================================
Home Screen — Manual Control Section
============================================================ */
/* ============================================================
Home Screen — SkySync Row
============================================================ */
/* Manual control section: suppress divider between CCT and Brightness, tighten spacing */
#manual_control_section .setting-row:not(:last-child)::after {
display: none;
}
#manual_control_section .setting-row.slider-row {
padding-top: 6px;
padding-bottom: 6px;
}
/* Default card border — subtle outline to delineate cards */
#manual_control_section,
#schedule_preview_section,
#home_skysync_row,
.db-card,
#home_motion_rows .setting-row,
#home_switch_rows .setting-row {
border: 1px solid rgba(255, 204, 0, 0.35);
border-radius: 12px;
margin: 10px 0;
position: relative;
}
/* Status label in border break (fieldset-legend style) */
.card-status-label {
position: absolute;
top: -7px;
left: 12px;
padding: 0 6px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 14px;
background: #1c1c1e;
color: rgba(255, 204, 0, 0.3);
z-index: 1;
cursor: pointer;
}
.card-status-label:active {
opacity: 0.6;
}
.active-controller > .card-status-label {
color: #ffcc00;
cursor: default;
}
/* Active controller highlight — unified yellow border for the winning control source */
#manual_control_section.active-controller,
#schedule_preview_section.active-controller,
#home_skysync_row.active-controller,
.db-card.active-controller,
#home_motion_rows .setting-row.active-controller,
#home_switch_rows .setting-row.active-controller {
border: 2px solid #ffcc00 !important;
box-shadow: 0 0 8px rgba(255, 204, 0, 0.3) !important;
background: rgba(255, 204, 0, 0.05) !important;
border-radius: 12px;
margin: 4px 0;
}
#manual_control_section.active-controller .setting-label,
#schedule_preview_section.active-controller .setting-label,
#home_skysync_row.active-controller .setting-label,
.db-card.active-controller .setting-label {
color: #ffcc00;
font-weight: 600;
}
/* Demo mode highlight — green border on schedule card */
#schedule_preview_section.active-controller-demo {
border: 2px solid #00cc00 !important;
box-shadow: 0 0 8px rgba(0, 204, 0, 0.3) !important;
background: rgba(0, 204, 0, 0.05) !important;
border-radius: 12px;
margin: 4px 0;
}
#schedule_preview_section.active-controller-demo .setting-label {
color: #00cc00;
font-weight: 600;
}
/* Connected highlight: Schedule + SkySync wrapped in a single border container */
.schedule-skysync-group {
border: 2px solid #ffcc00;
border-radius: 12px;
box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
margin: 4px 0;
position: relative;
}
.schedule-skysync-group > #schedule_preview_section {
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important;
}
.schedule-skysync-group > #schedule_preview_section::after,
.schedule-skysync-group > #schedule_preview_section::before {
display: none !important;
}
.schedule-skysync-group > #home_skysync_row {
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
box-shadow: none !important;
background: rgba(255, 204, 0, 0.05) !important;
}
.schedule-skysync-group > #home_skysync_row::after,
.schedule-skysync-group > #home_skysync_row::before {
display: none !important;
}
.schedule-skysync-group > #home_skysync_row > .card-status-label {
display: none !important;
}
/* SkySync subordinate — part of the group but not the active source */
#home_skysync_row.active-controller-subordinate {
background: rgba(255, 204, 0, 0.05) !important;
opacity: 0.7;
}
#home_skysync_row.active-controller-subordinate > .card-status-label,
#home_skysync_row.active-controller-subordinate .skysync-status-msg {
display: none !important;
}
/* 0-10V external input row */
.ext-input-inline-row {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.ext-input-icon {
flex-shrink: 0;
width: 26px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary, #8e8e93);
}
.ext-input-label { flex-shrink: 0; }
.ext-input-readings {
flex: 1;
text-align: right;
font-size: 12px;
color: var(--text-secondary, #8e8e93);
}
/* Daughter board card icon colors */
.db-icon-010v { color: #4caf50; }
.db-icon-dali { color: #f4a261; }
.db-icon-dmx { color: #7b68ee; }
.db-icon-casambi { color: #4cc9f0; }
/* Home card settings gear icon */
.home-card-gear {
flex-shrink: 0;
cursor: pointer;
color: var(--text-secondary, #8e8e93);
padding: 8px;
margin-left: 4px;
opacity: 0.6;
transition: opacity 0.2s ease;
display: flex;
align-items: center;
}
.home-card-gear:hover {
opacity: 1;
}
.home-card-gear:active {
opacity: 0.4;
}
/* Placeholder state for home card rows before real data loads */
.hc-placeholder {
opacity: 0.3;
pointer-events: none;
}
/* SkySync countdown ring + sensor icon */
.skysync-ring-wrap {
position: relative;
width: 26px;
height: 26px;
flex-shrink: 0;
}
.skysync-ring-track {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
.skysync-ring-track circle {
fill: rgba(255, 255, 255, 0.12);
stroke: rgba(255, 255, 255, 0.08);
}
.skysync-ring-progress {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.skysync-ring-progress circle {
fill: none;
stroke: rgba(234, 179, 9, 0.5);
stroke-linecap: round;
}
.skysync-ring-icon {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 16px; height: 16px;
color: #eab309;
}
@keyframes skysyncFlash {
0% { filter: drop-shadow(0 0 0px #eab309) brightness(1); transform: translate(-50%,-50%) scale(1); }
15% { filter: drop-shadow(0 0 6px #eab309) brightness(1.5); transform: translate(-50%,-50%) scale(1.12); }
50% { filter: drop-shadow(0 0 3px #eab309) brightness(1.2); transform: translate(-50%,-50%) scale(1.04); }
100% { filter: drop-shadow(0 0 0px #eab309) brightness(1); transform: translate(-50%,-50%) scale(1); }
}
.skysync-ring-icon.flash {
animation: skysyncFlash 0.8s ease-out;
}
@keyframes skysyncIdentify {
0% { filter: drop-shadow(0 0 0 #38bdf8); }
25% { filter: drop-shadow(0 0 12px #38bdf8) drop-shadow(0 0 4px #fff); }
50% { filter: drop-shadow(0 0 3px #38bdf8); }
75% { filter: drop-shadow(0 0 12px #38bdf8) drop-shadow(0 0 4px #fff); }
100% { filter: drop-shadow(0 0 0 #38bdf8); }
}
.skysync-identify {
animation: skysyncIdentify 0.6s ease-in-out infinite;
}
/* Single-line SkySync row: [icon] [label] [readings flex-1] [signal+battery] */
#home_skysync_row > .setting-content {
flex-wrap: wrap;
}
.skysync-inline-row {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-width: 0;
}
.skysync-label {
flex-shrink: 0;
}
.skysync-readings {
flex: 1;
min-width: 0;
font-size: 12px;
color: var(--text-secondary, #8e8e93);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.skysync-status-msg {
width: 100%;
font-size: 11px;
padding: 2px 0 0 0;
color: #ff9f0a;
}
.skysync-status-msg.status-active {
color: rgba(74, 173, 232, 0.9);
}
.skysync-status-inactive {
color: var(--text-secondary, #8e8e93);
}
.skysync-status-action {
color: #0a84ff;
cursor: pointer;
margin-left: 6px;
}
/* Error page action link */
.skysync-error-action {
margin-top: 8px;
color: var(--tint-color, #007aff);
font-size: 14px;
cursor: pointer;
}
/* ── SkySync Settings Page ── */
/* Live preview strip */
#skysync_lux_time_select.setting-select {
min-width: 90px;
max-width: 120px;
font-size: 13px;
padding: 4px 26px 4px 8px;
}
#ss_live_preview.ss-live-preview {
background: rgba(74, 173, 232, 0.08);
border: 1px solid rgba(74, 173, 232, 0.2);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 12px;
}
.ss-preview-line {
display: flex;
align-items: baseline;
gap: 8px;
padding: 3px 0;
}
.ss-preview-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-secondary, #8e8e93);
flex-shrink: 0;
min-width: 52px;
}
.ss-preview-value {
font-size: 15px;
font-weight: 600;
color: var(--text-primary, #fff);
}
.ss-preview-source {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
margin-left: auto;
flex-shrink: 0;
}
.ss-preview-source.ss-source-active {
color: #30d158;
}
.ss-preview-source.ss-source-inactive {
color: var(--text-secondary, #8e8e93);
}
.ss-preview-action {
font-size: 11px;
text-align: right;
margin-top: 2px;
min-height: 0;
}
.ss-preview-action:empty {
display: none;
}
.ss-preview-action .ss-reason {
color: #ff9f0a;
}
.ss-preview-action .ss-resume {
color: #0a84ff;
cursor: pointer;
margin-left: 6px;
}
/* Collapsible sections */
.ss-collapsible .ss-collapsible-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.ss-collapsible.expanded .ss-collapsible-body {
max-height: 500px;
}
.ss-collapsible-header {
cursor: pointer;
display: flex;
align-items: center;
padding: 8px 16px 8px 0;
}
.ss-collapse-arrow {
font-size: 20px;
color: var(--text-secondary, #8e8e93);
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: auto;
}
.ss-collapsible.expanded .ss-collapse-arrow {
transform: rotate(90deg);
}
/* Dual-thumb range slider */
.ss-lux-live {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--text-secondary, #8e8e93);
align-items: center;
}
.ss-lux-live-label {
color: var(--text-secondary, #8e8e93);
font-weight: 500;
}
.ss-lux-live-item {
display: flex;
align-items: center;
gap: 5px;
}
.ss-lux-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.ss-dot-sensor {
background: #64d2ff;
}
.ss-dot-fixture {
background: #ff9f0a;
}
.ss-range-slider {
padding: 8px 0;
width: 100%;
}
.ss-hours-ticks {
position: relative;
height: 20px;
margin-top: 2px;
}
.ss-hours-tick {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
transform: translateX(-50%);
}
.ss-hours-tick-line {
width: 1px;
height: 6px;
background: var(--text-secondary, #8e8e93);
opacity: 0.5;
}
.ss-hours-tick-label {
font-size: 9px;
color: var(--text-secondary, #8e8e93);
white-space: nowrap;
margin-top: 1px;
}
.ss-hours-tick.ss-tick-solar .ss-hours-tick-line {
height: 8px;
background: #ff9500;
opacity: 0.8;
}
.ss-hours-tick.ss-tick-solar .ss-hours-tick-label {
color: #ff9500;
font-weight: 500;
font-size: 10px;
}
.ss-hours-now {
position: absolute;
top: 5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #ff9500;
z-index: 10;
pointer-events: none;
transform: translateX(-50%);
}
.ss-hours-now-label {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: 600;
color: #ff9500;
white-space: nowrap;
margin-bottom: 5px;
}
.ss-range-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-secondary, #8e8e93);
margin-bottom: 2px;
}
.ss-range-bound {
font-size: 11px;
color: var(--text-secondary, #8e8e93);
}
.ss-range-track {
position: relative;
height: 28px;
display: flex;
align-items: center;
outline: none;
}
.ss-range-fill {
position: absolute;
height: 4px;
background: rgba(74, 173, 232, 0.7);
border-radius: 2px;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
}
.ss-range-thumb {
-webkit-appearance: none;
appearance: none;
position: absolute;
width: 100%;
height: 28px;
background: transparent;
pointer-events: none;
margin: 0;
padding: 0;
outline: none;
border: none;
}
.ss-range-thumb:focus,
.ss-range-thumb:focus-visible {
outline: none;
border: none;
background: transparent;
}
.ss-range-thumb::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
border-radius: 2px;
border: none;
outline: none;
}
.ss-range-thumb:focus::-webkit-slider-runnable-track {
background: transparent;
outline: none;
border: none;
}
.ss-range-thumb::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
pointer-events: all;
margin-top: -9px;
position: relative;
z-index: 2;
}
.ss-range-thumb::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
pointer-events: all;
border: none;
}
/* Brightness boost slider */
#ss_bright_scalar_row .setting-content {
flex-direction: column;
align-items: flex-start;
}
#ss_smooth_speed {
min-width: auto !important;
}
.ss-boost-slider {
width: 100%;
padding: 4px 0;
}
.ss-boost-labels {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--text-secondary, #8e8e93);
margin-top: 6px;
}
.ss-boost-value {
font-weight: 600;
color: var(--text-primary, #fff);
font-size: 12px;
}
.ss-boost-slider input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 2px;
background: rgba(60, 60, 67, 0.3);
outline: none;
border: none;
}
.ss-boost-slider input[type="range"]:focus,
.ss-boost-slider input[type="range"]:focus-visible {
outline: none;
}
.ss-boost-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
}
.ss-boost-slider input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
border: none;
}
#ss_cct_boost_row .setting-content {
flex-direction: column;
align-items: flex-start;
}
.ss-cct-boost-slider input[type="range"] {
background: linear-gradient(to right, #ffb060 0%, #ffd9a8 25%, #f5f5f5 50%, #b9d4ff 75%, #6ea8ff 100%);
}
/* ── 0-10V Trim sliders (horizontal, matches SkySync style) ── */
.trim-slider {
width: 100%;
padding: 4px 0;
}
.trim-slider-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-secondary, #8e8e93);
margin-bottom: 2px;
}
.trim-slider-footer {
font-size: 12px;
color: var(--text-secondary, #8e8e93);
margin-top: 4px;
min-height: 16px;
}
.trim-voltage-bar {
position: relative;
height: 18px;
margin-top: 2px;
display: none;
}
.trim-chevron-arrow {
position: absolute;
top: 0;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #ff9500;
transform: translateX(-50%);
transition: left 0.3s ease;
}
.trim-chevron-label {
position: absolute;
top: 8px;
transform: translateX(-50%);
font-size: 11px;
font-weight: 600;
color: #ff9500;
white-space: nowrap;
transition: left 0.3s ease;
}
.trim-slider-disabled {
opacity: 0.35;
pointer-events: none;
}
/* ── Dimmer config sliders (blue track, white thumb — matches SkySync) ── */
.button-params input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 28px;
background: transparent;
outline: none;
border: none;
}
.button-params input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: linear-gradient(to right, rgba(74,173,232,0.7) var(--fill, 0%), rgba(60,60,67,0.3) var(--fill, 0%));
}
.button-params input[type="range"]::-moz-range-track {
height: 4px;
border-radius: 2px;
background: linear-gradient(to right, rgba(74,173,232,0.7) var(--fill, 0%), rgba(60,60,67,0.3) var(--fill, 0%));
}
.button-params input[type="range"]:focus,
.button-params input[type="range"]:focus-visible {
outline: none;
}
.button-params input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
margin-top: -9px;
}
.button-params input[type="range"]::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
cursor: pointer;
border: none;
}
/* Warning icon inline */
.skysync-warn-icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
cursor: pointer;
animation: skysync-warn-pulse 2s ease-in-out infinite;
}
@keyframes skysync-warn-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Signal bars + battery container */
.skysync-meta-icons {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* Signal bars */
.signal-bars {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 13px;
}
.signal-bars .bar {
width: 3px;
border-radius: 1px 1px 0 0;
background: rgba(142, 142, 147, 0.3);
}
.signal-bars .bar.b1 { height: 20%; }
.signal-bars .bar.b2 { height: 40%; }
.signal-bars .bar.b3 { height: 60%; }
.signal-bars .bar.b4 { height: 80%; }
.signal-bars .bar.b5 { height: 100%; }
.signal-bars .bar.lit { background: #30d158; }
.signal-bars .bar.lit-warn { background: #ff9500; }
.signal-bars .bar.lit-weak { background: #ff3b30; }
/* Battery icon */
.battery-icon {
display: inline-flex;
align-items: center;
gap: 2px;
}
.battery-body {
width: 20px;
height: 10px;
border: 1.5px solid #8e8e93;
border-radius: 2px;
position: relative;
overflow: hidden;
}
.battery-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: #30d158;
width: 100%;
transition: width 0.4s ease, background 0.4s ease;
}
.battery-tip {
width: 3px;
height: 5px;
background: #8e8e93;
border-radius: 0 1.5px 1.5px 0;
}
.battery-pct {
font-size: 11px;
font-weight: 500;
color: #8e8e93;
min-width: 22px;
text-align: right;
}
/* Battery colour based on level */
.battery-icon.bat-low .battery-fill { background: #ff3b30; }
.battery-icon.bat-low .battery-body { border-color: #ff3b30; }
.battery-icon.bat-low .battery-tip { background: #ff3b30; }
.battery-icon.bat-low .battery-pct { color: #ff3b30; }
.battery-icon.bat-mid .battery-fill { background: #ff9500; }
.battery-icon.bat-mid .battery-body { border-color: #ff9500; }
.battery-icon.bat-mid .battery-tip { background: #ff9500; }
.battery-icon.bat-mid .battery-pct { color: #ff9500; }
/* ============================================================
Home Screen — Motion Sensor Rows
============================================================ */
.motion-sensor-icon {
width: 26px;
height: 22px;
flex-shrink: 0;
margin-right: 6px;
color: var(--text-secondary, #8e8e93);
display: flex;
align-items: center;
justify-content: center;
}
/* Tint icon green when motion is active on that row */
#home_motion_rows .setting-row.active-controller .motion-sensor-icon {
color: #30d158;
}
/* Motion rows have no slider below the header, so remove the bottom margin
that would otherwise push the text above the vertical center of the icon. */
#home_motion_rows .setting-header {
margin-bottom: 0;
padding-left: 0; /* No slider here, so remove the 16px indent that setting-header adds for slider rows */
}
.motion-sensor-status {
font-size: 13px;
color: var(--text-secondary, #8e8e93);
text-align: right;
}
.motion-sensor-status.motion-active {
color: #30d158;
font-weight: 500;
}
/* Idle resume countdown on schedule card */
.idle-resume-status {
font-size: 13px;
color: var(--text-secondary, #8e8e93);
text-align: right;
white-space: nowrap;
flex-shrink: 0;
margin-left: 8px;
}
.idle-resume-status.idle-resume-active {
color: #ff9f0a;
font-weight: 500;
}
/* ============================================================
Home Screen — Group separators & Wall Switch Rows
============================================================ */
/* Stronger top border at the first row of each device group */
.setting-row.device-group-top {
border-top: 1px solid rgba(84, 84, 88, 0.4);
}
.theme-light .setting-row.device-group-top {
border-top-color: #c6c6c8;
}
/* Dimmer/switch row labels — allow full name instead of truncating */
#home_switch_rows .setting-label {
max-width: none;
flex: 1;
flex-shrink: 1;
}
/* Wall switch button grid — all 4 buttons on one compact line */
.switch-button-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
padding-top: 6px;
}
.switch-button {
background: rgba(118, 118, 128, 0.14);
border: 1px solid rgba(84, 84, 88, 0.35);
border-radius: 8px;
padding: 7px 6px;
text-align: center;
cursor: default;
transition: background 0.2s ease, border-color 0.2s ease;
}
.switch-button-label {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary, #8e8e93);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.switch-button:hover {
background: rgba(118, 118, 128, 0.22);
border-color: rgba(84, 84, 88, 0.55);
}
.switch-button:active {
transform: scale(0.94);
}
/* Flash animation when a button is pressed */
@keyframes switchButtonFlash {
0% { background: rgba(255, 204, 0, 0.5); border-color: rgba(255, 204, 0, 0.8); }
60% { background: rgba(255, 204, 0, 0.2); border-color: rgba(255, 204, 0, 0.4); }
100% { background: rgba(118, 118, 128, 0.14); border-color: rgba(84, 84, 88, 0.35); }
}
.switch-button.pressed {
animation: switchButtonFlash 1.2s ease-out forwards;
}
.switch-button.pressed .switch-button-label {
color: #ffcc00;
}
/* Light theme overrides */
.theme-light .battery-body { border-color: #6d6d72; }
.theme-light .battery-tip { background: #6d6d72; }
.theme-light .battery-pct { color: #6d6d72; }
.theme-light .switch-button {
background: rgba(118, 118, 128, 0.08);
border-color: #e5e5ea;
}
.theme-light .switch-button-label { color: #6d6d72; }
.theme-light #home_skysync_row.active-controller,
.theme-light .db-card.active-controller {
background: rgba(255, 204, 0, 0.08) !important;
}
.theme-light .card-status-label {
background: #f2f2f7;
}