@import "../../colors"; @import "../../frameless"; /* stage size contants * this is a hack right now - stage includes padding of .5rem (8px) for alignment in gui * in www the player is placed with margin -.5rem to align the edge. * the height is calculated from the actual height on the page (404) - .5rem */ $gui-width: 496px; $stage-width: 480px; $stage-height: 406px; /* override view padding for share banner */ #view { padding: 0 0 20px 0; } .gui { position: absolute; top: 0; z-index: 11; margin: 0; width: 100%; height: 100%; } .preview { .project-title { font-size: 1.75rem; font-weight: 500; &.has-error { .validation-message { transform: translate(22rem, 0); } } } img { &.avatar { border: 0; border-radius: 5px; width: 3rem; &.remix { margin-right: .5em; width: 1.5rem; } } } .title { margin-left: 1rem; text-align: left; font-size: .8rem; } .validation-message { $arrow-border-width: 1rem; display: block; position: absolute; top: 0; left: 0; margin-left: $arrow-border-width; border: 1px solid $active-gray; border-radius: 5px; background-color: $ui-orange; padding: 1rem; max-width: 18.75rem; min-height: 1rem; overflow: visible; color: $type-white; font-size: 1rem; &:before { display: block; position: absolute; top: 1rem; left: -$arrow-border-width / 2; transform: rotate(45deg); border-bottom: 1px solid $active-gray; border-left: 1px solid $active-gray; border-radius: 5px; background-color: $ui-orange; width: $arrow-border-width; height: $arrow-border-width; content: ""; } } .row { &.has-error { .inplace-input, .inplace-textarea { border: 1px solid $ui-orange; } } .col-sm-9 { position: relative; } } .button { margin-left: 1rem; } .comments-container { width: 60%; } .share-button, .remix-button, .see-inside-button { font-size: .875rem; font-weight: normal; &:before { display: inline-block; margin-right: .5rem; background-repeat: no-repeat; background-position: center center; background-size: contain; width: 1.5rem; height: 1.5rem; vertical-align: middle; content: ""; } } .shareText { align-self: center; } .share-button { background-color: $ui-orange; &:before { background-image: url("/svgs/project/share-white.svg"); } } .remix-button { background-color: $ui-green; &:before { background-image: url("/svgs/project/remix-white.svg"); } } .see-inside-button { &:before { background-image: url("/svgs/project/see-inside-white.svg"); } } .preview-row { margin-top: 1rem; justify-content: space-between; align-items: flex-start; } .guiPlayer { display: inline-block; width: $gui-width; margin-left: -.5rem; } .project-notes { height: $stage-height; flex: 1; // not 1.5rem because of stage padding margin-left: 1rem; margin-bottom: .75rem; flex-flow: column; align-items: flex-start; } .share-date { vertical-align: middle; font-size: .875rem; color: $type-gray; } .subactions { justify-content: space-between; flex: 1; margin-left: 1.5rem; } .remix-credit { margin-bottom: 1rem; border: 1px solid $ui-blue-10percent; border-radius: 8px; background-color: $ui-blue-10percent; padding: .5rem; width: calc(100% - 1rem); flex-wrap: nowrap; align-items: flex-start; } .credit-text { font-size: .875rem; flex-shrink: 1; } .description-block { flex-direction: column; align-items: flex-start; width: 100%; flex-grow: 1; } .project-textlabel { font-weight: bold; margin: 0 0 .5rem 0; } .project-description { border: 1px solid $ui-blue-10percent; border-radius: 8px; background-color: $ui-blue-10percent; padding: .5rem; width: calc(100% - (1rem + 2px)); margin-bottom: .75rem; white-space: pre-line; overflow-y: auto; // flex-grow flex: 1; } .project-description.last { margin-bottom: 0; } .project-description-edit { border: 1px solid $ui-blue-10percent; border-radius: 8px; background-color: $ui-blue-10percent; padding: .5rem; width: 100%; white-space: pre-line; overflow-y: scroll; // flex-grow flex: 1; &.textarea-row { border: 0; background-color: inherit; padding: 0; overflow: hidden; } &.has-error { .validation-message { transform: translate(26rem, 0); } } .inplace-textarea { height: 172px; } } .project-description-edit.remixes .inplace-textarea { height: 130px; } .copyleft { display: inline-block; transform: scale(-1, 1); margin: 0; text-align: right; } .stats { width: $stage-width; justify-content: flex-start; } .project-loves, .project-favorites, .project-remixes, .project-views { display: inline; padding-right: 2rem; font-size: 1.25rem; &:before { display: inline-block; margin-right: .1rem; background-repeat: no-repeat; background-position: center center; background-size: contain; width: 1.5rem; height: 1.5rem; vertical-align: text-bottom; content: ""; } } .project-loves { cursor: pointer; &:before { background-image: url("/svgs/project/love-gray.svg"); } } .project-loves.loved { &:before { background-image: url("/svgs/project/love-red.svg"); } } .project-favorites { cursor: pointer; &:before { background-image: url("/svgs/project/fav-gray.svg"); } } .project-favorites.favorited { &:before { background-image: url("/svgs/project/fav-yellow.svg"); } } .project-remixes { &:before { background-image: url("/svgs/project/remix-gray.svg"); } } .project-views { &:before { background-image: url("/svgs/project/views-gray.svg"); } } .action-buttons { display: flex; color: $type-white; font-size: .8rem; font-weight: 500; justify-content: flex-end; flex-wrap: wrap; } .action-button { margin-left: .5rem; height: 2rem; border-radius: 19px; background-color: $ui-blue; padding: 0 .5rem; text-decoration: none; font-size: .75rem; line-height: .875rem; font-weight: normal; // &:hover { // transition: background-color .25s ease; // border-color: transparent; // background-color: $active-gray; // } // // &:active { // border: 0 solid transparent; // box-shadow: inset 0 0 5px $box-shadow-gray; // background-color: $active-dark-gray; // padding: calc(.75em + 1px) calc(1.5em + 1px); // } // // &.report { // border: 1px solid $ui-coral; // background-color: $ui-coral; // // &:hover { // transition: background-color .25s ease; // border-color: transparent; // background-color: $active-gray; // } // // &:active { // border: 0 solid transparent; // box-shadow: inset 0 0 5px $box-shadow-gray; // background-color: $active-dark-gray; // padding: calc(.75em + 1px) calc(1.5em + 1px); // } // } } .studio-button, .copy-link-button, .report-button { &:before { display: inline-block; margin-right: .125rem; background-repeat: no-repeat; background-position: center center; background-size: contain; width: 1rem; height: 1rem; vertical-align: bottom; content: ""; } } .studio-button { &:before { background-image: url("/svgs/project/studio-add-white.svg"); } } .copy-link-button { &:before { background-image: url("/svgs/project/copy-link-white.svg"); } } .report-button { background-color: $ui-coral; &:before { background-image: url("/svgs/project/report-white.svg"); } } .remix-list, .studio-list { flex-direction: column; .project { margin-bottom: 1.5rem; } .creator-image img { max-width: 2rem; max-height: 2rem; } .thumbnail-column { display: inline-block; width: 100%; } } }