egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalized filters & Tags + UI changes

Browse Source
This commit is contained in:
Daniel
2022-05-30 21:14:34 +04:30
parent a4b925cf0d
commit 43251a85d5
9 changed files with 182 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/AddItem.css
+65
View File
@@ -0,0 +1,65 @@
.add-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
}
.box {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
position: absolute;
z-index: 2;
top: 70px;
right: 20px;
background-color: #1f2c38;
width: 40%;
overflow-x: hidden;
overflow-y: auto;
}
.box h3 {
font-weight: 300;
}
.AddItem-content {
padding: 20px;
}
.AddItem-input {
font-size: 1rem;
padding: 10px;
border: none;
width: 100%;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.AddItem-input:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.upload-btn {
font-family: 'Font Awesome 5 Free';
font-size: 1.1rem;
padding: 5px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 20px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.upload-btn:hover {
background-color: rgb(76, 117, 170);
}
.upload-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
src/styles/App.css
+8 -21
View File
@@ -9,7 +9,6 @@
}
.search {
border-radius: 10px;
margin: 20px 20px 0px 20px;
padding: 10px;
font-family: 'Font Awesome 5 Free';
@@ -32,7 +31,7 @@
}
.add-btn {
border-radius: 10px;
border-radius: 100%;
margin: 20px 20px 0px auto;
font-family: 'Font Awesome 5 Free';
padding: 10px;
@@ -58,12 +57,8 @@ textarea:focus, input:focus{
display: inline-block;
}
.filter {
display: inline-block;
}
.filter button {
border-radius: 10px;
.filter-button {
border-radius: 100%;
font-family: 'Font Awesome 5 Free';
padding: 10px;
font-size: 1rem;
@@ -75,18 +70,10 @@ textarea:focus, input:focus{
transition: background-color 0.1s;
}
.filter button:hover {
.filter-button:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.filter-button:hover {
background-color: rgb(76, 117, 170);
}
.display {
visibility: visible;
}
.filter div {
position: absolute;
margin: -30px 0 0 50px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
src/styles/Filters.css
+26
View File
@@ -0,0 +1,26 @@
.filter {
display: flex;
flex-direction: column;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
z-index: 2;
background-color: #273949;
padding: 10px;
left: 150px;
position: absolute;
margin-top: 4px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.filter label {
margin: 10px;
}
.filter-overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
}
src/styles/List.css
+1 -2
View File
@@ -24,7 +24,6 @@
}
.list-row {
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -77,7 +76,7 @@
width: fit-content;
height: fit-content;
margin: 10px;
border-radius: 10px;
border-radius: 100%;
}
.delete:hover {
src/styles/Modal.css
-93
View File
@@ -1,93 +0,0 @@
.overlay {
position: fixed;
top: 0;
left: 0;
background-color: rgba(39, 60, 78, 0.781);
width: 100vw;
height: 100vh;
}
.box {
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
position: absolute;
top: 20%;
left: 20%;
background-color: #1b2e3f;
width: 60%;
height: 60%;
overflow-x: hidden;
overflow-y: auto;
}
.box h2 {
margin-top: -1px;
margin-bottom: 30px;
text-align: center;
}
.box h3 {text-align: center;}
.modal-content {
padding: 20px;
}
.modal-input {
border-radius: 10px;
font-size: 1.3rem;
padding: 10px;
border: none;
width: 100%;
color: white;
background-color:#273949;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.modal-input:focus {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.upload-btn {
border-radius: 10px;
font-family: 'Font Awesome 5 Free';
font-size: 2rem;
padding: 10px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
}
.upload-btn:hover {
background-color: rgb(76, 117, 170);
}
.cancel-btn {
border-radius: 10px;
padding: 5px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
color: #ffffffb6;
background-color:#273949;
border: none;
margin-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
transition: background-color 0.1s;
font-weight: 900;
}
.cancel-btn:hover {
background-color: rgb(255, 123, 123);
}
.upload-btn:active, .cancel-btn:active {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}