🎄 Sync 2026-04-24 03:29:22

luci-theme-teleofis/Makefile

@@ -7,7 +7,7 @@
 include $(TOPDIR)/rules.mk
 
 LUCI_TITLE:=Bootstrap Teleofis Theme
-LUCI_DEPENDS:=
+LUCI_DEPENDS:= +luci-lua-runtime
 
 PKG_LICENSE:=Apache-2.0
 

luci-theme-teleofis/htdocs/luci-static/teleofis/cascade.css

@@ -14,6 +14,109 @@
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
  * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
 
+:root {
+	--background-color-delta-l-sign: -1;
+	--background-color-h: 0;
+	--background-color-s: 0%;
+	--background-color-l: 100%;
+
+	--background-color-high-hsl:
+		var(--background-color-h),
+		var(--background-color-s),
+		var(--background-color-l);
+	--background-color-high: hsl(var(--background-color-high-hsl));
+
+	--background-color-medium-hsl:
+		var(--background-color-h),
+		var(--background-color-s),
+		calc(var(--background-color-l) + var(--background-color-delta-l-sign) * calc(6 / 255 * 100%));
+	--background-color-medium: hsl(var(--background-color-medium-hsl));
+
+	--background-color-low-hsl:
+		var(--background-color-h),
+		var(--background-color-s),
+		calc(var(--background-color-l) + var(--background-color-delta-l-sign) * calc(10 / 255 * 100%));
+	--background-color-low: hsl(var(--background-color-low-hsl));
+
+	--text-color-delta-l-sign: 1;
+	--text-color-h: 0;
+	--text-color-s: 0%;
+	--text-color-l: 0%;
+
+	--text-color-highest-hsl:
+		var(--text-color-h),
+		var(--text-color-s),
+		var(--text-color-l);
+	--text-color-highest: hsl(var(--text-color-highest-hsl));
+
+	--text-color-high-hsl:
+		var(--text-color-h),
+		var(--text-color-s),
+		calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(64 / 255 * 100%));
+	--text-color-high: hsl(var(--text-color-high-hsl));
+
+	--text-color-medium-hsl:
+		var(--text-color-h),
+		var(--text-color-s),
+		calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(128 / 255 * 100%));
+	--text-color-medium: hsl(var(--text-color-medium-hsl));
+
+	--text-color-low-hsl:
+		var(--text-color-h),
+		var(--text-color-s),
+		calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(191 / 255 * 100%));
+	--text-color-low: hsl(var(--text-color-low-hsl));
+
+	--border-color-delta-l-sign: -1;
+	--border-color-h: var(--background-color-h);
+	--border-color-s: var(--background-color-s);
+	--border-color-l: var(--background-color-l);
+
+	--border-color-high-hsl:
+		var(--border-color-h),
+		var(--border-color-s),
+		calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(51 / 255 * 100%));
+	--border-color-high: hsl(var(--border-color-high-hsl));
+
+	--border-color-medium-hsl:
+		var(--border-color-h),
+		var(--border-color-s),
+		calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(34 / 255 * 100%));
+	--border-color-medium: hsl(var(--border-color-medium-hsl));
+
+	--border-color-low-hsl:
+		var(--border-color-h),
+		var(--border-color-s),
+		calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(17 / 255 * 100%));
+	--border-color-low: hsl(var(--border-color-low-hsl));
+
+	--primary-color-high: #1976d2;
+	--primary-color-medium: #1564c0;
+	--primary-color-low: #b00000;
+	--on-primary-color: var(--background-color-high);
+
+	--error-color-high-rgb: 246, 43, 18;
+	--error-color-high: rgb(var(--error-color-high-rgb));
+	--error-color-medium: #e8210d;
+	--error-color-low: #d00000;
+	--on-error-color: var(--background-color-high);
+
+	--success-color-high-rgb: 0, 172, 89;
+	--success-color-high: rgb(var(--success-color-high-rgb));
+	--success-color-medium: #009a4c;
+	--success-color-low: #007936;
+	--on-success-color: var(--background-color-high);
+
+	--warn-color-high: #efbd0b;
+	--warn-color-medium: #f0c629;
+	--warn-color-low: #f2d24f;
+	--on-warn-color: var(--text-color-highest);
+
+	--disabled-opacity: .7;
+
+	color-scheme: light;
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -1657,14 +1760,15 @@ input[type="text"] + .cbi-button-remove {
 	transition: opacity .25s ease-in;
 }
 
+
 .cbi-progressbar {
-	border: 1px solid #ccc;
+	border: 1px solid var(--border-color-high);
 	border-radius: 3px;
 	position: relative;
 	min-width: 170px;
-	height: 20px;
+	height: 8px;
-	margin: 4px 0;
+	margin: 1.4em 0 4px 0;
-	background: #f9f9f9;
+	background: #fcfcfc;
 }
 
 .cbi-progressbar > div {
@@ -1672,16 +1776,13 @@ input[type="text"] + .cbi-button-remove {
 	height: 100%;
 	transition: width .25s ease-in;
 	width: 0%;
+	border-radius: 2px;
 }
 
-.cbi-progressbar::after {
+.cbi-progressbar::before {
 	position: absolute;
-	bottom: 0;
+	top: -1.4em;
-	top: 0;
-	right: 0;
 	left: 0;
-	text-align: center;
-	text-shadow: 0 0 2px #fff;
 	content: attr(title);
 	white-space: pre;
 	overflow: hidden;
@@ -2316,7 +2417,7 @@ html body.apply-overlay-active {
 	bottom: 0;
 	width: 32px;
 	content: " ";
-	background: url(../resources/icons/loading.gif) no-repeat center;
+	background: url(../resources/icons/loading.svg) no-repeat center;
 	background-size: 16px;
 }
 

luci-theme-teleofis/luasrc/view/themes/teleofis/footer.htm

@@ -8,7 +8,7 @@
 <% local ver = require "luci.version" %>
 
    <footer>
-    <div style="height:40px;font-size:95%;color:#999;font-family: Arial,sans-serif;">&#169;&nbsp;TELEOFIS&nbsp;2004-2025&nbsp;</div>
+    <div style="height:40px;font-size:95%;color:#999;font-family: Arial,sans-serif;">&#169;&nbsp;TELEOFIS&nbsp;2004-2022&nbsp;</div>
     <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul>
    </footer>
   </div>