347 lines
12 KiB
SCSS
347 lines
12 KiB
SCSS
|
@import "inc/bootstrap";
|
||
|
|
|
||
|
|
$previewToolbarWidth: 1024px;
|
||
|
|
|
||
|
|
body {
|
||
|
|
&.preview-mode {
|
||
|
|
height: 100vh !important;
|
||
|
|
max-height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.no-preview-feedback {
|
||
|
|
.preview-overlay {
|
||
|
|
.preview-container {
|
||
|
|
background: white;
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
.preview-item-container, #preview-container {
|
||
|
|
min-height: calc(100vh - 82px) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-overlay {
|
||
|
|
display: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: 19995;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
|
||
|
|
background: rgba(0, 0, 0, 0.7);
|
||
|
|
&.preview-desktop {
|
||
|
|
overflow: visible;
|
||
|
|
.mobile-only,
|
||
|
|
.standard-only {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.preview-mobile {
|
||
|
|
overflow: visible;
|
||
|
|
.desktop-only,
|
||
|
|
.standard-only {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.preview-standard {
|
||
|
|
overflow: visible;
|
||
|
|
.desktop-only,
|
||
|
|
.mobile-only {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.preview-scale-container {
|
||
|
|
position: relative;
|
||
|
|
float:left
|
||
|
|
}
|
||
|
|
.preview-container {
|
||
|
|
background: white;
|
||
|
|
overflow:auto;
|
||
|
|
|
||
|
|
.preview-item-container, #preview-container {
|
||
|
|
min-height: calc(100vh - 130px) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.preview-container-outer {
|
||
|
|
display: table;
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.preview-utility-bar {
|
||
|
|
background: mix(#fff, $grey, 85%);
|
||
|
|
border-bottom: 1px solid $websiteBorder;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
z-index: 9996;
|
||
|
|
overflow:hidden;
|
||
|
|
padding: 10px;
|
||
|
|
position: fixed;
|
||
|
|
top:0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
.preview-heading {
|
||
|
|
min-width: 140px;
|
||
|
|
}
|
||
|
|
.device-type-and-orientation {
|
||
|
|
min-width: 340px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-utility-bar-inner {
|
||
|
|
max-width: $previewToolbarWidth;
|
||
|
|
width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
h1 {
|
||
|
|
@include font-size(18);
|
||
|
|
text-shadow: 1px 1px 0px #eee;
|
||
|
|
}
|
||
|
|
.icon-info {
|
||
|
|
top: 7px;
|
||
|
|
@include font-size(15);
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
.btn-info {
|
||
|
|
margin-top: 1px
|
||
|
|
}
|
||
|
|
.mobile-device-selector {
|
||
|
|
width: 200px;
|
||
|
|
}
|
||
|
|
.preview-type-selector {
|
||
|
|
width: 140px;
|
||
|
|
}
|
||
|
|
.preview-theme-selector {
|
||
|
|
width: 140px;
|
||
|
|
}
|
||
|
|
.orientation-selector,
|
||
|
|
.desktop-device-selector{
|
||
|
|
width: 130px;
|
||
|
|
}
|
||
|
|
[class*=" col-"], [class^="col-"] {
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#preview-console {
|
||
|
|
// reset from legacy code
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
border: none;
|
||
|
|
z-index: auto;
|
||
|
|
// end reset
|
||
|
|
|
||
|
|
background: whiten($info, .1);
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
.preview-console-closer {
|
||
|
|
position: absolute;
|
||
|
|
right: 10px;
|
||
|
|
top: 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
color: white(.9);
|
||
|
|
&:hover {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
display: none;
|
||
|
|
text-shadow: none;
|
||
|
|
}
|
||
|
|
.preview-console-header {
|
||
|
|
max-width: $previewToolbarWidth;
|
||
|
|
width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
padding: 0;
|
||
|
|
[class*=" col-"], [class^="col-"] {
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// action bar at bottom
|
||
|
|
.extra-button-action-bar {
|
||
|
|
overflow:visible;
|
||
|
|
li {
|
||
|
|
margin: 0 5px;
|
||
|
|
&.btn-info {
|
||
|
|
border-color: white(.3);
|
||
|
|
&.btn-group {
|
||
|
|
border:none !important;
|
||
|
|
overflow:visible;
|
||
|
|
padding:0;
|
||
|
|
a {
|
||
|
|
float:left;
|
||
|
|
margin: 0 2px;
|
||
|
|
padding: 0 15px;
|
||
|
|
border: 1px solid white(.3);
|
||
|
|
border-radius: 0px;
|
||
|
|
display: inline-block;
|
||
|
|
height: inherit;
|
||
|
|
&:first-of-type {
|
||
|
|
border-top-left-radius: 3px;
|
||
|
|
border-bottom-left-radius: 3px;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
&:last-of-type {
|
||
|
|
border-top-right-radius: 3px;
|
||
|
|
border-bottom-right-radius: 3px;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
&:hover, &.active {
|
||
|
|
border-color: white(.8);
|
||
|
|
}
|
||
|
|
.no-label {
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover, &.active {
|
||
|
|
border-color: white(.8);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.horizontal-action-bar {
|
||
|
|
&.bottom-action-bar {
|
||
|
|
overflow: visible;
|
||
|
|
.action {
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.preview-console-body {
|
||
|
|
display:none;
|
||
|
|
ul {
|
||
|
|
padding: 5px;
|
||
|
|
margin: 0;
|
||
|
|
|
||
|
|
height: 300px;
|
||
|
|
overflow: auto;
|
||
|
|
background: rgb(43, 43, 43);
|
||
|
|
font-family: $monospaceFont;
|
||
|
|
color: $textHighlight;
|
||
|
|
.log-time {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.log-type {
|
||
|
|
color: #eee;
|
||
|
|
}
|
||
|
|
.log-message {
|
||
|
|
color: #69f;
|
||
|
|
}
|
||
|
|
pre {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.preview-message-box {
|
||
|
|
.feedback-info {
|
||
|
|
margin: 10px auto 0px;
|
||
|
|
width: 800px;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
float:right;
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.desktop-preview-container {
|
||
|
|
width: 1024px;
|
||
|
|
background: white url(data:image/gif;base64,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) no-repeat center 150px;
|
||
|
|
}
|
||
|
|
.desktop-preview-frame {
|
||
|
|
&.desktop-preview-landscape {
|
||
|
|
padding: 30px 30px;
|
||
|
|
.desktop-device-toolbar {
|
||
|
|
padding-right: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.desktop-preview-portrait {
|
||
|
|
padding: 30px 30px;
|
||
|
|
.desktop-device-toolbar {
|
||
|
|
padding-right: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
position: relative;
|
||
|
|
border: 3px #aaa solid;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: rgb(90, 90, 90);
|
||
|
|
background: linear-gradient(135deg, rgb(90, 90, 90) 0%, rgb(86, 86, 86) 7%, rgb(68, 68, 68) 15%, rgb(20, 20, 20) 30%);
|
||
|
|
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .7);
|
||
|
|
}
|
||
|
|
.desktop-preview-item-container {
|
||
|
|
min-height: 500px;
|
||
|
|
-webkit-box-shadow: 0px 0px 8px mix(#fff, $darkBrown, 50%);
|
||
|
|
-moz-box-shadow: 0px 0px 8px mix(#fff, $darkBrown, 50%);
|
||
|
|
box-shadow: 0px 0px 8px mix(#fff, $darkBrown, 50%);
|
||
|
|
}
|
||
|
|
.preview-canvas {
|
||
|
|
display: table-cell;
|
||
|
|
text-align: center;
|
||
|
|
* {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.preview-outer-frame {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.mobile-preview-container {
|
||
|
|
-moz-box-sizing: content-box;
|
||
|
|
-webkit-box-sizing: content-box;
|
||
|
|
box-sizing: content-box;
|
||
|
|
position: relative
|
||
|
|
}
|
||
|
|
|
||
|
|
.mobile-preview-item-container {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mobile-preview-frame {
|
||
|
|
&.mobile-preview-landscape {
|
||
|
|
padding: 40px 40px;
|
||
|
|
.mobile-device-toolbar {
|
||
|
|
padding-right: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.mobile-preview-portrait {
|
||
|
|
padding: 40px 40px;
|
||
|
|
.mobile-device-toolbar {
|
||
|
|
padding-right: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
position: relative;
|
||
|
|
border: 3px #aaa ridge;
|
||
|
|
border-radius: 25px;
|
||
|
|
background: rgb(90, 90, 90);
|
||
|
|
background: linear-gradient(135deg, rgb(90, 90, 90) 0%, rgb(86, 86, 86) 7%, rgb(68, 68, 68) 15%, rgb(20, 20, 20) 30%);
|
||
|
|
box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .7);
|
||
|
|
}
|
||
|
|
.mobile-preview-container {
|
||
|
|
background: white;
|
||
|
|
border-radius: 3px;
|
||
|
|
border: 2px solid;
|
||
|
|
border-color: #444 #999 #999 #444;
|
||
|
|
}
|
||
|
|
|
||
|
|
.standard-preview-frame {
|
||
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, .7);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|