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

v1

Browse Source
This commit is contained in:
scarlett kadan
2024-05-14 17:49:12 -04:00
parent 8fe33095dd
commit 9a8efb5418
6 changed files with 177 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,7 +11,7 @@ $white: #fff;
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
rgb(255 255 255) 100%
);
background-color: transparent;
overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
background-color: transparent;
margin-bottom: 50px;
animation: fadeInUp;
animation-duration: .5s;
animation-duration: 0.5s;
}
.browse-title {
@@ -71,8 +71,8 @@ $white: #fff;
height: 150px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
display: flex;
align-items: center;
@@ -86,7 +86,7 @@ $white: #fff;
cursor: pointer;
text-decoration: none;
background-color: transparent;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
}
.browse-cable-image {
@@ -97,7 +97,7 @@ $white: #fff;
background-color: white;
border: $gray solid 1px;
border-radius: 10px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
aspect-ratio: 1/1;
}
@@ -146,10 +146,9 @@ $white: #fff;
font-size: 15px;
margin-bottom: 2px;
color: $light-blue;
color: $light-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
height: auto;
}
.browse-search {
@@ -157,8 +156,8 @@ $white: #fff;
height: 50px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
display: flex;
align-items: center;
@@ -171,7 +170,7 @@ $white: #fff;
transition: all 0.3s ease-in-out;
text-decoration: none;
background-color: transparent;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
}
.browse-search input {
@@ -188,4 +187,4 @@ $white: #fff;
border-right: none;
padding-left: 20px;
padding-top: 2px;
}
}

34
src/assets/stylesheets/cabledetail.scss
View File

@@ -11,7 +11,7 @@ $white: #fff;
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
rgb(255 255 255) 100%
);
background-color: transparent;
overflow-y: visible;
@@ -49,7 +49,7 @@ $white: #fff;
overflow: hidden;
background-color: transparent;
animation: fadeInUp;
animation-duration: .5s;
animation-duration: 0.5s;
}
.cable-main {
@@ -57,8 +57,8 @@ $white: #fff;
height: 200px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
display: flex;
align-items: center;
@@ -71,7 +71,7 @@ $white: #fff;
margin-top: 5px;
transition: all 0.3s ease-in-out;
text-decoration: none;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
}
.cable-actions {
@@ -96,8 +96,8 @@ $white: #fff;
height: 100%;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
display: flex;
align-items: center;
@@ -107,7 +107,7 @@ $white: #fff;
border: 1px solid $gray;
transition: all 0.3s ease-in-out;
text-decoration: none;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
cursor: pointer;
overflow: visible;
}
@@ -116,8 +116,8 @@ $white: #fff;
width: auto;
background: linear-gradient(
-30deg,
rgb(187, 194, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 194 236) 0%,
rgb(255 255 255 / 100%) 100%
);
}
@@ -143,7 +143,7 @@ $white: #fff;
margin-right: 25px;
border: $gray solid 1px;
border-radius: 10px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
}
.cable-main-label {
@@ -183,7 +183,6 @@ $white: #fff;
background-color: transparent;
font-size: 16px;
color: $light-blue;
color: $light-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
@@ -194,8 +193,7 @@ $white: #fff;
height: auto;
background-color: transparent;
display: flex;
flex-wrap: wrap;
flex-direction: row;
flex-flow: row wrap;
align-items: stretch;
flex-grow: 1;
justify-content: space-between;
@@ -229,7 +227,7 @@ $white: #fff;
border: $light-blue solid 2px;
border-radius: 20px;
table-layout: fixed;
border-spacing: 0px;
border-spacing: 0;
}
.row,
@@ -339,9 +337,9 @@ th:first-child {
.modal-close {
cursor: pointer;
padding: 15px 35px 15px 35px;
padding: 15px 35px;
border-radius: 20px;
background-color: $gray;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
transition: all 0.3s ease-in-out;
}
}

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

