Onkel-Werner-Freizeiten/CampOrganizer2
1
1
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

login icon hover effect

Browse Source
This commit is contained in:
Jottyfan 2025-03-27 22:29:39 +01:00
parent 8cf1857c24
commit 5a891c085d
3 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/main/resources/static/css/style.css
View File

@ -63,6 +63,19 @@ body {
background-image: url('../images/logo_hover.png');
}
.icon_profile {
width: 32px;
height: 32px;
background-size: 32px;
background-repeat: no-repeat;
background-image: url('../images/Icon_Profil.svg');
display: inline-block;
}
.icon_profile:hover {
background-image: url('../images/Icon_Profil_hover.svg');
}
a {
font-family: 'Fira Sans';
}

42
src/main/resources/static/images/Icon_Profil_hover.svg Normal file
View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 71.44 71.44">
<defs>
<style>
.cls-1 {
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: .5px;
}
.cls-1, .cls-2 {
stroke: #008b8b;
}
.cls-1, .cls-2, .cls-3 {
fill: none;
}
.cls-4 {
clip-path: url(#clippath);
}
.cls-2 {
stroke-miterlimit: 10;
}
</style>
<clipPath id="clippath">
<circle class="cls-3" cx="35.72" cy="35.72" r="35.22"/>
</clipPath>
</defs>
<g id="Ebene_1-2" data-name="Ebene 1">
<circle class="cls-2" cx="35.72" cy="35.72" r="35.22"/>
<g class="cls-4">
<g>
<path class="cls-1" d="m26.52,40.74c.1.18,2.36-1.36,2.36-1.36.7,1.22-8.38,7.81-7.67,9.05,1.64,2.84,16.71-10.45,17.06-9.85,0,0-19.7,11.6-17.8,14.89,1.1,1.91,23.09-13.33,23.09-13.33.64,1.11-24.96,17.34-24.23,18.61l27.74-16.02c1.97,3.41-28.1,17.71-26.74,20.06,1.11,1.92,28.55-18.65,29.48-17.02l-29.78,21.81,31.45-18.16c1.78,3.08-31.55,21.22-30.85,22.43.13.22,31.02-17.91,31.02-17.91,2.48,4.3-28.57,20.86-28.46,21.05l27.99-16.16c1.06,1.84-18.76,15.45-18.76,15.45.49.85,18.85-10.88,18.85-10.88l-10.45,10.65s9.95-7.97,10.91-6.3c.39.68-4.82,5.99-4.21,7.05.28.48,3.6-2.08,3.6-2.08"/>
<path class="cls-1" d="m27.35,10.64c.22.37,2.8-2.3,3.09-1.79l-9.63,10.18c.69,1.2,18.44-11.86,18.96-10.95,0,0-19,13.93-18.28,15.17.99,1.71,20.42-16.02,22.25-12.85,1.25,2.16-24.58,13.41-22.24,17.46,2.06,3.57,26.29-15.18,26.29-15.18,2.08,3.6-27.69,14.43-25.02,19.06l25.92-14.96s-23.11,17.33-22.84,17.8c2.55,4.41,24.69-14.25,24.69-14.25,0,0-19.83,14.92-19.34,15.78.46.79,18.25-14.34,19.9-11.49,0,0-15.86,10.69-14.52,13l11.54-6.66"/>
<path class="cls-2" d="m35.72,37.67h0c8.62,0,15.61,6.99,15.61,15.61v21.27h-31.22v-21.27c0-8.62,6.99-15.61,15.61-15.61Z"/>
<circle class="cls-2" cx="35.72" cy="22.8" r="14.87"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

2
src/main/resources/templates/template.html
View File

@ -126,7 +126,7 @@
<li class="nav-item">
<div class="dropdown">
<button class="btn btn-hoverborder navbar-collapse" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img th:src="@{/images/Icon_Profil.svg}" width="24px" height="24px" />
<span class="icon_profile"></span>
</button>
<ul class="dropdown-menu dropdown-menu-end" th:if="${#strings.isEmpty(currentUser)}">
<li><a class="dropdown-item" th:href="@{/dashboard}">einloggen</a></li>