@import '../global'; @import 'compass/css3/box-sizing'; @import 'blueprint/typography'; $experimental-support-for-mozilla: false; $experimental-support-for-opera: false; $experimental-support-for-microsoft: false; $experimental-support-for-khtml: false; html, body { font-family: $font-family; font-weight: normal; position: relative; -webkit-text-size-adjust: none; } body.x-desktop { overflow: hidden; } *, *:after, *:before { @include box-sizing(border-box); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; } .x-ios.x-tablet .x-landscape * { -webkit-text-stroke: 1px transparent; } body { font-size: 104%; } body.x-android.x-phone { font-size: 116%; } body.x-android.x-phone.x-silk { font-size: 130%; } body.x-ios.x-phone { font-size: 114%; } body.x-desktop { font-size: 114%; } input, textarea { -webkit-user-select: text; } .x-hidden-visibility { visibility: hidden !important; } .x-hidden-display { display: none !important; } .x-hidden-offsets { position: absolute !important; left: -10000em; top: -10000em; visibility: hidden; } .x-fullscreen { position: absolute !important; // removing this so floating items dont always stick to the top. i've seen no downside to this. ^robert // top: 0px; // left: 0px; } .x-desktop .x-body-stretcher { margin-bottom: 0px; } .x-mask { $min-width: 8.5em; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%; z-index: 10; @include display-box; @include box-align(center); @include box-pack(center); background: rgba(0,0,0,.3) center center no-repeat; &.x-mask-gray { background-color: rgba(0, 0, 0, 0.5); } &.x-mask-transparent { background-color: transparent; } .x-mask-inner { background: rgba(0, 0, 0, .25); color: #fff; text-align: center; padding: .4em; font-size: .95em; font-weight: bold; @if $include-border-radius { @include border-radius(.5em); } } .x-loading-spinner-outer { @include display-box; @include box-orient(vertical); @include box-align(center); @include box-pack(center); width: 100%; min-width: $min-width; height: $min-width; } &.x-indicator-hidden { .x-loading-spinner-outer { display: none; } } .x-mask-message { @include bevel-text; -webkit-box-flex: 0 !important; max-width: 13em; min-width: $min-width; } } .x-draggable { z-index: 1; } .x-dragging { opacity: 0.7; } .x-panel-list { background-color: saturate(lighten($base-color, 50%), 15%); } @if $include-html-style { .x-html { -webkit-user-select: auto; -webkit-touch-callout: inherit; @include blueprint-typography; line-height: 1.5; color: #333; font-size: .8em; padding: 1.2em; ul li { list-style-type: circle; } ol li { list-style-type: decimal; } } } .x-video { background-color: #000; } .x-sortable .x-dragging { opacity: 1; z-index: 5; } .x-layout-card-item { background: $page-bg-color; }