Jukebox/jukebox-web
10
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

map done

Browse Source
This commit is contained in:
scarlett kadan
2024-05-12 18:00:01 -04:00
parent 67cb5f82a9
commit 107858c363
8 changed files with 452 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/stylesheets/browse.scss
View File

@ -150,4 +150,4 @@ $white: #fff;
width: auto;
height: auto;
font-family: "Gotham Medium";
}
}

130
src/assets/stylesheets/map.scss
View File

@ -97,6 +97,7 @@ $white: #fff;
.map-details {
width: 38%;
justify-content: space-between;
}
.map-box-row {
@ -108,7 +109,6 @@ $white: #fff;
align-items: center;
justify-content: center;
flex-direction: row;
overflow: visible;
}
@ -116,7 +116,11 @@ $white: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: $white;
background: linear-gradient(
15deg,
rgb(223, 223, 223) 0%,
rgb(255, 255, 255) 100%
);
margin-left: 3px;
margin-right: 3px;
display: flex;
@ -138,6 +142,7 @@ $white: #fff;
background-color: transparent;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
border: 1px solid transparent;
background: transparent;
}
.map-box-circle-inner {
@ -148,4 +153,125 @@ $white: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.map-box-circle-inner span {
width: auto;
height: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
font-size: 16px;
font-weight: bold;
color: $dark-blue;
margin-top: 2px;
font-family: "Gotham Bold";
}
.map-cable-image {
width: auto;
height: 35%;
aspect-ratio: 1/1;
background-color: transparent;
border: $gray solid 1px;
border-radius: 20px;
background-color: white;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
margin-bottom: 30px;
margin-top: 30px;
}
.map-cable-label {
width: 90%;
height: 80%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
}
.map-cable-name {
background-color: transparent;
font-size: 28px;
color: $medium-blue;
width: 100%;
text-align: left;
height: auto;
font-family: "Gotham Bold";
margin-bottom: 3px;;
}
.map-cable-shortdescription {
background-color: transparent;
font-size: 18px;
color: $medium-blue;
width: 100%;
text-align: left;
height: auto;
font-family: "Gotham Medium";
margin-bottom: 15px;
}
.map-cable-description {
background-color: transparent;
font-size: 16px;
color: $black;
width: 100%;
text-align: left;
height: auto;
font-family: "Gotham Medium";
margin-bottom: 15px;
}
.map-cable-brand,
.map-cable-short,
.map-cable-position,
.map-cable-category {
background-color: transparent;
font-size: 15px;
margin-bottom: 5px;
color: $light-blue;
color: $light-blue;
width: 100%;
text-align: left;
height: auto;
font-family: "Gotham Medium";
}
.map-cable-moreinfo {
width: 200px;
height: 50px;
border-radius: 20px;
background: linear-gradient(
15deg,
rgb(223, 223, 223) 0%,
rgb(255, 255, 255) 100%
);
margin-left: 3px;
margin-right: 3px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in-out;
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
cursor: pointer;
margin-bottom: 40px;
text-decoration: none;
}
.map-cable-moreinfo:hover {
transform: translate3d(-5px, -5px, 0);
}
.map-cable-moreinfo span {
width: auto;
height: auto;
font-size: 20px;
color: $medium-blue;
font-family: "Gotham Bold";
background-color: transparent;
}