style: fix some style issued

5 files changed, 27 insertions, 16 deletions

diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 0844e0b..b4fee3e 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -2,6 +2,8 @@
     --text: #333;
     --table-border: rgba(16, 24, 40, .1);
 
+    --dark: brightness(.90);
+
     --bg-blue: rgb(0, 74, 157);
     --bg-blue-op: rgba(0, 74, 157, .35);
 
@@ -249,6 +251,12 @@ form.samplecode-input input:focus-visible {
     background: none;
 }
 
+.login-form img {
+    margin: 0 auto;
+    width: 4em;
+    display: block;
+}
+
 .userrole-form form {
     margin: 0;
     padding: 0;
@@ -469,7 +477,6 @@ td.clipboard.clipped {
     padding: 4px 8px;
 
     line-height: 1.2rem;
-    vertical-align: middle;
 
     border: 0 solid transparent;
     border-radius: 3px;
@@ -481,33 +488,25 @@ td.clipboard.clipped {
     cursor: pointer;
 }
 
+.btn:active,
 .btn:hover {
-    filter: drop-shadow(1px 2px 2px gray);
+    filter: drop-shadow(1px 1px 1px gray) var(--dark);
 }
 
 .btn:active {
-    filter: drop-shadow(1px 1px 2px gray);
     translate: 0 1px;
 }
 
 .btn.btn-red {
-    background: red;
+    background: var(--bg-red);
     color: white;
 }
 
-.btn.btn-red:hover, .btn.btn-red:active {
-    background: darkred;
-}
-
 .btn.btn-blue {
-    background: slategray;
+    background: var(--bg-blue);
     color: white;
 }
 
-.btn.btn-blue:hover, .btn.btn-blue:active {
-    background: darkslategray;
-}
-
 .btn.btn-delete:before {
     content: '\1F5D1';
     padding: .2rem;
diff --git a/src/main/resources/static/user.svg b/src/main/resources/static/user.svg
new file mode 100644
index 0000000..506d632
--- /dev/null
+++ b/src/main/resources/static/user.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg">
+ <g transform="matrix(1.2 0 0 1.2 -108.01 -85.977)">
+  <rect x="90.01" y="71.647" width="5.2917" height="5.2917" rx=".96212" fill="#b3b3b3"/>
+  <g transform="matrix(1.6667 0 0 1.6667 -60.888 -47.952)" fill="#fff">
+   <circle cx="92.126" cy="72.802" r=".70556"/>
+   <path d="m91.068 74.598a1.0583 1.0583 0 0 1 1.0583-1.0583 1.0583 1.0583 0 0 1 1.0583 1.0583h-1.0583z"/>
+  </g>
+ </g>
+</svg>
diff --git a/src/main/resources/templates/configs/tokens.html b/src/main/resources/templates/configs/tokens.html
index e707fbf..15c70f0 100644
--- a/src/main/resources/templates/configs/tokens.html
+++ b/src/main/resources/templates/configs/tokens.html
@@ -32,7 +32,7 @@
         <div class="token-form">
             <form th:hx-post="@{/configs/tokens}" hx-target="#tokens">
                 <input placeholder="Token-Name" name="name" required />
-                <button>Token Erstellen</button>
+                <button class="btn">Token Erstellen</button>
             </form>
         </div>
     </div>
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
index 467a483..b1ce737 100644
--- a/src/main/resources/templates/fragments.html
+++ b/src/main/resources/templates/fragments.html
@@ -25,7 +25,7 @@
                 <li class="login" sec:authorize="isAuthenticated()">
                     <span>
                         <div class="user-icon">
-                            <img th:src="@{user.svg}" alt="User-Image">
+                            <img th:src="@{/user.svg}" alt="User-Image">
                             <span sec:authorize="hasRole('ADMIN')" class="user-role admin">Admin</span>
                             <span sec:authorize="hasRole('USER')" class="user-role user">User</span>
                             <span sec:authorize="hasRole('GUEST')" class="user-role guest">Guest</span>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
index 75a3681..e07bb53 100644
--- a/src/main/resources/templates/login.html
+++ b/src/main/resources/templates/login.html
@@ -9,6 +9,7 @@
     <div th:replace="~{fragments.html :: nav}"></div>
     <main>
         <div class="login-form">
+            <img th:src="@{/user.svg}" alt="user-logo" />
             <h2 class="centered">Anmelden</h2>
             <div class="centered notification error" th:if="${param.error}">Anmeldung nicht erfolgreich</div>
             <div class="centered notification notice" th:if="${param.expired}">Sitzung abgelaufen oder von einem Administrator beendet.</div>
@@ -16,7 +17,7 @@
             <form method="post" th:action="@{/login}">
                 <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="" autofocus="" />
                 <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="" />
-                <button type="submit">Anmelden</button>
+                <button class="btn" type="submit">Anmelden</button>
                 <hr th:if="${not oidcLogins.isEmpty()}" />
                 <a th:each="oidcLogin : ${oidcLogins}" class="btn" th:href="@{/oauth2/authorization/{provider}(provider=${oidcLogin.component1()})}">OIDC Login - [[ ${oidcLogin.component2()} ]]</a>
             </form>