@@ -11,7 +11,7 @@ $white: #fff;
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
rgb(255 255 255) 100%
);
background-color: transparent;
overflow-y: visible;
@@ -49,7 +49,7 @@ $white: #fff;
overflow: visible;
background-color: transparent;
animation: fadeInUp;
animation-duration: .5s;
animation-duration: 0.5s;
}
.map-title {
@@ -75,12 +75,13 @@ $white: #fff;
overflow: visible;
}
.map-box, .map-details {
.map-box,
.map-details {
height: 68vh;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
display: flex;
align-items: center;
@@ -90,7 +91,7 @@ $white: #fff;
border: 1px solid $gray;
transition: all 0.3s ease-in-out;
text-decoration: none;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
overflow: visible;
}
@@ -115,15 +116,16 @@ $white: #fff;
overflow: visible;
}
.map-box-circle, .map-box-spacer {
.map-box-circle,
.map-box-spacer {
width: 60px;
height: 60px;
aspect-ratio: 1/1;
border-radius: 50%;
background: linear-gradient(
15deg,
rgb(223, 223, 223) 0%,
rgb(255, 255, 255) 100%
rgb(223 223 223) 0%,
rgb(255 255 255) 100%
);
margin-left: 3px;
margin-right: 3px;
@@ -134,13 +136,13 @@ $white: #fff;
}
.map-box-circle {
filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.15));
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
cursor: pointer;
}
.map-box-spacer {
background-color: transparent;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0);
box-shadow: 0 2px 2px rgb(0 0 0 / 0%);
border: 1px solid transparent;
background: transparent;
}
@@ -174,11 +176,10 @@ $white: #fff;
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));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
margin-bottom: 30px;
margin-top: 30px;
}
@@ -202,7 +203,7 @@ $white: #fff;
text-align: left;
height: auto;
font-family: "Gotham Bold";
margin-bottom: 3px;;
margin-bottom: 3px;
}
.map-cable-shortdescription {
@@ -235,7 +236,6 @@ $white: #fff;
font-size: 15px;
margin-bottom: 5px;
color: $light-blue;
color: $light-blue;
width: 100%;
text-align: left;
height: auto;
@@ -245,11 +245,11 @@ $white: #fff;
.map-cable-moreinfo {
width: 200px;
height: 50px;
border-radius: 20px;
border-radius: 20px;
background: linear-gradient(
15deg,
rgb(223, 223, 223) 0%,
rgb(255, 255, 255) 100%
rgb(223 223 223) 0%,
rgb(255 255 255) 100%
);
margin-left: 3px;
margin-right: 3px;
@@ -257,7 +257,7 @@ $white: #fff;
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));
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
cursor: pointer;
margin-bottom: 40px;
text-decoration: none;
@@ -271,4 +271,4 @@ $white: #fff;
color: $medium-blue;
font-family: "Gotham Bold";
background-color: transparent;
}
}

106
src/assets/stylesheets/navbar.scss
View File

