210 lines
8.3 KiB
SCSS
210 lines
8.3 KiB
SCSS
|
@charset "utf-8";
|
||
|
|
/*!
|
||
|
|
* @copyright: https://github.com/divio/django-cms
|
||
|
|
*/
|
||
|
|
|
||
|
|
//######################################################################################################################
|
||
|
|
// #IMPORT SETTINGS#
|
||
|
|
@import "settings/default";
|
||
|
|
|
||
|
|
//######################################################################################################################
|
||
|
|
// #PAGETREE#
|
||
|
|
|
||
|
|
// colors
|
||
|
|
$color-font: #666;
|
||
|
|
|
||
|
|
$color-border: #dededc;
|
||
|
|
$color-border-light: #fafafa;
|
||
|
|
$color-border-medium: #ddd;
|
||
|
|
|
||
|
|
$color-background-light: #fefefe;
|
||
|
|
$color-background-light-hover: #f5f5f5;
|
||
|
|
|
||
|
|
$color-background-blue: #f3fbfe;
|
||
|
|
$color-background-blue-hover: #e6f6fd;
|
||
|
|
|
||
|
|
// pagetree
|
||
|
|
#sitemap {
|
||
|
|
padding:0; margin:0; margin:0; background:$color-background-light;
|
||
|
|
|
||
|
|
a { text-decoration:none; outline:none; border:none; }
|
||
|
|
a:hover { text-decoration:underline; }
|
||
|
|
|
||
|
|
li, ul { list-style-type:none; }
|
||
|
|
li input.hidden { position: absolute; left: -9999em; }
|
||
|
|
|
||
|
|
// icons
|
||
|
|
li a.icon, li span.icon, li a.move, li a.copy, li a.edit, li a.advanced-settings, li span.info {
|
||
|
|
display: inline-block; width: 18px; height: 18px; margin-top:5px;
|
||
|
|
background: url('../img/pagetree/sprite.png') no-repeat 0 0; }
|
||
|
|
li a.move { background-position:-20px -20px; margin-top:0; }
|
||
|
|
li a.copy { background-position:-40px -60px; margin-top:0; }
|
||
|
|
li a.edit { background-position:-40px -20px; margin-top:0; }
|
||
|
|
li a.advanced-settings { background-position:-60px -60px; margin-top:0; }
|
||
|
|
li span.info { background-position:-81px -20px; margin-top:-1px; cursor:pointer; }
|
||
|
|
|
||
|
|
li a.selector-add { background-position:-20px 0; margin-left:4px; margin-top:-1px; }
|
||
|
|
|
||
|
|
li a.addlink,
|
||
|
|
li a.deletelink { display:inline-block; width:10px; height:10px; padding:0; margin:0 0 0 4px; background-position:0 0; }
|
||
|
|
li .col-softroot span.icon { background-position:-80px 0; margin-top:0; }
|
||
|
|
li .col-apphook span.icon { background-position:-40px -80px; margin-top:0; }
|
||
|
|
|
||
|
|
li a.move span, li a.copy span, li a.selector-add span,
|
||
|
|
li a.addlink span, li a.deletelink span, li a.edit span, li a.advanced-settings span, li span.info span,
|
||
|
|
.col-navigation input, .col-published input { display:none; }
|
||
|
|
|
||
|
|
// header
|
||
|
|
ul.header { position:relative; top:1px; }
|
||
|
|
ul.header, ul.header li { padding:0; margin:0; border:none; background:none; }
|
||
|
|
ul.header li { color:$color-font; font-size:11px; font-weight:400; height:16px; padding:5px 0 4px 5px;
|
||
|
|
border-bottom:1px solid $color-border; background:$color-background-light; }
|
||
|
|
ul.header li .cont { height:15px; border:none !important; background:none !important; }
|
||
|
|
ul.header li .col1 { font-size:10px; }
|
||
|
|
ul.header li .col2 > div { font-size:10px; line-height:14px; border:none; background:none; }
|
||
|
|
|
||
|
|
// row
|
||
|
|
li .cont { display:block; border-top:1px solid $color-border !important; overflow: visible !important; }
|
||
|
|
li.open > .cont { border-bottom:1px solid $color-border !important; }
|
||
|
|
li.open ul .cont { border-top:none !important; border-bottom:1px solid $color-border !important; }
|
||
|
|
li.moveable > div { border-bottom:none !important; }
|
||
|
|
li.last.leaf .cont, li.last.closed .cont { border-bottom:none !important; }
|
||
|
|
.tree-default .col-navigation, .tree-default .col-published { line-height:30px; }
|
||
|
|
// add additional border to separate categories
|
||
|
|
li.open ul { margin-left:0; border-bottom:1px solid $color-border !important; }
|
||
|
|
li.open.last ul { border-bottom:none !important; }
|
||
|
|
li.open ul.last { border-bottom:none !important; }
|
||
|
|
|
||
|
|
li .col1 > div { text-align:center; }
|
||
|
|
li .col1 .title { background:none; white-space: nowrap; }
|
||
|
|
li .col1 .success { color:$color-font; padding-left:10px; }
|
||
|
|
li .col1 a.changelink { display:none; line-height:27px; margin:6px 0 0 10px !important; }
|
||
|
|
li .col1 .title, li .col1 .success { float:left; line-height:29px; height:28px; padding-left:20px; }
|
||
|
|
|
||
|
|
li .move-target-container { display:none; float:left;
|
||
|
|
font-size: 14px; line-height:27px; margin-right:10px; }
|
||
|
|
li .move-target-container a:hover { text-decoration: none; }
|
||
|
|
li .move-target { display:inline-block; padding: 2px 8px; border-left: 1px solid $color-border-medium; }
|
||
|
|
li .move-target:first-child { border-left:none; }
|
||
|
|
|
||
|
|
li .col2 > div {
|
||
|
|
float:left; line-height:28px; white-space:nowrap; text-align:center;
|
||
|
|
width:auto; height:28px; padding:0 5px; border-left:1px solid $color-border-medium;
|
||
|
|
}
|
||
|
|
li .col2 > div a, li .col2 > div span { vertical-align:middle; }
|
||
|
|
// hide items
|
||
|
|
.cont { position:relative; }
|
||
|
|
.col1, .col2 { position:relative; z-index:10; }
|
||
|
|
.col2 { position:absolute; top:0; right:0; z-index:100; }
|
||
|
|
.moveable { position:relative; z-index:100; }
|
||
|
|
.moveable:hover { z-index:1000; }
|
||
|
|
.moveable:hover .cont { position:relative; z-index:1000; }
|
||
|
|
.success { float:right !important; padding:5px 10px !important; position:absolute; right:0; }
|
||
|
|
|
||
|
|
// row hover states
|
||
|
|
li .cont:hover { background:$color-border-light; }
|
||
|
|
|
||
|
|
// custom col asignments
|
||
|
|
li.moveable .col1 .title { background:url('../img/pagetree/tree-li-drag.gif') no-repeat 0 0; }
|
||
|
|
li .col-language a { text-transform:uppercase; }
|
||
|
|
|
||
|
|
// edit button
|
||
|
|
.cont:hover .col1 a.changelink { display:block; }
|
||
|
|
|
||
|
|
// active state
|
||
|
|
.cont-active { background:#f7f7f7; }
|
||
|
|
.cont-pagetype { background:white; }
|
||
|
|
|
||
|
|
// drag modus
|
||
|
|
li#dragged { min-width:500px; }
|
||
|
|
li#dragged .col2 { display:none; }
|
||
|
|
|
||
|
|
// info handling
|
||
|
|
.info-details { display:none; }
|
||
|
|
li .info:hover { position:relative;
|
||
|
|
.info-details { display:block; }
|
||
|
|
}
|
||
|
|
.info-details { cursor:default;
|
||
|
|
position:absolute; right:-6px; top:-6px; z-index:100;
|
||
|
|
text-align:left; line-height:18px; padding:5px 10px;
|
||
|
|
background:white; border:1px solid #ccc; @include border-radius(3px 0 3px 3px);
|
||
|
|
mark { font-weight:bold; background:none; font-style:normal;
|
||
|
|
@include inline-block(); min-width:100px; }
|
||
|
|
span { display:inline !important; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// filter button on top right
|
||
|
|
#changelist-filter-button { line-height:30px;
|
||
|
|
display:block; position:absolute; right:0; top:0; z-index:1000;
|
||
|
|
width:150px; height:auto; padding:0 0 0 10px; margin:0;
|
||
|
|
border:1px solid $color-border-medium; border-right:none; border-top:none; background:$color-border-light;
|
||
|
|
}
|
||
|
|
#changelist-filter { top:30px;
|
||
|
|
h2 { display:none; }
|
||
|
|
}
|
||
|
|
// remove background assigned from django
|
||
|
|
.change-list .filtered { min-height:auto; background:white !important; }
|
||
|
|
|
||
|
|
// only visible on multiple sites
|
||
|
|
#site-selector { float:left; margin:9px 18px 0 8px; }
|
||
|
|
|
||
|
|
// loader on top right
|
||
|
|
#loader-message { position:fixed; top:0; right:0; padding:4px 8px; background:white; display:none; }
|
||
|
|
|
||
|
|
/* TODO this should be defined inside djangocms-admin.css instead (3.1) */
|
||
|
|
#sitemap {
|
||
|
|
border:1px solid $color-border;
|
||
|
|
ul.header li .col2 > div { padding:0 5.5px; }
|
||
|
|
li .col-softroot span.icon {
|
||
|
|
width: 18px !important; height: 18px !important; margin:0 !important;
|
||
|
|
background: url('../img/pagetree/sprite.png') -80px 0 no-repeat !important; }
|
||
|
|
li .col-apphook span.icon {
|
||
|
|
width: 18px !important; height: 18px !important; margin:0 !important;
|
||
|
|
background: url('../img/pagetree/sprite.png') -40px -80px no-repeat !important; }
|
||
|
|
li .col-language span {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
width:12px !important; height:12px !important; margin:-3px 0 0 !important;
|
||
|
|
@include inline-block();
|
||
|
|
@include border-radius(7px);
|
||
|
|
color: transparent;
|
||
|
|
// colors used within the tree
|
||
|
|
&.dirty { background-color:#6ba6ff;
|
||
|
|
-webkit-animation:pulsate 2.5s ease-out infinite;
|
||
|
|
-moz-animation:pulsate 2.5s ease-out infinite;
|
||
|
|
animation:pulsate 2.5s ease-out infinite;
|
||
|
|
}
|
||
|
|
&.empty { border: 1px solid #b3b3b3; background-color:transparent; }
|
||
|
|
&.unpublished { background-color:#b3b3b3; }
|
||
|
|
&.unpublishedparent { background-color:#b3b3b3; }
|
||
|
|
&.published { background-color:#65b417; }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// dropdown for language change
|
||
|
|
.col-language { position:relative; }
|
||
|
|
#sitemap .tree li .col-language
|
||
|
|
.language-tooltip { display:none; position:absolute; right:20px; top:4px; z-index:9999;
|
||
|
|
line-height:1; padding:4px 6px; font-size:11px; color:#ccc;
|
||
|
|
background-color:black; background:rgba(black, 0.8); border:none;
|
||
|
|
@include border-radius(3px);
|
||
|
|
a { color:#ddd; }
|
||
|
|
a:hover { color:white; text-decoration:none; }
|
||
|
|
&:before { display:block; width:0; height:0;
|
||
|
|
position:absolute; top:50%; right:-5px; margin-top:-4px; content:" ";
|
||
|
|
border-top: 4px solid transparent;
|
||
|
|
border-bottom: 4px solid transparent;
|
||
|
|
border-left: 5px solid rgba(black, 0.8);
|
||
|
|
}
|
||
|
|
&.language-tooltip-multiple a:first-child:after { content:" - "; }
|
||
|
|
}
|
||
|
|
|
||
|
|
#marker { margin-top:1px; }
|
||
|
|
|
||
|
|
// animation for publishing
|
||
|
|
@-webkit-keyframes pulsate {
|
||
|
|
0% { opacity:0.5; }
|
||
|
|
50% { opacity:1; }
|
||
|
|
100% { opacity:0.5; }
|
||
|
|
}
|