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

getcable

Browse Source
This commit is contained in:
scarlett kadan
2024-05-08 17:01:33 -04:00
parent 4cea1b0832
commit 6656e3ba43
12 changed files with 380 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,6 +70,7 @@ $white: #fff;
transition: all 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
background-color: transparent;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

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

@ -6,7 +6,8 @@ $black: #000;
$gray: #bdbdbd;
$white: #fff;
.cable {
.cable,
.loading {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
@ -47,4 +48,141 @@ $white: #fff;
flex-direction: column;
overflow: hidden;
background-color: transparent;
}
}
.cable-main {
width: 80%;
height: 200px;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: row;
border-radius: 20px;
border: 1px solid $gray;
padding: 25px;
margin-bottom: 5px;
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));
}
.cable-actions {
width: calc(80% + 50px);
height: 60px;
background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
margin-top: 5px;
transition: all 0.3s ease-in-out;
text-decoration: none;
overflow: visible;
}
.cable-actions-button, .cable-actions-back {
width: 32%;
height: 100%;
background: linear-gradient(
-30deg,
rgb(187, 208, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
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));
cursor: pointer;
overflow: visible;
}
.cable-actions-button:hover, .cable-main:hover, .cable-actions-back:hover {
transform: translate3d(-5px, -5px, 0);
}
.cable-actions-back {
width: auto;
background: linear-gradient(
-30deg,
rgb(187, 194, 236) 0%,
rgba(255, 255, 255, 1) 100%
);
}
.cable-actions-button span, .cable-actions-back span {
text-align: center;
font-family: "Gotham Medium";
font-size: 20px;
text-decoration: none;
color: $medium-blue;
width: auto;
height: auto;
margin: 20px;
background-color: transparent;
}
.cable-main-image {
aspect-ratio: 1/1;
width: auto;
height: 100%;
object-fit: cover;
background-color: white;
margin-right: 25px;
border: $gray solid 1px;
border-radius: 10px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.cable-main-label {
width: 60%;
height: 100%;
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.cable-main-name {
background-color: transparent;
font-size: 32px;
color: $medium-blue;
width: auto;
height: auto;
font-family: "Gotham Bold";
margin-bottom: 5px;
}
.cable-main-description {
background-color: transparent;
font-size: 18px;
color: $medium-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
margin-bottom: 30px;
}
.cable-main-brand,
.cable-main-short,
.cable-main-position {
background-color: transparent;
font-size: 16px;
color: $light-blue;
color: $light-blue;
width: auto;
height: auto;
font-family: "Gotham Medium";
}

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

@ -10,34 +10,42 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
display: block;
justify-content: center;
flex-direction: column;
overflow: visible;
align-items: center;
}
.map-image {
width: auto;
height: 250px;
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.map-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.map-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
min-height: calc(100% - 200px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}

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

@ -10,34 +10,42 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
display: block;
justify-content: center;
flex-direction: column;
overflow: visible;
align-items: center;
}
.settings-image {
width: auto;
height: 250px;
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.settings-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.settings-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
min-height: calc(100% - 200px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}

58
src/assets/stylesheets/summary.scss
View File

@ -10,34 +10,62 @@ $white: #fff;
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 26%,
rgb(255 255 255) 39%,
rgb(255 255 255 / 100%) 100%
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
overflow-y: visible;
display: flex;
align-items: center;
display: block;
justify-content: center;
flex-direction: column;
overflow: visible;
align-items: center;
}
.summary-image {
width: auto;
height: 250px;
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.summary-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.summary-fieldContainer {
width: 100%;
min-height: calc(100% - 250px);
min-height: calc(100% - 200px);
height: auto;
background-color: transparent;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}
.summary-fieldContainer-pp {
width: 25%;
height: 300px;
border-radius: 20px;
text-align: center;
padding: 10px;
}
.summary-fieldContainer-graph {
width: 25%;
}
.summary-fieldContainer-dashboard {
width: 100%;
height: 300px;
border-radius: 20px;
text-align: center;
padding: 10px;
}