scratch-www/src/views/preview/preview.scss

484 lines
11 KiB
SCSS
Raw Normal View History

@import "../../colors";
@import "../../frameless";
/* stage size constants
* 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)
*/
$gui-width: 496px;
$stage-width: 480px;
$stage-height: 404px;
/* 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);
}
}
}
.project-header {
margin-right: 2rem;
flex-grow: 1;
justify-content: flex-start;
2018-05-30 10:27:22 -04:00
align-items: flex-start;
.inplace-input {
height: calc(3rem - 4px);
}
}
img {
&.avatar {
border: 0;
border-radius: 5px;
width: 3rem;
2018-05-30 10:27:22 -04:00
height: 3rem;
&.remix {
margin-right: .5em;
2018-05-30 10:27:22 -04:00
width: 2rem;
height: 2rem;
}
}
}
.title {
margin-left: 1rem;
text-align: left;
font-size: .8rem;
flex-grow: 1;
}
.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%;
}
.remix-button,
.see-inside-button {
margin-top: 0;
font-size: .875rem;
font-weight: normal;
&:before {
display: inline-block;
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
2018-05-30 10:27:22 -04:00
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
content: "";
}
}
.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;
flex-wrap: nowrap;
}
.guiPlayer {
display: inline-block;
margin-left: -.5rem;
width: $gui-width;
}
.project-notes {
// not 1.5rem because of stage padding
margin-left: 1rem;
height: $stage-height;
align-items: flex-start;
flex: 1;
flex-flow: column;
}
.share-date {
2018-05-30 10:27:22 -04:00
margin-right: .75rem;
vertical-align: middle;
line-height: 2rem;
color: $type-gray;
font-size: .875rem;
}
.subactions {
margin-left: 1.5rem;
justify-content: flex-end;
flex: 1;
}
.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 {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
flex: 1;
}
.project-textlabel {
margin: 0 0 .5rem 0;
2018-05-30 10:27:22 -04:00
font-size: 1rem;
font-weight: bold;
}
.project-description {
margin-bottom: .75rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: calc(100% - (1rem + 2px));
overflow: auto;
2018-05-30 10:27:22 -04:00
white-space: pre-line;
font-size: 1rem;
// flex-grow
flex: 1;
}
.project-description.last {
margin-bottom: 0;
}
.project-description-edit {
display: flex;
2018-05-30 10:27:22 -04:00
margin-bottom: .75rem;
border: 1px solid $ui-blue-10percent;
border-radius: 8px;
background-color: $ui-blue-10percent;
padding: .5rem;
width: 100%;
white-space: pre-line;
// flex-grow
flex: 1;
2018-05-30 10:27:22 -04:00
&.last {
margin-bottom: 0;
}
&.textarea-row {
border: 0;
background-color: inherit;
padding: 0;
}
&.has-error {
.validation-message {
transform: translate(26rem, 0);
}
}
& > .grow {
display: flex;
flex: 1;
}
}
.copyleft {
display: inline-block;
transform: scale(-1, 1);
margin: 0;
text-align: right;
}
.stats {
line-height: 2rem;
justify-content: flex-start;
}
.project-loves,
.project-favorites,
.project-remixes,
.project-views {
display: inline;
padding-right: 2rem;
2018-05-30 10:27:22 -04:00
font-size: 1rem;
font-weight: bold;
&:before {
display: inline-block;
2018-05-30 10:27:22 -04:00
margin-right: .5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
width: 1.5rem;
height: 1.5rem;
2018-05-30 10:27:22 -04:00
vertical-align: -.25rem;
content: "";
}
}
.project-loves {
cursor: pointer;
&:before {
2018-05-30 10:27:22 -04:00
opacity: .5;
background-image: url("/svgs/project/love-gray.svg");
}
}
.project-loves.loved {
&:before {
2018-05-30 10:27:22 -04:00
opacity: 1;
background-image: url("/svgs/project/love-red.svg");
}
}
.project-favorites {
cursor: pointer;
&:before {
2018-05-30 10:27:22 -04:00
opacity: .5;
background-image: url("/svgs/project/fav-gray.svg");
}
}
.project-favorites.favorited {
&:before {
2018-05-30 10:27:22 -04:00
opacity: 1;
background-image: url("/svgs/project/fav-yellow.svg");
}
}
.project-remixes {
&:before {
2018-05-30 10:27:22 -04:00
opacity: .5;
background-image: url("/svgs/project/remix-gray.svg");
}
}
.project-views {
&:before {
2018-05-30 10:27:22 -04:00
opacity: .5;
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: 0 0 0 .5rem;
border-radius: 19px;
background-color: $ui-blue;
2018-05-30 10:27:22 -04:00
padding: 0 .75rem;
height: 2rem;
text-decoration: none;
line-height: .875rem;
font-size: .75rem;
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;
2018-05-30 10:27:22 -04:00
margin-right: .25rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
2018-05-30 10:27:22 -04:00
width: .875rem;
height: .875rem;
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%;
}
}
}
.report-text textarea {
// override min-height from default settings (for teacher registration)
min-height: 8rem;
}