application/css/core.css.scss
@import "definitions.css.scss";
@import "animations.css.scss";
@import "font.css.scss";
@mixin down-arrow($image: "/@spontaneous/static/orange-down-arrow-395ae1929e8662b2ff0977daf12c35bb.png", $height: 7px) {
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0 - $height;
height: $height;
background: url($image) 50% 0 no-repeat;
}
.no-select {
@include no-select;
}
.preview-label {
@include interface;
color: #333333;
}
.preview-value {
font-size: $field-preview-font-size;
font-family: $content-font-family;
// line-height: $field-preview-font-size + 4;
line-height: 1.4em;
color: #666666;
font-weight: normal;
}
.container-padding {
padding-left: $container-padding;
padding-right: $container-padding;
}
// img.missing {
// width: 100%;
// height: 50px;
// // background: url("/@spontaneous/static/missing-911ce6dbd9f4602e0f3fbcd7e78846a2.png") 50% 50% no-repeat;
// border: none;
// display: none;
// }
.clear {
clear: both;
}
#content-outer {
background: url(/@spontaneous/static/texture-03f7627e8264b1d607113ab32c593a58.png) repeat;
color: #fff;
font-size: 16px;
position: fixed;
top: 31px;
right: 0;
bottom: 0px;
left: 0;
#content {
background-color: white;
overflow: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
#content-loading {
@include header;
text-align: center;
display: none;
color: #888888;
position: relative;
top: 150px;
}
#content-loading:before {
@include awesome-icon("\f1ce");
@include animation(spin 1s infinite linear);
display: inline-block;
position: relative;
left: -4px;
}
#content-loading:after {
content: "Loading…";
}
}
#data_pane,
#preview_pane,
#services_pane {
border: none;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}
#content-outer.loading {
#content {
#content-loading {
display: block;
}
}
}
.content--unpublished {
@include display-flex;
// @include vertical-gradient($highlight, darken($highlight, 1));
@include interface;
padding: $unit/4 $unit/2;
// background-color: transparentize($highlight, 0.2);
background-color: darken($editing, 5);
color: rgba(0, 0, 0, 0.6);
&:before {
@include awesome-icon("\f071");
margin-right: $unit/2;
color: rgba(0, 0, 0, 0.4) !important;
}
}
.content--unpublished-label {
@include flex-grow(1);
}
.content--unpublished-date {
color: rgba(0, 0, 0, 0.4);
padding-left: $unit;
}
.entry-contents > .content--unpublished {
@include rounded-top;
// padding-top: 1px;
// padding-bottom: 1px;
// font-size: 9px;
// line-height: 11px;
}
#page-content {
& > .content--unpublished {
@extend .container-padding;
background-color: $editing;
.content--unpublished-label {
color: #fff;
}
}
#page-info {
@extend .container-padding;
@include vertical-gradient(#3a3a3a, #222222);
min-height: 64px - 10;
height: auto;
padding-top: 10px;
padding-bottom: 0px;
position: relative;
h1, h3 {
position: relative;
}
h1 {
// position: absolute;
// top: 0;
font-family: $headline-font-family;
font-weight: 100;
color: white;
font-size: 24px;
line-height: 100%;
padding-bottom: 30px;
margin-right: 300px;
.page-is-hidden {
color: #888888;
}
}
&.page-info-alias-type {
h1 {
padding-bottom: 40px;
}
}
.page-alias-link {
@include no-select;
font-size: 14px;
line-height: 14px;
color: #888;
font-style: italic;
font-weight: 500;
top: -30px;
position: relative;
cursor: pointer;
display: inline-block;
&:before {
@include awesome-icon("\f0a9");
font-size: 11px;
margin-right: $unit;
}
&:hover {
color: $highlight;
.page-alias-link--path {
color: $highlight;
}
}
}
.page-alias-link--path {
@include interface;
margin-left: $unit;
color: #666;
text-transform: none;
font-size: 12px;
}
.page-buttons {
position:absolute;
right: $container-padding;
top: 10px;
button {
@include interface;
@include button(#222);
@include transition(opacity 0.2s);
color: #aaa !important;
min-width: 131px;
position: relative;
}
button.request-running {
&:before {
@include animation(spin 0.6s infinite linear);
@include awesome-icon("\f1ce");
position: absolute;
left: 6px;
}
}
button[disabled],
button[disabled]:hover {
opacity: 0.5;
}
}
.page-aliases {
@include interface;
min-width: 262px;
position:absolute;
right: $container-padding;
bottom: 10px;
font-size: 11px;
z-index: 200; // lift above path editing stuff
cursor: pointer;
}
.page-alias {
cursor: pointer;
text-transform: none;
padding: $unit;
}
.page-alias + .page-alias {
border-top: solid 1px #666;
}
.page-aliases--label {
@include rounded;
padding: $unit/2 $unit;
line-height: 11px;
border: solid 1px rgba(0, 0, 0, 0.4);
text-transform: lowercase;
&:before {
@include awesome-icon("\f0a8");
display: inline-block;
width: 2*$unit;
}
&:after {
@include awesome-icon("\f0d7");
position: absolute;
right: $unit;
top: ($unit/2)+1;
color: #aaa;
}
}
.page-aliases--label:hover,
.page-aliases--label:hover:after {
color: $highlight;
}
.page-aliases--list {
@include rounded-bottom;
border: solid 1px rgba(0, 0, 0, 0.4);
// border-width: 0 1px 1px 1px;
display: none;
position: absolute;
left: 0;
right: 0;
background: #222;
}
.page-aliases.visible {
.page-aliases--label {
border-bottom-color: transparent;
background-color: #222;
}
.page-aliases--list {
display: block;
}
}
.page-alias--title {
&:before {
@include awesome-icon("\f0a8");
display: inline-block;
width: 2*$unit;
}
}
.page-alias--path {
padding-left: 2*$unit;
color: #aaa;
}
.page-alias:hover {
.page-alias--title {
color: $highlight;
}
}
.page
.path, .path h3 {
@include interface;
cursor: pointer;
color: #c1c1c1;
font-size: 11px;
line-height: 12px;
text-transform: none;
}
.path .uid {
// @include rounded;
// background-color: rgba(0, 0, 0, 0.4);
// padding: $unit/2;
margin-left: $unit*4;
opacity: 0.5;
&.missing {
opacity: 0.5;
}
}
& > .path {
@include display-box;
position: absolute;
bottom: 10px;
left: $container-padding;
right: $container-padding;
}
.path.path-read-only {
position: relative;
&:after {
content: "\f071 Edit alias target to change path";
display: none;
position: relative;
left: 2*$unit;
color: #666;
font-style:italic;
}
}
.path.path-read-only:hover {
color: #c1c1c1;
cursor: default;
&:after {
display: inline-block;
}
}
.path .titlesync {
margin-left: $unit;
margin-right: 10 *$unit;
position: relative;
a {
position: absolute;
top: 2px;
position: absolute;
background: url(/@spontaneous/static/loop_alt1-white-7894b458528e92216196cae26b4c2c96.svg) no-repeat;
// background-size: 36% 45%;
background-size: contain;
width: 20px;
height: 12px;
opacity: 0.3;
&:hover {
opacity: 1.0;
}
}
}
.path .path-spacer {
@include box-flex(1);
}
.path .edit {
@include display-box;
@include box-orient(row);
@include box-align(center);
.input-error {
display: block;
position: relative;
top: 0;
vertical-align: top;
margin-left: 8px;
input[type="text"], span {
height: 16px;
padding: 4px;
}
input[type="text"] {
@include rounded;
font-weight: bold;
width: 400px;
border: none;
outline: none;
vertical-align: top;
}
span {
@include rounded-right;
padding-left: 8px;
padding-right: 8px;
background-color: $error;
position: absolute;
right: -1px;
top: 0;
color: white;
}
}
input[type="text"].error {
color: $error;
}
.input-error.uid-input {
input[type="text"] {
padding-left: 1.05em;
width: 200px;
}
}
.button {
display: block;
margin-left: 8px;
padding-left: 32px;
padding-right: 32px;
}
.button.cancel {
padding-left: 10px;
padding-right: 10px;
}
span, a.path {
display: block;
position: relative;
}
a.path {
color: #c1c1c1;
margin-right: 1px;
&:hover {
color: white;
}
}
span {
color: #bbbbbb;
margin-right: 1px;
}
.hash {
color: #666;
position: absolute;
left: 4px;
font-weight: bold;
padding-top: ($unit/2)+1;
}
}
.path h3:hover {
color: white;
}
.buttons {
position: absolute;
right: $container-padding;
top: 16px;
.button.publish {
width: 120px;
height: 32px;
padding-top: 8px;
background-color: #666666;
font-size: 12px;
position: relative;
}
.button.publish:hover {
background-color: $highlight;
}
.status {
@include interface;
vertical-align: top;
display: inline-block;
text-transform: none;
font-weight: normal;
margin: 0;
padding: 0;
color: #666666;
font-size: 10px;
line-height: 11px;
position: relative;
top: 5px;
margin-right: 8px;
strong {
display: block;
text-transform: uppercase;
}
}
}
}
#page-fields {
.fields-preview {
@extend .container-padding;
padding-top: 8px;
padding-bottom: 8px;
position: relative;
.overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-style: solid;
border-width: 2px;
border-color: transparent;
}
&.hover {
.overlay {
border-color: $action;
}
}
}
}
}
.fields-preview {
@extend .clearfix;
@include box-sizing;
@include display-box;
@include box-orient(row);
@include box-align(stretch);
@include box-pack(flex-start);
background-color: #fff;
// border: solid 3px transparent;
cursor: pointer;
}
// .fields-preview:hover {
// border-color: $action !important;
//}
.fields-preview .value p {
margin: 0 0 8px 0;
padding: 0;
}
.fields-preview .value p:last-child {
margin-bottom: 0;
}
.fields-preview .fields-preview-text {
@include box-sizing;
}
.fields-preview-text {
&.empty {
display: none;
}
@include box-sizing;
width: $field-text-preview-width;
// float: left;
margin-right: 16px;
li {
@include display-box;
@include box-orient(row);
@include box-align(stretch);
@include box-pack(flex-start);
@extend .clearfix;
border-bottom: solid 1px $entry-background-colour;
padding-top: 3px;
padding-bottom: 3px;
line-height: $field-preview-font-size + 2;
font-size: $field-preview-font-size;
font-family: $content-font-family;
width: 100%;
position: relative;
.name, .value {
// float: left;
display: block;
}
}
li:last-child {
border-bottom: none;
}
.name {
@extend .preview-label;
@include box-sizing;
// @include
width: 100px;
// right: 100px;
// margin-left: -100px;
padding-right: $unit;
padding-top: 2px;
}
.value {
@extend .preview-value;
@include box-flex;
max-width: $field-text-preview-width - 100px;
a {
color: $highlight;
}
h1, h2 {
font-size: 1.2em;
font-weight: bold;
margin-bottom: 1em;
}
h2 {
font-size: 1em;
}
ul, ol {
display: block;
padding-left: 1.4em;
margin-bottom: $unit;
li {
display: list-item;
list-style-position: outside;
border: none;
margin: 0;
padding: 0;
float: none;
}
}
ul {
list-style-type: disc !important;
}
ol {
list-style-type: decimal !important;
}
}
}
.fields-preview-image {
&.empty {
display: none;
}
@extend .clearfix;
@include box-flex;
// float: left;
width: $field-image-preview-width;
li {
float: left;
display: block;
margin-right: 4px;
margin-bottom: 4px;
position: relative;
width: 100%;
max-width: 200px;
min-width: 90px;
// size restrictions are mostly to stop the images getting too tall
// so for landscape images we can increase the size bounds a bit
&.landscape {
max-width: 250px;
min-width: 179px;
}
.name {
@extend .preview-label;
@include image-overlay;
@include box-sizing;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: auto;
height: 16px;
z-index: 4;
}
.value {
@include rounded;
background-color: #efefef;
// max-height: 90px;
min-height: 65px;
min-width: 90px;
cursor: pointer;
text-align: center;
position: relative;
.waiting {
position: absolute;
display: block;
left: 0;
right: 0;
text-align: center;
top: 30%;
height: $unit*2;
z-index: 3;
}
.image-drop {
@include rounded;
z-index: 100;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
.drop-upload-outer {
@include rounded(4px);
border: solid 1px white;
position: absolute;
margin: 4px;
height: 6px;
left: 0;
right: 0;
bottom: 50%;
padding: 0 1px;
.drop-upload-inner {
position: relative;
margin-right: 2px;
top: 1px;
@include rounded(3px);
background-color: white;
height: 4px;
}
}
}
.image-drop.drop-active {
border: solid 2px $action;
cursor: copy;
}
.image-drop.drop-invalid {
cursor: no-drop;
}
.image-drop.uploading {
background-color: rgba(0, 0, 0, 0.5);
}
img {
@include no-select;
@include rounded;
position: relative;
max-height: 100%;
width: 100%;
display: block;
}
.missing-image {
width: 90px;
max-width: 90px;
max-height: 90px;
display: none;
}
img:hover {
}
}
}
}
.fields-preview-text + .fields-preview-image {}
.file-field {
@extend .preview-value;
position: relative;
width: 100%;
@include display-box;
@include box-pack(center);
.file-drop {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: solid 1px transparent;
&.drop-active {
border-color: $action;
}
z-index:1;
.drop-upload-outer {
@include rounded(4px);
border: solid 1px #333;
position: absolute;
height: 7px;
left: 0;
right: 0;
top: 2px;
padding: 0 1px;
.drop-upload-inner {
@include rounded(3px);
position: relative;
margin-right: 2px;
top: 1px;
background-color: #333;
height: 5px;
}
}
}
.filename, .filesize {
@include box-flex(1);
@include interface;
text-transform: none;
position: relative;
top: -1px;
z-index:0;
}
.filename {
@include box-flex(2);
word-wrap: break-word;
// font-style: italic;
// max-width: 90%;
overflow: auto;
height: auto;
}
.filesize {
text-align: right;
min-width: 40px;
}
&.uploading {
.filename, .filesize {
display: none;
}
}
// highlight filename when hovering over filedrop area
// too confusing to have the filenames active though as it
// would interfere with the 'click to edit' thing
// .file-drop:hover + .filename {
// color: $action;
// }
}
.editing-panel .field-group .field.field-file {
.value {
// padding: 0;
}
.file-field {
// height: 36px;
cursor: pointer;
line-height: 1.3em;
.file-drop:hover {
// border-color: $action;
}
.filename, .filesize {
margin-top: 3px;
}
.filesize {
padding-right: $unit/2;
}
.filename {
padding-left: $unit/2;
}
.choose {
@include button(#333);
display: block;
padding-left: 6px;
padding-right: 6px;
}
.choose + .filename,
.choose + .filename + .filesize {
position:relative;
}
&:hover .choose {
@include button;
}
}
}
#page-slots.slots {
height: 100%;
.slot-tabs {
@include display-box;
@include box-orient(row);
min-height: 32px;
vertical-align: top;
@include vertical-gradient(#666666, #4d4d4d);
padding-left: $container-padding;
padding-right: $container-padding;
li {
@include box-sizing;
@include interface;
@include box-flex(1);
@include display-flex;
@include align-items(center);
font-size: 11px;
color: #dddddd;
height: 32px;
padding-left: 16px;
padding-right: 16px;
min-width: 130px;
cursor: pointer;
border-left: solid 1px transparent;
border-right: solid 1px #494949;
position: relative;
.down {
display: none;
}
}
li:hover, li.active {
@include vertical-gradient($highlight + #111111, $highlight);
background-color: $highlight;
color: white;
border-right-color: $highlight;
.down {
@include down-arrow("/@spontaneous/static/orange-down-arrow-395ae1929e8662b2ff0977daf12c35bb.png", 7px);
z-index: 100;
display: none;
}
}
li:first-child {
padding-left: 0;
// width: 160px + $container-padding;
&.active {
.down {
padding-left: $container-padding;
}
}
}
li:hover:first-child:before,
li.active:first-child:before {
@include vertical-gradient($highlight + #111111, $highlight);
background-color: $highlight;
content: "";
position: absolute;
width: $container-padding;
height: 32px;
// outline: solid 1px red;
left: -$container-padding - 1;
top: 0;
}
li:last-child {
border-right: none;
&:hover, &.active {
// border-right: none;
&:after {
@include vertical-gradient($highlight + #111111, $highlight);
background-color: $highlight;
content: "";
position: absolute;
width: $container-padding;
height: 32px;
// outline: solid 1px red;
right: -$container-padding;
top: 0;
}
}
}
li.active + li:hover {
border-left-color: $highlight - #151515;
}
}
.fields-preview.depth-box {
@extend .container-padding;
// @include vertical-gradient(#eeeeee, #dddddd);
background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
@include display-box;
border-top: solid 1px #e9e9e9;
position:relative;
padding-top: 12px;
padding-bottom: 5px;
.overlay {
position: absolute;
left: 0;
right: 0;
top: -1px;
bottom: 0;
border-style: solid;
border-width: 2px;
border-color: transparent;
}
&.hover {
.overlay {
border-color: $action;
}
}
&:hover {
// border-top-color: $action;
// border-bottom-color: $action;
}
.value {
color: #555555;
}
.fields-preview-text {
// @include box-flex;
// width: 60%;
}
.fields-preview-image {
@include box-flex;
// width: 40%;
}
}
.slot-addable {
@extend .container-padding;
@include box-sizing;
// @include vertical-gradient($slot-addable-colour, $entry-background-colour);
background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
border-top: solid 1px #e9e9e9;
text-align: center;
height: auto;
padding-top: 4px;
padding-bottom: 6px;
position: relative;
.addable-inner {
@include display-flex;
@include flex-direction(row);
@include flex-wrap(wrap);
@include justify-content(center);
@include align-content(space-between);
a {
$add-pad: $unit * 1.5;
@include button;
display: block;
padding-left: $add-pad + $unit;
padding-right: $add-pad;
margin: 2px 4px;
// margin-left: 4px;
position: relative;
min-width: 84px;
&:before {
@include awesome-icon("\f063");
position: absolute;
left: $unit/2;
// width: $unit*2;
}
}
}
// a:hover {
// background-color: $highlight;
// color: white;
// }
a + a {
}
.alias {
font-style: italic;
& span:before {
@include awesome-icon("\f0a9");
padding-right: $unit/4;
}
}
.down {
@include down-arrow("/@spontaneous/static/slot-down-arrow-59ad5f5ee5b52a7ebd00bca4b3104194.png", 18px);
display: none;
}
}
.slot-addable.floating {
// @include vertical-gradient($entry-background-colour, $slot-addable-colour);
// @include corners;
// margin-top: 10px;
background: none;
// margin-left: $container-padding;
// margin-right: $container-padding;
border-top: 0;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
background: url("/@spontaneous/static/plus-box-dcde74a1e496f68298c9b443caa1c5d5.png") 10px 7px no-repeat;
height: auto;
.down {
display: none;
}
}
.slot-instructions {
@include header;
position: absolute;
left: 0;
right: 0;
top: $container-padding;
display: none;
text-align: center;
color: #ccc;
}
.slot-addable.drop-active {
outline: solid 2px $action;
}
.slot-content.empty {
.slot-instructions {
display: block;
}
.slot-addable.bottom {
// display: none;
}
}
}
.box-comment {
font-size: 11px;
text-align: center;
color: #666;
padding: 10px 0;
background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
p {
margin: 0.5em;
}
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
}
#page-slots.slots .slot-entries {
padding-top: 32px;
position: relative;
.fields-preview {
@include rounded;
padding: 4px;
background: none;
background-color: white;
}
// added when a box is showing all its entries to give the last one some
// breathing room in the page
&.entries-loaded {
padding-bottom: 200px;
}
.entry-wrap {
@extend .clearfix;
transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
position: relative;
margin-left: $container-padding - 6;
margin-right: $container-padding;
.entry-contents {
@include rounded;
background-color: $entry-background-colour;
padding: 2px;
position: relative;
// padding-top: $title-bar-height + 4px;
}
.entry-spacer {
height: $entry-gap;
position: relative;
}
.entry-spacer.add-entry {
background: url("/@spontaneous/static/dot-texture-9eea29e4ac7ad9a772285252078ec127.png");
margin: 0 4px;
cursor: pointer;
}
.entry-inner {
@extend .clearfix;
@include rounded;
// @include box-sizing;
// background-color: gray;
// padding: $unit;
position: relative;
padding-bottom: $unit;
min-height: $container-padding;
}
&.alias {
.entry-inner {
min-height: $container-padding / 2;
}
}
.title-bar {
// @include vertical-gradient(gray + #111111, gray);
@include box-sizing;
@include rounded-right;
@include interface;
$title-bar-width: 20px;
// background-color: rgba($entry-background-colour, 0.6);
background-color: transparent;
width: $title-bar-width;
color: rgba(255, 255, 255, 0.4);
padding-top: 4px;
// padding-left: $unit/2 + 2px;
text-transform: none;
font-weight: normal;
cursor: ns-resize;
position: absolute;
left: auto;
right: -$title-bar-width;
// top: $unit/2;
top: -3px;
// height: $title-bar-height;
height: auto;
.actions {
@include display-box;
@include box-orient(column);
@include rounded-bottom;
position: relative;
top: $unit/4;
$action-button-size: $container-padding / 2;
a {
display: inline-block;
position: absolute;
width: $action-button-size;
height: $action-button-size;
position: relative;
cursor: pointer;
// border-width: 1px 1px 1px 1px;
// border-radius: $radius $radius 0 0;
// border-color: #111; //$entry-background-colour - #111;
border: solid 1px $entry-background-colour;
border-width: 1px 1px 1px 0;
color: #aaa;
font-size: 16px;
line-height: $action-button-size;
// outline: solid 1px red;
}
a:before {
@include awesome-icon("\f00d");
position: absolute;
text-align: center;
left: 0px;
right: 1px;
top: 0px;
}
a:hover {
color: $highlight;
}
a + a {
border-top-width: 0;
}
.delete {
font-size: 18px;
border-top-right-radius: $radius;
}
.visibility {
border-bottom-right-radius: $radius;
}
// .delete:hover {
// background-position: -61px -20px;
// }
.visibility:before {
content: "\f070";
// background-position: -32px 0;
}
.visibility:hover {
background-position: -32px -20px;
}
}
}
.dialogue {
@include rounded-bottom;
@extend .shadow;
position: absolute;
top: $title-bar-height + 4;
left: 4px;
right: 4px;
background-color: rgba(0, 0, 0, 0.9);
z-index: 30;
padding: $container-padding / 2;
color: white;
.buttons {
a {
@include button(#cccccc);
// background-color: ;
padding-left: 16px;
padding-right: 16px;
}
a + a {
margin-left: 8px;
}
a.default {
background-color: $action;
}
}
}
.white-bg, .grey-bg {
@include box-sizing;
// @include rounded;
position: absolute;
left: 0px;
right: 40%;
// top: $title-bar-height;
top: 0;
bottom: 0px;
margin: 0;
background-color: white;
z-index: 1;
}
.white-bg {
@include corners($corner-radius - 1, 0, 0, $corner-radius - 1);
border-width: 2px;
border-color: transparent;
border-style: solid;
}
.white-bg.active {
border-color: $action;
}
.grey-bg {
@include corners(0, $corner-radius, $corner-radius, 0);
left: auto;
width: 40%;
right: 0;
// background-color: #6b6b6b;
background-color: $entry-background-colour;
margin-left: 0;
}
.entry {
@include rounded;
@include box-sizing;
position: relative;
z-index: 2;
float: left;
.fields-preview {
@include rounded;
// margin-right: 3px;
padding: 4px;
background: none;
border-color: white;
}
.fields-preview-text {
width: 100%;
position: relative;
margin-bottom: 0;
@include box-sizing;
li {
@include box-sizing;
}
}
}
.slots {
@include box-sizing;
position: relative;
padding-left: 0;
float: left;
width: 40%;
z-index: 2;
left: 1px; // kludge (rounding errors?)
.slot-tabs {
@extend .clearfix;
@include rounded-top;
@include box-sizing;
@include display-box;
@include box-orient(row);
height: 24px;
margin-right: 1px;
width: 100%;
background: none;
padding-left: 0;
padding-right: 0;
li {
@include box-sizing;
@include interface;
@include box-flex(1);
@include display-flex;
@include align-items(center);
height: 34px;
padding-left: 8px;
padding-top: 0;
cursor: pointer;
border-right: solid 1px darken($slot-addable-colour, 15%);
background-color: darken($slot-addable-colour, 10%);
color: #666666;
line-height: 1em;
min-width: 100px;
}
li:first-child:before,
li:last-child:after {
// @include rounded-top-left;
// padding-left: 0;
display: none;
}
li:nth-child(4) {
// @include rounded-top-right;
float: right;
position: relative;
border-right: none;
}
li:hover {
background-color: $highlight;
border-right-color: $highlight;
color: #fff;
}
li.active:hover, li.active {
background: $slot-addable-colour none;
border-right: solid 1px darken($slot-addable-colour, 0%);
// color: white;
color: #666666;
}
li:hover + li:nth-child(4) {
border-left-color: $highlight;
}
li:last-child {
border-right: none;
}
li .down {
display: none;
}
}
.box-comment {
background: $slot-addable-colour;
padding: 8px;
border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}
.slot-addable {
@include interface;
@include box-sizing;
border: none;
background: none;
// background-color: #565656;
// background-color: (darken($entry-background-colour, 10%));
background-color: $slot-addable-colour;
padding: 2px 8px;
a {
@include button-color(#6b6b6b);
padding-left: 2*$unit;
padding-right: $unit;
}
.alias {
font-style: italic;
}
// a:hover {
// background-color: $highlight;
//}
.down {
display: none;
}
}
.slot-entries {
padding-top: $unit;
padding-bottom: $unit;
}
.entry-wrap.depth-2 {
// padding-top: $title-bar-height + ($unit/2);
margin-left: $unit;
margin-right: $container-padding / 2;
margin-bottom: 0;
.white-bg {
@include rounded($radius - 1);
width: auto;
right: 0;
}
.grey-bg {
display: none;
}
.entry-contents {
// padding: $unit/2 $unit/2;
padding: 0;
}
.entry-spacer {
height: $unit * 2;
}
$content-type-offset: 12px;
.content-type {
bottom: $content-type-offset;
font-size: 8px;
}
&:last-child {
.entry-spacer {
// display: none;
}
.content-type {
bottom: $content-type-offset;
}
}
.entry {
@include rounded;
width: 100%;
.fields-preview {
@include rounded;
padding: 4px;
background: none;
// background-color: white;
// border-color: white;
width: 100%;
display: block;
.fields-preview-text {
width: 100%;
margin-bottom: 0;
}
.fields-preview-image {
float: none;
width: 100%;
margin-left: 0;
margin-top: $unit/2;
padding-top: $unit/2;
}
.fields-preview-text.empty + .fields-preview-image {
margin-top: 0;
}
}
}
.entry + .entry {
margin-top: 8px;
}
}
}
&.no-fields.boxes {
.white-bg {
display: none;
}
.grey-bg {
left: 0;
width: auto;
}
.slots {
width: 100%;
}
}
&.no-fields.no-boxes {
.white-bg {
display: block;
}
.grey-bg {
display: none;
}
}
.alias-target {
@include rounded-top;
position: relative;
padding: $unit/2;
padding-right: 100px;
background-color: #444;
color: white;
font-size: $target-name-size;
line-height: 18px;
.alias-target-title,
.alias-title {
&:hover {
color: $highlight;
}
cursor: pointer;
}
.alias-target-title {
font-style: italic;
&:before {
@include awesome-icon("\f0a9");
padding-right: $unit;
// color: $slot-addable-colour;
color: rgba(255, 255, 255, 0.4);
}
&:hover:before {
color: $highlight;
}
}
.alias-title + .alias-target-title {
margin-left: 2*$unit;
}
&.no-fields {
@include rounded;
}
.content-type {
@include interface;
position: absolute;
right: $unit;
top: 5px;
font-style: normal;
line-height: 18px;
color: rgba(255, 255, 255, 0.4);
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
.icon-wrap, a {
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.icon-wrap {
margin-right: $unit;
}
}
&.no-boxes {
.white-bg {
// @include rounded(0 0 $radius $radius);
@include rounded($radius - 1);
right: 0;
}
.grey-bg {
display: none;
}
.entry {
// @include box-flex;
width: 100%;
.fields-preview {
@include display-box;
.fields-preview-text {
// @include box-flex;
// width: 60%;
width: $field-text-preview-width;
max-width: $field-text-preview-width;
padding-right: 0;
}
.fields-preview-image {
@include box-flex;
width: 40%;
}
}
}
}
}
.entry-wrap.hidden {
opacity: 0.4 !important;
.actions {
.visibility:before {
content: "\f06e";
}
}
}
.entry-wrap.editing.hidden {
opacity: 1 !important;
}
.entry-wrap.page {
.white-bg {
@include corners(0, 0, $corner-radius, $corner-radius);
right: 0;
}
.page-title {
@include rounded-top;
background-color: #444;
padding: $unit/2;
cursor: pointer;
padding-right: 100px;
a {
cursor: pointer;
font-family: $headline-font-family;
font-weight: 100;
color: #fff;
font-size: 16px;
line-height: 20px;
}
&:hover a, a:hover {
color: $highlight;
}
.content-type {
@include interface;
position: absolute;
right: $unit;
top: $unit+1;
color: rgba(255, 255, 255, 0.4);
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
.page-path {
@include interface;
background-color: #4f4f4f;
color: #bbb;
font-size: 11px;
line-height: 16px;
text-transform: none;
padding: 2px 4px;
cursor: pointer;
&:hover {
color: $highlight;
}
}
}
.entry-wrap.ui-sortable-helper > .entry-contents {
@extend .shadow;
}
.entry-wrap.boxes.depth-1 .entry {
width: 60%;
.fields-preview.depth-1 {
.fields-preview-text {
margin-right: -110px;
padding-right: 110px;
}
.fields-preview-image {
width: 94px;
float: right;
img {
max-width: 94px;
}
li {
margin-right: 0;
}
li:last-child {
margin-bottom: 0;
}
}
}
}
}
#page-content.hidden .slot-entries .entry-wrap.hidden {
opacity: 1.0 !important;
}
#dialogue-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
z-index: 1000;
}
#editing {
@extend .dialogue-wrapper;
@extend .clearfix;
z-index: 1001;
// background-color: #5b5b5b;
// background-color: #f0d5a9;
@extend .shadow;
.button {
background-color: $editing;
}
.field-group-bg {
@include rounded;
// background-color: #6b6b6b;
position: absolute;
margin: 8px;
top: 0px;
bottom: 0px;
}
.field-group-bg.text {
left: 0;
right: 343px;
}
.field-group-bg.image {
left: 629px;
right: 0;
}
input[type="submit"] {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
}
.field-group {
position: relative;
z-index: 1010;
float: left;
// margin: 8px 0 0 8px;
padding: 8px;
// margin-top: 8px;
// margin-bottom: 8px;
.field + .field {
margin-top: 8px;
}
.name {
@include rounded-top;
@include box-sizing;
@include interface;
background-color: #d1d1d1;
display: block;
height: 24px;
padding-left: 8px;
padding-top: 6px;
}
.value {
@include rounded-bottom;
border: solid 2px transparent;
padding: 6px;
background-color: white;
textarea, input[type="text"] {
font-family: $input-font-family;
font-size: 11px;
line-height: 14px;
outline: none;
}
input[type="file"] {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
}
textarea {
@include box-sizing;
border: none;
width: 100%;
padding-right: 64px;
}
input[type="text"] {
@include box-sizing;
width: 100%;
border: none;
display: block;
font-weight: bold;
}
}
.field.focus {
.name {
background-color: $editing;
color: white;
}
.value {
border-color: $editing;
}
}
}
// .field-group.text {
// // width: 621px;
// width: 100%;
// }
.field-group.image {
width: 327px;
.field .value {
position: relative;
min-height: 70px;
img {
max-width: 50%;
}
img.empty {
width: 50%;
height: 100px;
}
.actions {
margin: 8px;
margin-left: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 109px;
.button {
display: block;
}
.button.clear {
color: #5b5b5b;
background-color: #d1d1d1;
position: absolute;
bottom: 0;
width: 100%;
}
}
.landscape {
img {
max-width: 100%;
max-height: 50%;
}
.actions {
width: auto;
display: block;
margin: 8px 0 0 0;
position: relative;
.button {
display: inline-block;
width: 109px;
}
.button.clear {
position: static;
}
.button.change {
position: absolute;
right: 0;
}
}
}
}
}
}
#status-bar {
@extend .container-padding;
@include box-sizing;
@extend .controls-gradient;
@extend .shadow;
position: fixed;
height: 32px;
bottom: 0;
left: 0;
right: 0;
background-color: #cccccc;
z-index: 100000;
#progress-container {
position: relative;
top: 12px;
font-size: 10px;
color: #888888;
#progress-bars {
@include rounded;
position: relative;
width: 50%;
height: 8px;
border: solid 1px #151515;
.bar {
@include rounded;
height: 8px;
padding: 0;
background-color: black;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}
#progress-individual {
opacity: 0.3;
}
#progress-total {
background-color: #fff;
}
}
#progress-name {
position: absolute;
right: 2*$unit;
top: -1px;
text-align: right;
}
#progress-stats {
position: absolute;
left: 50%;
top: -1px;
margin-left: 10px;
}
}
}
#script-load-splash {
$progress-color: #dddddd;
background: url("/@spontaneous/static/splash-65b493a714df9b8b3ab170103401b53d.png") 0 0 no-repeat;
width: 318px;
height: 43px;
position: relative;
margin: 0 auto;
top: 150px;
#script-load-progress {
@include rounded(8px);
position: relative;
left: -31px;
top: 64px;
border: solid 1px $progress-color;
padding: 1px;
width: 380px;
height: 4px;
div {
@include rounded(6px);
background-color: $progress-color;
height: 4px;
}
}
#script-load-progress.synchronous {
border: none;
color: $progress-color;
top: 44px;
left: 47px;
}
}
#script-load-splash.loaded {
background-position: 0 -80px;
}
.icon-wrap {
overflow: hidden;
position: relative;
img {
position: relative;
}
}
.content-type.piece {
@include interface;
height: 0;
overflow: visible;
position: absolute;
top: auto;
bottom: ($unit * 2);
right: $unit;
left: auto;
color: rgba(0, 0, 0, 0.3);
z-index: 21;
&:hover {
color: rgba(0, 0, 0, 0.5);
}
}
@media all and (max-width: 1000px) {
.fields-preview-text li {
@include box-orient(column);
}
}
@import "top.css.scss";
@import "dialogue.css.scss";
@import "popover.css.scss";
@import "editing.css.scss";
@import "add_alias_dialogue.css.scss";
@import "developer.css.scss";
@import "meta.css.scss";
@import "jquery-ui-1.8.21.custom/ui-lightness.css.scss";