Merge branch '34-revisit-design' into '22-integrate-api-and-frontend'
Resolve "Revisit design" and merge into 22-integrate-api-and-frontend See merge request padas/24ss-5430-web-and-data-eng/gruppe-3/datadash!56
This commit is contained in:
Elias Schriefer
commit
b305a76c58
@ -1,9 +1,18 @@
|
||||
@import url("main.css");
|
||||
|
||||
main {
|
||||
padding: var(--pad-main);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
||||
gap: 1rem 2rem;
|
||||
|
||||
@container (width >= 50rem) {
|
||||
grid-template-columns: 1fr 1fr auto;
|
||||
}
|
||||
}
|
||||
|
||||
form > * {
|
||||
@ -25,6 +34,8 @@ form :is(input[type=text], input[type=url], textarea) {
|
||||
padding: .5em;
|
||||
font-family: sans-serif;
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
min-width: 5rem;
|
||||
}
|
||||
|
||||
/* focus outlines */
|
||||
@ -32,7 +43,7 @@ form :is(input[type=text], input[type=url], textarea) {
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.btn, #is-dataset-toggle {
|
||||
#is-dataset-toggle {
|
||||
transition: outline ease-in 100ms;
|
||||
}
|
||||
|
||||
@ -73,6 +84,8 @@ label:has(#is-dataset) {
|
||||
background-color: var(--fg-color);
|
||||
border-radius: .5lh;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#is-dataset-toggle::before {
|
||||
@ -91,6 +104,14 @@ label:has(#is-dataset) {
|
||||
filter: drop-shadow(rgba(0, 0, 0, .8) 0 0 .25rem);
|
||||
}
|
||||
|
||||
#is-dataset-toggle-container {
|
||||
justify-content: center;
|
||||
|
||||
label::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
#is-dataset:focus-visible + #is-dataset-toggle {
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
@ -103,20 +124,17 @@ label:has(#is-dataset) {
|
||||
inset-inline: calc(2rem - .5lh - var(--switch-gap)) 0;
|
||||
}
|
||||
|
||||
/* short description box */
|
||||
form :has(#short-description) {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
|
||||
form :has(#url) {
|
||||
grid-column: 2 / 4;
|
||||
@container (width >= 50rem) {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* full description box */
|
||||
#full-description-box {
|
||||
grid-column: 1 / 4;
|
||||
margin: 1rem 0;
|
||||
grid-column: 1 / -1;
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#full-description {
|
||||
@ -126,52 +144,16 @@ form :has(#url) {
|
||||
|
||||
/* button bar */
|
||||
#btn-bar {
|
||||
grid-column: 1 / 4;
|
||||
grid-column: -2 / -1;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
gap: 1rem ;
|
||||
}
|
||||
|
||||
/* button styling */
|
||||
.btn {
|
||||
padding: .5lh 1lh;
|
||||
border: none;
|
||||
border-radius: .5lh;
|
||||
--btn-color: var(--fg-color);
|
||||
background-color: var(--btn-color);
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
transition: background-color 100ms, filter 200ms;
|
||||
transition-timing-function: ease-out;
|
||||
--drop-shadow-opacity: .5;
|
||||
--drop-shadow-offset-y: 0;
|
||||
--drop-shadow-blur: .25rem;
|
||||
--drop-shadow: drop-shadow(
|
||||
rgba(0, 0, 0, var(--drop-shadow-opacity))
|
||||
0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
|
||||
);
|
||||
filter: var(--drop-shadow);
|
||||
}
|
||||
|
||||
.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
|
||||
#is-dataset:focus-visible + #is-dataset-toggle {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn:not(:disabled):hover {
|
||||
background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
|
||||
--drop-shadow-opacity: .8;
|
||||
--drop-shadow-offset-y: .25rem;
|
||||
--drop-shadow-blur: .4rem;
|
||||
}
|
||||
|
||||
.btn.suggested {
|
||||
--btn-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
filter: var(--drop-shadow) grayscale(.5) brightness(.5);
|
||||
}
|
||||
|
||||
#category[value="new"] {
|
||||
display: none;
|
||||
}
|
||||
@ -184,6 +166,7 @@ label[for="category"] {
|
||||
|
||||
span:has(#category) {
|
||||
gap: unset;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#new-category-group:not(.hidden) {
|
||||
@ -197,4 +180,7 @@ span:has(#category) {
|
||||
background-image: url("./sort.svg");
|
||||
background-size: contain;
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
min-width: 2rem;
|
||||
padding: var(--gap-small)
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<h1>Add new DataDash content</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
<section id="add-content-section">
|
||||
<p>
|
||||
Please add the following information about your dataset/API to
|
||||
help users better find it and understand what it is about and
|
||||
@ -23,62 +23,64 @@
|
||||
<form>
|
||||
<span>
|
||||
<label for="title">Title</label>
|
||||
<input type="text" name="title" id="title" minlength="1" maxlength="50" required>
|
||||
<input type="text" name="title" id="title" size="3" minlength="1" maxlength="50" required>
|
||||
</span>
|
||||
|
||||
<span id="author-box">
|
||||
<label for="author">Author/provider</label>
|
||||
<input type="text" name="author" id="author" required>
|
||||
<input type="text" name="author" id="author" size="3" required>
|
||||
</span>
|
||||
|
||||
<span id="is-dataset-toggle-container">
|
||||
<label>
|
||||
Dataset
|
||||
<input type="checkbox" name="is-dataset" id="is-dataset">
|
||||
<span id="is-dataset-toggle"></span>
|
||||
API
|
||||
</label>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<label for="short-description">Short description</label>
|
||||
<input type="text" name="short-description" id="short-description" maxlength="100" required spellcheck="true">
|
||||
<input type="text" name="short-description" id="short-description" size="3" maxlength="100" required spellcheck="true">
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<label for="url">URL</label>
|
||||
<input type="url" name="url" id="url" required>
|
||||
<input type="url" name="url" id="url" size="3" required>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<label for="terms-of-use">Terms of Use URL</label>
|
||||
<input type="url" name="terms-of-use" id="terms-of-use" required>
|
||||
<input type="url" name="terms-of-use" id="terms-of-use" size="3" required>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<label for="license">License</label>
|
||||
<input type="text" name="license" id="license" required>
|
||||
<input type="text" name="license" id="license" size="3" required>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<label for="category">Category</label>
|
||||
<select name="category" id="category" class="btn" required autocomplete="off">
|
||||
<select name="category" id="category" class="btn full-width" required autocomplete="off">
|
||||
<option value="" selected disabled hidden>Category</option>
|
||||
<option value="new">New category</option>
|
||||
<hr>
|
||||
</select>
|
||||
<span id="new-category-group" class="hidden">
|
||||
<input type="text" id="new-category" size="2" required disabled autocomplete="off">
|
||||
<button id="change-category-btn" class="btn flat" title="change category"></button>
|
||||
<input type="text" id="new-category" size="3" required disabled autocomplete="off">
|
||||
<button id="change-category-btn" class="btn" title="change category"></button>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span id="full-description-box">
|
||||
<label for="full-description">Full description</label>
|
||||
<textarea name="full-description" id="full-description" spellcheck="true"></textarea>
|
||||
<textarea name="full-description" id="full-description" cols="3" spellcheck="true"></textarea>
|
||||
</span>
|
||||
|
||||
<span id="btn-bar">
|
||||
<input type="submit" value="Add" id="btn-add" class="btn suggested" disabled>
|
||||
<input type="reset" value="Cancel" id="btn-cancel" class="btn">
|
||||
<input type="submit" value="Add" id="btn-add" class="btn suggested full-width" disabled>
|
||||
<input type="reset" value="Cancel" id="btn-cancel" class="btn full-width">
|
||||
</span>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
106
src/main/resources/static/buttons.css
Normal file
106
src/main/resources/static/buttons.css
Normal file
@ -0,0 +1,106 @@
|
||||
.btn {
|
||||
padding: .5lh 1lh;
|
||||
border: none;
|
||||
border-radius: .5lh;
|
||||
|
||||
--btn-color: var(--fg-color);
|
||||
/* color: var(--text-color); */
|
||||
background-color: var(--btn-color);
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
|
||||
--transition-duration-short: 50ms;
|
||||
--transition-duration-medium: 100ms;
|
||||
--transition-duration-long: 200ms;
|
||||
--transition-duration-bg-color: var(--transition-duration-medium);
|
||||
--transition-duration-filter: var(--transition-duration-long);
|
||||
--transition-duration-outline: var(--transition-duration-medium);
|
||||
transition:
|
||||
background-color ease-out var(--transition-duration-bg-color),
|
||||
filter ease-out var(--transition-duration-filter),
|
||||
outline ease-in var(--transition-duration-outline);
|
||||
|
||||
--drop-shadow-opacity: .5;
|
||||
--drop-shadow-offset-y: 0;
|
||||
--drop-shadow-blur: .25rem;
|
||||
filter: var(--filter);
|
||||
--filter:
|
||||
brightness(var(--brightness, 1))
|
||||
grayscale(var(--grayscale, 0));
|
||||
cursor: pointer;
|
||||
|
||||
&:not(.flat) {
|
||||
--drop-shadow: drop-shadow(
|
||||
rgba(0, 0, 0, var(--drop-shadow-opacity))
|
||||
0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
|
||||
);
|
||||
|
||||
@supports (color: rgb(from black r g b / 0.5)) {
|
||||
--drop-shadow: drop-shadow(
|
||||
rgba(from var(--bg-color) r g b / var(--drop-shadow-opacity))
|
||||
0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
|
||||
);
|
||||
}
|
||||
|
||||
filter: var(--filter) var(--drop-shadow);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.flat):hover {
|
||||
background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
|
||||
--drop-shadow-opacity: .8;
|
||||
--drop-shadow-offset-y: .25rem;
|
||||
--drop-shadow-blur: .4rem;
|
||||
}
|
||||
|
||||
&:where(:disabled) {
|
||||
--brightness: .5;
|
||||
--grayscale: .5;
|
||||
}
|
||||
|
||||
&.suggested:not(.destructive) {
|
||||
--btn-color: var(--accent-color);
|
||||
}
|
||||
|
||||
&.destructive:not(.suggested) {
|
||||
--btn-color: #861c1c;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
--text-color: transparent;
|
||||
background: var(--icon-url) no-repeat;
|
||||
background-size: contain;
|
||||
overflow: hidden;
|
||||
width: var(--icon-size, 1rem);
|
||||
height: var(--icon-size, 1rem);
|
||||
}
|
||||
|
||||
&.flat {
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
--transition-duration-filter: var(--transition-duration-short);
|
||||
|
||||
&:not(:disabled) {
|
||||
&:hover, &:focus-visible {
|
||||
--brightness: 1.5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
--brightness: 1.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
This class is just a hint, so this is on a best-effort basis.
|
||||
If it works, it works, if not, then not.
|
||||
*/
|
||||
&.full-width {
|
||||
width: -moz-available;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
@import url("./main.css");
|
||||
@import url("main.css");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
|
||||
|
||||
:root {
|
||||
@ -226,44 +226,6 @@ a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#delete-btn {
|
||||
background: #861c1c;
|
||||
}
|
||||
|
||||
/* button styling to be revisited */
|
||||
.btn {
|
||||
padding: .5lh 1lh;
|
||||
border: none;
|
||||
border-radius: .5lh;
|
||||
--btn-color: var(--fg-color);
|
||||
background-color: var(--btn-color);
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
transition: background-color 100ms, filter 200ms;
|
||||
transition-timing-function: ease-out;
|
||||
--drop-shadow-opacity: .5;
|
||||
--drop-shadow-offset-y: 0;
|
||||
--drop-shadow-blur: .25rem;
|
||||
--drop-shadow: drop-shadow(
|
||||
rgba(0, 0, 0, var(--drop-shadow-opacity))
|
||||
0 var(--drop-shadow-offset-y) var(--drop-shadow-blur)
|
||||
);
|
||||
filter: var(--drop-shadow);
|
||||
}
|
||||
|
||||
.btn:focus-visible, #is-dataset:focus-visible + #is-dataset-toggle {
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.btn:not(:disabled):hover {
|
||||
background-color: color-mix(in oklab, var(--btn-color) 80%, var(--bg-color));
|
||||
--drop-shadow-opacity: .8;
|
||||
--drop-shadow-offset-y: .25rem;
|
||||
--drop-shadow-blur: .4rem;
|
||||
}
|
||||
|
||||
|
||||
#nothing-found-bg {
|
||||
background-position-x: calc(50% + 3cqh);
|
||||
}
|
||||
|
||||
@ -13,9 +13,9 @@
|
||||
<body>
|
||||
<template id="voting-template">
|
||||
<aside class="upvote">
|
||||
<button class="upvote-btn btn flat">Upvote</button>
|
||||
<button class="upvote-btn btn flat icon">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn btn flat">Downvote</button>
|
||||
<button class="downvote-btn btn flat icon">Downvote</button>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@ -29,9 +29,9 @@
|
||||
</summary>
|
||||
<a id="url">https://example.com/dataset</a>
|
||||
<aside class="upvote">
|
||||
<button disabled class="upvote-btn btn flat">Upvote</button>
|
||||
<button disabled class="upvote-btn btn flat icon">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button disabled class="downvote-btn btn flat">Downvote</button>
|
||||
<button disabled class="downvote-btn btn flat icon">Downvote</button>
|
||||
</aside>
|
||||
</header>
|
||||
|
||||
@ -60,8 +60,8 @@
|
||||
</p>
|
||||
</section>
|
||||
<section id="details-btns">
|
||||
<button id="back-btn" class="btn">Back to main page</button>
|
||||
<button id="delete-btn" class="hidden btn">Delete</button>
|
||||
<button id="back-btn" class="btn suggested">Back to main page</button>
|
||||
<button id="delete-btn" class="hidden btn destructive">Delete</button>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
@ -18,25 +18,20 @@ const deleteButton = document.getElementById("delete-btn");
|
||||
|
||||
let dataset = null;
|
||||
let currentRating = 0;
|
||||
let isRated = false;
|
||||
|
||||
const currentLocation = new URL(location.href);
|
||||
if (currentLocation.searchParams.has("id")) {
|
||||
const id = currentLocation.searchParams.get("id");
|
||||
const response = await fetch(`${currentLocation.origin}/api/v1/datasets/id/${id}`);
|
||||
const response = await fetch(`/api/v1/datasets/id/${id}`);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
dataset = new Dataset(data);
|
||||
const upvoteComponent = dataset.createUpvoteComponent();
|
||||
|
||||
console.log(dataset.storageGet());
|
||||
debugger
|
||||
if (dataset.storageGetKey("created-locally", false)) {
|
||||
deleteButton.classList.remove("hidden");
|
||||
}
|
||||
isRated = dataset.storageGetKey("is-rated", false)
|
||||
|
||||
|
||||
title.innerText = dataset.title;
|
||||
title.dataset.type = dataset.type.toLowerCase();
|
||||
@ -74,20 +69,21 @@ backButton.addEventListener("click", () => {
|
||||
window.location.href = location.origin;
|
||||
})
|
||||
|
||||
deleteButton.addEventListener("click", () => {
|
||||
deleteButton.addEventListener("click", async () => {
|
||||
if (dataset != null) {
|
||||
fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id, {
|
||||
method: 'DELETE'
|
||||
}).then(resp => {
|
||||
if (resp.ok) {
|
||||
const response = await fetch(
|
||||
`/api/v1/datasets/id/${dataset.id}`,
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
window.location.href = location.origin;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
rating.addEventListener("mousemove", (event) => {
|
||||
if (!isRated) {
|
||||
if (!dataset.storageGetKey("is-rated", false)) {
|
||||
let bounds = rating.getBoundingClientRect();
|
||||
currentRating = Math.round(((event.clientX - bounds.left) / bounds.width) * 5);
|
||||
console.log(currentRating);
|
||||
@ -100,22 +96,21 @@ rating.addEventListener("mouseleave", () => {
|
||||
rating.value = dataset.rating;
|
||||
});
|
||||
|
||||
rating.addEventListener("click", () => {
|
||||
if (!isRated) {
|
||||
fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id + "/stars?stars=" + currentRating, {
|
||||
method: 'PUT'
|
||||
}).then(resp => {
|
||||
if (resp.ok) {
|
||||
rating.addEventListener("click", async () => {
|
||||
if (!dataset.storageGetKey("is-rated", false)) {
|
||||
const starsResponse = await fetch(
|
||||
`/api/v1/datasets/id/${dataset.id}/stars?stars=${currentRating}`,
|
||||
{ method: 'PUT' }
|
||||
);
|
||||
|
||||
if (starsResponse.ok) {
|
||||
dataset.storageSetKey("is-rated", true);
|
||||
isRated = true;
|
||||
fetch(`${currentLocation.origin}/api/v1/datasets/id/` + dataset.id)
|
||||
.then(resp => resp.json())
|
||||
.then((data) => {
|
||||
const response = await fetch(`/api/v1/datasets/id/${dataset.id}`);
|
||||
const data = await response.json();
|
||||
|
||||
dataset = new Dataset(data);
|
||||
ratingText.innerText = parseFloat(dataset.rating).toFixed(1);
|
||||
rating.value = dataset.rating;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<script type="module" src="main.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="add-btn" title="Add a new API entry"></div>
|
||||
<div id="add-btn" class="btn flat icon" title="Add a new API entry"></div>
|
||||
<main>
|
||||
<header>
|
||||
<h1>Welcome to DataDash</h1>
|
||||
@ -29,16 +29,16 @@
|
||||
</div>
|
||||
</div>
|
||||
<aside class="upvote">
|
||||
<button class="upvote-btn btn flat">Upvote</button>
|
||||
<button class="upvote-btn btn flat icon">Upvote</button>
|
||||
<span class="upvote-count">0</span>
|
||||
<button class="downvote-btn btn flat">Downvote</button>
|
||||
<button class="downvote-btn btn flat icon">Downvote</button>
|
||||
</aside>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<section id="tool-bar">
|
||||
<button class="btn flat" id="reset-tools-btn" title="Reset search results">Reset</button>
|
||||
<select id="sort-btn" class="btn flat" title="Sort entries">Sort by
|
||||
<button class="btn flat icon" id="reset-tools-btn" title="Reset search results">Reset</button>
|
||||
<select id="sort-btn" class="btn flat icon" title="Sort entries">Sort by
|
||||
<option id="default-sort">Date newest-oldest</option>
|
||||
<option>Date oldest-newest</option>
|
||||
<option>Author A-Z</option>
|
||||
@ -51,7 +51,7 @@
|
||||
<option>Upvotes ↓</option>
|
||||
</select>
|
||||
<div class="divider"></div>
|
||||
<select class="btn flat" id="filter-btn" title="Filter entries">Filter
|
||||
<select class="btn flat icon" id="filter-btn" title="Filter entries">Filter
|
||||
<option id="default-filter">None</option>
|
||||
<optgroup label="Standard categories">
|
||||
<option>Dataset</option>
|
||||
@ -61,7 +61,7 @@
|
||||
</optgroup>
|
||||
</select>
|
||||
<input type="search" name="query" id="search-entry" placeholder="Search">
|
||||
<button class="btn flat" id="search-btn" title="Search entries">Search</button>
|
||||
<button class="btn flat icon" id="search-btn" title="Search entries">Search</button>
|
||||
</section>
|
||||
|
||||
<section id="recents">
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import url("buttons.css");
|
||||
|
||||
:root {
|
||||
--bg-color: #222;
|
||||
--fg-color: #555;
|
||||
@ -13,11 +15,17 @@
|
||||
--corner-radius: 1rem;
|
||||
font-size: 12pt;
|
||||
font-family: sans-serif;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
scrollbar-color: var(--fg-color) var(--bg-color);
|
||||
}
|
||||
|
||||
* {
|
||||
color: var(--text-color, white);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color, black);
|
||||
color: var(--text-color, white);
|
||||
/* color: var(--text-color, white); */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -34,18 +42,22 @@ header {
|
||||
}
|
||||
|
||||
#add-btn {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
--icon-size: 7rem;
|
||||
--icon-url: linear-gradient(135deg, pink, darkblue);
|
||||
content: url("add-button-mask.svg");
|
||||
background: linear-gradient(135deg, pink, darkblue);
|
||||
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:hover, &:focus-visible {
|
||||
--brightness: 1.2;
|
||||
}
|
||||
|
||||
&:active {
|
||||
--brightness: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
#tool-bar {
|
||||
@ -131,21 +143,13 @@ header {
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn, #reset-tools-btn {
|
||||
background: var(--icon-url) no-repeat;
|
||||
background-size: contain;
|
||||
border: none;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.downvote-btn, .upvote-btn{
|
||||
.downvote-btn, .upvote-btn {
|
||||
--icon-url: url(triangle.svg);
|
||||
--icon-size: 2rem;
|
||||
|
||||
&:disabled {
|
||||
--brightness: 1.75;
|
||||
}
|
||||
}
|
||||
|
||||
.downvote-btn {
|
||||
@ -154,26 +158,18 @@ header {
|
||||
|
||||
#search-btn {
|
||||
--icon-url: url(looking-glass.svg);
|
||||
--icon-size: 1rem;
|
||||
}
|
||||
|
||||
#filter-btn {
|
||||
--icon-url: url(filter.svg);
|
||||
--icon-size: 1rem;
|
||||
}
|
||||
|
||||
#reset-tools-btn {
|
||||
--icon-url: url(reset.svg);
|
||||
--icon-size: 1rem;
|
||||
}
|
||||
|
||||
#sort-btn {
|
||||
--icon-url: url(sort.svg);
|
||||
--icon-size: 1rem;
|
||||
}
|
||||
|
||||
.isVoted {
|
||||
filter: brightness(1.75);
|
||||
}
|
||||
|
||||
.divider {
|
||||
@ -182,22 +178,17 @@ header {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
#add-btn:is(:hover, :focus-visible) {
|
||||
filter: brightness(1.2);
|
||||
:is(.upvote-btn, .downvote-btn).isVoted {
|
||||
--brightness: 1.1;
|
||||
}
|
||||
|
||||
#add-btn:active {
|
||||
filter: brightness(1.3);
|
||||
select * {
|
||||
background-color: var(--fg-color);
|
||||
color: var(--text-color);
|
||||
|
||||
}
|
||||
|
||||
.btn.flat {
|
||||
transition: filter ease-out 50ms;
|
||||
select::selection {
|
||||
background-color: #554094;
|
||||
}
|
||||
|
||||
.btn.flat:is(:hover, :focus-visible) {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
||||
.btn.flat:active {
|
||||
filter: brightness(1.75);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user