jam-cloud/web/app/assets/stylesheets/client/jamtrack.css.scss

273 lines
4.4 KiB
SCSS

@import 'common';
#jamtrackScreen {
.filter-element.desc {
margin-left:15px;
}
h2 {
font-size: 20px;
color: white;
font-weight: bold;
margin-bottom:10px;
}
.jamtrack-header {
background-color: #4c4c4c;
font-weight: bold;
text-transform: uppercase;
height: 2em;
padding: 4px;
}
a.jamtrack_help {
color: #fff;
text-decoration: none;
margin: 4px 0px 0px 60px;
&:hover {
text-decoration: underline;
}
}
table.jamtrack-table {
table-layout:fixed;
}
.jamtrack-content {
text-align: center;
border: 1px solid #222222;
padding: 2px
}
.no-jamtracks-msg {
margin: 10px 0;
text-align:center;
}
.jamtrack-record {
//border-bottom: 1px solid black;
text-align: left;
}
th.jamtrack-detail {
padding:6px;
}
th.jamtrack-tracks {
padding:6px;
}
th.jamtrack-action {
padding:6px;
text-align:center;
}
td.jamtrack-action {
padding:0;
position:relative;
}
.jamtrack-detail {
@include border_box_sizing;
width: 25%;
padding: 10px 0 0 10px;
.detail-label {
width: 80px;
float: left;
margin-top: 5px;
font-weight: 400;
font-size: 11px;
clear:both;
}
.detail-value {
float: left;
margin-top: 5px;
margin-bottom:15px;
font-size:11px;
}
.copyright-value {
width: 40%;
float: left;
margin-top: 5px;
}
.jamtrack-description {
display: none;
}
}
.jamtrack-detail-btn {
cursor: pointer;
margin-top: 29px;
margin-right: 5px;
padding-top: 5px;
vertical-align: bottom;
color:#fc0;
.arrow-down {
float:none;
margin-left:5px;
margin-top:0;
margin-right:0;
border-top: 4px solid #fc0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
display:inline-block;
}
.arrow-up {
float:none;
margin-right:0;
margin-left:5px;
margin-bottom:2px;
border-bottom: 4px solid #fc0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
display:inline-block;
}
}
.jamtrack-tracks {
padding-bottom:30px;
position:relative;
@include border_box_sizing;
width:55%;
//padding: 10px 0px;
.tracks-caption {
margin-top: 5px;
margin-bottom: 10px;
}
.track-instrument {
margin-top: 5px;
}
.instrument-image {
float: left;
margin-right: 2px;
}
.instrument-desc {
margin-top: 6px;
float: left;
margin-left: 10px;
}
.instrument-name {
color:white;
}
}
.detail-arrow {
position:absolute;
float: right;
margin-right: 10px;
bottom:14px;
left:12px;
}
.jamtrack-name {
font-size:16px;
white-space: normal;
}
.jamtrack-original-artist {
font-size:16px;
margin-top:10px;
margin-bottom:5px;
white-space: normal;
}
.jamtrack-track {
float:left;
padding:0 0 8px 7px;
width: 250px;
@include border_box_sizing;
&.hidden {
display:none;
}
}
.jam-track-preview {
font-size:11px;
white-space:nowrap;
}
.jamtrack-action {
@include border_box_sizing;
width: 20%;
text-align: center;
.jamtrack-action-container {
display: flex;
align-items: center;
justify-content: center;
position:absolute;
height:100%;
width:100%;
}
.play-button {
margin-top: 5px;
}
.jamtrack-price {
margin-top: 5px;
font-size: 20px;
&.free {
margin-top:0;
display:none;
.free-state {
font-size: 11px;
margin-top: 5px;
display:block;
}
}
}
.jamtrack-add-cart, .jamtrack-add-cart-disabled {
margin: 8px 0px;
}
.jamtrack-license {
margin-left: 20%;
margin-right: 20%;
font-size: 13px;
width: 60%;
}
}
.end-of-jamtrack-list {
margin-top:20px;
}
}
#jamtrack-license-dialog {
.dialog-inner {
height: auto;
.content-body {
max-height: auto;
.content-body-scroller {
height: 350px;
.paragraph {
margin-bottom: 1em;
}
overflow: hidden;
}
border: 1px solid #222;
margin: 4px 4px 8px 4px;
}
}
}
.jamtrack_buttons {
margin: 8px 4px 12px 4px;
}