enhance(admin): show impersonation banner and keep password change with the user (#38924)

Follow-up to https://github.com/go-gitea/gitea/pull/38614

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/admin.css

@@ -44,7 +44,7 @@
   margin-bottom: 1rem;
 }
 
-.web-banner-content-editor .render-content.render-preview {
+.site-banner-content-editor .render-content.render-preview {
   /* use the styles from ".ui.message" */
   padding: 1em 1.5em;
   border: 1px solid var(--color-info-border);

web_src/css/modules/button.css

@@ -32,6 +32,12 @@
   color: var(--color-text);
 }
 
+.ui.button.hover-opaque:hover {
+  /* ".ui.button:hover" uses alpha channel to "highlight", it doesn't work when the background is not body: the inherited color is not right
+   for such case, use this opaque color */
+  background: var(--color-hover-opaque);
+}
+
 .ui.active.button,
 .ui.button:active,
 .ui.active.button:active,

web_src/css/modules/container.css

@@ -15,19 +15,24 @@
   width: 800px;
 }
 
-.ui.message.web-banner-container {
+.ui.message.site-banner-container {
   position: relative;
   margin: 0;
   border-radius: 0;
 }
 
-.ui.message.web-banner-container > .web-banner-content {
+#navbar + .ui.message.site-banner-container,
+.ui.message.site-banner-container + .ui.message.site-banner-container {
+  border-top: none;
+}
+
+.ui.message.site-banner-container > .site-banner-content {
   width: 1280px;
   max-width: calc(100% - calc(2 * var(--page-margin-x)));
   margin: auto;
 }
 
-.ui.message.web-banner-container > button.dismiss-banner {
+.ui.message.site-banner-container > button.site-banner-close {
   position: absolute;
   right: 20px;
   top: 15px;

web_src/css/modules/navbar.css

@@ -7,11 +7,6 @@
   padding: 0 10px;
 }
 
-/* When notification message is present after navbar, hide border to avoid double border */
-#navbar:has(+ .ui.message) {
-  border-bottom: none;
-}
-
 #navbar .navbar-left,
 #navbar .navbar-right {
   display: flex;