|
|
@@ -0,0 +1,1134 @@
|
|
|
+@charset "UTF-8";
|
|
|
+//colors
|
|
|
+
|
|
|
+$color_text: #181621;
|
|
|
+$color_light: #FCFCFC;
|
|
|
+$color_nav: #0062be;
|
|
|
+$color_aside: #22303d;
|
|
|
+$color_alert: #FA8052;
|
|
|
+$color_good: #5EAABF;
|
|
|
+$color_bad: #B0425B;
|
|
|
+$color_stared: #FFF6DA;
|
|
|
+$color_unread: #FFF3ED;
|
|
|
+$color_hover: #FFFFFF;
|
|
|
+
|
|
|
+// @extend-elements
|
|
|
+%input {
|
|
|
+ min-height: 25px;
|
|
|
+ margin-top: 4px;
|
|
|
+ line-height: 25px;
|
|
|
+ vertical-align: middle;
|
|
|
+ background: $color_light;
|
|
|
+ border: none;
|
|
|
+ padding-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+%invalid {
|
|
|
+ color: $color_bad;
|
|
|
+ border-color: $color_bad;
|
|
|
+ box-shadow: none;
|
|
|
+}
|
|
|
+
|
|
|
+%nav-list {
|
|
|
+ height: 2.5em;
|
|
|
+ line-height: 2.5em;
|
|
|
+ font-size: 0.9rem;
|
|
|
+}
|
|
|
+
|
|
|
+%dropdown {
|
|
|
+ padding: 0 22px;
|
|
|
+ line-height: 2.5em;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ color: $color_light;
|
|
|
+}
|
|
|
+
|
|
|
+%after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+
|
|
|
+// /@extend-elements
|
|
|
+html,
|
|
|
+body {
|
|
|
+ height: 100%;
|
|
|
+ font-family: Helvetica, Arial, sans-serif;
|
|
|
+}
|
|
|
+
|
|
|
+a {
|
|
|
+ color: darken( $color_nav, 10%);
|
|
|
+ outline: none;
|
|
|
+ &.btn {
|
|
|
+ min-height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ text-decoration: none;
|
|
|
+ &:hover {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+img {
|
|
|
+ &.icon:hover {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+div#stream {
|
|
|
+ margin-top: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+sup {
|
|
|
+ top: -0.3em;
|
|
|
+}
|
|
|
+
|
|
|
+legend {
|
|
|
+ display: inline-block;
|
|
|
+ width: auto;
|
|
|
+ margin: 20px 0 5px;
|
|
|
+ padding: 5px 20px;
|
|
|
+ font-size: 1.4em;
|
|
|
+ clear: both;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+}
|
|
|
+
|
|
|
+label {
|
|
|
+ min-height: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: $color_light;
|
|
|
+}
|
|
|
+
|
|
|
+textarea {
|
|
|
+ width: 360px;
|
|
|
+ height: 100px;
|
|
|
+ @extend %input;
|
|
|
+ &:focus {
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ border-color: darken( $color_nav, 10%);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+input,
|
|
|
+select {
|
|
|
+ @extend %input;
|
|
|
+ &:focus {
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ border-color: darken( $color_nav, 10%);
|
|
|
+ }
|
|
|
+ &:invalid {
|
|
|
+ @extend %invalid;
|
|
|
+ }
|
|
|
+ &:disabled {
|
|
|
+ background: $color_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+input {
|
|
|
+ &.extend {
|
|
|
+ transition: width 200ms linear;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+option {
|
|
|
+ padding: 0 .5em;
|
|
|
+}
|
|
|
+
|
|
|
+table {
|
|
|
+ border-collapse: collapse;
|
|
|
+}
|
|
|
+
|
|
|
+tr,
|
|
|
+td,
|
|
|
+th {
|
|
|
+ padding: 0.5em;
|
|
|
+ border: 1px solid darken( $color_light, 10%);
|
|
|
+}
|
|
|
+
|
|
|
+th {
|
|
|
+ background: $color_light;
|
|
|
+}
|
|
|
+
|
|
|
+form {
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ font-weight: normal;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.category {
|
|
|
+ .title.error::before {
|
|
|
+ display: inline-block;
|
|
|
+ padding-right: 7px;
|
|
|
+ width: 16px;
|
|
|
+ content: url(../Swage/icons/error.svg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.form-group {
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ &:hover {
|
|
|
+ background: $color_light;
|
|
|
+ border: 1px solid $color_light;
|
|
|
+ }
|
|
|
+ &.form-actions {
|
|
|
+ margin: 15px 0 25px;
|
|
|
+ padding: 5px 0;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ border-top: 3px solid darken( $color_light, 10%);
|
|
|
+ .btn {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .group-name {
|
|
|
+ padding: 10px 0;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .group-controls {
|
|
|
+ min-height: 25px;
|
|
|
+ padding: 5px 0;
|
|
|
+ .control {
|
|
|
+ line-height: 2.0em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ table {
|
|
|
+ margin: 10px 0 0 220px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-group::after {
|
|
|
+ @extend %after;
|
|
|
+}
|
|
|
+
|
|
|
+.stick {
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ display: inline-block;
|
|
|
+ min-height: 35px;
|
|
|
+ min-width: 15px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ vertical-align: middle;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ background: $color_nav;
|
|
|
+ border: none;
|
|
|
+ color: $color_light;
|
|
|
+ &.active,
|
|
|
+ :active,
|
|
|
+ :hover {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-important, .btn-attention {
|
|
|
+ font-weight: normal;
|
|
|
+ background: $color_alert;
|
|
|
+ color: $color_light;
|
|
|
+ &:hover,
|
|
|
+ :active {
|
|
|
+ background: darken( $color_alert, 10%) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.nav-list {
|
|
|
+ .nav-header {
|
|
|
+ @extend %nav-list;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: $color_aside;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ @extend %nav-list;
|
|
|
+ &:hover,
|
|
|
+ .active {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ color: $color_light;
|
|
|
+ a {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ &.empty a,
|
|
|
+ .error a {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ &.empty a {
|
|
|
+ background: $color_alert;
|
|
|
+ }
|
|
|
+ &.error a {
|
|
|
+ background: lighten( $color_bad, 10%);;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > a {
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ &.empty a {
|
|
|
+ color: $color_alert;
|
|
|
+ }
|
|
|
+ &.error a {
|
|
|
+ color: lighten( $color_bad, 10%);;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .disable {
|
|
|
+ text-align: center;
|
|
|
+ background: $color_light;
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ }
|
|
|
+ .nav-form {
|
|
|
+ padding: 3px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.nav-head {
|
|
|
+ margin: 0;
|
|
|
+ text-align: right;
|
|
|
+ background: $color_aside;
|
|
|
+ color: $color_light;
|
|
|
+ a {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ padding: 5px 10px;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.horizontal-list {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ .item {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown-menu {
|
|
|
+ padding: 5px 0;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ text-align: left;
|
|
|
+ border: none;
|
|
|
+ background-color: darken( $color_nav, 10%);
|
|
|
+ > {
|
|
|
+ .item {
|
|
|
+ @extend %dropdown;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 10px;
|
|
|
+ > a,
|
|
|
+ > span,
|
|
|
+ > as-link,
|
|
|
+ button {
|
|
|
+ @extend %dropdown;
|
|
|
+ }
|
|
|
+ > a {
|
|
|
+ min-width: initial;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background: $color_nav;
|
|
|
+ color: $color_light;
|
|
|
+ > a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item[aria-checked="true"] > a::before {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 0 -14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ select,
|
|
|
+ input {
|
|
|
+ margin: 0 auto 5px;
|
|
|
+ padding: 2px 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown-header {
|
|
|
+ padding: 0 5px 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ color: $color_light;
|
|
|
+}
|
|
|
+
|
|
|
+.separator {
|
|
|
+ margin: 5px 0;
|
|
|
+ border-bottom: 1px solid darken( $color_light, 10%);
|
|
|
+}
|
|
|
+
|
|
|
+.alert {
|
|
|
+ margin: 5px auto;
|
|
|
+ padding: 10px 15px;
|
|
|
+ font-size: 0.9em;
|
|
|
+ background: $color_light;
|
|
|
+ border: none;
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ text-shadow: 0 0 1px $color_light;
|
|
|
+ > a {
|
|
|
+ text-decoration: underline;
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.alert-head {
|
|
|
+ font-size: 1.15em;
|
|
|
+}
|
|
|
+
|
|
|
+.alert-warn,
|
|
|
+.alert-success,
|
|
|
+.alert-error {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+
|
|
|
+.alert-warn {
|
|
|
+ background: $color_light;
|
|
|
+ color: $color_alert;
|
|
|
+}
|
|
|
+
|
|
|
+.alert-success {
|
|
|
+ background: $color_light;
|
|
|
+ color: $color_good;
|
|
|
+}
|
|
|
+
|
|
|
+.alert-error {
|
|
|
+ background: $color_light;
|
|
|
+ color: $color_bad;
|
|
|
+}
|
|
|
+
|
|
|
+.pagination {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.8em;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ color: $color_text;
|
|
|
+ .item {
|
|
|
+ &.pager-current {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.5em;
|
|
|
+ background: $color_aside;
|
|
|
+ color: darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ display: block;
|
|
|
+ font-style: italic;
|
|
|
+ line-height: 3em;
|
|
|
+ text-decoration: none;
|
|
|
+ color: $color_text;
|
|
|
+ &:hover {
|
|
|
+ background: $color_aside;
|
|
|
+ color: darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .loading,
|
|
|
+ a:hover.loading {
|
|
|
+ font-size: 0;
|
|
|
+ background: url(loader.gif) center center no-repeat $color_aside;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ padding: 20px 10px;
|
|
|
+ .pagination {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ hr {
|
|
|
+ margin: 30px 10px;
|
|
|
+ height: 1px;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ border: 0;
|
|
|
+ box-shadow: 0 2px 5px darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ pre {
|
|
|
+ margin: 10px auto;
|
|
|
+ padding: 10px 20px;
|
|
|
+ overflow: auto;
|
|
|
+ background: $color_text;
|
|
|
+ color: $color_light;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ code {
|
|
|
+ background: transparent;
|
|
|
+ color: $color_light;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ code {
|
|
|
+ padding: 2px 5px;
|
|
|
+ color: $color_bad;
|
|
|
+ background: $color_light;
|
|
|
+ border: 1px solid $color_light;
|
|
|
+ }
|
|
|
+ blockquote {
|
|
|
+ display: block;
|
|
|
+ margin: 0;
|
|
|
+ padding: 5px 20px;
|
|
|
+ border-top: 1px solid darken( $color_light, 10%);
|
|
|
+ border-bottom: 1px solid darken( $color_light, 10%);
|
|
|
+ background: $color_light;
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > h1.title > a {
|
|
|
+ color: $color_text;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.box {
|
|
|
+ border: 1px solid darken( $color_light, 10%);
|
|
|
+ .box-title {
|
|
|
+ margin: 0;
|
|
|
+ padding: 5px 10px;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ border-bottom: 1px solid darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ .box-content {
|
|
|
+ max-height: 260px;
|
|
|
+ .item {
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ line-height: 2.5em;
|
|
|
+ .configure {
|
|
|
+ visibility: hidden;
|
|
|
+ .icon {
|
|
|
+ vertical-align: middle;
|
|
|
+ background-color: darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover .configure {
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.category {
|
|
|
+ .box-title .title {
|
|
|
+ font-weight: normal;
|
|
|
+ text-decoration: none;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &:not([data-unread="0"]) .box-title {
|
|
|
+ background: $color_nav;
|
|
|
+ &:active {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title:not([data-unread="0"])::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 10px;
|
|
|
+ border: 0;
|
|
|
+ background: none;
|
|
|
+ font-weight: bold;
|
|
|
+ box-shadow: none;
|
|
|
+ text-shadow: none;
|
|
|
+ }
|
|
|
+ .item.feed {
|
|
|
+ padding: 2px 10px;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tree {
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.tree-folder-title {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 10px;
|
|
|
+ background: $color_aside;
|
|
|
+ line-height: 2.3rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ height: 35px;
|
|
|
+ .title {
|
|
|
+ background: inherit;
|
|
|
+ color: $color_light;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tree-folder-items {
|
|
|
+ background: $color_aside;
|
|
|
+ > .item {
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 2.5rem;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ &.active {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ }
|
|
|
+ > a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ > .item {
|
|
|
+ vertical-align: middle;
|
|
|
+ &.title {
|
|
|
+ width: 231px;
|
|
|
+ position: absolute;
|
|
|
+ h1 {
|
|
|
+ margin: 0;
|
|
|
+ display: block;
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ display: inline-block;
|
|
|
+ height: 26px;
|
|
|
+ vertical-align: top;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.search input {
|
|
|
+ width: 230px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item.search input:focus {
|
|
|
+ width: 350px;
|
|
|
+ }
|
|
|
+ .item.search {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .item.configure {
|
|
|
+ position: fixed;
|
|
|
+ right: 0px;
|
|
|
+ z-index: 1000;
|
|
|
+ width: 35px;
|
|
|
+ }
|
|
|
+ h1 {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 1.5em;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.aside {
|
|
|
+ background: $color_aside;
|
|
|
+ padding: 35px 0;
|
|
|
+ width: 231px;
|
|
|
+ &.aside_feed {
|
|
|
+ .tree {
|
|
|
+ margin: 0 0 50px;
|
|
|
+ }
|
|
|
+ .nav-form {
|
|
|
+ input,
|
|
|
+ select {
|
|
|
+ width: 140px;
|
|
|
+ }
|
|
|
+ .dropdown {
|
|
|
+ .dropdown-menu {
|
|
|
+ right: -20px;
|
|
|
+ }
|
|
|
+ .dropdown-menu::after {
|
|
|
+ right: 33px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.aside_feed {
|
|
|
+ .tree-folder-title > .title:not([data-unread="0"])::after {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ margin: 6px 0;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ background: inherit;
|
|
|
+ }
|
|
|
+ .tree-folder-items .dropdown-menu::after {
|
|
|
+ left: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.post {
|
|
|
+ padding: 10px 50px;
|
|
|
+ font-size: 0.9em;
|
|
|
+ form {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+ &.content {
|
|
|
+ max-width: 550px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.prompt {
|
|
|
+ text-align: center;
|
|
|
+ label {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ form {
|
|
|
+ margin: 10px auto 20px auto;
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ margin: 5px auto;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#new-article {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 1em;
|
|
|
+ background: $color_nav;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 48px;
|
|
|
+ z-index: 900;
|
|
|
+ left: 0;
|
|
|
+ width: 231px;
|
|
|
+ line-height: 1.5em;
|
|
|
+ &:hover {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ }
|
|
|
+ > a {
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $color_light;
|
|
|
+ &:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.day {
|
|
|
+ padding: 0 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 3em;
|
|
|
+ text-align: center;
|
|
|
+ .name {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.nav {
|
|
|
+ a {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.nav_menu {
|
|
|
+ font-size: 0;
|
|
|
+ background-color: $color_nav;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 900;
|
|
|
+ .item.search {
|
|
|
+ display: inline-block;
|
|
|
+ position: fixed;
|
|
|
+ right: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flux {
|
|
|
+ padding-right: 10px;
|
|
|
+ background: $color_light;
|
|
|
+ &::after {
|
|
|
+ @extend %after;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 90%;
|
|
|
+ border-top: 1px solid darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ &:hover,
|
|
|
+ .current {
|
|
|
+ background: $color_hover;
|
|
|
+ &:not(.current):hover .item.title {
|
|
|
+ background: $color_hover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.not_read {
|
|
|
+ background: $color_unread;
|
|
|
+ &:not(.current):hover .item.title {
|
|
|
+ background: $color_unread;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.favorite,{
|
|
|
+ background: $color_stared;
|
|
|
+ &:not(.current):hover .item.title {
|
|
|
+ background: $color_stared;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 0.7rem;
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .website .favicon {
|
|
|
+ padding: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flux_header {
|
|
|
+ font-size: 0.8rem;
|
|
|
+ cursor: pointer;
|
|
|
+ .title {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.notification {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1em;
|
|
|
+ padding: 10px 0;
|
|
|
+ z-index: 10;
|
|
|
+ vertical-align: middle;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ border: none;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 48px;
|
|
|
+ left: 0;
|
|
|
+ top: auto;
|
|
|
+ width: 231px;
|
|
|
+ height: auto;
|
|
|
+ &.good,
|
|
|
+ .bad {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ &.good {
|
|
|
+ background: $color_good;
|
|
|
+ a.close:hover {
|
|
|
+ background: $color_good;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.bad {
|
|
|
+ background: lighten( $color_bad, 10%);;
|
|
|
+ a.close:hover {
|
|
|
+ background: lighten( $color_bad, 10%);;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &#actualizeProgress {
|
|
|
+ line-height: 2em;
|
|
|
+ }
|
|
|
+ a.close {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#bigMarkAsRead {
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ padding: 20px !IMPORTANT;
|
|
|
+ &:hover {
|
|
|
+ background: $color_aside;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#nav_entries {
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 3em;
|
|
|
+ table-layout: fixed;
|
|
|
+ width: 231px;
|
|
|
+ background: $color_aside;
|
|
|
+}
|
|
|
+
|
|
|
+.stat {
|
|
|
+ margin: 10px 0 20px;
|
|
|
+ th,
|
|
|
+ td,
|
|
|
+ tr {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ > table {
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ border-bottom: 1px solid darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .horizontal-list {
|
|
|
+ margin: 0 0 5px;
|
|
|
+ .item {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ &:first-child {
|
|
|
+ width: 270px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.loglist {
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid darken ( $color_light, 40% );;
|
|
|
+}
|
|
|
+
|
|
|
+.log {
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 5px 2%;
|
|
|
+ overflow: auto;
|
|
|
+ font-size: 0.8rem;
|
|
|
+ background: $color_light;
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ > .date {
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ &.error > .date {
|
|
|
+ background: lighten( $color_bad, 10%);;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ &.warning > .date {
|
|
|
+ background: $color_alert;
|
|
|
+ }
|
|
|
+ &.notice > .date {
|
|
|
+ background: darken( $color_light, 10%);
|
|
|
+ }
|
|
|
+ &.debug > .date {
|
|
|
+ background: $color_text;
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media(max-width: 840px) {
|
|
|
+ .dropdown-header, .dropdown-menu > .item {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #new-article {
|
|
|
+ width: 100%;
|
|
|
+ bottom: initial;
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ display: table;
|
|
|
+ .item.title .logo {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header > .item.title h1 a {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -35px;
|
|
|
+ left: 10px;
|
|
|
+ font-size: 0.6em;
|
|
|
+ }
|
|
|
+ .header .item.configure,
|
|
|
+ button.read_all.btn {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .flux .item.manage,
|
|
|
+ .flux_header .item.website {
|
|
|
+ width: 35px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .aside {
|
|
|
+ width: 0;
|
|
|
+ transition: width 200ms linear;
|
|
|
+ .toggle_aside {
|
|
|
+ display: block;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 10px;
|
|
|
+ background: $color_aside;
|
|
|
+ }
|
|
|
+ &.aside_feed {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ &:target {
|
|
|
+ width: 78%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nav_menu {
|
|
|
+ position: initial;
|
|
|
+ height: 71px;
|
|
|
+ .btn {
|
|
|
+ margin: 5px 10px;
|
|
|
+ }
|
|
|
+ .stick {
|
|
|
+ margin: 0 10px;
|
|
|
+ .btn {
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ position: absolute !important;
|
|
|
+ top: 35px;
|
|
|
+ left: 55px;
|
|
|
+ input {
|
|
|
+ width: 85%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ margin: 0 0 3.5em;
|
|
|
+ }
|
|
|
+ #panel .close {
|
|
|
+ display: block;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 10px;
|
|
|
+ background: $color_aside;
|
|
|
+ }
|
|
|
+ .day .name {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ }
|
|
|
+ .notification {
|
|
|
+ width: 100%;
|
|
|
+ a.close {
|
|
|
+ display: block;
|
|
|
+ left: 0;
|
|
|
+ background: transparent;
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #nav_entries {
|
|
|
+ width: 100% !important;
|
|
|
+ }
|
|
|
+ div#stream {
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+ a.btn.toggle_aside {
|
|
|
+ position: absolute;
|
|
|
+ top: 29px;
|
|
|
+ }
|
|
|
+ form#mark-read-menu,
|
|
|
+ a#actualize,
|
|
|
+ a#toggle-order,
|
|
|
+ div#nav_menu_actions,
|
|
|
+ div#nav_menu_views {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ form#mark-read-menu {
|
|
|
+ right: 46px;
|
|
|
+ top: 30px;
|
|
|
+ z-index: 1100;
|
|
|
+ }
|
|
|
+ a#actualize,
|
|
|
+ a#toggle-order {
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
+ a#actualize {
|
|
|
+ top: 29px;
|
|
|
+ }
|
|
|
+ a#toggle-order,
|
|
|
+ div#nav_menu_actions,
|
|
|
+ div#nav_menu_views {
|
|
|
+ top: 65px;
|
|
|
+ }
|
|
|
+ div#nav_menu_actions {
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+ div#nav_menu_views {
|
|
|
+ right: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media(max-width: 410px) {
|
|
|
+ .nav_menu .stick {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media(max-width: 374px) {
|
|
|
+ #nav_menu_views {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+button.as-link {
|
|
|
+ color: $color_light;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.dropdown-target:target ~ .btn.dropdown-toggle {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+}
|
|
|
+
|
|
|
+.tree-folder.active .tree-folder-title {
|
|
|
+ background: darken( $color_nav, 10%);
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.feed.item {
|
|
|
+ &.empty {
|
|
|
+ color: $color_alert;
|
|
|
+ &.active {
|
|
|
+ background: $color_alert;
|
|
|
+ color: $color_light;
|
|
|
+ > a {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > a {
|
|
|
+ color: $color_alert;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.error {
|
|
|
+ color: lighten( $color_bad, 10%);;
|
|
|
+ &.active {
|
|
|
+ background: lighten( $color_bad, 10%);;
|
|
|
+ color: $color_light;
|
|
|
+ > a {
|
|
|
+ color: $color_light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > a {
|
|
|
+ color: lighten( $color_bad, 10%);;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
|
|
|
+ vertical-align: middle;
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+#stream.reader .flux {
|
|
|
+ padding: 0 0 50px;
|
|
|
+ background: $color_light;
|
|
|
+ color: $color_aside;
|
|
|
+ border: none;
|
|
|
+ .author {
|
|
|
+ margin: 0 0 10px;
|
|
|
+ font-size: 90%;
|
|
|
+ color: darken ( $color_light, 40% );;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#nav_menu_actions, #nav_menu_read_all {
|
|
|
+ ul.dropdown-menu {
|
|
|
+ left: 0px;
|
|
|
+ }
|
|
|
+}
|
Patrick Crandol
