213 lines
2.9 KiB
SCSS
213 lines
2.9 KiB
SCSS
/*Colorscheme*/
|
|
:root {
|
|
--white: hsl(0, 0%, 99%);
|
|
--gray-1: hsl(0, 0%, 95%);
|
|
--gray-2: hsl(0, 0%, 85%);
|
|
--gray-3: hsl(0, 0%, 30%);
|
|
--black: hsl(0, 0%, 20%);
|
|
|
|
--accent: hsl(354, 81%, 56%);
|
|
}
|
|
|
|
|
|
/*Modificacion basica de elementos*/
|
|
body {
|
|
max-width: 75rem;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
font-family: sans-serif;
|
|
color: var(--black);
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
input {
|
|
border: 1px var(--gray-2) solid;
|
|
padding: .3rem;
|
|
}
|
|
|
|
button {
|
|
border: 1px var(--gray-2) solid;
|
|
}
|
|
|
|
button.link {
|
|
display: inline;
|
|
border: none;
|
|
background-color: inherit;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a, button.link {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover, button.link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
img {
|
|
}
|
|
|
|
/*Navbar*/
|
|
.nav {
|
|
display: flex;
|
|
min-height: 3.25rem;
|
|
position: relative;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav .branding {
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
}
|
|
|
|
.nav-links .link {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
/*Pagination*/
|
|
ul.pagination {
|
|
display: flex;
|
|
margin: 1rem auto;
|
|
justify-content: center;
|
|
}
|
|
|
|
.page-item {
|
|
border: 1px solid var(--gray-2);
|
|
}
|
|
|
|
.page-link {
|
|
color: var(--black);
|
|
text-decoration: none;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.page-link {
|
|
padding: 0 .4rem;
|
|
}
|
|
}
|
|
|
|
.page-item.active {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
.page-item.active a {
|
|
color: white;
|
|
}
|
|
|
|
|
|
/*Input with icon*/
|
|
.input-with-icon {
|
|
display: flex;
|
|
}
|
|
|
|
.input-with-icon input {
|
|
border-right: none;
|
|
}
|
|
|
|
.input-with-icon button {
|
|
border-left: none;
|
|
background: white;
|
|
}
|
|
|
|
|
|
/*Lista de entidades*/
|
|
ul.entity_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
li.artist, li.disc, li.song {
|
|
border: 1px var(--gray-2) solid;
|
|
|
|
&:not(:first-child) {
|
|
border-top: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--gray-1)
|
|
}
|
|
|
|
a {
|
|
display: flex;
|
|
text-decoration: none;
|
|
color: var(--black);
|
|
align-items: center;
|
|
height: 100%;
|
|
|
|
.description {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding-left: 1rem;
|
|
|
|
.small {
|
|
color: var(--gray-3);
|
|
font-size: .8rem;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
li.artist {
|
|
height: 4rem;
|
|
}
|
|
|
|
li.disc {
|
|
height: 14rem;
|
|
|
|
a {
|
|
.coverart {
|
|
object-fit: cover;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 1rem;
|
|
border: 1px solid var(--gray-2)
|
|
}
|
|
}
|
|
}
|
|
|
|
li.song {
|
|
height: 4rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Tabs */
|
|
ul.tabs {
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-bottom: 2px var(--gray-1) solid;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
ul.tabs li.tab {
|
|
padding: .5rem 1rem;
|
|
margin-bottom: -2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul.tabs li.tab:hover {
|
|
border-bottom: 2px var(--gray-2) solid;
|
|
}
|
|
|
|
ul.tabs li.tab.selected {
|
|
border-bottom: 2px var(--accent) solid;
|
|
}
|
|
|
|
/*Utils*/
|
|
.full-width {
|
|
width: 100%;
|
|
}
|