aboutsummaryrefslogtreecommitdiff
path: root/p/themes/Swage/swage.scss
diff options
context:
space:
mode:
Diffstat (limited to 'p/themes/Swage/swage.scss')
-rw-r--r--p/themes/Swage/swage.scss1160
1 files changed, 1160 insertions, 0 deletions
diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss
new file mode 100644
index 000000000..9bd0326d9
--- /dev/null
+++ b/p/themes/Swage/swage.scss
@@ -0,0 +1,1160 @@
+@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;
+}
+
+textarea {
+ width: 360px;
+ height: 100px;
+ @extend %input;
+ background: darken( $color_light, 10% );
+ &:focus {
+ border-color: darken( $color_nav, 10%);
+ }
+}
+
+input,
+select {
+ @extend %input;
+ &:focus {
+ border-color: darken( $color_nav, 10%);
+ }
+ &:invalid {
+ @extend %invalid;
+ }
+ &:disabled {
+ background: $color_light;
+ }
+}
+
+select {
+ background: darken( $color_light, 10% );
+}
+
+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;
+ cursor: default;
+ }
+ .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%);
+ .dropdown-header {
+ cursor: default;
+ }
+ > {
+ .item {
+ @extend %dropdown;
+ padding: 0;
+ margin-left: 10px;
+ > a,
+ > span,
+ > as-link,
+ button {
+ @extend %dropdown;
+ }
+ > a {
+ min-width: initial;
+ white-space: nowrap;
+ }
+ &: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%);
+ cursor: default;
+}
+
+.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;
+ input {
+ background: darken( $color_light, 10% );
+ }
+ 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;
+ }
+ label {
+ color: $color_light;
+ cursor: pointer;
+ }
+}
+
+.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 {
+ padding: 5px 2%;
+ overflow: auto;
+ font-size: 0.8rem;
+ background: $color_light;
+ > .date {
+ margin: 0 10px 0 0;
+ padding: 5px 10px;
+ }
+ &.error > .date {
+ background: lighten( $color_bad, 10%);
+ color: $color_light;
+ }
+ &.warning > .date {
+ background: $color_alert;
+ color: $color_light;
+ }
+ &.notice > .date {
+ background: darken( $color_light, 10%);
+ color: $color_light;
+ }
+ &.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;
+ }
+}
+
+#slider {
+ label {
+ min-height: initial;
+ }
+ .form-group {
+ &:hover {
+ background: inital;
+ }
+ }
+
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2026-02-10 07:41:43 +0000