niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Deutlichere Effekte bei Nutzerinteraktionen

Browse Source
This commit is contained in:
Caroline Schulte
2026-07-19 17:19:57 +02:00
parent 96f38ce72e
commit c4ffc1c797
3 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/dataSources.local.xml
Generated
+1 -1
View File
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="dataSourceStorageLocal" created-in="IU-261.25134.95">
<component name="dataSourceStorageLocal" created-in="IU-253.32098.101">
<data-source name="articles" uuid="315cb5c9-2b0f-435b-b602-59823b160908">
<database-info product="SQLite" version="3.51.1" jdbc-version="4.2" driver-name="SQLite JDBC" driver-version="3.51.1.0" dbms="SQLITE" exact-version="3.51.1" exact-driver-version="3.51">
<identifier-quote-string>&quot;</identifier-quote-string>
css/main.css
+20
View File
@@ -226,3 +226,23 @@ h1 {
text-decoration: none;
box-sizing: border-box;
}
/* Deutlichere Klickreaktion für normale Buttons */
.button:active {
transform: translateY(1px);
box-shadow: none;
}
/* Deutlichere Klickreaktion für Kategorien */
.category-link:active {
transform: translateY(1px);
box-shadow: none;
}
/* Sichtbare Tastatur-Markierung */
.button:focus-visible,
.category-link:focus-visible,
.article-link a:focus-visible,
.register-link a:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 3px;
}
css/navbar.css
+85 -1
View File
@@ -302,5 +302,89 @@ CSS für die navbar
padding: 0.8rem 1rem;
cursor: pointer;
}
}
/* Deutlichere Hover-Effekte für die Navigation */
.nav__dropdown-toggle,
.nav__link {
border-radius: 6px;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.nav__dropdown-toggle:hover,
.nav__link:hover {
background-color: #ffffff;
color: #1d4ed8;
transform: translateY(-2px);
}
/* Sichtbare Reaktion beim Anklicken */
.nav__dropdown-toggle:active,
.nav__link:active {
transform: translateY(1px);
}
/* Deutlichere Effekte für Anmelden, Registrieren usw. */
.nav__button {
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.nav__button:hover {
background-color: #2563eb;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.nav__button:active {
transform: translateY(1px);
box-shadow: none;
}
/* Deutlichere Hervorhebung der Einträge im Dropdown-Menü */
.nav__dropdown-menu a {
display: block;
transition:
background-color 0.2s ease,
color 0.2s ease,
padding-left 0.2s ease;
}
.nav__dropdown-menu a:hover {
background-color: #dbeafe;
color: #1d4ed8;
padding-left: 1.4rem;
}
/* Effekt für den Suchbutton */
.nav__search-button {
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.nav__search-button:hover {
background-color: #2563eb;
color: #ffffff;
}
.nav__search-button:active {
transform: scale(0.95);
}
/* Sichtbare Markierung bei Tastaturbedienung */
.nav a:focus-visible,
.nav button:focus-visible,
.nav input:focus-visible,
.nav label:focus-visible {
outline: 3px solid #fbbf24;
outline-offset: 3px;
}