改进登录页面[sysauth] 中主题Logo & 主机名[brand-text] 的布局,并增加主机名[brand-text] 的…

…文本大小 -长主机名最多可以显示三行,超过将不再显示
jerrykuku · May 13, 2023 · d9b4650 · d9b4650
1 parent ce06b26
commit d9b4650
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css
@@ -288,19 +288,28 @@ li {
   display: flex;
   -webkit-box-align: center;
   align-items: center;
-  margin: 50px auto 100px 50px;
+  margin: 50px auto 15px auto;
   color: #525461;
   color: var(--default);
 }
 .login-page .login-container .login-form .brand .icon {
   width: 50px;
   height: auto;
-  margin-right: 25px;
 }
-.login-page .login-container .login-form .brand .brand-text {
-  font-size: 1.25rem;
+.login-page .login-container .login-form .brand-text {
+  font-size: 1.8rem;
   font-weight: 700;
+  margin-bottom: 85px;
   font-family: "TypoGraphica";
+  width: 420px;
+  padding: 0 0.5rem 0 0.5rem;
+  text-align: center;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
 .login-page .login-container .login-form .brand:hover {
   text-decoration: none;

diff --git a/htdocs/luci-static/argon/less/cascade.less b/htdocs/luci-static/argon/less/cascade.less
@@ -330,28 +330,36 @@ li {
                 display: flex;
                 -webkit-box-align: center;
                 align-items: center;
-                margin: 50px auto 100px 50px;
+                margin: 50px auto 15px auto;
                 color: #525461;
                 color: var(--default);
 
                 .icon {
                     width: 50px;
                     height: auto;
-                    margin-right: 25px;
-                }
-
-                .brand-text {
-                    font-size: 1.25rem;
-                    font-weight: 700;
-                    font-family: "TypoGraphica";
-
                 }
 
                 &:hover {
                     text-decoration: none;
                 }
             }
 
+            .brand-text {
+                font-size: 1.8rem;
+                font-weight: 700;
+                margin-bottom: 85px;
+                font-family: "TypoGraphica";
+                width: 420px;
+                padding: 0 0.5rem 0 0.5rem;
+                text-align: center;
+                word-break: break-word;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 3;
+                -webkit-box-orient: vertical;
+            }
+
             .form-login {
                 width: 100%;
                 padding: 20px 50px;

diff --git a/luasrc/view/themes/argon/sysauth.htm b/luasrc/view/themes/argon/sysauth.htm
@@ -129,9 +129,8 @@
 	<div class="login-container">
 		<div class="login-form">
 			<!-- Logo Start -->
-			<a class="brand" href="/"><img src="<%=media%>/img/argon.svg" class="icon">
-				<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span>
-			</a>
+			<a class="brand" href="/"><img src="<%=media%>/img/argon.svg" class="icon"></a>
+			<span class="brand-text"><%=striptags( (boardinfo.hostname or "?") ) %></span>
 			<!-- Logo End -->
 			<!-- Login Form Start -->
 			<form class="form-login" method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">