Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

executable file 499 lines (414 sloc) 9.149 kb
/**
* This file defines the 'theme' of the CMS: Colors, fonts, backgrounds, and detailed alignments.
* Together with _layout.css it provides the presentational backbone to the CMS.
* Ideally a developer should be able to exchange this file with his own theme easily.
*
* Please don't put any dimension, display or float information on major structural components
* like '.cms-container' or '.cms-header' in here, use the _layout.scss file instead.
*
* Use SCSS variable definitions in screen.css to avoid repeating styles like background colours
* or padding dimensions. See _colours.scss to get started.
*
* To avoid this file getting too large and complicated, it is encouraged to create new SCSS files
* for larger components like the CMS menu or tree (see _tree.scss and _menu.scss).
*/
/** ----------------------------------------------------
* Core Styles
* ---------------------------------------------------- */
html,body {
width: 100%;
height: 100%;
overflow: hidden;
@include global-reset;
font-size: $font-base-size;
font-family: $font-family;
color: $color-text;
}
a {
color: $color-text-dark-link;
text-decoration: none;
&:hover,
&:focus {
text-decoration: underline;
}
}
body .ui-widget {
font-size: $font-base-size;
}
.cms-container {
height: 100%;
}
.cms-preview,
.cms-menu,
.cms-content,
.cms-content-header,
.cms-content-tools,
.cms-content-form {
@include inline-block;
}
strong {
font-weight: bold;
}
// ######################### Misc Panels #########################
.cms-content-header {
background-color: darken($color-widget-bg, 20%);
padding: 8px;
height: 32px;
@include linear-gradient(color-stops(
darken($color-widget-bg, 20%),
darken($color-widget-bg, 30%)
));
h2 {
float: left;
padding: 8px;
font-size: 14px;
font-weight: bold;
width: 250px - (10px*2);
}
& > div {
width: 9999em;
overflow: hidden;
}
.cms-content-header-tabs {
float: left;
}
}
.ui-tabs .cms-content-header {
.ui-tabs-nav li {
height: 40px;
a {
font-weight: bold;
font-size: 11px;
padding-top: 8px;
}
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background-color: lighten($color-shadow-light, 20%);
@include linear-gradient(color-stops(
lighten($color-shadow-light, 20%),
lighten($color-shadow-light, 5%)
));
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
background: $color-widget-bg;
}
}
.cms-content-tools {
background-color: darken($color-widget-bg, 5%);
width: 230px;
overflow: auto;
.cms-panel-header,
.cms-panel-content {
padding: 10px;
}
}
/** -------------------------------------------------------
* Top Left Header and logo area
* -------------------------------------------------------- */
.cms-header {
background-color: darken($color-dark-bg, 10%);
position: relative;
padding: 16px 8px 8px;
line-height: 24px;
@include linear-gradient(color-stops(
darken($color-dark-bg, 10%),
$color-dark-bg,
darken($color-dark-bg, 10%)
));
span {
color: $color-text-light;
white-space: no-wrap;
text-overflow: ellipsis;
display: block;
a {
color: $color-text-dark-link;
display: inline;
}
}
}
.cms-logo {
border-bottom: 1px solid darken($color-dark-separator, 20%);
height: 31px;
overflow: hidden;
padding: 0 4px;
vertical-align: middle;
.version {
display: none;
}
a {
display: inline-block;
height: $application-logo-small-ysize;
width: $application-logo-small-xsize;
float: left;
margin-right: 10px;
background: $application-logo-small no-repeat;
text-indent: -9999em;
}
}
.cms-login-status {
border-top: 1px solid $color-dark-separator;
height: 23px;
padding: 8px 0 0 14px;
overflow: hidden;
line-height: 16px;
font-size: 11px;
.logout-link {
display: inline-block;
height: 16px;
width: 16px;
float: left;
margin-right: 10px;
background: url(../images/logout.png) no-repeat;
text-indent: -9999em;
}
}
// ######################### Loading Screen #########################
.ss-loading-screen,
.ss-loading-screen .loading-logo {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
// TODO Convert to compass gradient include
background: #fff;
background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%);
background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white));
z-index: 100000;
margin: 0;
padding: 0;
}
.ss-loading-screen {
.loading-logo {
background-url: url(../images/logo.gif);
background-repeat: no-repeat;
background-color: transparent;
background-position: 50% 50%;
}
p {
width: 100%;
text-align: center;
position: absolute;
bottom: 80px;
span.notice {
display: inline-block;
font-size: 14px;
padding: 10px 20px;
color: #dc7f00;
border: none;
@include border-radius(5px);
}
}
.loading-animation {
display: none;
position: absolute;
left: 49%;
top: 75%;
}
}
// ######################### Actions #########################
.cms-content-actions {
padding: 8px;
}
// ######################### Messages #########################
/**
* Messages (see sapphire/css/Form.css)
*/
.message {
margin: 1em 0;
padding: 0.5em;
font-weight: bold;
border: 1px black solid;
&.notice {
background-color: lighten($color-notice, 20%);
border-color: $color-notice;
}
&.warning {
background-color: lighten($color-warning, 20%);
border-color: $color-warning;
}
&.error {
background-color: lighten($color-error, 20%);
border-color: $color-error;
}
}
// ######################### ModelAdmin #########################
.ModelAdmin {
.cms-content-tools {
width: 300px;
}
// Disable by default, will be replaced by more intuitive column selection in new data grid
.ResultAssemblyBlock {
display: none;
}
}
// ######################### "Add page" dialog #########################
.cms-page-add-form-dialog {
#PageType li {
clear: left;
height: 40px;
border-bottom: 1px solid $color-shadow-dark;
&:hover, &.selected {
background-color: lighten($color-highlight, 10%);
}
input, label, .icon, .title {
float: left;
}
.icon {
width: 20px;
}
.title {
width: 100px;
font-weight: bold;
}
.description {
font-style: italic;
}
}
}
// ######################### Content toolbar #########################
.cms-content-toolbar {
& > * {
display: inline-block;
}
.cms-tree-view-modes * {
display: inline-block;
}
.cms-content-batchactions form > * {
display: inline-block;
}
}
// ######################### Preview header (remove before release) #########################
.cms-preview {
width: 1px; // collapsed by default
.cms-preview-toggle {
width: 10px;
}
iframe {
width: 100%;
height: 100%;
}
}
.cms-preview-header {
background-color: #FFBE66;
padding: 10px;
font-weight: bold;
}
// ######################### Member Profile #########################
form.member-profile-form {
#CsvFile .middleColumn {
background: none !important;
}
.advanced h4 {
margin-bottom: .5em;
}
.Actions {
text-align: left;
border: 0;
}
input.customFormat {
border: 1px solid #ccc !important;
padding: 3px;
margin-left: 2px;
}
.formattingHelpToggle {
font-size: 11px;
padding: 3px;
}
.formattingHelpText {
margin: 5px auto;
color: #333;
padding: 5px 10px;
width: 90%;
background: #fff;
border: 1px solid #ccc;
}
.formattingHelpText ul {
padding: 0;
}
.formattingHelpText li {
font-size: 11px;
color: #333;
margin-bottom: 2px;
}
}
.cms-content-form {
overflow: auto;
}
// ######################### Panels #########################
.cms-panel {
overflow: hidden;
.toggle-expand,
.toggle-collapse {
display: block;
position: absolute;
bottom: 0;
text-align: right;
@include linear-gradient(color-stops(
darken($color-widget-bg, 20%),
darken($color-widget-bg, 30%)
));
text-decoration: none;
span {
display: inline-block;
margin: 5px;
color: $color-text-dark;
font-size: 16px;
}
}
.toggle-collapse {
width: 100%;
}
.toggle-expand {
width: 40px; // will set the collapsed width
}
&.collapsed {
.cms-panel-content {
display: none;
}
.cms-panel-header {
@include rotate(-90deg);
// TODO How to reflow container to correct height?
position: relative;
top: 100px;
}
}
}
.cms-content .cms-panel.collapsed {
cursor: pointer;
}
// ######################### Other #########################
.cms-preview {
background-color: $color-base;
.cms-preview-toggle {
cursor: pointer;
a {
display: block;
width: 15px;
height: 15px;
position: relative;
left: 10px; // point right (width of toggle)
top: 48%;
background-color: $color-base;
color: $color-text-light;
font-weight: bold;
text-decoration: none;
z-index: 2000;
}
}
&.is-collapsed {
.cms-preview-toggle {
a {
left: -15px; // point left
}
}
}
}
.cms-switch-view {
a {
padding-right: 1em;
}
}
Jump to Line
Something went wrong with that request. Please try again.