Merge branch 'main' into 'implement-js'

# Conflicts:
#   src/main/resources/templates/index.html
This commit is contained in:
Julian Klinke 2024-06-20 15:59:55 +02:00
commit aa472e9ee5
3 changed files with 21 additions and 16 deletions

View File

@ -66,6 +66,7 @@ label:has(#is-dataset) {
box-sizing: border-box; box-sizing: border-box;
background-color: var(--text-color); background-color: var(--text-color);
transition: inset-inline ease-out 50ms; transition: inset-inline ease-out 50ms;
filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
} }
#is-dataset:not(:checked) + #is-dataset-toggle::before { #is-dataset:not(:checked) + #is-dataset-toggle::before {

View File

@ -147,10 +147,14 @@ header {
filter: brightness(1.3); filter: brightness(1.3);
} }
.btn:is(:hover, :focus-visible) { .btn.flat {
transition: filter ease-out 50ms;
}
.btn.flat:is(:hover, :focus-visible) {
filter: brightness(1.5); filter: brightness(1.5);
} }
.btn:active { .btn.flat:active {
filter: brightness(1.75); filter: brightness(1.75);
} }

View File

@ -27,7 +27,7 @@
<option>Votes ↓</option> <option>Votes ↓</option>
</select> </select>
<div class="divider"></div> <div class="divider"></div>
<select class="btn" id="filter-btn" title="Filter entries">Filter <select class="btn flat" id="filter-btn" title="Filter entries">Filter
<optgroup label="Standard categories"> <optgroup label="Standard categories">
<option>Option 1</option> <option>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
@ -37,7 +37,7 @@
</optgroup> </optgroup>
</select> </select>
<input type="search" name="query" id="search-entry" placeholder="Search"> <input type="search" name="query" id="search-entry" placeholder="Search">
<button class="btn" id="search-btn" title="Search entries">Search</button> <button class="btn flat" id="search-btn" title="Search entries">Search</button>
</section> </section>
<section id="recents"> <section id="recents">
@ -53,9 +53,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -67,9 +67,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -81,9 +81,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -95,9 +95,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
<li class="dataset"> <li class="dataset">
@ -109,9 +109,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>
@ -128,9 +128,9 @@
</div> </div>
</div> </div>
<aside class="upvote"> <aside class="upvote">
<button class="upvote-btn btn">Upvote</button> <button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span> <span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button> <button class="downvote-btn btn flat">Downvote</button>
</aside> </aside>
</li> </li>
</ul> </ul>