Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-09 23:15:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ajout style

Browse Source
This commit is contained in:
Sonny
2022-01-07 17:09:12 +01:00
parent 816c8980e1
commit 877b3d3806
9 changed files with 187 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
styles/categories.module.scss
View File

@@ -1,14 +1,13 @@
.categories-wrapper {
border: 1px solid red;
height: 100%;
width: 300px;
padding: 10px;
padding: 0 25px 0 10px;
border-right: 1px solid #dadce0;
margin-right: 15px;
display: flex;
align-items: center;
flex-direction: column;
overflow-x: auto;
overflow-x: none;
& .block-wrapper {
height: auto;
@@ -16,17 +15,72 @@
margin-bottom: 15px;
& h4 {
user-select: none;
text-transform: uppercase;
font-size: .85em;
color: #dadce0;
color: #bbb;
margin-bottom: 5px;
}
& .favorites .item .category {
color: #dadce0;
}
// List items
& .items .item {
user-select: none;
cursor: pointer;
padding: 10px;
border: 1px solid #dadce0;
border-bottom: 2px solid #dadce0;
border-radius: 3px;
margin-bottom: 5px;
transition: .15s;
&.active {
color: #fff;
background: #3f88c5;
border-color: #3f88c5;
}
& .categories .active {
color: red;
&:hover:not(.active) {
color: #3f88c5;
border-bottom: 2px solid #3f88c5;
}
}
}
// Favorites
& .block-wrapper.favorites {
& .items .item a {
text-decoration: none;
color: inherit;
}
& .items .item .category {
color: #bbb;
font-size: .85em;
}
}
// Categories
& .block-wrapper.categories {
min-height: 0;
display: flex;
flex: 1;
flex-direction: column;
& .items {
overflow: auto;
& .item {
margin-right: 5px;
}
}
}
// Controls
& .block-wrapper.controls {
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}

29
styles/globals.scss
View File

@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,600;1,300;1,600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap");
* {
box-sizing: border-box;
@@ -11,7 +11,8 @@ html,
body {
height: 100%;
width: 100%;
font-family: Poppins, sans-serif;
color: #111;
font-family: "Poppins", sans-serif;
padding: 0;
margin: 0;
overflow: hidden;
@@ -26,6 +27,28 @@ body {
flex-direction: column;
}
ul, li {
ul,
li {
list-style: none;
}
/* width */
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
background: #eee;
border-radius: 2px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #3f88c5;
border-radius: 2px;
&:hover {
background: #1e5c8f;
}
}

35
styles/links.module.scss
View File

@@ -1,6 +1,4 @@
.links-wrapper {
border: 1px solid red;
height: 100%;
padding: 10px;
flex: 1;
@@ -16,10 +14,43 @@
flex-direction: column;
scroll-snap-align: center;
& h2 {
color: #3f88c5;
margin-bottom: 15px;
}
& .links {
width: 100%;
display: flex;
flex-direction: column;
}
& .links .link {
user-select: none;
cursor: pointer;
& > a {
color: #3f88c5;
text-decoration: none;
padding: 10px 15px;
border: 1px solid #dadce0;
border-bottom: 2px solid #dadce0;
border-radius: 3px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
transition: .15s;
&:hover {
border-bottom-color: #3f88c5;
transform: scale(1.01);
}
& .link-url {
color: #bbb;
font-size: .80em;
}
}
}
}
}