diff options
Diffstat (limited to 'p/themes/Ansum/_sidebar.scss')
| -rw-r--r-- | p/themes/Ansum/_sidebar.scss | 480 |
1 files changed, 248 insertions, 232 deletions
diff --git a/p/themes/Ansum/_sidebar.scss b/p/themes/Ansum/_sidebar.scss index 87d5bd1a9..86f3e346d 100644 --- a/p/themes/Ansum/_sidebar.scss +++ b/p/themes/Ansum/_sidebar.scss @@ -1,142 +1,141 @@ /*=== Tree */ .tree { - margin: 10px 0; - - &#sidebar{ - scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05); - scrollbar-color: unquote($sid-font-color+"33") unquote($sid-font-color+"22"); - - - } - - - .tree-folder{ - border-bottom: 1px solid $sid-sep; - - -moz-box-shadow: inset -1px -11px 8px #00000033; - -webkit-box-shadow: inset -1px -11px 8px #00000033; - box-shadow: inset -1px -11px 8px #00000033; - - .tree-folder-title { - position: relative; - background: $sid-bg; - font-size: 0.85rem; - letter-spacing: 1px; - padding: 12px 16px; - font-weight: 700; - text-transform: uppercase; - - .title { - background: inherit; - color: $sid-font-color; - &:hover{ - text-decoration: none; - } - } - } - &.active { - .tree-folder-title { - background: $sid-bg; - font-weight: bold; - } + margin: 10px 0; + + &#sidebar { + scrollbar-color: rgba(255,255, 0, 0.1) rgba(0, 0, 0, 0.05); + scrollbar-color: unquote($sid-font-color+"33") unquote($sid-font-color+"22"); } - .tree-folder-items { - background: $sid-bg-alt; - .item{ - padding: 0 1rem; - line-height: 2.5rem; - font-size: 1rem; - font-weight: 400; - @include transition(all, 0.15s, ease-in-out); + .tree-folder { + border-bottom: 1px solid $sid-sep; + box-shadow: inset -1px -11px 8px #0003; + + .tree-folder-title { + padding: 12px 16px; + background: $sid-bg; + position: relative; + font-size: 0.85rem; + letter-spacing: 1px; + font-weight: 700; + text-transform: uppercase; + + .title { + background: inherit; + color: $sid-font-color; + + &:hover { + text-decoration: none; + } + } + } - &.active{ - background: $sid-active; + &.active { + .tree-folder-title { + background: $sid-bg; + font-weight: bold; + } + } - .dropdown li a{ - color: $main-font-color; + .tree-folder-items { + background: $sid-bg-alt; - &:hover{ - color: $sid-font-color; - } - } + .item { + padding: 0 1rem; + line-height: 2.5rem; + font-size: 1rem; + font-weight: 400; - a{ - color: $sid-active-font; - } - } + @include transition(all, 0.15s, ease-in-out); - &:hover{ - background: $sid-bg-dark; - } + &.active { + background: $sid-active; + + .dropdown li a { + color: $main-font-color; + + &:hover { + color: $sid-font-color; + } + } + + a { + color: $sid-active-font; + } + } + + &:hover { + background: $sid-bg-dark; + } - a{ - text-decoration: none; - color: $sid-font-color; + a { + text-decoration: none; + color: $sid-font-color; + } + } + + .feed .item-title:not([data-unread="0"])::before { + margin: 11px 6px 0 4px; + padding: 3px 4px; + background: $sid-pills; + display: block; + float: left; + font-size: 0.75rem; + border-radius: 12px; + content: attr(data-unread); + text-align: center; + line-height: 0.75rem; + } } - } - - .feed .item-title:not([data-unread="0"])::before { - content: attr(data-unread); - background: $sid-pills; - font-size: 0.75rem; - display: block; - float: left; - padding: 3px 4px; - text-align:center; - border-radius: 12px; - margin: 11px 6px 0 4px; - line-height: 0.75rem; - } - .feed .item-title:not([data-unread="0"]) { - - } } - } } /*=== Buttons */ .stick { - vertical-align: middle; - font-size: 0; - - input, .btn { - border-radius: 0; - } - .btn:first-child, - input:first-child { - border-radius: 5px 0 0 5px; - } - .btn:last-child, input:last-child, .btn + .dropdown > .btn { - border-radius: 0 5px 5px 0; - } - .btn + .btn, - .btn + input, - .btn + .dropdown > .btn, - input + .btn, - input + input, - input + .dropdown > .btn, - .dropdown + .btn, - .dropdown + input, - .dropdown + .dropdown > .btn { - border-left: 1px solid $grey-medium-light; - } + vertical-align: middle; + font-size: 0; + + input, .btn { + border-radius: 0; + } + + .btn:first-child, + input:first-child { + border-radius: 5px 0 0 5px; + } + + .btn:last-child, input:last-child, .btn + .dropdown > .btn { + border-radius: 0 5px 5px 0; + } + + .btn + .btn, + .btn + input, + .btn + .dropdown > .btn, + input + .btn, + input + input, + input + .dropdown > .btn, + .dropdown + .btn, + .dropdown + input, + .dropdown + .dropdown > .btn { + border-left: 1px solid $grey-medium-light; + } } .aside { - background: $sid-bg; - - - &.aside_feed { - padding: 10px 0; - text-align: center; background: $sid-bg; - border-right: 1px solid $sid-sep; - } - &.aside_feed .tree { - margin: 10px 0 50px; - } + + + &.aside_feed { + padding: 10px 0; + text-align: center; + background: $sid-bg; + border-right: 1px solid $sid-sep; + } + + &.aside_feed .tree { + margin: 10px 0 50px; + } } @@ -146,154 +145,171 @@ /*=== Navigation */ - -.nav-list{ - .nav-header, - .item{ - height: 2.5em; - line-height: 2.5em; - font-size: 1rem; - } - .item{ - background: $sid-bg; - @include transition(all, 0.15s, ease-in-out); - a{ - padding: 0 1rem; - color: $sid-font-color; - } - .error{ - a{ - color: $alert-bg; - } +.nav-list { + .nav-header, + .item { + height: 2.5em; + line-height: 2.5em; + font-size: 1rem; } - &:hover{ - background: $sid-bg-dark; - color: $sid-font-color; - - .error{ - a{ - color: $sid-font-color; - background: $main-first; + + .item { + background: $sid-bg; + + @include transition(all, 0.15s, ease-in-out); + + a { + padding: 0 1rem; + color: $sid-font-color; } - } - .empty{ - a{ - color: $sid-font-color; - background: $warning-bg; + + .error { + a { + color: $alert-bg; + } } - } - - a{ - color: $sid-font-color; - text-decoration: none; - } - } - &.active{ - background: $main-first; - color: $white; - - .error{ - a{ - color: $white; - background: $main-first; + + &:hover { + background: $sid-bg-dark; + color: $sid-font-color; + + .error { + a { + background: $main-first; + color: $sid-font-color; + } + } + + .empty { + a { + background: $warning-bg; + color: $sid-font-color; + } + } + + a { + color: $sid-font-color; + text-decoration: none; + } } - } - .empty{ - a{ - color: $white; - background: $warning-bg; + &.active { + background: $main-first; + color: $white; + + .error { + a { + background: $main-first; + color: $white; + } + } + + .empty { + a { + background: $warning-bg; + color: $white; + } + } + + a { + color: $white; + text-decoration: none; + } } - } - - a{ - color: $white; - text-decoration: none; - } + } - - } - &.empty{ - a{ - color: $warning-bg; + + &.empty { + a { + color: $warning-bg; + } } - } - .disable{ - text-align: center; - background: $grey-lighter; - color: $grey-medium-dark; - } - .nav-header { - padding: 0 10px; - font-weight: bold; - color: $grey-dark; - text-transform: uppercase; - letter-spacing: 1px; - margin-top: 1rem; - } - - .nav-form { - padding: 3px; - text-align: center; - } - - .nav-head { - margin: 0; - text-align: right; - // background: #34495e; - color: $white; - a { - color: $white; - } - .item { - padding: 5px 10px; - font-size: 0.9rem; - line-height: 1.5rem; - } - } + .disable { + text-align: center; + background: $grey-lighter; + color: $grey-medium-dark; + } + + .nav-header { + padding: 0 10px; + font-weight: bold; + color: $grey-dark; + text-transform: uppercase; + letter-spacing: 1px; + margin-top: 1rem; + } + + .nav-form { + padding: 3px; + text-align: center; + } + + .nav-head { + margin: 0; + text-align: right; + // background: #34495e; + color: $white; + + a { + color: $white; + } + + .item { + padding: 5px 10px; + font-size: 0.9rem; + line-height: 1.5rem; + } + } } /*=== Aside main page (categories) */ .aside_feed .tree-folder-title > .title:not([data-unread="0"])::after { - position: absolute; - right: 0; - line-height: 1.5rem; - background: $sid-pills; - border-radius: 12px; - padding: 0 0.75rem; - margin: -0.5rem 1rem 0 0; - text-align: center; + margin: -0.5rem 1rem 0 0; + padding: 0 0.75rem; + background: $sid-pills; + border-radius: 12px; + position: absolute; + right: 0; + line-height: 1.5rem; + text-align: center; } .feed.item.empty.active { - background: $grey-dark; + background: $grey-dark; } + .feed.item.error.active { - background: $grey-dark; + background: $grey-dark; } + .feed.item.empty, .feed.item.empty > a { - color: $grey-dark; + color: $grey-dark; } + .feed.item.error, .feed.item.error > a { - color: $grey-dark; + color: $grey-dark; } + .feed.item.empty.active, .feed.item.error.active, .feed.item.empty.active > a, .feed.item.error.active > a { - color: $white; + color: $white; } + .aside_feed .tree-folder-items .dropdown-menu::after { - left: 2px; + left: 2px; } + .aside_feed .tree-folder-items .item .dropdown-target:target ~ .dropdown-toggle > .icon, .aside_feed .tree-folder-items .item:hover .dropdown-toggle > .icon, .aside_feed .tree-folder-items .item.active .dropdown-toggle > .icon { - border-radius: 3px; + border-radius: 3px; } -.aside_feed .stick #btn-importExport{ - border-left-color: $sid-bg; + +.aside_feed .stick #btn-importExport { + border-left-color: $sid-bg; } |
