Footer

src/webui/style/style.css

@@ -5,17 +5,26 @@ body {
   background: #111010;
   /* background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa); */
   color: #FBFBFB;
+  display: flex;
+  flex-direction: column;
   min-height: 100vh;
   margin:0px;
-  padding-top: 70px;
+}
+
+a {
+  text-decoration: none;
+  color: #d3d3d3;
 }
 
 .content-inner {
-  max-width: 90%;
+  width: 100%;
   margin: 0 auto;
   max-width: 1140px;
+  padding: 0 40px;
+  padding-top: 70px;
 }
 
+
 h1, h2 {
   color: #FBFBFB;
 }
@@ -393,7 +402,7 @@ h2 {
   transition: all 0.3s;
 }
 /* --- Custom Upload Buttons --- */
-.up-btn {
+.up-btn, .footer-links a{
   display: inline-block;
   background: #00000000;
   color: #fff;
@@ -409,7 +418,7 @@ h2 {
   border: 1px solid #585858;
 }
 
-.up-btn:hover {
+.up-btn:hover, .footer-links a:hover {
   background: #2d2d2d;
 }
 
@@ -507,14 +516,6 @@ h2 {
 
 /* --- Site Info --- */
 
-/* --- Site Info Form --- */
-
-#site-info.content-inner, #theme-editor.content-inner {
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 1140px;
-  padding: 0 40px 40px 40px;
-}
 
 fieldset {
   background-color: rgb(67 67 67 / 26%);
@@ -828,4 +829,62 @@ justify-content: center;
   padding: 0;
   min-width: 0; /* Prevent unwanted minimum width */
   width: auto;   /* Let width fit content */
-}
+}
+
+#footer {
+  background-color: #0c0d0c29;
+  z-index: 1000;
+  backdrop-filter: blur(20px);
+  border-top: 1px solid #21212157;
+  width: 100%;
+  margin-top: auto;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+}
+
+
+.footer-links, .footer-links a {
+  display: flex;
+  gap: 12px;
+}
+
+.footer-links a {
+  gap: 8px;
+}
+
+.lum-first {
+ font-weight: bold;
+}
+.lum-second {
+  color: #55c3ec;
+  font-weight: bold;
+}
+
+#footer a {
+  color: #fff;
+}
+
+.footer-credit .lum-first::before {
+  content: url(/img/favicon.svg);
+  display: inline-block;
+}
+
+#footer .content-inner {
+  padding-top: 0px;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+}
+
+.icon-text {
+    display: flex;
+}
+