nefrace/Nashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Navigation, creation and removal of bookmarks/folders

Browse Source
This commit is contained in:
nefrace
2022-12-15 01:57:49 +03:00
parent 5b385a852f
commit 17f6aede91
6 changed files with 2132 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/styles/main.css
View File

@ -59,12 +59,13 @@ body {
justify-content: center;
align-items: center;
min-height: 100vh;
max-width: 1400px;
margin: auto;
}
.panel {
display: flex;
flex-direction: column;
border-radius: 1em;
color: var(--col-fg-1);
background-color: var(--col-bg-2);
box-shadow: 2px 2px 100px #1115;
@ -74,7 +75,7 @@ body {
a {
text-decoration: none;
color: var(--col-acc-1);
color: var(--col-acc-2);
}
#bookmarks {
@ -82,11 +83,13 @@ a {
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* overflow-y: auto; */
}
.card {
display: flex;
justify-content: center;
flex-direction: column;
border-radius: 1em;
color: var(--col-fg-1);
background-color: var(--col-bg-2);
box-shadow: 2px 2px 100px #1115;
text-align: left;
@ -95,6 +98,23 @@ a {
transition: all 200ms ease;
position: relative;
z-index: 0;
/* width: 320px; */
height: 120px;
}
.card.hoverable::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 0%;
transition: all 200ms ease;
height: 100%;
background-color: var(--col-acc-0);
z-index: -1;
}
.card.hoverable:hover::before {
width: 100%;
}
.card .xmark {
position: absolute;
@ -105,11 +125,7 @@ a {
right: 1em;
top: 1em;
}
.card:hover {
box-shadow: 2px 2px 50px var(--col-acc-2);
transform: scale(1.1);
z-index: 1;
}
.tags {
font-size: 0.8em;
color: var(--col-fg-3);
@ -125,7 +141,6 @@ input {
background-color: var(--col-bg-3);
color: var(--col-fg-1);
border: none;
border-radius: 5px;
padding: 1em 1em;
font-size: 1em;
box-shadow: 2px 2px 50px #1115;
@ -160,3 +175,25 @@ button:focus,
background-color: var(--col-acc-1);
color: white;
}
.modal-base {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #0005;
opacity: 0;
backdrop-filter: blur(10px);
transition: all 300ms ease;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
/* display: none; */
pointer-events: none;
}
.modal-base.show {
opacity: 1;
pointer-events: all;
}