app/styles/article-edit.less
// Body reset
// ----------
body {
margin: 0;
font-family: @baseFontFamily;
font-size: @baseFontSize;
font-weight: @baseFontWeight;
color: @textColor;
background-color: @bodyBackground;
height:100%;
width:100%;
}
html, body.article-edit {
height:100%;
overflow: visible;
}
@-ms-viewport{ width: auto !important; } /* IE10+ fix for badly overlapping scrollbar */
// Links
// -----
a {
color: @linkColor;
text-decoration: none;
}
a:hover {
color: @linkColorHover;
text-decoration: underline;
}
.aloha-ui-toolbar {display:none !important;}
.aloha-sidebar-bar {display:none !important;}
/* override Aloha's default borders of the editables */
.aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
border: rgba(82, 168, 236, 0.8) solid 1px !important;
outline: none !important;
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 4px rgba(82, 168, 236, 0.4);
}
.aloha-editable .aloha-block {
border: 1px solid white;
margin: 10px 0;
}
.aloha-editable-active .aloha-block, .aloha-block-highlighted {
border: rgba(50, 50, 50, 0.1) solid 1px;
outline: none !important;
box-shadow: none;
}
.aloha-editable-active .aloha-block:hover, .aloha-block-highlighted:hover {
border: rgba(50, 50, 50, 0.2) solid 1px;
}
.aloha-block.aloha-block-active, .aloha-block.aloha-block-active:hover {
border: rgba(82, 168, 236, 0.8) solid 1px !important;
outline: none !important;
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 4px rgba(82, 168, 236, 0.4);
}
/* a modern fix for containers whose floated elements fall outside them */
.clearfix:before, .clearfix:after {
content: ' ';
display: table;
}
.clearfix:after {
clear: both;
}
.authoring-environment {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
/* there is also a not editable one, probably it will be removed */
.article-editable-title {
}
.save-close {
float: right;
margin: 4px 8px 0 10px;
.btn+.btn {
margin-left: 8px;
}
}
.preview-btn {
float: right;
margin: 4px 10px 0 10px;
}
.renditions-btn {
float: left;
margin-left: 8px;
}
.article-status {
float: right;
margin: 4px 0 0 10px;
line-height: 2em;
.btn-primary {
.btn-styles(#ccc);
}
&.new .btn-primary {
.btn-styles(@btn-default-bg);
text-shadow: 0 1px 0 #fff;
border-color: #cecece;
color:(@grayDark);
}
&.submitted .btn-primary {
.btn-styles(@btn-primary-bg);
}
&.published .btn-primary {
.btn-styles(#88af4a);
}
&.published_w_iss .btn-primary {
.btn-styles(#e5a141);
}
&.disabled {
background-color: #ccc;
}
li {
cursor: pointer;
padding: 2px 16px;
font-size: 13px;
line-height: 1.8em;
&:hover {
background-color: #eee;
};
}
.btn-primary {
.caret {
margin-left:4px;
}
&.dropdown-toggle {
padding: 4px 8px 5px 12px;
}
}
.dropdown-menu {
left:auto;
right:0;
}
}
.navbar {
.controls {
float: right;
margin-top: 4px;
}
}
/* following styles have been copied from Tageswoche frontend */
.article-field {
margin: 10px 0;
&.dateline {
color: rgb(51, 51, 51);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
&.lede {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 20px;
}
&.body {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 16px;
}
}
.main-article-title {
font-family: Georgia, serif;
font-weight: normal;
color: #007fb3;
font-size: 26px;
float: left;
}
.more-button-wrapper {
clear: both;
text-align: center;
.btn {
margin: 12px 0 16px 0;
}
}
.tablist {
width:@tablist-width;
position:fixed;
top:@subnav-height + @editor-toolbar;
bottom:0;
z-index:20;
background: @tablist-background;
overflow:hidden;
&.left-tablist {
left:0;
.box-shadow(inset -8px 0px 6px -8px rgba(0,0,0,.8));
&.dragndrop-over {
.box-shadow(inset -10px 0px 40px -10px rgba(50,50,50,.8));
}
}
&.right-tablist {
right:0;
.box-shadow(inset 8px 0px 6px -8px rgba(0,0,0,.8));
&.dragndrop-over {
.box-shadow(inset 10px 0px 40px -10px rgba(50,50,50,.8));
}
.navigation-tabs {
li {
a {
i[class^="big-icon-"] {
margin: 9px 0 0 8px;
}
}
}
}
}
.navigation-tabs {
margin:-1px 0 0;
border:0;
padding:0; /* to override webkit padding on `ul` */
list-style-type:none;
li {
position:relative;
float:none;
margin-bottom:-1px;
&.top-space {
margin-top:55px;
}
a {
display:block;
width: @tablist-width;
min-width: @tablist-width;
height: @tablist-width - 2;
padding: 0;
margin-bottom: 0;
margin-right: 0;
.border-radius(0px);
border: 1px solid #7c7c7c;
border-width: 1px 0 !important;
-khtml-user-drag: element;
-webkit-user-drag: element;
&:hover {
/*
background:@background-main;
border: 1px solid #7c7c7c;
border-width: 1px 0 !important;
*/
&.tab-li-hov {
background:@background-main;
border: 1px solid #7c7c7c;
border-width: 1px 0 !important;
}
}
&.drag-tab {
}
i[class^="big-icon-"] {
margin: 9px 0 0 5px;
}
}
&.active {
a {
background: @tabpane-background;
}
}
&:hover {
background: @tabpane-background;
cursor:pointer;
}
}
}
}
.nested .liner {
/*
this background image allows us to show vertical lines without
having to nest the comments within other elements
*/
background: url('../images/comments-nested-bg.png') repeat-y 0 0;
}
.nested comment, editorial-comment {
@indent-step: 20px;
&.level-0 {
margin-left: @indent-step * 0;
}
&.level-1 {
margin-left: @indent-step * 1;
}
&.level-2 {
margin-left: @indent-step * 2;
}
&.level-3 {
margin-left: @indent-step * 3;
}
}
comment, editorial-comment {
display: block;
background: white;
border-bottom: solid 5px @tabpane-background;
font-size: 12px;
/* following colors are copied from a mock from Darko */
.subject {color: #808080;}
.date {color: rgb(128, 128, 128);}
.author-name {
color: #333;
&:hover {
cursor: pointer;
}
}
.author-avatar {
float: left;
padding: 0px 10px;
img {
width: 26px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
}
/* end colors copied from the mock */
&.comment-pending {
.left-border-wrapper {
border-left-color: @new-comment-color;
}
.status-button {
background: @new-comment-color;
}
};
&.comment-approved {
.left-border-wrapper {
border-left-color: @approved-comment-color;
}
.status-button {
background: @approved-comment-color;
}
};
&.comment-editorial {
.left-border-wrapper {
border-left-color: @editorial-comment-color;
}
};
&.comment-hidden {
.left-border-wrapper {
border-left-color: @hidden-comment-color;
}
.status-button {
background: @hidden-comment-color;
}
};
&.comment-deleted {
.left-border-wrapper {
border-left-color: @deleted-comment-color;
}
.status-button {
background: @deleted-comment-color;
}
};
input[type="checkbox"] {
float: left;
width: 22px;
margin: 2px 0 0;
}
.status-dropdown {
.dropdown-menu {
min-width: 0;
li {
padding: 2px 12px;
font-size: 12px;
&:hover {
color: #fff;
background-color: #007fb3;
cursor: default;
}
}
}
}
.status-button {
text-transform: capitalize;
color: white;
border: none;
/* copied from bootstrap label in order to match the design */
padding: .4em .6em .4em .6em;
font-size: 10px;
font-weight: 500;
line-height: 1;
text-align: center;
vertical-align: baseline;
border-radius: .25em;
text-shadow:none;
margin: 0 2px;
/* end of rules copied from bootstrap label */
}
.right {
position: relative;
height: 100%;
margin-left: 25px;
.author {
float: left;
}
.date-and-name {
color: @comment-gray;
display: inline-block;
}
}
.left-border-wrapper {
border-left: solid 3px @hidden-comment-color;
height: 100%;
.bottom-border-wrapper {
border-bottom: solid 1px #cbcbcb;
padding: 10px 5px 8px 5px;
height: 100%;
.controls {
.glyphicon, .fa {
cursor: pointer;
margin: 0 2px;
}
.glyphicon-chevron-up {
float: left;
padding:4px;
margin:0;
}
text-align: right;
.fa-thumbs-up.recommended {
color: #6FA00D;
}
.disabled {
cursor: default;
color: #bbb;
}
}
.image-and-author-details {
.dropdown { margin-top: -2px; }
}
}
}
&.collapsed {
.right {
white-space: nowrap;
/*overflow: hidden;*/
text-overflow: ellipsis;
}
.date, .author-name {
display: inline;
}
.comment, .status-dropdown, .controls, .author {
display: none;
}
.image-and-author-details {
display: inline;
}
.subject {
display:inline;
&:hover { cursor: pointer; }
}
.image-and-author-details {
img { margin-top: -2px; }
}
}
&.expanded {
.subject {
font-weight: 500;
}
.comment {
font-size: small;
}
.date, .author-name {
display:inline;
}
}
}
.empty-message {
text-align: center;
padding: 10%;
}
.tabpane {
position:fixed;
top:@subnav-height + @editor-toolbar;
bottom:0;
background: @tabpane-background;
border-color:@tabpane-border;
border-style: solid;
z-index:10;
.box-sizing(border-box);
.transition( all @duration ease);
&.left-tabpane {
left:-@tabpane-width;
border-width: 0 3px 0 0;
.box-shadow(2px 0px 8px 0px rgba(50,50,50,.35));
&.open-tabpane {
left:@tablist-width;
.transition( all @duration ease);
}
}
&.right-tabpane {
right:-@tabpane-width;
border-width: 0 0 0 3px;
.box-shadow(-2px 0px 8px 0px rgba(40,50,50,.35));
&.open-tabpane {
right:@tablist-width;
}
}
.tabcontent {
display:block;
padding:@tabcontent-padding;
//padding-bottom: @tabcontent-padding + 30px;
//because of scratchpad
}
.pane {
width: @tabpane-width;
&.comments, &.editorial-comments {
width: @tabpane-width + @small-big-pane-delta;
}
}
> section {
padding: 10px @pane-padding @pane-padding;
}
section ul li {
display: block;
}
.btn + .btn {
margin: 0;
vertical-align: baseline;
}
}
.main-article-container-container {
height: 100%;
text-align: center;
}
.main-article-container {
text-align: start; /* to cancel effects of parent align */
width:auto;
background:@main-article-color;
border-color:@main-article-border;
border-style:solid;
border-width:0 1px;
position:relative;
z-index:1;
padding: @hostTop + @subnav-height + @editor-toolbar + 20 @main-article-padding-side 40px;
margin: 0 auto;
min-height:100%;
.box-sizing(border-box);
max-width: 960px;
&.desktop {
max-width: 960px;
}
&.tablet {
max-width: 678px;
}
&.mobile {
max-width: 320px;
.custom-fields {
margin: 40px -10px;
.header {
padding: 0 10px;
&:before {
width: 5px;
}
&:after {
left: 125px;
}
}
.wrapper {
padding: 0 10px;
}
}
}
.drag-drop-placeholder {
margin: 1em;
border: 3px dashed #d3d3d3;
height:1.5em;
&:first-child {
opacity: 0.2;
&.drag-over {
opacity: 1.0;
}
}
}
section {
header {
display: block;
visibility:hidden;
margin-bottom: 2px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height:18px;
.edit-label {
background: #c0c0c0;
.border-radius(2px);
font-size:10px;
color:#fff;
text-transform:uppercase;
padding:0 5px;
}
.edit-words-info {
color:#6b6b6b;
font-style:italic;
font-size:11px;
padding-left:5px;
}
}
&:hover {
header {
visibility: visible;
}
}
p {
padding:2px;
}
&.article-section {
p {
text-transform:uppercase;
font-size:13px;
font-weight:bold;
margin:0;
}
}
&.article-title {
header {
font-family:Arial, Verdana, sans-serif !important;
}
p {
font-family: Georgia, serif;
font-size:36px;
line-height: 40px;
}
}
&.article-short-text {
margin-bottom:10px !important;
p {
font-size:26px;
line-height: 28px;
margin:0;
}
}
.aloha-editable {
margin: -5px;
padding: 5px;
border: 1px solid #fff;
.border-radius(2px);
&:hover {
border-color:#e8e8e8;
}
&:focus {
outline:none;
border-color:#e8e8e8;
}
ul, ol {
list-style-position: inside;
padding-left: 0;
}
}
/* custom fields styling */
&.custom-fields {
margin: 60px -60px;
padding: 20px 0px;
.header {
position: relative;
display: block;
visibility: visible;
padding: 0 60px;
font-family: @baseFontFamily;
font-size: 11px;
text-transform: uppercase;
color: #4c4c4c;
&:before {
position: absolute;
content: " ";
position: absolute;
background: #e0e0e0;
height: 1px;
top: 9px;
left: 0;
width: 50px;
}
&:after {
position: absolute;
content: " ";
position: absolute;
background: #e0e0e0;
height: 1px;
top: 9px;
left: 175px;
right: 0;
}
span {
background: #fff;
display: inline-block;
vertical-align: middle;
&:hover {
cursor: pointer;
}
i {
margin-right: 4px;
}
}
}
.wrapper {
padding: 0 60px;
margin: 30px 0;
ul.fields {
list-style: none;
margin: 0;
padding: 0;
max-width: 420px;
li {
margin-bottom: 20px;
label {
font-weight: 500;
margin-bottom: 10px;
vertical-align: middle;
}
input {
+ label {
margin-left: 5px;
}
}
textarea {
.border-radius(2px);
}
}
}
}
}
}
figure img {
max-width: 100%;
float:left;
margin: 10px 20px 10px 0;
}
/* article view on mobile phones*/
&.mobile {
padding-left: 10px;
padding-right: 10px;
section {
header {
visibility:hidden;
display:none !important;
}
&.article-section {
width: 200px;
white-space:nowrap;
overflow:hidden;
height: 50px;
p {
border:1px solid #fff;
}
.aloha-editable-active {
p {
.box-shadow(0 0 0 0 #000);
border-color: rgba(82,168,236, 1.0);
}
}
}
&.article-date {
text-align: right;
margin-top: -23px;
margin-left: -5px;
margin-right: -5px;
color: #999;
border-bottom: 3px solid #000;
p {
margin:0 0 1px;
}
}
&.article-title {
.aloha-editable {
margin-top:10px;
font-family:Arial,sans-serif;
font-weight:bold;
font-size:28px;
line-height:32px;
}
}
&.article-short-text {
margin: 10px 0 !important;
.aloha-editable {
font-size:22px;
line-height:24px;
}
}
figure img {
width:100% !important;
max-width:auto !important;
}
}
}
&.shrink-left {
margin-left: @main-article-margin-side-shrinked;
margin-right: 110px;
&.tablet {
}
&.mobile {
margin-left: auto;
margin-right: auto;
}
}
&.shrink-right {
margin-right: @main-article-margin-side-shrinked;
margin-left: 110px;
&.tablet {
margin-left: auto;
}
&.mobile {
margin-left: auto;
margin-right: auto;
}
}
&.shrink-left-more {
margin-left: @main-article-margin-side-shrinked + @small-big-pane-delta;
margin-right: 110px;
}
&.shrink-right-more {
margin-right: @main-article-margin-side-shrinked + @small-big-pane-delta;
margin-left: 110px;
}
}
[draggable]:not([draggable=false]) {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.sf-searchbox {
position:relative;
input {
padding: 4px 30px;
height: 28px;
background: url("../images/search-icon.png") no-repeat 5px center;
margin:0;
width:100%;
.box-sizing(border-box);
background-color:#fff;
.box-shadow(inset 0px 5px 5px -5px rgba(230,230,230,1.0));
.border-radius(3px);
&:focus + a {
display:block !important;
}
}
a {
position:absolute;
top:8px;
right:7px;
.opacity(35);
line-height:13px;
display:none;
}
}
.tabconfig-dropdown {
width:250px;
.tabconfig {
margin-bottom:5px;
color: #383838;
&:hover {
background: none !important;
}
input[type="checkbox"] {
margin:3px 0 0;
vertical-align:top;
}
[class^="small-icon-"], [class*="small-icon-"] {
margin-left:10px;
margin-right:5px;
}
.switch {
display:inline-block;
width:50px;
height:16px;
background: #e8e8e8;
position:relative;
border:1px solid #a0a0a0;
float:right;
cursor:pointer;
.switch-inner {
position:absolute;
left:25px;
width:23px;
top:2px;
height:12px;
background:#0088cc;
/*.transition( all 0.3s ease);*/
}
&.switched-left {
.switch-inner {
left:2px !important;
}
}
input[type="checkbox"] {
display:none;
}
&.switch-disabled {
background: #f0f0f0;
border:1px solid #ccc;
.switch-inner {
background:#999999;
}
}
}
}
}
.hidden-tab-container {
display:none !important;
}
button:focus {
outline:0 !important;
}
.switch-article-view {
position:fixed;
margin-left: -106px;
&.mobile-view {
margin-left: -56px;
}
.switch-view-tabs {
background:#e5e5e5;
.box-shadow (inset -5px 0px 8px -5px #999);
list-style-type:none;
margin:0;
padding:0;
border:1px solid #d2d2d2;
border-right:0;
.border-top-left-radius(4px);
.border-bottom-left-radius(4px);
li {
width:45px;
height:33px;
background-image: url("../images/switch-view-tabs.png");
border-bottom:1px solid #d2d2d2;
&[target-view="desktop"] {
background-position:0px 0px;
}
&[target-view="tablet"] {
background-position:0px -33px;
}
&[target-view="mobile"] {
background-position:0px -66px;
}
&[target-view="print"] {
background-position:0px -99px;
}
&:first-child {
.border-top-left-radius(4px);
}
&:last-child {
border-bottom:0;
.border-bottom-left-radius(4px);
}
&:hover {
background-color:#fff;
cursor:pointer;
}
&.active-view {
background-color:#fff;
}
}
}
}
/* SCRATCHPAD */
.scratchpad {
.header {
.title {
margin:0 !important;
min-height:0 !important;
}
}
}
.media-box-scratchpad {
.media-box-button {
display:none;
}
&:hover {
.media-box-button {
display:block;
}
}
}
/* ALOHA */
.editor-toolbar-placeholder {
position:fixed;
z-index:100;
top:@subnav-height + @topspace;
left:0;
right:0;
height:@editor-toolbar;
.box-sizing(border-box);
background: rgba(245,245,245,0.90);
border-bottom: 1px solid #d5d5d5;
.toolbar {
top:auto !important;
position: relative !important;
margin: 0 auto;
//width: 566px;
text-align: center;
.btn-toolbar {
margin:7px auto 0;
}
.btn {
padding: 3px 10px;
&.disabled {
.opacity(100);
}
}
}
}
/* ZEN MODE */
.zen-trigger {
position: absolute;
top: 6px;
right: 10px;
.btn {
padding: 4px 8px;
}
}
.zen-buttons {
display:none;
}
&.zen-mode {
.tablist {
display:none;
}
.tabpane {
display:none;
}
.switch-article-view {
display:none;
}
.navbar-fixed-top {
display:none;
}
.zen-buttons {
position: fixed;
display: block;
right: 5px;
top: 5px;
z-index: 100;
.zen-close {
padding: 4px 9px 1px 9px;
font-size: 18px;
color: #808080;
&:hover {
color: #333;
}
&:active {
.box-shadow(inset 0px 1px 3px #ccc);
.border-radius(2px);
}
}
}
.subnav-fixed {
display:none;
}
.editor-toolbar {
top:0;
.navbar-fixed-top {
display: block;
}
.toolbar .btn {
padding: 4px 10px;
background: none !important;
border: 0;
.box-shadow(none);
&.active {
background:#fff !important;
}
}
}
.scratchpad {
display:none !important;
}
.main-article-container {
border:0;
padding-top:20px;
}
.switch-article-view {
top:3px;
left: 3px !important;
z-index:100;
.switch-view-tabs {
border:0;
.border-radius(0px);
li {
border:0;
.border-radius(0px);
float:left;
.opacity(10);
&:hover {
background-color:#fff;
.opacity(30);
}
&.active-view {
background-color:transparent;
.opacity(100);
}
}
}
}
}
/* tabs */
.tabmodule {
margin-bottom: 20px;
.tabmodule-header {
position: relative;
margin-bottom: 10px;
&:before {
content: " ";
position: absolute;
border-bottom: 1px solid #dcdcdc;
height: 1px;
top:9px;
left:20px;
right: 0px;
}
i {
margin-top: 2px;
display: none;
&:hover {
cursor: pointer;
}
&.toggle-module-open {
display: inline-block;
}
}
.tabmodule-title {
background: @tabpane-background;
padding: 0 5px;
font-size: 11px;
text-transform: uppercase;
color: #666;
position: relative;
}
}
.tabmodule-content {
display: none;
.checklist-selection li {
font-weight: normal;
}
}
&.tabmodule-open {
.toggle-module-open {
display: none !important;
}
.toggle-module-close {
display: inline-block;
}
.tabmodule-content {
display: block !important;
}
}
}
.confirmation-label {
display:block;
position:absolute;
right:0;
top:12px;
font-weight:normal;
.border-radius(3px);
color:#fff;
padding:2px 4px;
line-height:13px;
font-size:11px;
}
/*
-static tabpane header with search, and dropdowns
-currently used for
> ingest tab,
> article archive tab
*/
.generic-tabpane-header {
position:absolute;
left:@tabcontent-padding;
right:@tabcontent-padding+2;
top:@tabcontent-padding;
height:72px;
z-index:50;
border-bottom:1px solid #d6d6d6;
.tabpane-header-nav {
width:100%;
.box-sizing(border-box);
margin:15px 0;
}
.tabpane-header-label {
color:#7d7d7d;
font-size:13px;
}
}
.generic-tabpane-header-small {
position:absolute;
left:@tabcontent-padding;
right:@tabcontent-padding+2;
top:@tabcontent-padding;
height:48px;
z-index:50;
.tabpane-header-nav {
width:100%;
.box-sizing(border-box);
margin:15px 0;
}
.tabpane-header-label {
color:#7d7d7d;
font-size:13px;
}
}
/* feed list */
.generic-feed {
margin:0;
list-style-type:none;
position:absolute;
bottom:@tabcontent-padding + 30px;
//because of scratchpad
left:@tabcontent-padding;
right:0;
top:87px;
padding-right:@tabcontent-padding;
overflow:auto;
z-index:49;
> li {
border-top:1px solid #d6d6d6;
padding: 10px 0;
position:relative;
&:first-child {
border-top:0;
}
h5 a {
color:#007fb3;
font-size:14px;
line-height:20px;
font-weight:normal;
display: block;
margin:2px 0 4px;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
}
.h5:after {
display:none;
}
.feed-text {
color: #000;
font-size: 13px;
line-height: 20px;
max-height: 80px;
height:auto;
overflow: hidden;
text-overflow: ellipsis;
}
.feed-info {
color:#7d7d7d;
font-style:italic;
font-size:12px;
margin-top:4px;
i.feed-icon {
width:16px;
height:16px;
margin-right:5px;
display:inline-block;
vertical-align:middle;
}
.feed-source {
padding-right:6px;
border-right: 1px solid #cacaca;
margin-right:5px;
display:inline-block;
vertical-align:middle;
line-height:16px;
}
time {
display:inline-block;
vertical-align:middle;
line-height:16px;
color: #949494;
}
}
.dropdown {
margin-top: -20px;
height: 22px;
display: none;
}
&:hover {
.dropdown {
display: block;
}
}
&.confirmed {
h5 a {
border-color: #37b300;
padding-right: 65px;
}
h5:after {
.confirmation-label;
background-color: #37b300 !important;
content:"Confirmed";
}
}
&.unconfirmed {
h5 a {
border-color: #cf0000;
padding-right: 75px;
}
h5:after {
.confirmation-label;
background-color: #cf0000 !important;
content:"Unconfirmed";
}
}
}
}
/* ARTICLE ARCHIVE TAB*/
.article-archive-header {
.generic-tabpane-header();
.tabpane-header-label {
padding-top: 3px;
margin-right: 3px;
}
.sf-datepicker {
padding-top: 4px;
}
}
.article-archive {
.generic-feed();
> li {
&.pinned {
background: #fff;
border: 1px solid #c8c8c8;
.border-radius(3px);
padding: 10px;
.box-shadow(1px 1px 4px -1px #ccc);
margin-top: 10px;
.unpin-article {
position: absolute;
top: 10px;
right: 10px;
.opacity(30);
display: none;
&:hover {
.opacity(60);
cursor: pointer;
}
}
&:hover {
.unpin-article {
display: block;
}
}
.feed-info {
margin-top:0px;
}
.feed-text {
max-height: 40px;
}
}
&.disabled {
.opacity(40);
cursor: default !important;
}
}
.feed-info {
time {
font-size: 11px;
}
}
}
.archive-list-view {
display: block;
}
.archive-single-view {
display: none;
header {
.generic-tabpane-header-small();
}
article {
margin:0;
position:absolute;
bottom:@tabcontent-padding + 30px;
//because of scratchpad
left:@tabcontent-padding;
right:0;
top:@tabcontent-padding + 48px;
padding: 0 7px;
padding-right:@tabcontent-padding;
overflow:auto;
z-index:49;
.archive-article-info {
font-style: italic !important;
font-size: 12px;
time {
color:#949494;
}
.author {
font-family: Georgia,serif;
color: #333;
}
}
h2 {
font-family: Georgia,serif;
font-size: 22px;
line-height: 26px;
font-weight: normal;
color: #333;
margin-top: 10px;
}
h6 {
font-size:16px;
font-weight: normal;
line-height: 23px;
text-transform: none;
color: #333;
margin: 10px 0;
}
p {
font-size: 13px;
line-height: 20px;
}
}
}
/* INGEST TAB*/
.ingest-header {
.generic-tabpane-header();
}
.ingest-feed {
.generic-feed();
li h5 a {
border-left: 5px solid #ccc;
padding-left: 7px;
}
}
.source-bbc .feed-icon {
background: url("../images/ingest-icons/bbc.png") no-repeat 0px -1px;
}
.source-reuters .feed-icon {
background: url("../images/ingest-icons/reuters.png") no-repeat 0px 0px;
}
.source-afp .feed-icon {
background: url("../images/ingest-icons/afp.png") no-repeat 0px 0px;
}
.source-local .feed-icon {
width: 0px !important;
margin: 0px !important;
}
/* MEDIA TAB */
.media-tab {
.media-items {
list-style-type: none;
padding: 0;
margin:0;
clear: both;
position: relative;
margin-bottom: 0;
&:before {
font-size: 13px;
color: #333;
position: absolute;
top: -10px;
padding-right: 5px;
background: @tabpane-background;
}
&.media-images:before {
/*content: "Attached Images";*/
}
&.media-videos:before {
content: "Videos";
}
&.media-sounds:before {
content: "Sounds";
}
&.media-files:before {
content: "Files";
}
li[class*="media-"] {
position: relative;
background: #fff;
border: 1px solid #e0e0e0;
padding: 10px;
min-height: 50px;
margin-bottom: 8px;
.box-shadow(0 1px 0px #e0e0e0);
.border-radius(4px);
.dropdown {
display: none;
width: 20px;
position: absolute;
top:4px;
right: 7px;
.dropdown-toggle {
padding: 1px 5px;
}
}
&:hover {
.dropdown {
display: block;
}
border: 1px solid #ccc;
.box-shadow(0 1px 0px #ccc);
}
&.media-image, &.media-video {
figure {
border: 1px solid #9d9d9d;
padding: 1px;
float: left;
margin-right: 10px;
img {
max-width: 64px;
max-height: 64px;
}
}
.media-description {
padding-left: 75px;
line-height: 15px;
font-size: 12px;
&:before {
color: #808080;
text-transform: uppercase;
font-size: 11px;
display: inline-block;
}
&.approved:before {
content: "Approved";
}
&.unapproved:before {
content: "Unapproved";
}
.photographer-info {
display: block;
min-height: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
color: #808080;
}
.description {
display: block;
margin: 4px 0;
}
.size-info {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0 0 0 2px;
padding-left: 8px;
color: #808080;
&:before {
position: absolute;
display: block;
width: 1px;
height: 10px;
top: 4px;
left: 0;
content: '';
background: #aaa;
}
}
}
}
&.media-sound {
min-height: 27px;
background: #fff url(../images/media-player-icon.png) no-repeat 7px 7px;
.media-description {
padding-left: 45px;
padding-right: 20px;
line-height: 15px;
font-size: 12px;
}
}
&.media-file {
min-height: auto;
.media-description {
padding-left: 5px;
padding-right: 20px;
line-height: 15px;
font-size: 12px;
}
}
&:first-child {
margin-top: 0px;
}
&:last-child {
margin-bottom: 0px;
}
.drag-bar {
position: absolute;
left: -2px;
top: 0px;
bottom: 0px;
width: 9px;
border: 3px solid #ccc;
border-width: 2px 0;
background: #ccc url(../images/drag_bg.png) repeat-y 3px 0;
visibility:hidden;
}
&:hover .drag-bar {
visibility:visible;
}
}
}
}
/* SWITCHES TAB */
.switches-tab {
overflow: auto;
position: absolute;
left: 15px;
right: 2px;
margin-right: 2px;
padding-right: 10px;
top: 15px;
bottom: 45px;
padding-top: 4px;
}
/* INTER/INTRA DESK NOTIFICATION TAB */
.notification-tab {
.notification-list-box {
position: absolute;
top:20px;
bottom: 83px;
left:10px;
right:10px;
}
.notification-write-box {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
padding: 10px 10px 40px;
.box-shadow(0px -6px 5px -3px #dfdfdf);
border-top: 1px solid #fff;
background: @tabpane-background;
.notification-writer {
border: 2px solid #00afd0 !important;
.border-radius(5px) !important;
line-height: 18px;
padding: 5px 10px;
.box-sizing(border-box);
height: 30px;
resize: none;
color: #787878;
overflow: hidden;
&.important {
border-color:#d01d1d !important;
}
}
.button-area {
margin: 10px 0 5px 0;
display: none;
}
.notification-important {
width: 16px;
height: 16px;
padding: 2px;
.box-sizing(border-box);
position: absolute;
right: 15px;
top: 11px;
.opacity(70);
display: none;
&:hover {
.opacity(90);
cursor: pointer;
}
}
}
&.typing-active {
.notification-list-box {
bottom:163px;
}
.notification-write-box {
.notification-writer {
height: 70px;
overflow: auto;
}
.button-area {
display: block;
}
.notification-important {
display: block;
}
}
}
}
.notification-list {
margin: 0;
list-style-type: none;
padding: 0 10px 0 5px;
height: 100%;
overflow-y: auto;
li {
border-top: 1px solid #dedede;
padding: 10px 5px;
.box-sizing(border-box);
width: 100%;
min-height: 45px;
margin:0;
&:last-child {
border-bottom: 1px solid #dedede;
}
.notification-avatar {
float: left;
width: 24px;
height: 24px;
overflow: hidden;
background: url("../images/avatar-notification.png") no-repeat 0 0;
}
.notification-content {
padding-left: 35px;
.notification-text {
margin: -3px 0 0 0;
font-size: 12px;
overflow: hidden;
}
.notification-info {
font-size: 11px;
color: #949494;
}
}
&.important {
border: 1px solid #a60101 !important;
.box-shadow-both(inset 0px 0px 1px 1px #e4b2b2, 0px 2px 2px 0px #d8d8d8) !important;
}
&.personal, &.important {
border: 1px solid #c8c8c8;
.border-radius(3px);
background: #fff;
padding: 5px;
margin-bottom: 7px;
.box-shadow(0px 2px 2px 0 #d8d8d8);
+ li {
border-top-width: 0;
&.personal, &.important {
border-top-width: 1px;
}
}
}
}
}
/*RESPONSIVE*/
.ipad-hide {
display:block !important;
}
.ipad-show {
display:none !important;
}
.mobile-hide {
display:block !important;
}
@media only screen and (min-width: 1500px) {
.main-article-container {
&.shrink-left {
margin-right: auto;
margin-left: 438px;
&.tablet {
margin-left: auto;
}
&.mobile {
margin-left: auto;
margin-right: auto;
}
}
&.shrink-right {
margin-left: auto;
margin-right: 438px;
&.tablet {
margin-right: auto;
}
&.mobile {
margin-right: auto;
margin-left: auto;
}
}
&.shrink-left-more {
&.tablet {
}
&.mobile {
margin-left: auto;
margin-right: auto;
}
}
&.shrink-right-more {
&.tablet {
margin-right: auto;
}
&.mobile {
margin-right: auto;
margin-left: auto;
}
}
}
}
@media only screen and (max-width: 1230px) {
.switch-article-view {
margin-left: -66px;
}
.main-article-container {
padding-left: 20px;
padding-right: 20px;
&.desktop {
max-width: 80% !important;
}
&.shrink-left {
&.tablet {
margin-right: 110px;
}
&.mobile {
margin-right: auto;
margin-left: 438px;
}
}
&.shrink-right {
&.tablet {
margin-left: 110px;
}
&.mobile {
margin-left: auto;
margin-right: 438px;
}
}
section {
&.custom-fields {
margin: 60px -20px;
.header {
padding: 0 20px;
&:before {
width:12px;
}
&:after {
left: 135px;
}
}
.wrapper {
padding: 0 20px;
ul.fields {
max-width: 100%;
}
}
}
}
}
}
@media (max-width: 1024px) {
.main-article-container {
&.desktop {
max-width: 70% !important;
}
&.tablet {
max-width: 65% !important;
}
}
.ipad-show {
display:block !important;
}
.ipad-hide {
display:none !important;
}
.navbar .nav.main > li > a {
font-size:11px !important;
}
.navbar .nav.pull-right li .user-profile {
padding-left: 31px;
background: url(../images/avatar_small.png) no-repeat 0 0;
font-weight: bold;
line-height: 23px;
display: inline-block;
}
.main-article-container {
padding-left:20px;
padding-right:20px;
}
.main-article-title {
overflow: hidden;
height: 36px;
text-overflow: ellipsis;
white-space: nowrap;
max-width:280px;
}
}
@media (max-width: 768px) {
.main-article-title {
max-width:200px;
}
}
@media (max-width: 670px) {
.main-article-title {
display:none !important;
}
}
@media (max-width: 480px) {
.switch-article-view {
display:none;
}
.mobile-hide {
display:none !important;
}
.main-article-title {
display:none;
}
.tablist {
top:@subnav-mobile-height+@topspace+@editor-toolbar;
}
.tabpane {
top:@subnav-mobile-height+@topspace+@editor-toolbar;
}
.main-article-container {
padding-top: 60px;
}
.main-background-container .subnav {
padding:5px !important;
height:@subnav-mobile-height !important;
}
.editor-toolbar {
top: @subnav-mobile-height+@topspace;
}
}
.temptabcont p {
font-size: 14px;
margin-right: 20px;
line-height: 22px;
margin-top: 10px;
border-top: 1px solid #ddd;
padding-top: 10px;
}
@hostTop: 0px; /* The system hosting the editor will need some room at the top for its own toolbar */
@bigButtonSidePadding: 20px; /* Side padding for some buttons in the toolbars */
section {
height: 100%; /* for scrolling in child panes */
}
/* more selectors to increase specificity */
.navbar-fixed-top.navbar.navbar-default {
top: @hostTop;
border-bottom: 1px solid #d5d5d5;
background: rgba(248,248,248,.96);
}
.popover {
position: absolute;
top: -65px;
left: 0;
max-width: none;
white-space: nowrap;
overflow: hidden;
font-size: 16px;
.border-radius(3px);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
input.pixels {
width: 55px;
}
.small .glyphicon-stop {
font-size: 6px;
vertical-align: top;
margin-top: 4px;
}
.medium .glyphicon-stop {
font-size: 10px;
}
&.no-arrow {
.arrow {
display: none;
}
}
.popover-content {
padding: 6px 8px;
color: @grayDark;
font-weight: normal;
font-style: normal;
.popover-markup {
line-height: 0;
.btn {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
&.btn-xs {
padding: 6px 10px 8px 10px;
line-height: 1.2;
margin-right: 6px;
}
}
.pixels {
font-family: 'Roboto', Helvetica, Arial, sans-serif;
line-height: 0;
vertical-align: middle;
display: inline-block;
margin: 0 12px 0 8px;
font-size: 12px;
input {
line-height: 1.6;
vertical-align: middle;
padding: 0;
margin: 0;
border: 1px solid #ccc;
.border-radius(2px);
padding: 5px 6px;
&:focus {
outline: rgba(82, 168, 236, 0.8) solid 1px !important;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.4);
}
}
}
.btn-group > .btn {
float:none;
&.btn-xs {
margin-right: 0;
}
}
}
}
}
.sf-upper-toolbar {
display: inline-block; /* to trigger block context */
width: 100%; /* goes with `inline-block` */
padding: 5px 10px;
box-shadow: inset 0 1px 0 #fff,0 1px 5px rgba(0,0,0,0.1);
border-bottom: 1px solid #d5d5d5;
}
.sf-lower-toolbar {
padding: 6px 5px 8px 5px;
position: relative;
}
/* centered nav bar http://stackoverflow.com/a/18538412/393758 */
.sf-navbar-center {
margin: 0 auto;
display: table;
}
.sf-big-padding-button {
margin: 0 @bigButtonSidePadding;
}
.panel-title {
line-height: 27px;
font-size: 16px;
font-weight: 500;
text-rendering: optimizelegibility;
padding: 3px 0 4px 0;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.draggable-panel-heading {
font-size: 11px;
text-transform: uppercase;
padding: 7px 6px;
}
.btn-sf-invisible {
background: none;
border: none;
padding: 0;
}
.fixed-image {
background: #f8f8f8;
border: 3px dashed #e0e0e0;
padding: 2%;
position: relative;
.fixed-image-dropped {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.fixed-image-title {
width: 100%;
background: url("../images/dragfiles.png") no-repeat 50% 0;
margin-top: 5%;
padding-top: 100px;
text-align: center;
color: #a0a0a0;
font-size: 24px;
}
}
.attach-image {
font-size: 12px;
.sources {
a {
cursor: pointer;
}
}
.basket-head {
color: #999;
#gradient > .vertical(@start-color: #1a1a1a; @end-color: #333);
@shadow: 0 -1px 0 rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.4);
.box-shadow(@shadow);
padding: 10px 15px;
border-bottom: 1px solid #373737;
.description {
color: #f5f5f5;
margin-right: 16px;
margin-left: 2px;
padding-right: 22px;
border-right: 1px solid #4d4d4d;
}
.badge {
margin-right: 6px;
}
}
.basket {
height: @thumbnail-max-height + 90;
overflow-x: hidden;
overflow-y: auto;
&::-webkit-scrollbar { width: 8px; height: 8px; margin: -1px 0; background:#5c5c5c; }
&::-webkit-scrollbar-thumb { background: #808080; }
&::-webkit-scrollbar-thumb:hover { background: #999; }
padding:6px;
.thumbnail-wrapper {
background-color: white;
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 2px;
margin: 6px;
@shadow: 0 2px 0 #000;
.box-shadow(@shadow);
&:hover {
background:#f6f6f6;
cursor: pointer;
border-color: #333;
@shadow: 0 2px 0 #333, 0 0 6px rgba(0,0,0,.15);
.box-shadow(@shadow);
.toggler {
display: block;
border-right: 2px solid #f6f6f6;
border-bottom: 2px solid #f6f6f6;
padding: 3px 6px 3px 5px;
}
}
}
}
.thumbnail-wrapper {
position: relative;
display: inline-block;
float: left;
margin: 4px 8px 10px 4px;
padding: 6px;
height: 110px;
background-color: white;
border-width: 1px;
border-style: solid;
border-color: #d4d4d4;
border-radius: 2px;
@shadow: 0 2px 0 #d4d4d4;
.box-shadow(@shadow);
.toggler {
display: none;
position: absolute;
color: white;
background: #333;
padding: 3px 5px 3px 6px;
border-right: 2px solid white;
border-bottom: 2px solid white;
}
.thumbnail {
display: inline-block;
height: @thumbnail-max-height;
margin: 0;
padding: 0;
}
.img-metadata {
width: @thumbnail-max-height * 2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
color: @grayDark;
font-size: 11px;
.size-info {
color:#999;
}
}
}
.archive {
.search {
margin-left: -16px;
margin-top: -15px;
padding: 10px 20px 11px 20px;
border-bottom: 1px solid #e8e8e8;
background: #f1f1f1;
.box-sizing(border-box);
.input {
position: relative;
display: inline-block;
input[type="text"] {
width: 300px;
padding: 5px 7px 5px 26px;
border:1px solid #ccc;
margin: 1px 6px 0 0;
@shadow: inset 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
.border-radius(2px);
background: #fff url("../images/search-icon.png") no-repeat 6px center;
vertical-align: middle;
&:hover {
border: 1px solid #bbb;
}
&:focus {
border: #52a8ec solid 1px !important;
outline: none !important;
}
}
.remove {
position: absolute;
top: 4px;
right: 9px;
cursor: pointer;
padding: 4px 6px;
span {
color: gainsboro;
margin: 0;
}
&:hover {
span {
color: gray;
}
}
}
}
.btn.btn-sm {
margin-right: 22px;
}
span {
margin-right: 6px;
color:#777;
}
.label {
font-size: 11px;
font-weight: normal;
color: white;
margin-left:3px;
}
}
.search-results {
position: absolute;
top: 53px;
bottom: 0;
padding: 10px 0;
overflow-y: auto;
&::-webkit-scrollbar { width: 8px; height: 8px; margin: -1px 0; background: #e2e2e2; }
&::-webkit-scrollbar-thumb { background: #949494; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; }
}
.thumbnail-wrapper:hover {
cursor: pointer;
border-color: #707070;
@shadow: 0 2px 0 #707070, 0 0 6px rgba(0,0,0,.15);
.box-shadow(@shadow);
.toggler {
display: block;
}
}
.thumbnail-wrapper.attached, .thumbnail-wrapper.collected {
opacity: 0.25;
&:hover {
border-color: #d0d0d0;
@shadow: 0 2px 0 #d0d0d0;
.box-shadow(@shadow);
cursor: default;
.toggler {
display: none;
}
}
}
}
.web {
input {
width: 100%;
}
}
.computer {
@placeholder-margin: 12px;
@placeholder-border-color: #d4d4d4;
.image-uploading {
position:absolute;
top:0px;
bottom:40px;
left:12px;
right:0px;
margin-bottom: 26px;
overflow-y: auto;
&::-webkit-scrollbar { width: 8px; height: 8px; margin: -1px 0; background: #e2e2e2; }
&::-webkit-scrollbar-thumb { background: #949494; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; }
.drag-area {
background: #fff;
border: 3px dashed #e0e0e0;
padding: 12px;
position:absolute;
top:12px;
bottom:14px;
left:0;
right:12px;
}
.drag-area.small {
position:relative;
height: 314px;
width: 300px;
display: inline-block;
float: left;
margin-bottom: @placeholder-margin;
margin-right: @placeholder-margin;
.box-sizing(border-box);
.drag-area-title {
font-size: 20px;
background: url("../images/dragfiles-small.png") no-repeat 50% 0;
margin-top: 30px;
padding-top: 80px;
}
.drag-area-button {
margin-top: 40px;
}
}
.drag-area-title {
width: 100%;
background: url("../images/dragfiles.png") no-repeat 50% 0;
margin-top: 5%;
padding-top: 100px;
text-align: center;
color: #a0a0a0;
font-size: 24px;
}
.drag-area-button {
text-align: center;
margin-top: 30px;
}
.placeholder {
position: relative;
display: inline-block;
float: left;
width: 302px;
height: 312px;
margin-top: @placeholder-margin;
margin-right: @placeholder-margin;
margin-bottom: @placeholder-margin / 4;
border: 1px solid @placeholder-border-color;
border-bottom: 2px solid @placeholder-border-color;
border-radius: 3px;
padding: 30px 10px 7px 10px;
background-color: #fafafa;
@shadow: 0 2px 0 #d4d4d4;
.box-shadow(@shadow);
.remove {
position: absolute;
top: 1px;
right: 5px;
}
.progress {
height: 6px;
width:280px;
margin-bottom: 10px;
background: #f0f0f0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
.border-radius(0);
}
.img-preview {
width: 280px;
height: 130px;
margin-bottom: 11px;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #ebebeb;
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
img {
max-width: 280px;
max-height: 130px;
}
}
.img-metadata {
a.set-for-all {
cursor: pointer;
text-transform: lowercase;
float:right;
&:hover{
color:@linkColor;
}
}
input, textarea {
width: 280px;
border: 1px solid #ccc;
background-color: white;
.border-radius(2px);
padding: 4px 5px;
}
textarea {
height: 45px;
}
}
}
} /* end .image-uploading */
.buttons-bar {
position: absolute;
bottom: 0;
right: 0px;
left: 0px;
margin: 0;
padding: 10px;
@shadow: 0 -3px 5px rgba(0,0,0,.15);
.box-shadow(@shadow);
button {
float: right;
margin-left: 10px;
}
/* clearfix for floated buttons */
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
}
} /* end .computer */
}
.image-panel {
.attach-image-section {
overflow: hidden;
padding: 0 0 10px 0;
& > button {
float: left;
}
}
.images-wrapper {
position: absolute;
top:114px;
bottom: 18px;
left:0;
right:0px;
.media-tab {
position: absolute;
top: 30px;
right: 12px;
bottom: 0;
left: 0;
overflow: auto;
padding: 0px 0px 0px 12px;
&::-webkit-scrollbar { width: 14px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.draggable {
cursor: all-scroll;
}
li {
overflow: hidden; /* for the green attached checkmark */
}
.attach-media {
background: none;
border: none;
}
.detach {
position: absolute;
right: 3px;
top: 2px;
color: gainsboro;
cursor: pointer;
&:hover {
color: gray;
}
}
.attached {
border-radius: 35px;
display: inline;
position: absolute;
right: -9px;
top: -12px;
color: white;
background: #489729;
padding: 14px 8px;
line-height: 0;
width: 35px;
height: 35px;
}
}
.attached-title {
position:relative;
clear:both;
padding: 0 12px;
background-color: @tabpane-background;
&:before {
content: " ";
position: absolute;
top: 10px;
left: 120px;
right: 12px;
background: #dcdcdc;
height: 1px;
}
}
}
/* custom styles for slideshows tab */
&.slideshow {
.images-wrapper {
.media-tab {
.media-items {
li {
&:hover {
cursor: pointer;
}
&.media-image {
figure {
margin-right: 16px;
border: none;
padding: 3px;
background: url(../images/slideshow-bg.png) no-repeat;
width: 76px;
height: 54px;
img {
max-height: 42px;
}
}
}
}
}
}
.attached-title {
&:before {
left: 140px;
}
}
.media-description {
&.approved {
&:before {
content: '' !important;
}
}
.number {
color: #808080;
font-size: 11px;
text-transform: uppercase;
float: left;
.badge {
background: #aaa;
font-size: 11px;
padding: 2px 7px;
font-weight: normal;
}
}
}
}
}
}
.authors-panel {
.add-author-box {
margin-bottom: 30px;
background-color: #ebebeb;
.heading {
button {
line-height: 1em;
box-shadow: none;
padding: 8px 8px 10px 8px;
margin: 0;
width: 100%;
text-align: left;
&:hover {
background:#e6e6e6;
}
}
span.add-author {
margin-left: 5px;
}
}
form {
padding: 10px;
}
.authorSearch {
width: 100%;
margin-bottom: 10px;
}
.controls {
margin-top: 10px;
button {
margin-left: 5px;
}
}
.author-role {
width:100%;
padding:3px 4px;
border: 1px solid #ccc;
.border-radius(2px);
background-color: white;
&:focus {
border: 1px solid #5897fb;
outline:none;
-webkit-box-shadow: none;
box-shadow: none;
}
}
}
.authors-wrapper {
position: absolute;
&.low {
top: 235px;
}
&.high {
top: 110px;
}
bottom: 18px;
left: 0;
right: 0px;
.attached-title {
position:relative;
clear:both;
padding: 0 12px;
background-color: @tabpane-background;
&:before {
content: " ";
position: absolute;
top: 10px;
left: 120px;
right: 12px;
background: #dcdcdc;
height: 1px;
}
}
.authors-list {
position: absolute;
top: 30px;
right: 12px;
bottom: 0;
left: 12px;
overflow: auto;
padding: 0;
&::-webkit-scrollbar { width: 14px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494;
border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.new-item-slot {
height: 86px;
border: 1px dashed #a6d9ee;
background-color: #edf4f7;
margin-bottom: 8px;
.border-radius(4px);
}
}
.author {
position: relative;
background: #fff;
border: 1px solid #e0e0e0;
padding: 12px 10px;
min-height: 50px;
margin-bottom: 8px;
overflow:hidden;
.box-shadow(0 1px 0px #e0e0e0);
.border-radius(4px);
&.dragged {
opacity: 0.5;
background-color: #eee;
cursor:all-scroll;
}
.drag-bar {
position: absolute;
left: -2px;
top: 0px;
bottom: 0px;
width: 9px;
border: 3px solid #ccc;
border-width: 2px 0;
background: #ccc url(../images/drag_bg.png) repeat-y 3px 1px;
visibility:hidden;
}
&:hover {
border: 1px solid #ccc;
.box-shadow(0 1px 0px #ccc);
cursor:move;
.drag-bar {
visibility:visible;
}
}
.remove {
position: absolute;
right: 3px;
top: 2px;
color: gainsboro;
cursor: pointer;
&:hover {
color: gray;
}
}
&.actionsDisabled {
opacity: 0.5;
.remove {
cursor: default;
&:hover {
color: gainsboro;
};
}
}
.authors-image {
float:left;
text-align: center;
margin: 0 14px 0 2px;
background: #eee;
.border-radius(50%);
max-height: 60px;
height: 60px;
width: 60px;
/*height: auto;*/
overflow: hidden;
img {
display: block;
max-width: 100%;
/* just in case, to force correct aspect ratio */
height: auto !important;
width: auto\9; /* ie8+9 */
}
}
.authors-name {
float:left;
width: 190px;
border-bottom: 1px solid #eee;
margin-bottom: 4px;
padding-bottom: 2px;
}
select {
border: 1px solid #d4d4d4;
.border-radius(2px);
width:190px;
padding: 3px 4px;
margin-top: 5px;
background-color: white;
}
}
}
}
.related-articles-panel {
.add-element {
overflow: auto;
background-color: @add-element-gray;
margin: 10px 0;
.heading {
padding: 0px;
button {
line-height: 1em;
box-shadow: none;
padding: 8px 8px 10px 8px;
margin: 0;
width: 100%;
text-align: left;
.add-text {
font-size: 12px;
padding: 0 5px;
}
&:hover {
background:#e6e6e6;
}
}
}
.filters {
padding: 10px 10px 16px;
select {
width:100%;
padding:3px 4px;
border: 1px solid #ccc;
.border-radius(2px);
background-color: white;
&:focus {
border: 1px solid #5897fb;
outline:none;
-webkit-box-shadow: none;
box-shadow: none;
}
&+ select {
margin-top: 10px;
}
&:last-child {
margin-bottom: 10px;
}
}
.input-group {
margin-top: 0;
.editor-input {
border: 1px solid #ccc;
resize: none;
width: 96%;
margin-right: 6px;
padding: 5px 25px 5px 26px;
font-size: 90%;
display: inline-block;
background: #fff url(../images/search-icon.png) no-repeat 5px 5px;
.border-radius(1px);
&:hover {
border: 1px solid #bbb;
}
&:focus {
border: #52a8ec solid 1px !important;
outline: none !important;
}
}
.remove {
position: absolute;
right: 67px;
top: 5px;
color: gainsboro;
cursor: pointer;
&:hover {
color: gray;
}
}
}
}
}
.wrapper {
position: absolute;
&.low {
top: 280px;
}
&.high {
top: 180px;
}
bottom: 18px;
left: 0;
right: 0px;
.list {
position: absolute;
top: 0px;
right: 12px;
bottom: 0;
left: 12px;
overflow: auto;
padding: 0;
&::-webkit-scrollbar { width: 14px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494;
border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.group {
margin: 0 0 20px 0;
.related-articles-list {
&::-webkit-scrollbar { width: 14px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494;
border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.new-item-slot {
height: 50px;
border: 1px dashed #a6d9ee;
background-color: #edf4f7;
margin-top: 8px;
margin-bottom: 8px;
.border-radius(4px);
}
}
.title {
position:relative;
clear:both;
padding: 0;
background-color: @tabpane-background;
margin: 0;
&:before {
content: " ";
position: absolute;
top: 10px;
left: 112px;
right: 0px;
background: #dcdcdc;
height: 1px;
}
&.pinned {
cursor: pointer;
&:before {
left:114px;
}
}
span {
&.glyphicon {
margin-right: 4px;
}
}
}
/* single item */
.related-article {
padding: 12px 0 12px 0;
border-bottom: 1px solid #d6d6d6;
position: relative;
overflow: hidden;
.article-metadata {
.date {
font-size: 11px;
font-style: italic;
color: #949494;
}
.status {
font-size: 10px;
text-transform: uppercase;
font-weight: 500;
margin-left: 6px;
padding-left: 4px;
border-style: solid;
border-width: 0 0 0 3px;
border-color: transparent;
&.published {
border-color: #85b63b;
}
&.new {
border-color: #61aece;
}
&.submitted {
border-color: #b5b5b5;
}
}
}
.article-title {
line-height: 120%;
margin-top: 4px;
a {
font-size: 13px;
color: #007fb3;
cursor: pointer;
}
}
.btn.pin {
position: absolute;
top: 6px;
right: 0;
display: none;
}
&:hover {
.btn.pin {
display: block;
}
}
/* pinned */
&.pinned {
border: 1px solid #e0e0e0;
padding: 3px 12px 9px 14px;
background: #fff;
.box-shadow(0 1px 0px #e0e0e0);
.border-radius(4px);
margin-top: 10px;
.drag-bar {
position: absolute;
left: -2px;
top: 0px;
bottom: 0px;
width: 9px;
border: 3px solid #ccc;
border-width: 2px 0;
background: #ccc url(../images/drag_bg.png) repeat-y 3px 1px;
visibility:hidden;
}
&:hover {
border: 1px solid #ccc;
.box-shadow(0 1px 0px #ccc);
cursor:move;
.drag-bar {
visibility:visible;
}
}
.remove {
position: absolute;
right: 3px;
top: 2px;
color: gainsboro;
cursor: pointer;
&:hover {
color: gray;
}
}
}
}
}
}
}
.article-preview {
.header {
position: absolute;
top: 60px;
left: 12px;
right: 12px;
.btn-group {
+ .btn-group {
float: right;
}
}
}
.content {
position: absolute;
top: 100px;
right: 12px;
bottom: 18px;
left: 12px;
overflow: auto;
padding: 0;
&::-webkit-scrollbar { width: 14px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494;
border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box;
}
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.preview-dateline {
color: #888;
font-size: 11px;
font-style: italic;
margin-bottom: 10px;
}
.preview-title {
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: 120%;
margin-bottom: 10px;
word-wrap: break-word;
}
.preview-lead {
font-size: 14px;
font-weight: 500;
font-style: normal;
line-height: 120%;
margin-bottom: 10px;
word-wrap: break-word;
}
.preview-body {
img {
max-width: 100%;
}
word-wrap: break-word;
}
h2 {
font-size: 18px;
font-weight: 500;
font-style: normal;
line-height: 120%;
margin-bottom: 10px;
word-wrap: break-word;
}
h3 {
font-size: 16px;
font-weight: 500;
font-style: normal;
line-height: 120%;
margin-bottom: 10px;
word-wrap: break-word;
}
h4 {
font-size: 14px;
font-weight: 500;
font-style: normal;
line-height: 120%;
margin-bottom: 6px;
word-wrap: break-word;
}
}
}
}
/* how to make a div vertically scrollable if the height is variable?
this is not so easy, and thus we decided that the only way is
javascript. these classes provide the relevant stop points for
expanding sections in the several panels */
.comments-panel {
@panel-height: 200px;
.add-element.expanded {
/*height: @panel-height;*/
}
.list {
right: @pane-padding;
bottom: @pane-padding;
left: @pane-padding;
}
.list.high {
top: 100px + 140px;
}
.list.low {
top: @panel-height + 75px + 207px;
}
.list.editorial-high {
top: 100px;
}
.list.editorial-low {
top: @panel-height + 95px;
}
.invisible {
visibility: hidden;
}
.panel-title {
margin-bottom: 0;
}
.commenting-options {
margin-top: 0px;
margin-bottom: 20px;
padding: 7px 10px 7px 50px;
font-size: 12px;
border-bottom: 3px solid black;
select {
height: 21px;
}
button {
margin-top: -2px;
margin-left: 4px;
padding: 4px 10px 5px 10px;
line-height: 10px;
}
label {
font-weight: normal;
color: #808080;
margin: 0 3px 0 10px;
}
span {
display: inline-block;
/*width: 32px;*/
padding: 2px 4px 2px 4px;
text-align: center;
border-radius: 2px;
color: white;
font-weight: 700;
font-size: 10px;
line-height: normal;
text-transform: uppercase;
&.yes {
background-color: #6FA00D;
}
&.no {
background-color: #D9534F;
}
}
&.changing {
background-color: lightgray;
border-bottom-color: gray;
span {
background-color: gray
};
}
&.enabled {
border-bottom-color: #CADABB;
background: #E4F0D8 url('../images/comment-bg-icon-enabled.png') no-repeat 0 -3px;
}
&.disabled {
border-bottom-color: #E0C0C4;
background: #F2DEDE url('../images/comment-bg-icon-disabled.png') no-repeat 0 -3px;
}
&.locked {
border-bottom-color: #DFD3AB;
background: #F4EECE url('../images/comment-bg-icon-locked.png') no-repeat 0 -3px;
}
}
.comment-controls {
background-color: @add-element-gray;
border-bottom: 2px solid #d7d7d7;
margin:6px 0 10px 0;
.filters {
font-size: 13px;
padding: 12px 2px 6px 10px;
text-transform: capitalize;
.filters-label { color: @comment-gray; }
.pending-check { color: @new-comment-color;}
.approved-check { color: @approved-comment-color;}
.hidden-check { color: @hidden-comment-color;}
* { margin: 2px; }
span { margin: 0 4px; }
select { margin: 0px 10px 2px 0; }
input { margin: -2px 1px 0 0; vertical-align: middle; }
}
.status-buttons {
padding: 4px 10px 10px;
.delete-button {
margin-left: 20px;
}
}
}
}
.embed-panel {
.add-element {
margin: 10px 0 20px 0 !important;
.body{
select {
margin-bottom: 10px;
width:100%;
padding:3px 0;
border: 1px solid #d0d0d0;
}
.template-field {
input {
width:100%;
padding:5px;
margin-bottom: 4px;
border: 1px solid #d0d0d0;
font-size: 90%;
}
textarea {
border: 1px solid #d0d0d0;
font-size: 90%;
}
}
.controls {
margin-top: 6px;
}
.input-name {
margin: 0 0 2px 0;
}
}
}
.list {
right: @pane-padding;
bottom: @pane-padding;
left: @pane-padding;
top: 148px;
&::-webkit-scrollbar { width: 14px !important; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; border-left: 6px solid rgba(0,0,0,0) !important; background-clip: padding-box !important; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
&.high {
top: 148px;
}
&.low {
top: 392px;
}
.used-in-content {
cursor: default;
&.draggable-panel-heading {
position: relative;
overflow: hidden !important;
.in-content-marker {
border-radius: 35px;
display: inline;
position: absolute;
right: -9px;
top: -12px;
color: white;
background: #489729;
padding: 14px 8px;
line-height: 0;
width: 35px;
height: 35px;
}
}
}
}
.attached-title {
position:relative;
clear:both;
padding: 0;
background-color: @tabpane-background;
&:before {
content: " ";
position: absolute;
top: 10px;
left: 150px;
right: 0px;
background: #dcdcdc;
height: 1px;
}
}
.panel {
.box-shadow(none);
border:none;
&.panel-default {
background: #fff;
border: 1px solid #e0e0e0;
margin-bottom: 8px;
.box-shadow(0 1px 0px #e0e0e0);
.border-radius(3px);
.draggable-panel-heading {
background:transparent;
border:none;
.box-shadow(none);
padding: 4px 2px;
overflow: auto;
.title-block {
width: 72%;
margin:2px 0 3px 0;
line-height: 14px;
text-transform: none;
font-size: 12px;
font-weight: 400;
.title {
border: 0;
border: 1px solid #fff;
width:100%;
line-height: 16px;
padding: 3px 4px;
display:inline-block;
}
.editable {
width:100%;
padding:3px 4px;
border-style: dashed;
border-color: #67afe6;
border-width: 1px;
&:focus {
.box-shadow(0 0 5px 0 rgba(103,175,230, .7));
outline: 0;
border-style: solid;
}
}
}
.btn {
margin: 0;
padding: 4px 6px;
.border-radius(1px);
&:active,
&.active {
@shadow: 0 0 0 rgba(0,0,0,0);
.box-shadow(@shadow);
}
&:hover {
color: #777;
}
}
}
.panel-body {
background:#f8f8f8;
border-top:1px solid #e0e0e0;
padding: 0;
line-height: 0;
}
.footer {
padding: 0px 7px;
height: 30px;
background: #fff;
.btn {
.btn-styles(@btn-default-bg);
text-shadow: 0 1px 0 #fff;
border-color: #cecece;
border-style: solid;
border-width: 0 1px 1px 1px;
padding:2px 6px;
.border-radius(1px);
& + .btn {
border-right: 0;
}
}
}
}
}
.code {
background: #fff;
border-style: dashed;
border-color: #67afe6;
border-width: 1px;
font-size: 11px;
line-height: normal;
padding: 8px 10px;
color: #222;
&::-webkit-scrollbar { width: 8px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; }
&[readonly] {
background: #ebebeb;
}
&:focus {
.box-shadow(0 0 5px 0 rgba(103,175,230, .7));
outline: 0;
border-style: solid;
}
}
}
/* end of the javascript scroll part */
.embed-panel, .comments-panel {
.panel-title-button-group .btn {
padding: 2px 10px;
i {
font-size: 14px;
}
}
textarea {
width: 100%;
padding: 5px;
height:110px;
resize: none;
}
.editor-input {
width: 100%;
border: 1px solid #d0d0d0;
resize: none;
margin: 5px 0;
padding: 5px;
font-size: 90%;
}
.list {
overflow: auto;
position: absolute;
&::-webkit-scrollbar { width: 8px; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; }
}
.add-element {
overflow: auto;
background-color: @add-element-gray;
margin: 10px 0;
.heading {
padding: 0px;
button {
line-height: 1em;
box-shadow: none;
padding: 8px 8px 10px 8px;
margin: 0;
width: 100%;
text-align: left;
.add-text {
font-size: 12px;
padding: 0 5px;
}
&:hover {
background:#e6e6e6;
}
}
}
.body {
padding: 10px 15px 15px;
.controls {
overflow: hidden;
.btn + .btn {
margin: 0 6px 0 0;
}
}
}
}
.add-reply {
overflow: auto;
background-color: #ebebeb;
margin: 10px 0;
padding: 5px;
.heading {
margin-bottom: 5px;
.add-reply-text {
line-height: 1em;
font-size: 12px;
padding: 0;
}
}
.body {
.controls {
overflow: hidden;
}
}
}
.panel.collapsed {
cursor: move;
&:not(:hover) {
.glyphicon-trash:before {
content: '';
}
.glyphicon-pencil:before {
content: '';
}
.fa-trash-o:before {
content: '';
}
.fa-pencil:before {
content: '';
}
}
&:hover {
border: 1px solid #ccc;
.box-shadow(0 1px 0px #ccc);
}
}
.title, .subject {
border: none;
background: none;
box-sizing: content-box;
&.editable {
border-bottom: 1px dashed #666;
/*
about this width: the same elements are used in different
ways among different panels. either we write
different code for every panel, or the design should
be coherent. for the moment i picked a compromise
value that works in both cases
*/
width: 70%;
}
}
.message {
margin: 5px 0;
height: 10em;
}
.code {
.box-sizing(border-box);
background: none;
&[readonly] {
border: none;
color: #636363;
}
}
}
.articleslists-pane {
.add-element {
overflow: visible;
background-color: @add-element-gray;
margin: 10px 0;
&:last-child {
margin: 10px 0 20px 0;
}
.heading {
padding: 0px;
button {
line-height: 1em;
box-shadow: none;
padding: 8px 8px 10px 8px;
margin: 0;
width: 100%;
text-align: left;
.add-text {
font-size: 12px;
padding: 0 5px;
}
&:hover {
background:#e6e6e6;
}
}
}
}
.assigned-title {
position: relative;
clear: both;
padding: 0;
margin-top: 12px;
background-color: @tabpane-background;
&:before {
content: " ";
position: absolute;
top: 10px;
left: 160px;
right: 0px;
background: #dcdcdc;
height: 1px;
}
}
.list {
position: absolute;
top: 155px;
right: 12px;
bottom: 18px;
left: 12px;
overflow: auto;
padding: 0;
&::-webkit-scrollbar { width: 14px !important; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; border-left: 6px solid rgba(0,0,0,0) !important; background-clip: padding-box !important; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.panel {
position: relative;
padding: 8px 25px 8px 12px;
background: #fff;
border: 1px solid #e0e0e0;
margin-bottom: 8px;
-webkit-box-shadow: 0 1px 0px #e0e0e0;
-moz-box-shadow: 0 1px 0px #e0e0e0;
box-shadow: 0 1px 0px #e0e0e0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
word-break: break-all;
&:hover {
border: 1px solid #ccc;
}
.unassign {
position: absolute;
top: 8px;
right: 9px;
cursor: pointer;
color: gainsboro;
&:hover {
color:gray;
}
}
div {
&:hover {
cursor: pointer;
}
}
}
}
}
.topics-pane {
.add-element {
overflow: visible;
background-color: @add-element-gray;
margin: 10px 0;
&:last-child {
margin: 10px 0 20px 0;
}
.heading {
padding: 0px;
button {
line-height: 1em;
box-shadow: none;
padding: 8px 8px 10px 8px;
margin: 0;
width: 100%;
text-align: left;
.add-text {
font-size: 12px;
padding: 0 5px;
}
&:hover {
background:#e6e6e6;
}
}
}
.body {
overflow: visible;
&.ng-invalid-duplicate {
input {
border: 1px solid red;
}
span.error-msg {
color: red;
}
}
.topicSearch {
width: 100%;
margin: 5px 0;
}
}
.editor-input {
width: 100%;
border: 1px solid #d0d0d0;
resize: none;
margin: 5px 0;
padding: 5px;
font-size: 90%;
&:hover {
border: 1px solid #bbb;
}
&:focus {
border: rgba(82, 168, 236, 1) solid 1px !important;
outline: none !important;
}
}
}
.body {
padding: 10px 15px 15px;
.controls {
overflow: hidden;
margin-top: 6px;
.btn + .btn {
margin: 0 6px 0 0;
}
}
}
.assigned-title {
position: relative;
clear: both;
padding: 0;
margin-top: 12px;
background-color: @tabpane-background;
&:before {
content: " ";
position: absolute;
top: 10px;
left: 120px;
right: 0px;
background: #dcdcdc;
height: 1px;
}
}
.list {
position: absolute;
top: 200px;
right: 12px;
bottom: 18px;
left: 12px;
overflow: auto;
padding: 0;
&::-webkit-scrollbar { width: 14px !important; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; border-left: 6px solid rgba(0,0,0,0) !important; background-clip: padding-box !important; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
.panel {
position: relative;
padding: 8px 25px 8px 12px;
background: #fff;
border: 1px solid #e0e0e0;
margin-bottom: 8px;
-webkit-box-shadow: 0 1px 0px #e0e0e0;
-moz-box-shadow: 0 1px 0px #e0e0e0;
box-shadow: 0 1px 0px #e0e0e0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
word-break: break-all;
&:hover {
border: 1px solid #ccc;
}
.unassign {
position: absolute;
top: 8px;
right: 9px;
cursor: pointer;
color: gainsboro;
&:hover {
color:gray;
}
}
}
}
tags-input {
&:focus {
outline: none !important;
border: none;
}
&.ti-input-sm .tags {
border-radius: 0;
margin: 5px 0;
border: 1px solid #d0d0d0;
box-shadow: none;
}
.tags {
outline: none !important;
&:hover {
border: 1px solid #bbb;
}
&.focused {
border: rgba(82, 168, 236, 1) solid 1px !important;
outline: none !important;
}
.tag-item {
color: white;
background: #2590bd;
border: 1px solid #357ebd;
border-radius: 2px !important;
padding: 0 5px 2px 5px;
.remove-button {
color: #fff;
vertical-align: initial;
}
}
}
.autocomplete .suggestion-item {
font: 16px "Roboto", Helvetica, Arial, sans-serif;
color: #666;
background-color: white;
}
}
}
[dropped-image] {
float: none;
margin: 0px auto;
.dropped-image {
position: relative;
text-align: center; /* to align the image within */
.image {
width: 100%;
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
background: white;
color: #333;
border: 1px solid #ccc;
.border-radius(2px);
.box-shadow(0 0 6px rgba(0,0,0,.2));
opacity: 1;
padding: 8px;
font-size: 16px;
visibility: hidden;
&:hover {
background-color: #e6e6e6;
}
}
.caption {
position: relative;
text-align: left;
padding: 6px 8px 6px 8px;
cursor: text;
background: #f5f5f5;
font-size: 12px;
min-height: 44px;
overflow: hidden;
font-family: @baseFontFamily;
font-weight: normal;
font-style: normal;
line-height: @baseLineHeight;
.edit, .save, .cancel {
cursor: pointer;
background: white;
color: #333;
border: 1px solid #ccc;
.border-radius(2px);
opacity: 1;
padding: 4px 6px;
font-size: 12px;
&:hover {
background-color: #e6e6e6;
}
}
.static {
padding: 7px 36px 3px 7px;
color: #666;
}
.edit {
position: absolute;
top: 8px;
right: 8px;
visibility: hidden;
}
&:hover {
.edit {
visibility: visible;
}
};
input {
width: 100%;
display: block;
margin: 2px 0 6px 0;
border: 1px solid #ccc;
padding: 4px 6px;
font-family: @baseFontFamily;
color: #333;
&:focus {
border: rgba(82, 168, 236, 1) solid 1px !important;
outline: none !important;
}
}
.btn-group {
display:block;
float:right;
}
.photographer {
background: #f5f5f5;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: 12px;
color: #aaa;
text-align: left;
padding: 0px 15px 2px 6px;
display: inline-block;
}
}
&:hover {
.image {
opacity: 0.5;
}
.close {
visibility: visible;
}
}
}
}
.snippet {
min-height: 26px;
padding: 4px;
.controls {
display: inline-block;
color: rgb(77, 77, 77);
background-color: lightgray;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
font-style: normal;
font-family: @baseFontFamily;
padding: 2px 0 4px 0;
span {
margin: 5px;
}
}
.render-area {
word-break: break-word;
border: 1px solid lightgray;
color: gray;
padding: 10px;
background-color: rgb(250,250,250);
font-weight: lighter;
font-size: small;
}
}
/* Info panel */
.info {
.info-list {
position: absolute;
right: 12px;
bottom: 12px;
left: 12px;
top: 60px;
overflow: auto;
&::-webkit-scrollbar { width: 14px !important; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; border-left: 6px solid rgba(0,0,0,0) !important; background-clip: padding-box !important; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
padding: 11px 0 9px 0;
border-bottom: 1px dotted #d8d8d8;
overflow: hidden;
font-size: 12px;
.field-description {
float: left;
width: 90px;
text-transform: uppercase;
font-size: 11px;
color: #808080;
word-wrap: break-word;
padding-left: 2px;
}
.field-value {
float: left;
padding-left: 14px;
word-wrap: break-word;
width: 198px;
}
li {
padding: 0 0 2px 0;
border: none;
word-wrap: break-word;
}
}
}
}
}
/* switches panel */
.switches {
.switches-list {
position: absolute;
right: 12px;
bottom: 12px;
left: 12px;
top: 60px;
overflow: auto;
&::-webkit-scrollbar { width: 14px !important; height: 8px; margin: -1px 0; }
&::-webkit-scrollbar-thumb { background: #949494; border-left: 6px solid rgba(0,0,0,0) !important; background-clip: padding-box !important; }
&::-webkit-scrollbar-thumb:hover { background: #6e6e6e; border-left: 6px solid rgba(0,0,0,0);background-clip: padding-box; }
ul {
list-style-type: none;
margin: 0 0 20px 0;
padding: 0;
li {
padding: 4px 0px;
overflow: hidden;
label {
font-weight: 400;
margin: 2px 4px;
padding: 0;
vertical-align: middle;
}
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 28px;
padding-top: 2px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 16px; height: 16px;
border: 1px solid #c0c0c0;
background: #f8f8f8;
border-radius: 1px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1)
}
[type="checkbox"]:checked + label:before {
border: 1px solid #222;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
font: normal normal normal 14px/1 FontAwesome;
content: "\f00c";
position: absolute;
top: 0px; left: 2px;
font-size: 18px;
color: #007fb3;
text-shadow: -1px 0 #f8f8f8, 0 1px #f8f8f8, 1px 0 #f8f8f8, 0 -1px #f8f8f8;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
}
[type="checkbox"]:checked + label:after {
opacity: 1;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* end custom checkbox style */
}
}
}
}
}
/* Select2 js custom */
.select2 {
&-container {
.select2-choice {
height:auto !important;
.border-radius(2px) !important;
background-image: none !important;
border:1px solid #ccc !important;
color: #333 !important;
.select2-arrow {
background:#fff !important;
border:none !important;
b {
background: url('../images/select2.png') no-repeat 0 1px !important;
}
}
&.select2-default {
outline:0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
}
&-active {
.select2-choice,
.select2-choices {
border: 1px solid #52a8ec !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
}
.select2-drop {
border-radius: 0 !important;
&-active {
}
}
}
&-search {
input {
border:1px solid #ccc !important;
background: url('../images/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)) !important;
}
}
&-results {
margin: 6px 4px 6px 0 !important;
.select2-highlighted {
background: #52a8ec !important;
}
.select2-no-results {
font-size: 11px !important;
color:#777 !important;
}
}
&-dropdown {
&-open {
.select2-choice {
background:#fff !important;
color: #333 !important;
}
}
}
}
// Modals
// -----
.modal {
.modal-dialog {
.modal-header {
h3 { margin-top: 0; margin-bottom: 0; line-height: 1.3; }
}
.modal-content {
.modal-edit-link {
label {
margin-bottom: 14px;
}
}
}
iframe {
border: none;
outline: none;
}
/* Modal heavy */
.modal-heavy {
.modal-header {
background-color: #b90e0e;
.border-top-left-radius(3px);
.border-top-right-radius(3px);
h3 {
color: white;
font-size: 18px;
.fa { font-size: 24px; margin-right: 10px; vertical-align: text-bottom; }
}
border-bottom: 1px solid white;
}
.modal-body {
padding: 25px 20px;
background-color: #fafafa;
p {
margin: 0;
font-size: 14px;
}
}
.modal-footer {
margin-top: 0;
background-color: #fafafa;
.border-bottom-left-radius(3px);
.border-bottom-right-radius(3px);
}
}
/* Modal light (standard) */
.modal-light {
.modal-header {
background-color: #D8D8D8;
.border-top-left-radius(3px);
.border-top-right-radius(3px);
h3 {
font-size: 18px;
.fa { font-size: 24px; margin-right: 10px; vertical-align: text-bottom; }
}
border-bottom: 1px solid #ccc;
}
.modal-body {
padding: 25px 20px;
background-color: #fafafa;
p {
margin: 0;
font-size: 14px;
color: #444;
}
}
.modal-footer {
margin-top: 0;
background-color: #fafafa;
.border-bottom-left-radius(3px);
.border-bottom-right-radius(3px);
}
}
}
/*large modal */
&.large {
position: fixed;
width: auto;
height: auto;
margin: 0 20px 20px;
left: 0!important;
top: 0!important;
right: 0!important;
bottom: 0!important;
padding: 0!important;
overflow: hidden!important;
.modal-dialog {
width: auto;
height: 100%;
margin: 0;
padding-top: 20px;
.modal-content {
height:100%;
}
.modal-header {
border-bottom: none;
.box-sizing(border-box);
}
.modal-body {
border-top: 1px solid #d2d2d2;
}
}
/* image modal */
&.image {
.modal-dialog {
.modal-content {
position:relative;
.modal-body {
.box-sizing(border-box);
position: absolute;
top: 56px;
left: 0;
bottom: 0;
right: 0;
padding:0;
.content-row {
background-color: #f8f8f8;
.box-sizing(border-box);
position: absolute;
bottom: 254px;
top: 0;
width:100%;
overflow:hidden;
.left-pane {
width: 145px;
.box-sizing(border-box);
position: absolute;
top: 0;
bottom: 0;
padding: 26px 0px 15px 0;
margin:0;
border-right: 1px solid #d2d2d2;
background:#FFF;
}
.right-pane {
position: absolute;
.box-sizing(border-box);
padding: 15px 0px 15px 15px;
top: 0;
bottom: 0;
right: 0;
left: 145px;
overflow:hidden;
.archive {
}
}
}
.basket-container {
position:absolute;
bottom: 60px;
left:0;
right:0;
background: #4d4d4d;
}
.commands-bar {
position:absolute;
bottom:0;
left:0;
right:0;
text-align: right;
padding: 15px;
background-color: #f5f5f5;
border-top: 1px solid white;
.border-bottom-left-radius(6px);
.border-bottom-right-radius(6px);
.btn + .btn {
margin-left: 6px;
}
}
}
}
}
}
}
/* Modal Preview Article */
&.modalPreview {
position: fixed;
width: auto;
height: auto;
margin: 0 10px 10px;
left: 0!important;
top: 0!important;
right: 0!important;
bottom: 0!important;
padding: 0!important;
overflow: hidden!important;
border-radius: 0 0 6px 6px;
.modal-dialog {
width: auto;
height: 100%;
margin: 0;
padding-top: 10px;
.modal-content {
height:100%;
border: 1px solid #222;
.modal-header {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 10px 15px;
h4 {
margin: 5px 0;
}
}
.modal-body {
position: initial;
height: 100%;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 15px;
}
}
.close {
position: absolute;
top: 8px;
right: 8px;
z-index: 10000;
opacity: .4;
padding: 5px;
width: 30px;
height: 30px;
&:hover {
opacity: .8;
}
}
}
iframe {
border: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 6px;
padding: 50px 0 51px 0;
}
}
&.renditionsModal {
position: fixed;
width: auto;
height: auto;
margin: 0 10px 10px;
left: 0!important;
top: 0!important;
right: 0!important;
bottom: 0!important;
padding: 0!important;
overflow: hidden!important;
border-radius: 0 0 6px 6px;
.modal-dialog {
width: auto;
height: 100%;
margin: 0;
padding-top: 10px;
.modal-content {
height:100%;
border: 1px solid #222;
}
.modal-header {
min-height: 1px;
background: none;
padding: 0;
border-bottom: none;
}
.modal-body {
position: initial;
height: 100%;
}
.close {
position: absolute;
top: 8px;
right: 8px;
z-index: 10000;
opacity: .4;
padding: 5px;
width: 30px;
height: 30px;
}
}
iframe {
border: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 6px;
}
}
/* Login form style */
&.modalLogin {
.modal-dialog {
width: 440px;
.modal-login {
background-color: #f2f2f2;
.border-radius(6px);
.modal-header {
background-color: #fff;
.border-radius(6px 6px 0 0);
}
.modal-body {
padding: 0;
}
}
}
}
&.featuredArticlesModal {
.modal-dialog {
width: 723px;
.modal-body {
padding: 0;
}
.modal-header {
min-height: 1px;
background: none;
padding: 0 17px;
}
}
}
}
/* Spinner animation */
.load-anim.pull-right {
float: right;
margin: 0px;
}
.load-anim {
margin: 20px 0 0;
height: 27px;
text-align: center;
font-size: 8px;
> div {
background-color: #ccc;
height: 100%;
width: 4px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
/* feedback button */
.feedback-button {
position: fixed;
padding: 13px 4px;
width: 120px;
height: 48px;
text-transform: uppercase;
background-color: #5ea9c8;
color: #FFF;
z-index: 1040;
text-align: center;
.box-sizing(border-box);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
cursor: pointer;
i {
margin-right: 10px;
}
}