@@ -17,7 +17,7 @@ $white: #fff;
.navbar-top {
width: 90%;
height: 100%;
height: 94%;
display: flex;
align-items: left;
justify-content: flex-start;
@@ -78,7 +78,8 @@ $white: #fff;
flex-direction: column;
}
.navbar-list-item {
.navbar-list-item,
.navbar-return {
width: 100%;
height: 50px;
margin: 0 0 3px;
@@ -92,7 +93,8 @@ $white: #fff;
cursor: pointer;
}
.navbar-list-item span {
.navbar-list-item span,
.navbar-return span {
background-color: transparent;
width: auto;
height: auto;
@@ -101,3 +103,101 @@ $white: #fff;
color: $dark-blue;
margin-left: 10px;
}
.navbar-return {
width: 90%;
align-items: center;
justify-content: center;
background-color: $medium-blue;
}
.navbar-return span {
color: $white;
margin-left: 0;
}
.modal-container {
width: 100%;
height: 100%;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.modal-title,
.modal-body,
.modal-close,
.modal-return {
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
flex-direction: column;
}
.modal-title span {
width: auto;
height: auto;
font-family: "Gotham Bold";
font-size: 32px;
color: $dark-blue;
background-color: transparent;
margin-bottom: 5px;
}
.modal-body span {
width: auto;
height: auto;
background-color: transparent;
font-family: "Gotham Medium";
font-size: 18px;
color: $medium-blue;
margin-top: 10px;
margin-bottom: 30px;
}
.modal-tray {
width: auto;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: transparent;
margin-bottom: 30px;
overflow: visible;
}
.modal-close,
.modal-return {
cursor: pointer;
padding: 15px 35px;
border-radius: 20px;
background-color: $gray;
box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
transition: all 0.3s ease-in-out;
}
.modal-close span,
.modal-return span {
width: auto;
height: auto;
background-color: transparent;
font-family: "Gotham Medium";
font-size: 18px;
margin-top: 3px;
color: $dark-blue;
}
.modal-return {
width: 30px;
height: 20px;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
}

32
src/assets/stylesheets/settings.scss
View File

@@ -11,7 +11,7 @@ $white: #fff;
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
rgb(255 255 255) 100%
);
background-color: transparent;
overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
background-color: transparent;
margin-bottom: 50px;
animation: fadeInUp;
animation-duration: .5s;
animation-duration: 0.5s;
}
.settings-title {
@@ -66,13 +66,14 @@ $white: #fff;
text-align: left;
}
.settings-powerContainer, .settings-creditsContainer {
.settings-powerContainer,
.settings-creditsContainer {
width: 80%;
height: 100px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
display: flex;
align-items: center;
@@ -85,7 +86,7 @@ $white: #fff;
transition: all 0.3s ease-in-out;
text-decoration: none;
background-color: transparent;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
}
.settings-creditsContainer {
@@ -98,17 +99,17 @@ $white: #fff;
.settings-powerButton {
width: 200px;
height: 50px;
border-radius: 20px;
border-radius: 20px;
background: linear-gradient(
15deg,
rgb(223, 223, 223) 0%,
rgb(255, 255, 255) 100%
rgb(223 223 223) 0%,
rgb(255 255 255) 100%
);
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));
filter: drop-shadow(5px 5px 2px rgb(0 0 0 / 15%));
cursor: pointer;
text-decoration: none;
margin-right: 20px;
@@ -135,7 +136,10 @@ $white: #fff;
flex-direction: column;
}
.entry-links, .entry-name, .entry-position, .settings-credits-title {
.entry-links,
.entry-name,
.entry-position,
.settings-credits-title {
width: auto;
height: auto;
text-align: left;
@@ -175,11 +179,11 @@ $white: #fff;
.entry-position {
width: auto;
height: auto;
color: $light-blue
color: $light-blue;
}
.entry-links {
width: auto;
height: auto;
color: $hover-blue
}
color: $hover-blue;
}

23
src/assets/stylesheets/statistics.scss
View File

@@ -11,7 +11,7 @@ $white: #fff;
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
rgb(255 255 255) 100%
);
background-color: transparent;
overflow-y: visible;
@@ -50,7 +50,7 @@ $white: #fff;
background-color: transparent;
margin-bottom: 50px;
animation: fadeInUp;
animation-duration: .5s;
animation-duration: 0.5s;
}
.statistics-title {
@@ -69,8 +69,7 @@ $white: #fff;
width: 80%;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
background-color: transparent;
@@ -84,20 +83,18 @@ $white: #fff;
height: 300px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
rgb(187 208 236) 0%,
rgb(255 255 255 / 100%) 100%
);
margin-top: 5px;
display: flex; /* Center the content */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
border-radius: 20px;
border: 1px solid $gray;
transition: all 0.3s ease-in-out;
text-decoration: none;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 4px 4px rgb(0 0 0 / 25%));
cursor: pointer;
overflow: visible;
}
@@ -107,10 +104,9 @@ $white: #fff;
height: 95%; /* Adjust the height of iframes */
border-radius: 20px;
// Debug Borders
// border-width: 5px;
// border-style: solid;
// border-width: 5px;
// border-style: solid;
}
// .summary-iframe {
@@ -134,7 +130,6 @@ $white: #fff;
// width: 25%;
// }
// .summary-dashboard {
// width: 100%;
// height: 900px;
@@ -149,4 +144,4 @@ $white: #fff;
// border-radius: 20px;
// text-align: center;
// padding: 10px;
// }
// }