Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: redesign of the feature

Browse source
This commit is contained in:
Timothy Z. 2024-12-03 23:06:19 +02:00
parent d3dec89ff4
commit 9a5934cbb9
2 changed files with 16 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/routes/Settings/URLsManager/AddItem/AddItem.less
View file

@ -4,25 +4,24 @@
.add-item { .add-item {
display: flex; display: flex;
padding: 0.5rem 1.5rem; padding: 0.4rem 1.5rem;
gap: 1rem; gap: 1rem;
border-radius: var(--border-radius); border-radius: 1.5rem;
transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
background-color: transparent; background-color: var(--overlay-color);
border: 2px solid transparent; border: 2px solid transparent;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
.input { .input {
background-color: var(--overlay-color); border-radius: 1.5rem;
border-radius: var(--border-radius);
color: var(--primary-foreground-color); color: var(--primary-foreground-color);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border: 1px solid transparent; border: 2px solid var(--overlay-color);
width: 70%; width: 70%;
&:focus { &:focus {
border: 1px solid var(--primary-foreground-color); border: 2px solid var(--primary-foreground-color);
} }
} }
@ -39,7 +38,7 @@
justify-content: center; justify-content: center;
background-color: transparent; background-color: transparent;
transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
border-radius: var(--border-radius); border-radius: 1.5rem;
width: 3rem; width: 3rem;
opacity: 0.6; opacity: 0.6;
@ -77,13 +76,12 @@
} }
&:hover { &:hover {
border: 2px solid transparent; border: 2px solid var(--overlay-color);
background-color: var(--overlay-color);
} }
} }
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.add-item { .add-item {
padding: 0.5rem; padding: 0.4rem;
} }
} }

14
src/routes/Settings/URLsManager/Item/Item.less
View file

@ -4,10 +4,10 @@
.item { .item {
display: flex; display: flex;
padding: 1rem 1.5rem; padding: 0.7rem 1.5rem;
border-radius: var(--border-radius); border-radius: 2rem;
transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
background-color: transparent; background-color: var(--overlay-color);
border: 2px solid transparent; border: 2px solid transparent;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
@ -76,7 +76,7 @@
justify-content: center; justify-content: center;
background-color: transparent; background-color: transparent;
transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
border-radius: var(--border-radius); border-radius: 1.5rem;
transform: translateY(-50%); transform: translateY(-50%);
width: 3rem; width: 3rem;
@ -85,7 +85,7 @@
height: 1.5rem; height: 1.5rem;
opacity: 0; opacity: 0;
transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out;
color: var(--primary-foreground-color); color: var(--color-trakt);
} }
&:hover, &:focus { &:hover, &:focus {
@ -100,7 +100,7 @@
} }
&:hover { &:hover {
background-color: var(--overlay-color); border: 2px solid var(--overlay-color);
.actions { .actions {
.delete { .delete {
@ -114,7 +114,7 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.item { .item {
padding: 1rem 0.5rem; padding: 0.7rem 0.5rem;
.actions { .actions {
margin-right: 4rem; margin-right: 4rem;