mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
ENHANCEMENT Started styles for new CMS
This commit is contained in:
Ingo Schommer
parent
6dbfd5fdde
commit
99a68dde75
@ -10,4 +10,4 @@ images_dir = "images"
|
|||||||
javascripts_dir = "javascript"
|
javascripts_dir = "javascript"
|
||||||
output_style = :compact
|
output_style = :compact
|
||||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
# To enable relative paths to assets via compass helper functions. Uncomment:
|
||||||
# relative_assets = true
|
relative_assets = true
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
||||||
|
|
||||||
@ -21,42 +22,304 @@ q:before, q:after, blockquote:before, blockquote:after { content: ""; }
|
|||||||
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
a img { border: none; }
|
a img { border: none; }
|
||||||
|
|
||||||
/* line 4, ../scss/_tree.scss */
|
/** This file defines the structural layout of the CMS interface. Ideally, you should be able to lay out the base elements of the CMS with only this file. Please put any presentational definitions (color, fonts, backgrounds, paddings) into _style.scss or _uitheme.scss instead. */
|
||||||
.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
|
/* line 9, ../scss/_layout.scss */
|
||||||
/* line 9, ../scss/_tree.scss */
|
|
||||||
.jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
|
|
||||||
/* line 20, ../scss/_tree.scss */
|
|
||||||
.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; }
|
|
||||||
/* line 27, ../scss/_tree.scss */
|
|
||||||
.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; }
|
|
||||||
/* line 36, ../scss/_tree.scss */
|
|
||||||
.jstree a:focus { outline: none; }
|
|
||||||
/* line 39, ../scss/_tree.scss */
|
|
||||||
.jstree a > ins { height: 16px; width: 16px; }
|
|
||||||
/* line 42, ../scss/_tree.scss */
|
|
||||||
.jstree a > .jstree-icon { margin-right: 3px; }
|
|
||||||
/* line 45, ../scss/_tree.scss */
|
|
||||||
.jstree li.jstree-open > ul { display: block; }
|
|
||||||
/* line 47, ../scss/_tree.scss */
|
|
||||||
.jstree li.jstree-closed > ul { display: none; }
|
|
||||||
/* line 49, ../scss/_tree.scss */
|
|
||||||
.jstree li.disabled a { color: #aaaaaa; }
|
|
||||||
|
|
||||||
/* line 53, ../scss/_tree.scss */
|
|
||||||
.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
|
|
||||||
/* line 56, ../scss/_tree.scss */
|
|
||||||
.jstree-rtl li { margin-left: 0; margin-right: 18px; }
|
|
||||||
|
|
||||||
/* line 60, ../scss/_tree.scss */
|
|
||||||
.jstree-rtl > ul > li { margin-right: 0px; }
|
|
||||||
|
|
||||||
/* line 63, ../scss/_tree.scss */
|
|
||||||
.jstree > ul > li { margin-left: 0px; }
|
|
||||||
|
|
||||||
/* line 6, ../scss/screen.scss */
|
|
||||||
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
|
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; }
|
||||||
|
|
||||||
/* line 14, ../scss/screen.scss */
|
/* line 17, ../scss/_layout.scss */
|
||||||
|
.cms-container { height: 100%; }
|
||||||
|
|
||||||
|
/* line 21, ../scss/_layout.scss */
|
||||||
|
.cms-menu { width: 250px; overflow: auto; }
|
||||||
|
|
||||||
|
/* line 25, ../scss/_layout.scss */
|
||||||
|
.cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; }
|
||||||
|
/* line 7, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
|
||||||
|
.cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-form { *display: inline; }
|
||||||
|
|
||||||
|
/* line 29, ../scss/_layout.scss */
|
||||||
|
.cms-content-tools { width: 250px; overflow: auto; }
|
||||||
|
|
||||||
|
/* line 34, ../scss/_layout.scss */
|
||||||
|
.cms-content-form { overflow: auto; }
|
||||||
|
|
||||||
|
/* line 38, ../scss/_layout.scss */
|
||||||
|
.cms-content-header { height: 40px; overflow: hidden; }
|
||||||
|
|
||||||
|
/* line 43, ../scss/_layout.scss */
|
||||||
|
.cms-content-actions { padding: 10px; }
|
||||||
|
|
||||||
|
/* line 47, ../scss/_layout.scss */
|
||||||
|
.cms-logo { height: 30px; overflow: hidden; vertical-align: middle; }
|
||||||
|
|
||||||
|
/* line 53, ../scss/_layout.scss */
|
||||||
|
.cms-login-status { height: 30px; overflow: hidden; vertical-align: middle; }
|
||||||
|
|
||||||
|
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
|
||||||
|
/* line 10, ../scss/_tree.scss */
|
||||||
|
.jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
|
||||||
|
/* line 16, ../scss/_tree.scss */
|
||||||
|
.jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
|
||||||
|
/* line 28, ../scss/_tree.scss */
|
||||||
|
.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; }
|
||||||
|
/* line 36, ../scss/_tree.scss */
|
||||||
|
.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; }
|
||||||
|
/* line 45, ../scss/_tree.scss */
|
||||||
|
.jstree a:focus { outline: none; }
|
||||||
|
/* line 49, ../scss/_tree.scss */
|
||||||
|
.jstree a > ins { height: 16px; width: 16px; }
|
||||||
|
/* line 53, ../scss/_tree.scss */
|
||||||
|
.jstree a > .jstree-icon { margin-right: 3px; }
|
||||||
|
/* line 61, ../scss/_tree.scss */
|
||||||
|
.jstree li.jstree-open > ul { display: block; }
|
||||||
|
/* line 64, ../scss/_tree.scss */
|
||||||
|
.jstree li.jstree-closed > ul { display: none; }
|
||||||
|
/* line 69, ../scss/_tree.scss */
|
||||||
|
.jstree li.disabled a { color: #aaaaaa; }
|
||||||
|
|
||||||
|
/* line 76, ../scss/_tree.scss */
|
||||||
|
.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
|
||||||
|
/* line 80, ../scss/_tree.scss */
|
||||||
|
.jstree-rtl li { margin-left: 0; margin-right: 18px; }
|
||||||
|
|
||||||
|
/* line 87, ../scss/_tree.scss */
|
||||||
|
.jstree-rtl > ul > li { margin-right: 0px; }
|
||||||
|
|
||||||
|
/* line 91, ../scss/_tree.scss */
|
||||||
|
.jstree > ul > li { margin-left: 0px; }
|
||||||
|
|
||||||
|
/* line 95, ../scss/_tree.scss */
|
||||||
|
#vakata-dragged { display: block; margin: 0 0 0 0; padding: 4px 4px 4px 24px; position: absolute; top: -2000px; line-height: 16px; z-index: 10000; }
|
||||||
|
|
||||||
|
/* line 104, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu { display: block; visibility: hidden; left: 0; top: -200px; position: absolute; margin: 0; padding: 0; min-width: 180px; background: #ebebeb; border: 1px solid silver; z-index: 10000; *width: 180px; }
|
||||||
|
|
||||||
|
/* line 117, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu ul { min-width: 180px; *width: 180px; }
|
||||||
|
|
||||||
|
/* line 120, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu ul, #vakata-contextmenu li { margin: 0; padding: 0; list-style-type: none; display: block; }
|
||||||
|
|
||||||
|
/* line 126, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu li { line-height: 20px; min-height: 20px; position: relative; padding: 0px; }
|
||||||
|
|
||||||
|
/* line 132, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu li a { padding: 1px 6px; line-height: 17px; display: block; text-decoration: none; margin: 1px 1px 0 1px; }
|
||||||
|
|
||||||
|
/* line 139, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu li ins { float: left; width: 16px; height: 16px; text-decoration: none; margin-right: 2px; }
|
||||||
|
|
||||||
|
/* line 146, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background: gray; color: white; }
|
||||||
|
|
||||||
|
/* line 150, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #ebebeb; border: 1px solid gray; }
|
||||||
|
|
||||||
|
/* line 158, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu .right { right: 100%; left: auto; }
|
||||||
|
|
||||||
|
/* line 162, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu .bottom { bottom: -1px; top: auto; }
|
||||||
|
|
||||||
|
/* line 166, ../scss/_tree.scss */
|
||||||
|
#vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: silver; /* border-top:1px solid #fefefe; */ padding: 0; }
|
||||||
|
|
||||||
|
/* line 176, ../scss/_tree.scss */
|
||||||
|
.jstree ul, .jstree li { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; }
|
||||||
|
|
||||||
|
/* line 182, ../scss/_tree.scss */
|
||||||
|
.jstree li { display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
|
||||||
|
|
||||||
|
/* line 190, ../scss/_tree.scss */
|
||||||
|
.jstree-rtl li { margin-left: 0; margin-right: 18px; }
|
||||||
|
|
||||||
|
/* line 194, ../scss/_tree.scss */
|
||||||
|
.jstree > ul > li { margin-left: 0px; }
|
||||||
|
|
||||||
|
/* line 197, ../scss/_tree.scss */
|
||||||
|
.jstree-rtl > ul > li { margin-right: 0px; }
|
||||||
|
|
||||||
|
/* line 200, ../scss/_tree.scss */
|
||||||
|
.jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; }
|
||||||
|
|
||||||
|
/* line 208, ../scss/_tree.scss */
|
||||||
|
.jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; }
|
||||||
|
|
||||||
|
/* line 218, ../scss/_tree.scss */
|
||||||
|
.jstree a:focus { outline: none; }
|
||||||
|
|
||||||
|
/* line 221, ../scss/_tree.scss */
|
||||||
|
.jstree a > ins { height: 16px; width: 16px; }
|
||||||
|
|
||||||
|
/* line 225, ../scss/_tree.scss */
|
||||||
|
.jstree a > .jstree-icon { margin-right: 3px; }
|
||||||
|
|
||||||
|
/* line 228, ../scss/_tree.scss */
|
||||||
|
.jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
|
||||||
|
|
||||||
|
/* line 232, ../scss/_tree.scss */
|
||||||
|
li.jstree-open > ul { display: block; }
|
||||||
|
|
||||||
|
/* line 235, ../scss/_tree.scss */
|
||||||
|
li.jstree-closed > ul { display: none; }
|
||||||
|
|
||||||
|
/* line 238, ../scss/_tree.scss */
|
||||||
|
#vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }
|
||||||
|
|
||||||
|
/* line 252, ../scss/_tree.scss */
|
||||||
|
#vakata-dragged .jstree-ok { background: green; }
|
||||||
|
|
||||||
|
/* line 255, ../scss/_tree.scss */
|
||||||
|
#vakata-dragged .jstree-invalid { background: red; }
|
||||||
|
|
||||||
|
/* line 258, ../scss/_tree.scss */
|
||||||
|
#jstree-marker { padding: 0; margin: 0; font-size: 12px; overflow: hidden; height: 12px; width: 8px; position: absolute; top: -30px; z-index: 10001; background-repeat: no-repeat; display: none; background-color: transparent; text-shadow: 1px 1px 1px white; color: black; line-height: 10px; }
|
||||||
|
|
||||||
|
/* line 275, ../scss/_tree.scss */
|
||||||
|
#jstree-marker-line { padding: 0; margin: 0; line-height: 0%; font-size: 1px; overflow: hidden; height: 1px; width: 100px; position: absolute; top: -30px; z-index: 10000; background-repeat: no-repeat; display: none; background-color: #456c43; cursor: pointer; border: 1px solid #eeeeee; border-left: 0; -moz-box-shadow: 0px 0px 2px #666; -webkit-box-shadow: 0px 0px 2px #666; box-shadow: 0px 0px 2px #666; -moz-border-radius: 1px; border-radius: 1px; -webkit-border-radius: 1px; }
|
||||||
|
|
||||||
|
/* line 299, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-real-checkbox { display: none; }
|
||||||
|
|
||||||
|
/* line 302, ../scss/_tree.scss */
|
||||||
|
.jstree-themeroller .ui-icon { overflow: visible; }
|
||||||
|
|
||||||
|
/* line 305, ../scss/_tree.scss */
|
||||||
|
.jstree-themeroller a { padding: 0 2px; }
|
||||||
|
|
||||||
|
/* line 308, ../scss/_tree.scss */
|
||||||
|
.jstree-themeroller .jstree-no-icon { display: none; }
|
||||||
|
|
||||||
|
/* line 311, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow-real { position: relative; z-index: 1; }
|
||||||
|
|
||||||
|
/* line 315, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow-real li { cursor: pointer; }
|
||||||
|
|
||||||
|
/* line 318, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow-real a { border-left-color: transparent !important; border-right-color: transparent !important; }
|
||||||
|
|
||||||
|
/* line 322, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow { position: relative; z-index: 0; height: 0; }
|
||||||
|
|
||||||
|
/* line 327, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { width: 100%; }
|
||||||
|
|
||||||
|
/* line 330, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li, .jstree .jstree-wholerow a { margin: 0 !important; padding: 0 !important; }
|
||||||
|
|
||||||
|
/* line 334, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow, .jstree .jstree-wholerow ul, .jstree .jstree-wholerow li { background: transparent !important; }
|
||||||
|
|
||||||
|
/* line 337, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow ins, .jstree .jstree-wholerow span, .jstree .jstree-wholerow input { display: none !important; }
|
||||||
|
|
||||||
|
/* line 340, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow a, .jstree .jstree-wholerow a:hover { text-indent: -9999px !important; width: 100%; padding: 0 !important; border-right-width: 0px !important; border-left-width: 0px !important; }
|
||||||
|
|
||||||
|
/* line 347, ../scss/_tree.scss */
|
||||||
|
.jstree .jstree-wholerow-span { position: absolute; left: 0; margin: 0px; padding: 0; height: 18px; border-width: 0; padding: 0; z-index: 0; }
|
||||||
|
|
||||||
|
/* line 1, ../scss/_menu.scss */
|
||||||
|
.cms-menu { z-index: 10; background-color: #b0bfc6; -moz-box-shadow: #aaaaaa 3px 0 3px 0; -webkit-box-shadow: #aaaaaa 3px 0 3px 0; -o-box-shadow: #aaaaaa 3px 0 3px 0; box-shadow: #aaaaaa 3px 0 3px 0; }
|
||||||
|
/* line 6, ../scss/_menu.scss */
|
||||||
|
.cms-menu a { text-decoration: none; }
|
||||||
|
|
||||||
|
/* line 12, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li { background-color: #afbdc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbdc6), color-stop(100%, #8ea4b2)); background-image: -moz-linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); background-image: linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); border-bottom: 1px solid #aaa; }
|
||||||
|
/* line 17, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #dddddd 1px 1px 1px; color: #333; margin: 5px; }
|
||||||
|
/* line 26, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1302929241') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||||
|
/* line 34, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li a .text { display: block; padding-top: 10px; }
|
||||||
|
/* line 40, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li.current { background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #338dc1)); background-image: -moz-linear-gradient(top, #338dc1 0%, #338dc1 100%); background-image: linear-gradient(top, #338dc1 0%, #338dc1 100%); -moz-box-shadow: #333333 0 4px 4px 0; -webkit-box-shadow: #333333 0 4px 4px 0; -o-box-shadow: #333333 0 4px 4px 0; box-shadow: #333333 0 4px 4px 0; }
|
||||||
|
/* line 45, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
|
||||||
|
/* line 52, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li li { background-color: #1d76ae; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #1d76ae), color-stop(100%, #1d76ae)); background-image: -moz-linear-gradient(top, #1d76ae 0%, #1d76ae 100%); background-image: linear-gradient(top, #1d76ae 0%, #1d76ae 100%); }
|
||||||
|
/* line 56, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
|
||||||
|
/* line 64, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li li.current a { font-weight: bold; }
|
||||||
|
/* line 71, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-CMSMain a .icon { background-position: 0px 0px; }
|
||||||
|
/* line 72, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-CMSMain.current a .icon, .cms-menu-list li#Menu-CMSMain a:hover .icon { background-position: -32px 0px; }
|
||||||
|
/* line 73, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-AssetAdmin a .icon { background-position: 0px -32px; }
|
||||||
|
/* line 74, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-AssetAdmin.current a .icon, .cms-menu-list li#Menu-AssetAdmin a:hover .icon { background-position: -32px -32px; }
|
||||||
|
|
||||||
|
/* line 3, ../scss/_forms.scss */
|
||||||
|
.cms input, .cms textarea { background-color: #f9f9f9; }
|
||||||
|
/* line 7, ../scss/_forms.scss */
|
||||||
|
.cms input.loading { padding-left: 16px; background: white url(../../images/network-save.gif) no-repeat center left; }
|
||||||
|
/* line 12, ../scss/_forms.scss */
|
||||||
|
.cms .edit-form { padding-bottom: 20px; }
|
||||||
|
/* line 17, ../scss/_forms.scss */
|
||||||
|
.cms .edit-form > fieldset > .ss-tabset > ul { display: none; }
|
||||||
|
/* line 22, ../scss/_forms.scss */
|
||||||
|
.cms .edit-form .Actions { text-align: right; }
|
||||||
|
|
||||||
|
/* line 12, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li { background-color: #afbdc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbdc6), color-stop(100%, #8ea4b2)); background-image: -moz-linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); background-image: linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); border-bottom: 1px solid #aaa; }
|
||||||
|
/* line 17, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li a { display: block; height: 32px; vertical-align: middle; font-size: 14px; text-shadow: #dddddd 1px 1px 1px; color: #333; margin: 5px; }
|
||||||
|
/* line 26, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li a .icon { display: block; float: left; margin-right: 5px; background: url('../images/icons-32.png?1302933372') no-repeat; width: 32px; height: 32px; overflow: hidden; background-position: 0px 0px; }
|
||||||
|
/* line 34, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li a .text { display: block; padding-top: 10px; }
|
||||||
|
/* line 40, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li.current { background-color: #338dc1; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #338dc1), color-stop(100%, #338dc1)); background-image: -moz-linear-gradient(top, #338dc1 0%, #338dc1 100%); background-image: linear-gradient(top, #338dc1 0%, #338dc1 100%); -moz-box-shadow: #333333 0 4px 4px 0; -webkit-box-shadow: #333333 0 4px 4px 0; -o-box-shadow: #333333 0 4px 4px 0; box-shadow: #333333 0 4px 4px 0; }
|
||||||
|
/* line 45, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li.current a { color: white; text-shadow: #333333 1px 1px 1px; }
|
||||||
|
/* line 52, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li li { background-color: #1d76ae; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #1d76ae), color-stop(100%, #1d76ae)); background-image: -moz-linear-gradient(top, #1d76ae 0%, #1d76ae 100%); background-image: linear-gradient(top, #1d76ae 0%, #1d76ae 100%); }
|
||||||
|
/* line 56, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li li a { font-size: 12px; text-shadow: #333333 1px 1px 1px; margin: 0; padding-left: 30px; color: white; }
|
||||||
|
/* line 64, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li li.current a { font-weight: bold; }
|
||||||
|
/* line 71, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-CMSMain a .icon { background-position: 0px 0px; }
|
||||||
|
/* line 72, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-CMSMain.current a .icon, .cms-menu-list li#Menu-CMSMain a:hover .icon { background-position: -32px 0px; }
|
||||||
|
/* line 73, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-AssetAdmin a .icon { background-position: 0px -32px; }
|
||||||
|
/* line 74, ../scss/_menu.scss */
|
||||||
|
.cms-menu-list li#Menu-AssetAdmin.current a .icon, .cms-menu-list li#Menu-AssetAdmin a:hover .icon { background-position: -32px -32px; }
|
||||||
|
|
||||||
|
/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. */
|
||||||
|
/* line 9, ../scss/_forms.scss */
|
||||||
|
.cms input, .cms textarea { background-color: #f9f9f9; }
|
||||||
|
/* line 13, ../scss/_forms.scss */
|
||||||
|
.cms input.loading { padding-left: 16px; background: white url(../../images/network-save.gif) no-repeat center left; }
|
||||||
|
/* line 20, ../scss/_forms.scss */
|
||||||
|
.cms .ui-state-default.ss-ui-action-constructive { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #77b53f), color-stop(100%, #0c8a44)); background-image: -moz-linear-gradient(top, #77b53f 0%, #0c8a44 100%); background-image: linear-gradient(top, #77b53f 0%, #0c8a44 100%); color: white; }
|
||||||
|
/* line 25, ../scss/_forms.scss */
|
||||||
|
.cms .ui-state-default.ss-ui-action-destructive { color: red; }
|
||||||
|
/* line 29, ../scss/_forms.scss */
|
||||||
|
.cms .edit-form { padding-bottom: 20px; }
|
||||||
|
/* line 33, ../scss/_forms.scss */
|
||||||
|
.cms .edit-form > fieldset > .ss-tabset > ul { display: none; }
|
||||||
|
/* line 38, ../scss/_forms.scss */
|
||||||
|
.cms .edit-form .Actions { text-align: right; }
|
||||||
|
|
||||||
|
/** This file defines CMS-specific customizations to the jQuery UI theme. Every rule in this file should be wrapped in the '.cms' selector (to make it more specific), and contain ONLY overwritten jQuery UI rules (with 'ui-' prefix). This file should be fairly short, as we're using our own custom jQuery UI theme already. TODO Add theme reference Use _style.scss to add more generic style information. */
|
||||||
|
/* line 13, ../scss/_uitheme.scss */
|
||||||
|
.cms .ui-widget-content { background-color: #eef2f3; }
|
||||||
|
/* line 17, ../scss/_uitheme.scss */
|
||||||
|
.cms .ui-tabs { padding: 0; }
|
||||||
|
/* line 21, ../scss/_uitheme.scss */
|
||||||
|
.cms .ui-widget-content { border: 0; background-color: #eef2f3; }
|
||||||
|
/* line 26, ../scss/_uitheme.scss */
|
||||||
|
.cms .cms-content-header .ui-widget-content { background: none; }
|
||||||
|
/* line 30, ../scss/_uitheme.scss */
|
||||||
|
.cms .ui-widget-header { background: none; border: 0; }
|
||||||
|
|
||||||
|
/** 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. 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). */
|
||||||
|
/* line 18, ../scss/_style.scss */
|
||||||
body { font-size: 13px; font-family: Verdana, Arial, sans-serif; }
|
body { font-size: 13px; font-family: Verdana, Arial, sans-serif; }
|
||||||
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 14, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
body html, body body, body div, body span, body applet, body object, body iframe, body h1, body h2, body h3, body h4, body h5, body h6, body p, body blockquote, body pre, body a, body abbr, body acronym, body address, body big, body cite, body code, body del, body dfn, body em, body font, body img, body ins, body kbd, body q, body s, body samp, body small, body strike, body strong, body sub, body sup, body tt, body var, body dl, body dt, body dd, body ol, body ul, body li, body fieldset, body form, body label, body legend, body table, body caption, body tbody, body tfoot, body thead, body tr, body th, body td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
body html, body body, body div, body span, body applet, body object, body iframe, body h1, body h2, body h3, body h4, body h5, body h6, body p, body blockquote, body pre, body a, body abbr, body acronym, body address, body big, body cite, body code, body del, body dfn, body em, body font, body img, body ins, body kbd, body q, body s, body samp, body small, body strike, body strong, body sub, body sup, body tt, body var, body dl, body dt, body dd, body ol, body ul, body li, body fieldset, body form, body label, body legend, body table, body caption, body tbody, body tfoot, body thead, body tr, body th, body td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
|
||||||
@ -75,62 +338,45 @@ body q:before, body q:after, body blockquote:before, body blockquote:after { con
|
|||||||
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
/* line 27, ../../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.10.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
|
||||||
body a img { border: none; }
|
body a img { border: none; }
|
||||||
|
|
||||||
/* line 20, ../scss/screen.scss */
|
/* line 24, ../scss/_style.scss */
|
||||||
body * { font-size: 13px; }
|
body * { font-size: 13px; }
|
||||||
|
|
||||||
/* line 24, ../scss/screen.scss */
|
/* line 28, ../scss/_style.scss */
|
||||||
body .ui-widget { font-size: 1em; }
|
body .ui-widget { font-size: 1em; }
|
||||||
|
|
||||||
/* line 30, ../scss/screen.scss */
|
/* line 32, ../scss/_style.scss */
|
||||||
.cms-container { height: 100%; }
|
.cms-content-header { background-color: #a0b2be; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #abbbc4), color-stop(100%, #93a8b6)); background-image: -moz-linear-gradient(top, #abbbc4 0%, #93a8b6 100%); background-image: linear-gradient(top, #abbbc4 0%, #93a8b6 100%); }
|
||||||
|
/* line 36, ../scss/_style.scss */
|
||||||
|
.cms-content-header h2 { float: left; padding: 10px; font-size: 14px; font-weight: bold; }
|
||||||
|
/* line 43, ../scss/_style.scss */
|
||||||
|
.cms-content-header .cms-content-header-tabs { float: left; margin-top: 8px; }
|
||||||
|
|
||||||
/* line 34, ../scss/screen.scss */
|
/* line 53, ../scss/_style.scss */
|
||||||
.cms-menu { width: 250px; overflow: auto; }
|
|
||||||
|
|
||||||
/* line 42, ../scss/screen.scss */
|
|
||||||
.center, .east, .west, .north, .south { display: inline-block; }
|
|
||||||
|
|
||||||
/* line 46, ../scss/screen.scss */
|
|
||||||
.cms-content-tools { width: 250px; overflow: auto; }
|
|
||||||
|
|
||||||
/* line 51, ../scss/screen.scss */
|
|
||||||
.cms-content-form { overflow: auto; }
|
|
||||||
|
|
||||||
/* line 61, ../scss/screen.scss */
|
|
||||||
.cms-menu { background-color: #b0bfc6; }
|
|
||||||
|
|
||||||
/* line 65, ../scss/screen.scss */
|
|
||||||
.cms-content-header { background-color: #a0b2be; }
|
|
||||||
|
|
||||||
/* line 69, ../scss/screen.scss */
|
|
||||||
.cms-content { background-color: #eef2f3; }
|
|
||||||
|
|
||||||
/* line 73, ../scss/screen.scss */
|
|
||||||
.cms-content-tools { background-color: #c6d7df; }
|
.cms-content-tools { background-color: #c6d7df; }
|
||||||
|
|
||||||
/* line 77, ../scss/screen.scss */
|
/* line 59, ../scss/_style.scss */
|
||||||
.cms-logo { background-color: #002a43; }
|
.cms-header { padding: 10px; background-color: #002a43; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #002236), color-stop(50%, #003050), color-stop(100%, #002236)); background-image: -moz-linear-gradient(top, #002236 0%, #003050 50%, #002236 100%); background-image: linear-gradient(top, #002236 0%, #003050 50%, #002236 100%); }
|
||||||
/* line 80, ../scss/screen.scss */
|
/* line 64, ../scss/_style.scss */
|
||||||
|
.cms-header * { color: white; }
|
||||||
|
|
||||||
|
/* line 71, ../scss/_style.scss */
|
||||||
.cms-logo .version { display: none; }
|
.cms-logo .version { display: none; }
|
||||||
|
/* line 75, ../scss/_style.scss */
|
||||||
/* line 88, ../scss/screen.scss */
|
|
||||||
.cms-logo * { color: #3ebae0; }
|
.cms-logo * { color: #3ebae0; }
|
||||||
/* line 92, ../scss/screen.scss */
|
/* line 79, ../scss/_style.scss */
|
||||||
.cms-logo a { display: block; height: 20px; }
|
.cms-logo a { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url(../images/logo_small.png) no-repeat; text-indent: -9999em; }
|
||||||
|
|
||||||
/* line 101, ../scss/screen.scss */
|
/* line 92, ../scss/_style.scss */
|
||||||
.cms-menu li { display: block; height: 50px; background-color: #afbdc6; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #afbdc6), color-stop(100%, #8ea4b2)); background-image: -moz-linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); background-image: linear-gradient(top, #afbdc6 0%, #8ea4b2 100%); }
|
.cms-login-status .logout-link { display: inline-block; height: 25px; width: 25px; float: left; margin-right: 10px; background: url(../images/logout.png) no-repeat; text-indent: -9999em; }
|
||||||
/* line 107, ../scss/screen.scss */
|
|
||||||
.cms-menu li.current { background-color: #409dc9; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #409dc9), color-stop(100%, #1f78b0)); background-image: -moz-linear-gradient(top, #409dc9 0%, #1f78b0 100%); background-image: linear-gradient(top, #409dc9 0%, #1f78b0 100%); }
|
|
||||||
|
|
||||||
/* line 117, ../scss/screen.scss */
|
/* line 86, ../scss/_style.scss */
|
||||||
.ss-loading-screen, .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: #fff; background: -moz-radial-gradient(50% 50% 180deg, circle cover, white, #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, .ss-loading-screen .loading-logo { width: 100%; height: 100%; overflow: hidden; position: absolute; background: #fff; background: -moz-radial-gradient(50% 50% 180deg, circle cover, white, #efefef, #c7c7c7 100%); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#e3e3e3), to(white)); z-index: 100000; margin: 0; padding: 0; }
|
||||||
|
|
||||||
/* line 131, ../scss/screen.scss */
|
/* line 100, ../scss/_style.scss */
|
||||||
.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
|
.ss-loading-screen .loading-logo { background-url: url(../images/logo.gif); background-repeat: no-repeat; background-color: transparent; background-position: 50% 50%; }
|
||||||
/* line 137, ../scss/screen.scss */
|
/* line 106, ../scss/_style.scss */
|
||||||
.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
|
.ss-loading-screen p { width: 100%; text-align: center; position: absolute; bottom: 80px; }
|
||||||
/* line 143, ../scss/screen.scss */
|
/* line 112, ../scss/_style.scss */
|
||||||
.ss-loading-screen p span.notice { display: inline-block; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); }
|
.ss-loading-screen p span.notice { display: inline-block; font-size: 14px; padding: 10px 20px; color: #dc7f00; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); -o-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.1); }
|
||||||
/* line 161, ../scss/screen.scss */
|
/* line 130, ../scss/_style.scss */
|
||||||
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
|
.ss-loading-screen .loading-animation { display: none; position: absolute; left: 49%; top: 75%; }
|
||||||
|
|||||||
BIN
admin/images/icons-32.png
Normal file
BIN
admin/images/icons-32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
admin/images/logo_small.png
Normal file
BIN
admin/images/logo_small.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 955 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
BIN
admin/images/logout.png
Normal file
BIN
admin/images/logout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 935 B |
@ -1 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* This file defines common styles for form elements used throughout the CMS interface.
|
||||||
|
* It is an addition to the base styles defined in sapphire/css/Form.css.
|
||||||
|
*/
|
||||||
|
.cms {
|
||||||
|
|
||||||
|
// Form fields
|
||||||
|
|
||||||
|
input, textarea {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.loading {
|
||||||
|
padding-left: 16px;
|
||||||
|
background: #fff url(../../images/network-save.gif) no-repeat center left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-form {
|
||||||
|
|
||||||
|
padding-bottom: 20px;
|
||||||
|
|
||||||
|
// Hide first level tabs for CMS, see CMSEditForm.ss
|
||||||
|
& > fieldset > .ss-tabset > ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO Unclear if "button bar" concept is edit form specific
|
||||||
|
.Actions {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
65
admin/scss/_layout.scss
Normal file
65
admin/scss/_layout.scss
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
/**
|
||||||
|
* This file defines the structural layout of the CMS interface.
|
||||||
|
* Ideally, you should be able to lay out the base elements of the CMS with only this file.
|
||||||
|
*
|
||||||
|
* Please put any presentational definitions (color, fonts, backgrounds, paddings)
|
||||||
|
* into _style.scss or _uitheme.scss instead.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden; // avoid jlayout jitter when resizing
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-container {
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-menu {
|
||||||
|
width: 250px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content {
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-menu,
|
||||||
|
.cms-content,
|
||||||
|
.cms-content-header,
|
||||||
|
.cms-content-tools,
|
||||||
|
.cms-content-form {
|
||||||
|
@include inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-tools {
|
||||||
|
width: 250px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-form {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-header {
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-actions {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-logo {
|
||||||
|
height: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-login-status {
|
||||||
|
height: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
76
admin/scss/_menu.scss
Normal file
76
admin/scss/_menu.scss
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
.cms-menu {
|
||||||
|
z-index: 10;
|
||||||
|
background-color: #b0bfc6;
|
||||||
|
@include box-shadow(#aaa, 3px, 0, 3px);
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-menu-list {
|
||||||
|
li {
|
||||||
|
background-color: #afbdc6;
|
||||||
|
@include linear-gradient(color-stops(#afbdc6, #8ea4b2));
|
||||||
|
border-bottom: 1px solid #aaa;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
height: 32px;
|
||||||
|
vertical-align: middle;
|
||||||
|
font-size: 14px;
|
||||||
|
@include text-shadow(#ddd);
|
||||||
|
color: #333;
|
||||||
|
margin: 5px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
margin-right: 5px;
|
||||||
|
@include sprite-background("icons-32.png");
|
||||||
|
@include sprite-position(1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: block;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
background-color: #338dc1;
|
||||||
|
@include linear-gradient(color-stops(#338dc1, #338dc1));
|
||||||
|
@include box-shadow(#333, 0, 4px, 4px);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
@include text-shadow(#333);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// nested elements
|
||||||
|
li {
|
||||||
|
background-color: #1d76ae;
|
||||||
|
@include linear-gradient(color-stops(#1d76ae, #1d76ae));
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 12px;
|
||||||
|
@include text-shadow(#333);
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 30px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
li#Menu-CMSMain a .icon {@include sprite-position(1, 1);}
|
||||||
|
li#Menu-CMSMain.current a .icon, li#Menu-CMSMain a:hover .icon {@include sprite-position(2, 1);}
|
||||||
|
li#Menu-AssetAdmin a .icon {@include sprite-position(1, 2);}
|
||||||
|
li#Menu-AssetAdmin.current a .icon, li#Menu-AssetAdmin a:hover .icon {@include sprite-position(2, 2);}
|
||||||
|
|
||||||
|
}
|
||||||
156
admin/scss/_style.scss
Normal file
156
admin/scss/_style.scss
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*
|
||||||
|
* 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).
|
||||||
|
*/
|
||||||
|
|
||||||
|
// main styles
|
||||||
|
|
||||||
|
body {
|
||||||
|
@include global-reset;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: Verdana, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body * {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body .ui-widget {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-header {
|
||||||
|
background-color: #a0b2be;
|
||||||
|
@include linear-gradient(color-stops(#abbbc4, #93a8b6));
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
float: left;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-header-tabs {
|
||||||
|
float: left;
|
||||||
|
margin-top: 8px; // TODO Ingo is too dumb to do bottom vertical position
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-header-actions {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-tools {
|
||||||
|
background-color: #c6d7df;
|
||||||
|
}
|
||||||
|
|
||||||
|
// header and logo
|
||||||
|
|
||||||
|
.cms-header {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #002a43;
|
||||||
|
@include linear-gradient(color-stops(#002236, #003050, #002236));
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-logo {
|
||||||
|
|
||||||
|
.version {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
color: #3ebae0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
background: url(../images/logo_small.png) no-repeat;
|
||||||
|
text-indent: -9999em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-login-status {
|
||||||
|
|
||||||
|
.logout-link {
|
||||||
|
display: inline-block;
|
||||||
|
height: 25px;
|
||||||
|
width: 25px;
|
||||||
|
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;
|
||||||
|
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;
|
||||||
|
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
|
||||||
|
-moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||||
|
-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||||
|
-o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||||
|
box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-animation {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 49%;
|
||||||
|
top: 75%;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,10 @@
|
|||||||
// Added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree
|
/**
|
||||||
|
* This file defines the jstree base styling (see http://jstree.com), as well as any
|
||||||
|
* customizations (see bottom of file).
|
||||||
|
*
|
||||||
|
* The styles are usually added through jstree.js on DOM load,
|
||||||
|
* but we need it earlier in order to correctly display the uninitialized tree.
|
||||||
|
*/
|
||||||
|
|
||||||
.jstree {
|
.jstree {
|
||||||
ul {
|
ul {
|
||||||
@ -348,3 +354,13 @@ li.jstree-closed > ul {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Custom styles
|
||||||
|
.cms {
|
||||||
|
.jstree-apple.jstree-focused {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.jstree-apple > ul {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
34
admin/scss/_uitheme.scss
Normal file
34
admin/scss/_uitheme.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* This file defines CMS-specific customizations to the jQuery UI theme.
|
||||||
|
* Every rule in this file should be wrapped in the '.cms' selector (to make it more specific),
|
||||||
|
* and contain ONLY overwritten jQuery UI rules (with 'ui-' prefix).
|
||||||
|
*
|
||||||
|
* This file should be fairly short, as we're using our own custom jQuery UI theme already.
|
||||||
|
* TODO Add theme reference
|
||||||
|
*
|
||||||
|
* Use _style.scss to add more generic style information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.cms {
|
||||||
|
.ui-widget-content {
|
||||||
|
background-color: $widget-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-tabs {
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-widget-content {
|
||||||
|
border: 0;
|
||||||
|
background-color: #eef2f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cms-content-header .ui-widget-content {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-widget-header {
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,167 +1,22 @@
|
|||||||
|
/**
|
||||||
|
* This file is the central collection of included modules, links to custom SCSS files,
|
||||||
|
* and any global SCSS variable definitions.
|
||||||
|
*
|
||||||
|
* DO NOT ADD stylesheet rules to this file directly!
|
||||||
|
*
|
||||||
|
* Note: By prefixing files with an underscore, they won't create individual CSS files.
|
||||||
|
*/
|
||||||
|
|
||||||
@import "compass/reset";
|
@import "compass/reset";
|
||||||
|
@import "compass/css3";
|
||||||
|
@import "compass/utilities/sprites/sprite-img";
|
||||||
|
|
||||||
|
// colour definitions
|
||||||
|
$widget-bg: #eef2f3;
|
||||||
|
|
||||||
|
@import "layout.scss";
|
||||||
@import "tree.scss";
|
@import "tree.scss";
|
||||||
|
@import "menu.scss";
|
||||||
@import "forms.scss";
|
@import "forms.scss";
|
||||||
@import "compass/css3/gradient";
|
@import "uitheme.scss";
|
||||||
|
@import "style.scss";
|
||||||
html, body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden; // avoid jlayout jitter when resizing
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
@include global-reset;
|
|
||||||
font-size: 13px;
|
|
||||||
font-family: Verdana, Arial, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body * {
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body .ui-widget {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// layout
|
|
||||||
|
|
||||||
.cms-container {
|
|
||||||
height: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-menu {
|
|
||||||
width: 250px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content {
|
|
||||||
}
|
|
||||||
|
|
||||||
.center, .east, .west, .north, .south {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content-tools {
|
|
||||||
width: 250px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content-form {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content-header {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// main styles
|
|
||||||
|
|
||||||
.cms-menu {
|
|
||||||
background-color: #b0bfc6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content-header {
|
|
||||||
background-color: #a0b2be
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content {
|
|
||||||
background-color: #eef2f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content-tools {
|
|
||||||
background-color: #c6d7df;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-logo {
|
|
||||||
background-color: #002a43;
|
|
||||||
|
|
||||||
.version {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// logo
|
|
||||||
|
|
||||||
.cms-logo {
|
|
||||||
* {
|
|
||||||
color: #3ebae0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// menu
|
|
||||||
|
|
||||||
.cms-menu {
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #afbdc6;
|
|
||||||
@include linear-gradient(color-stops(#afbdc6, #8ea4b2));
|
|
||||||
|
|
||||||
&.current {
|
|
||||||
background-color: #409dc9;
|
|
||||||
@include linear-gradient(color-stops(#409dc9, #1f78b0));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// loading screen
|
|
||||||
|
|
||||||
.ss-loading-screen,
|
|
||||||
.ss-loading-screen .loading-logo {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
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;
|
|
||||||
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
|
|
||||||
-moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
|
||||||
-webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
|
||||||
-o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
|
||||||
box-shadow: 1px 1px 15px rgba(0,0,0, 0.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-animation {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
left: 49%;
|
|
||||||
top: 75%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -20,7 +20,7 @@
|
|||||||
<a href="$Link">$Title</a>
|
<a href="$Link">$Title</a>
|
||||||
<% if Title == 'Edit Page' %>
|
<% if Title == 'Edit Page' %>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Content</a></li>
|
<li class="current"><a href="#">Content</a></li>
|
||||||
<li><a href="#">Settings</a></li>
|
<li><a href="#">Settings</a></li>
|
||||||
<li><a href="#">Reports</a></li>
|
<li><a href="#">Reports</a></li>
|
||||||
<li><a href="#">History</a></li>
|
<li><a href="#">History</a></li>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user