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

Detail base

Browse Source
This commit is contained in:
scarlett kadan
2024-03-27 12:08:19 -04:00
parent 0ca513e976
commit 5b03f1c65a
12 changed files with 146 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,9 +10,8 @@ $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;
@ -48,6 +47,7 @@ $white: #fff;
flex-direction: column;
overflow: hidden;
background-color: transparent;
margin-bottom: 50px;
}
.browse-cable {
@ -61,7 +61,15 @@ $white: #fff;
border-radius: 20px;
border: 1px solid $gray;
padding: 25px;
margin-bottom: 10px;
margin-bottom: 5px;
margin-top: 5px;
transition: all 0.3s ease-in-out;
cursor: pointer;
text-decoration: none;
}
.browse-cable:hover {
transform: translate3d(-5px, -5px, 0);
}
.browse-cable-image {
@ -69,7 +77,6 @@ $white: #fff;
height: 100%;
background-color: transparent;
margin-right: 10px;
}
.browse-cable-label {

50
src/assets/stylesheets/cabledetail.scss Normal file
View File

@ -0,0 +1,50 @@
$dark-blue: #002554;
$medium-blue: #004990;
$light-blue: #007cbe;
$hover-blue: #25b3ff;
$black: #000;
$gray: #bdbdbd;
$white: #fff;
.cable {
background: linear-gradient(
180deg,
rgb(0 37 84 / 100%) 0%,
rgb(0 124 190 / 100%) 50%,
rgb(255, 255, 255) 100%
);
background-color: transparent;
overflow-y: visible;
width: calc(100% - 300px);
height: auto;
display: block;
justify-content: center;
align-items: center;
}
.cable-image {
width: 100%;
height: 200px;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
.cable-image img {
width: auto;
height: 200px;
background-color: transparent;
}
.cable-fieldContainer {
width: 100%;
min-height: calc(100% - 200px);
height: auto;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
overflow: hidden;
background-color: transparent;
}