Erik/DataDash
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix button styling for 'add' page

Browse Source
This commit is contained in:
Elias Schriefer
2024-06-18 15:40:39 +02:00
parent df1598e7c5
commit 00a1f4f12c
3 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/resources/static/add.css
View File

@@ -66,6 +66,7 @@ label:has(#is-dataset) {
box-sizing: border-box;
background-color: var(--text-color);
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 {

8
src/main/resources/static/main.css
View File

@@ -147,10 +147,14 @@ header {
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);
}
.btn:active {
.btn.flat:active {
filter: brightness(1.75);
}

30
src/main/resources/templates/index.html
View File

@@ -15,12 +15,12 @@
</header>
<section id="tool-bar">
<select id="sort-btn" title="Sort entries">Sort by
<select id="sort-btn" class="btn flat" title="Sort entries">Sort by
<option>Option 1</option>
<option>Option 2</option>
</select>
<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">
<option>Option 1</option>
<option>Option 2</option>
@@ -30,7 +30,7 @@
</optgroup>
</select>
<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 id="recents">
@@ -46,9 +46,9 @@
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn">Upvote</button>
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
<li class="dataset">
@@ -60,9 +60,9 @@
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn">Upvote</button>
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
<li class="dataset">
@@ -74,9 +74,9 @@
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn">Upvote</button>
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
<li class="dataset">
@@ -88,9 +88,9 @@
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn">Upvote</button>
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
<li class="dataset">
@@ -102,9 +102,9 @@
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn">Upvote</button>
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
</ul>
@@ -121,9 +121,9 @@
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn">Upvote</button>
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn">Downvote</button>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
</ul>