aboutsummaryrefslogtreecommitdiff
path: root/p/themes/base-theme
diff options
context:
space:
mode:
Diffstat (limited to 'p/themes/base-theme')
-rw-r--r--p/themes/base-theme/base.css177
-rw-r--r--p/themes/base-theme/template.css249
2 files changed, 352 insertions, 74 deletions
diff --git a/p/themes/base-theme/base.css b/p/themes/base-theme/base.css
index e265cd7ff..72020e8e6 100644
--- a/p/themes/base-theme/base.css
+++ b/p/themes/base-theme/base.css
@@ -1,3 +1,5 @@
+/* stylelint-disable block-no-empty */
+
@charset "UTF-8";
/*=== GENERAL */
@@ -18,36 +20,40 @@ legend {
padding: 5px 0;
font-size: 1.4em;
}
+
label {
min-height: 25px;
padding: 5px 0;
cursor: pointer;
}
+
textarea {
width: 360px;
height: 100px;
}
+
input, select, textarea {
min-height: 25px;
padding: 5px;
line-height: 25px;
vertical-align: middle;
}
+
option {
padding: 0 .5em;
}
+
input:focus, select:focus, textarea:focus {
}
+
input:invalid, select:invalid {
}
+
input:disabled, select:disabled {
}
+
input.extend {
transition: width 200ms linear;
- -moz-transition: width 200ms linear;
- -webkit-transition: width 200ms linear;
- -o-transition: width 200ms linear;
- -ms-transition: width 200ms linear;
}
/*=== Tables */
@@ -58,8 +64,10 @@ table {
tr, th, td {
padding: 0.5em;
}
+
th {
}
+
form td,
form th {
font-weight: normal;
@@ -72,17 +80,21 @@ form th {
.form-group.form-actions {
padding: 5px 0;
}
+
.form-group.form-actions .btn {
margin: 0 10px;
}
+
.form-group .group-name {
padding: 10px 0;
text-align: right;
}
+
.form-group .group-controls {
min-height: 25px;
padding: 5px 0;
}
+
.form-group table {
margin: 10px 0 0 220px;
}
@@ -92,17 +104,22 @@ form th {
vertical-align: middle;
font-size: 0;
}
+
.stick input,
.stick .btn {
}
+
.stick .btn:first-child,
.stick input:first-child {
}
+
.stick .btn-important:first-child {
}
+
.stick .btn:last-child,
.stick input:last-child {
}
+
.stick .btn + .btn,
.stick .btn + input,
.stick .btn + .dropdown > .btn,
@@ -113,29 +130,34 @@ form th {
.stick .dropdown + input,
.stick .dropdown + .dropdown > .btn {
}
+
.stick input + .btn {
}
+
.stick .btn + .dropdown > .btn {
}
.btn {
+ margin: 0;
+ padding: 5px 10px;
display: inline-block;
min-height: 37px;
min-width: 15px;
- margin: 0;
- padding: 5px 10px;
font-size: 0.9rem;
vertical-align: middle;
cursor: pointer;
overflow: hidden;
}
+
a.btn {
min-height: 25px;
line-height: 25px;
}
+
.btn:hover {
text-decoration: none;
}
+
.btn.active,
.btn:active,
.dropdown-target:target ~ .btn.dropdown-toggle {
@@ -144,15 +166,19 @@ a.btn {
.btn-important {
font-weight: normal;
}
+
.btn-important:hover {
}
+
.btn-important:active {
}
.btn-attention {
}
+
.btn-attention:hover {
}
+
.btn-attention:active {
}
@@ -163,29 +189,40 @@ a.btn {
line-height: 2.5em;
font-size: 0.9rem;
}
+
.nav-list .item:hover {
}
+
.nav-list .item:hover a {
}
+
.nav-list .item.active {
}
+
.nav-list .item.active a {
}
+
.nav-list .disable {
text-align: center;
}
+
.nav-list .item > a {
padding: 0 10px;
}
+
.nav-list a:hover {
text-decoration: none;
}
+
.nav-list .item.empty a {
}
+
.nav-list .item.active.empty a {
}
+
.nav-list .item.error a {
}
+
.nav-list .item.active.error a {
}
@@ -203,6 +240,7 @@ a.btn {
margin: 0;
text-align: right;
}
+
.nav-head .item {
padding: 5px 10px;
font-size: 0.9rem;
@@ -214,6 +252,7 @@ a.btn {
margin: 0;
padding: 0;
}
+
.horizontal-list .item {
vertical-align: middle;
}
@@ -225,6 +264,7 @@ a.btn {
font-size: 0.8rem;
text-align: left;
}
+
.dropdown-menu::after {
content: "";
position: absolute;
@@ -234,32 +274,36 @@ a.btn {
height: 10px;
z-index: -10;
transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
}
+
.dropdown-header {
padding: 0 5px 5px;
font-weight: bold;
text-align: left;
}
+
.dropdown-menu > .item {
}
+
.dropdown-menu > .item > a,
.dropdown-menu > .item > span,
.dropdown-menu > .item > .as-link {
padding: 0 22px;
line-height: 2.5em;
}
+
.dropdown-menu > .item:hover {
}
+
.dropdown-menu > .item[aria-checked="true"] > a::before {
font-weight: bold;
margin: 0 0 0 -14px;
}
+
.dropdown-menu > .item:hover > a {
text-decoration: none;
}
+
.dropdown-menu .input select,
.dropdown-menu .input input {
margin: 0 auto 5px;
@@ -276,16 +320,21 @@ a.btn {
padding: 10px 15px;
font-size: 0.9em;
}
+
.alert-head {
font-size: 1.15em;
}
+
.alert > a {
text-decoration: underline;
}
+
.alert-warn {
}
+
.alert-success {
}
+
.alert-error {
}
@@ -294,24 +343,30 @@ a.btn {
text-align: center;
font-size: 0.8em;
}
+
.content .pagination {
margin: 0;
padding: 0;
}
+
.pagination .item.pager-current {
font-weight: bold;
font-size: 1.5em;
}
+
.pagination .item a {
display: block;
font-style: italic;
line-height: 3em;
text-decoration: none;
}
+
.pagination .item a:hover {
}
+
.pagination:first-child .item {
}
+
.pagination:last-child .item {
}
@@ -323,10 +378,12 @@ a.btn {
/*=== Boxes */
.box {
}
+
.box .box-title {
margin: 0;
padding: 5px 10px;
}
+
.box .box-content {
max-height: 260px;
}
@@ -340,6 +397,7 @@ a.btn {
.box .box-content .item .configure {
visibility: hidden;
}
+
.box .box-content .item:hover .configure {
visibility: visible;
}
@@ -348,35 +406,45 @@ a.btn {
.tree {
margin: 10px 0;
}
+
.tree-folder-title {
position: relative;
padding: 0 10px;
line-height: 2.5rem;
font-size: 1rem;
}
+
.tree-folder-title .title {
background: inherit;
}
+
.tree-folder-title .title:hover {
text-decoration: none;
}
+
.tree-folder.active .tree-folder-title {
font-weight: bold;
}
+
.tree-folder.active .tree-folder-title .title {
}
+
.tree-folder-items {
}
+
.tree-folder-items > .item {
padding: 0 10px;
line-height: 2.5rem;
font-size: 0.8rem;
}
+
.tree-folder-items > .item.active {
}
+
.tree-folder-items > .item > a {
text-decoration: none;
}
+
.tree-folder-items > .item.active > a {
}
@@ -386,23 +454,29 @@ a.btn {
.header {
height: 85px;
}
+
.header > .item {
padding: 10px;
vertical-align: middle;
text-align: center;
}
-.header > .item.title{
+
+.header > .item.title {
width: 230px;
}
+
.header > .item.title h1 {
margin: 0.5em 0;
}
+
.header > .item.title h1 a {
text-decoration: none;
}
+
.header > .item.search input {
width: 230px;
}
+
.header .item.search input:focus {
width: 350px;
}
@@ -411,12 +485,15 @@ a.btn {
#global {
height: calc(100% - 85px);
}
+
.aside {
}
+
.aside.aside_feed {
padding: 10px 0;
text-align: center;
}
+
.aside.aside_feed .tree {
margin: 10px 0 50px;
}
@@ -434,22 +511,28 @@ a.btn {
/*=== Aside main page (feeds) */
.feed.item.empty.active {
}
+
.feed.item.error.active {
}
+
.feed.item.empty,
.feed.item.empty > a {
}
+
.feed.item.error,
.feed.item.error > a {
}
+
.feed.item.empty.active,
.feed.item.error.active,
.feed.item.empty.active > a,
.feed.item.error.active > a {
}
+
.aside_feed .tree-folder-items .dropdown-menu::after {
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 {
@@ -461,9 +544,11 @@ a.btn {
padding: 10px 50px;
font-size: 0.9em;
}
+
.post form {
margin: 10px 0;
}
+
.post.content {
max-width: 550px;
}
@@ -472,17 +557,21 @@ a.btn {
.prompt {
text-align: center;
}
+
.prompt label {
text-align: left;
}
+
.prompt form {
margin: 10px auto 20px auto;
width: 180px;
}
+
.prompt input {
margin: 5px auto;
width: 100%;
}
+
.prompt p {
margin: 20px 0;
}
@@ -492,12 +581,15 @@ a.btn {
text-align: center;
font-size: 0.9em;
}
+
#new-article:hover {
}
+
#new-article > a {
line-height: 3em;
font-weight: bold;
}
+
#new-article > a:hover {
text-decoration: none;
}
@@ -508,8 +600,10 @@ a.btn {
font-weight: bold;
line-height: 3em;
}
+
#new-article + .day {
}
+
.day .name {
padding: 0 10px 0 0;
font-size: 1.8em;
@@ -527,35 +621,42 @@ a.btn {
/*=== Feed articles */
.flux {
}
+
.flux:hover {
}
+
.flux.current {
}
+
.flux.not_read {
}
+
.flux.not_read:not(.current):hover .item.title {
}
+
.flux.favorite {
}
+
.flux.favorite:not(.current):hover .item.title {
}
-.flux.current {
-}
-
.flux_header {
font-size: 0.8rem;
cursor: pointer;
}
+
.flux_header .title {
font-size: 0.9rem;
}
+
.flux .website .favicon {
padding: 5px;
}
+
.flux .date {
font-size: 0.7rem;
}
+
.flux:not(.current):hover .item.title {
}
@@ -568,6 +669,7 @@ a.btn {
.content {
padding: 20px 10px;
}
+
.content > h1.title > a {
}
@@ -582,17 +684,20 @@ a.btn {
overflow: auto;
font-size: 0.9rem;
}
+
.content code {
padding: 2px 5px;
}
+
.content pre code {
}
.content blockquote {
- display: block;
margin: 0;
padding: 5px 20px;
+ display: block;
}
+
.content blockquote p {
margin: 0;
}
@@ -607,16 +712,21 @@ a.btn {
z-index: 10;
vertical-align: middle;
}
+
.notification.good {
}
+
.notification.bad {
}
+
.notification a.close {
padding: 0 15px;
line-height: 3em;
}
+
.notification.good a.close:hover {
}
+
.notification.bad a.close:hover {
}
@@ -629,8 +739,10 @@ a.btn {
text-align: center;
text-decoration: none;
}
+
#bigMarkAsRead:hover {
}
+
#bigMarkAsRead:hover .bigTick {
}
@@ -647,6 +759,7 @@ a.btn {
#stream.reader .flux {
padding: 0 0 50px;
}
+
#stream.reader .flux .author {
margin: 0 0 10px;
font-size: 90%;
@@ -659,22 +772,27 @@ a.btn {
text-decoration: none;
text-align: left;
}
+
.box.category:not([data-unread="0"]) .box-title {
}
+
.box.category:not([data-unread="0"]) .box-title:active {
}
+
.box.category:not([data-unread="0"]) .box-title .title {
font-weight: bold;
}
+
.box.category .title:not([data-unread="0"])::after {
+ background: none;
+ border: 0;
position: absolute;
top: 5px; right: 10px;
- border: 0;
- background: none;
font-weight: bold;
box-shadow: none;
text-shadow: none;
}
+
.box.category .item.feed {
padding: 2px 10px;
font-size: 0.8rem;
@@ -686,9 +804,11 @@ a.btn {
.aside.aside_feed .nav-form select {
width: 140px;
}
+
.aside.aside_feed .nav-form .dropdown .dropdown-menu {
right: -20px;
}
+
.aside.aside_feed .nav-form .dropdown .dropdown-menu::after {
right: 33px;
}
@@ -703,6 +823,7 @@ a.btn {
.stat td,
.stat tr {
}
+
.stat > table td,
.stat > table th {
text-align: center;
@@ -711,11 +832,13 @@ a.btn {
.stat > .horizontal-list {
margin: 0 0 5px;
}
+
.stat > .horizontal-list .item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
+
.stat > .horizontal-list .item:first-child {
width: 250px;
}
@@ -725,35 +848,40 @@ a.btn {
.loglist {
overflow: hidden;
}
+
.log {
padding: 5px 10px;
font-size: 0.8rem;
}
+
.log+.log {
}
+
.log .date {
display: block;
font-weight: bold;
}
+
.log.error {
}
+
.log.warning {
}
+
.log.notice {
}
+
.log.debug {
}
/*=== MOBILE */
/*===========*/
-@media(max-width: 840px) {
+
+@media (max-width: 840px) {
.aside {
transition: width 200ms linear;
- -moz-transition: width 200ms linear;
- -webkit-transition: width 200ms linear;
- -o-transition: width 200ms linear;
- -ms-transition: width 200ms linear;
}
+
.aside .toggle_aside,
#panel .close {
display: block;
@@ -770,20 +898,25 @@ a.btn {
.nav_menu .btn {
margin: 5px 10px;
}
+
.nav_menu .stick {
margin: 0 10px;
}
+
.nav_menu .stick .btn {
margin: 5px 0;
}
+
.nav_menu .search {
display: inline-block;
max-width: 97%;
}
+
.nav_menu .search input {
max-width: 97%;
width: 90px;
}
+
.nav_menu .search input:focus {
width: 400px;
}
@@ -800,9 +933,11 @@ a.btn {
display: block;
left: 0;
}
+
.notification a.close:hover {
opacity: 0.5;
}
+
.notification a.close .icon {
display: none;
}
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 226d06f59..ebceea526 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -2,6 +2,7 @@
/*=== GENERAL */
/*============*/
+
@font-face {
font-family: 'OpenSans';
font-style: normal;
@@ -22,6 +23,7 @@ html, body {
a {
text-decoration: none;
}
+
a:hover {
text-decoration: underline;
}
@@ -38,11 +40,13 @@ h1 {
font-size: 1.5em;
line-height: 1.6em;
}
+
h2 {
margin: 0.5em 0 0.25em;
font-size: 1.3em;
line-height: 2em;
}
+
h3 {
margin: 0.5em 0 0.25em;
font-size: 1.1em;
@@ -54,6 +58,7 @@ p {
margin: 1em 0 0.5em;
font-size: 1em;
}
+
sup {
line-height: 25px;
position: relative;
@@ -63,14 +68,16 @@ sup {
/*=== Images */
img {
- height: auto;
max-width: 100%;
+ height: auto;
}
+
img.favicon {
- height: 16px;
width: 16px;
+ height: 16px;
vertical-align: middle;
}
+
.feed.mute::before {
content: '🔇';
}
@@ -86,54 +93,68 @@ legend {
width: 100%;
clear: both;
}
+
label {
display: block;
}
+
input {
width: 180px;
}
+
+input[type=number] {
+ width: 6em;
+}
+
textarea,
input[type="file"],
input.long,
input.extend:focus {
width: 300px;
}
+
input, select, textarea {
display: inline-block;
max-width: 100%;
font-size: 0.8rem;
}
+
input[type="radio"],
input[type="checkbox"] {
width: 15px !important;
min-height: 15px !important;
}
+
.dropdown-menu label > input[type="text"] {
width: 150px;
width: calc(99% - 5em);
}
+
.dropdown-menu input[type="checkbox"] {
margin-left: 1em;
margin-right: .5em;
}
+
button.as-link,
button.as-link:hover,
button.as-link:active {
background: transparent;
- border: none;
color: inherit;
- cursor: pointer;
font-size: 1.1em;
+ border: none;
+ cursor: pointer;
text-align: left;
}
+
button.as-link[disabled] {
- color:#DDD !important;
+ color: #ddd !important;
}
/*=== Tables */
table {
max-width: 100%;
}
+
th.numeric,
td.numeric {
text-align: center;
@@ -141,7 +162,6 @@ td.numeric {
/*=== COMPONENTS */
/*===============*/
-
[aria-hidden="true"] {
display: none !important;
}
@@ -152,18 +172,22 @@ td.numeric {
display: block;
clear: both;
}
+
.form-group.form-actions {
min-width: 250px;
}
+
.form-group .group-name {
display: block;
float: left;
width: 200px;
}
+
.form-group .group-controls {
min-width: 250px;
margin: 0 0 0 220px;
}
+
.form-group .group-controls .control {
display: block;
}
@@ -180,12 +204,14 @@ td.numeric {
display: inline-block;
white-space: nowrap;
}
+
.btn,
a.btn {
display: inline-block;
cursor: pointer;
overflow: hidden;
}
+
.btn-important {
font-weight: bold;
}
@@ -195,6 +221,7 @@ a.btn {
.nav-list .item {
display: block;
}
+
.nav-list .item,
.nav-list .item > a {
display: block;
@@ -202,9 +229,11 @@ a.btn {
white-space: nowrap;
text-overflow: ellipsis;
}
+
.nav-head {
display: block;
}
+
.nav-head .item {
display: inline-block;
}
@@ -215,6 +244,7 @@ a.btn {
table-layout: fixed;
width: 100%;
}
+
.horizontal-list .item {
display: table-cell;
}
@@ -225,29 +255,35 @@ a.btn {
display: inline-block;
vertical-align: middle;
}
+
.dropdown-target {
display: none;
}
+
.dropdown-menu {
+ margin: 0;
+ background: #fff;
display: none;
+ border: 1px solid #aaa;
min-width: 200px;
- margin: 0;
position: absolute;
right: 0;
- background: #fff;
- border: 1px solid #aaa;
}
+
.dropdown-menu-scrollable {
max-height: 75vh;
overflow-x: hidden;
overflow-y: auto;
}
+
.dropdown-header {
display: block;
}
+
.dropdown-menu > .item {
display: block;
}
+
.dropdown-menu > .item > a,
.dropdown-menu > .item > .as-link,
.dropdown-menu > .item > span {
@@ -255,33 +291,40 @@ a.btn {
min-width: 200px;
white-space: nowrap;
}
+
.dropdown-menu > .item[aria-checked="true"] > a::before {
content: '✓';
}
+
.dropdown-menu .input {
display: block;
}
+
.dropdown-menu .input select,
.dropdown-menu .input input {
display: block;
max-width: 95%;
}
+
.dropdown-target:target ~ .dropdown-menu {
display: block;
z-index: 1000;
}
+
.dropdown-close {
display: inline;
}
+
.dropdown-close a {
+ display: block;
font-size: 0;
position: fixed;
top: 0; bottom: 0;
left: 0; right: 0;
- display: block;
z-index: -10;
cursor: default;
}
+
.separator {
display: block;
height: 0;
@@ -293,13 +336,16 @@ a.btn {
display: block;
width: 90%;
}
+
.group-controls .alert {
width: 100%
}
+
.alert-head {
margin: 0;
font-weight: bold;
}
+
.alert ul {
margin: 5px 20px;
}
@@ -315,15 +361,17 @@ a.btn {
/*=== Pagination */
.pagination {
- display: table;
- width: 100%;
margin: 0;
padding: 0;
+ display: table;
+ width: 100%;
table-layout: fixed;
}
+
.pagination .item {
display: table-cell;
}
+
.pagination .pager-first,
.pagination .pager-previous,
.pagination .pager-next,
@@ -333,28 +381,33 @@ a.btn {
/*=== Boxes */
.box {
+ margin: 20px 10px;
display: inline-block;
- width: 20rem;
max-width: 95%;
- margin: 20px 10px;
+ width: 20rem;
border: 1px solid #ccc;
vertical-align: top;
}
+
.box .box-title {
position: relative;
font-size: 1.2rem;
font-weight: bold;
}
+
.box .box-title form {
margin: 0;
}
+
.box .box-content {
display: block;
overflow: auto;
}
+
.box .box-content .item {
display: block;
}
+
.box .box-content .item.disabled {
text-align: center;
font-style: italic;
@@ -364,6 +417,7 @@ a.btn {
padding: 30px 5px;
text-align: center;
}
+
.box .box-content-centered .btn {
margin: 20px 0 0;
}
@@ -373,17 +427,20 @@ a.btn {
margin: 0 0 5px;
border-bottom: 2px solid #ccc;
}
+
[draggable=true] {
cursor: grab;
}
/*=== Scrollbar */
+
@supports (scrollbar-width: thin) {
#sidebar {
overflow-y: auto;
scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.05);
scrollbar-width: thin;
}
+
#sidebar:hover {
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
}
@@ -394,11 +451,13 @@ a.btn {
background: rgba(0, 0, 0, 0.05);
width: 8px;
}
+
#sidebar::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.1);
- border-radius: 5px;
display: unset;
+ border-radius: 5px;
}
+
#sidebar:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.3);
}
@@ -414,26 +473,30 @@ a.btn {
}
.tree-folder-items {
- list-style: none;
- max-height: 200em;
padding: 0;
+ max-height: 200em;
+ list-style: none;
transition: max-height .3s linear;
}
+
.tree-folder-title {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
+
.tree-folder-title .title {
display: inline-block;
width: 100%;
vertical-align: middle;
}
+
.tree-folder-items > .item {
display: block;
white-space: nowrap;
}
+
.tree-folder-items > .item > a {
display: inline-block;
vertical-align: middle;
@@ -442,6 +505,7 @@ a.btn {
white-space: nowrap;
text-overflow: ellipsis;
}
+
.tree-bottom {
visibility: hidden;
margin-bottom: 18em;
@@ -455,22 +519,27 @@ a.btn {
width: 100%;
table-layout: fixed;
}
+
.header > .item {
display: table-cell;
}
+
.header > .item.title {
width: 250px;
white-space: nowrap;
}
+
.header > .item.title h1 {
display: inline-block;
}
+
.header > .item.title .logo {
display: inline-block;
- height: 32px;
width: 32px;
+ height: 32px;
vertical-align: middle;
}
+
.header > .item.configure {
width: 100px;
}
@@ -482,6 +551,7 @@ a.btn {
height: 100%;
table-layout: fixed;
}
+
.aside {
display: table-cell;
width: 300px;
@@ -496,26 +566,32 @@ a.btn {
.aside_feed .tree-folder-title .icon {
padding: 5px;
}
+
.aside_feed .tree-folder-items .item.feed {
padding: 0px 15px;
}
+
.aside_feed .tree-folder-items:not(.active) {
- border: none;
margin: 0;
- max-height: 0;
padding: 0;
+ max-height: 0;
+ border: none;
overflow: hidden;
}
+
.aside_feed .tree-folder-items .dropdown {
vertical-align: top;
}
+
.aside_feed .tree-folder-items .dropdown-menu {
left: 0;
}
+
.aside_feed .tree-folder-items .item .dropdown-toggle > .icon {
visibility: hidden;
cursor: pointer;
}
+
.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 {
@@ -526,6 +602,7 @@ a.btn {
#new-article {
display: none;
}
+
#new-article > a {
display: block;
}
@@ -544,39 +621,51 @@ a.btn {
.flux_header {
position: relative;
}
+
.flux .item {
line-height: 40px;
white-space: nowrap;
}
+
.flux .item.manage,
.flux .item.link {
width: 40px;
text-align: center;
}
+
.flux .item.website {
width: 200px;
}
+
.flux.not_read .item.title,
.flux.current .item.title {
font-weight: bold;
}
+
.flux:not(.current):hover .item.title {
- position: absolute;
- max-width: calc(100% - 320px);
background: #fff;
+ max-width: calc(100% - 320px);
+ position: absolute;
}
+
.flux .item.title a {
color: #000;
text-decoration: none;
}
+
+.flux .item.author {
+ color: #555;
+ font-size: .7rem;
+ font-weight: normal;
+ white-space: normal;
+}
+
.flux .item.date {
width: 155px;
text-align: right;
overflow: hidden;
}
-.flux .item > a {
- display: block;
-}
+
.flux .item > a {
display: block;
text-decoration: none;
@@ -584,6 +673,7 @@ a.btn {
text-overflow: ellipsis;
overflow: hidden;
}
+
.flux .item.share > a,
.item.query > a {
display: list-item;
@@ -595,30 +685,37 @@ a.btn {
.hide_posts > .flux:not(.active) > .flux_content {
display: none;
}
+
.content {
min-height: 20em;
margin: auto;
line-height: 1.7em;
word-wrap: break-word;
}
+
.content.large {
max-width: 1000px;
}
+
.content.medium {
max-width: 800px;
}
+
.content.thin {
max-width: 550px;
}
+
.content ul,
.content ol,
.content dd {
margin: 0 0 0 15px;
padding: 0 0 5px 15px;
}
+
.content pre {
overflow: auto;
}
+
br {
line-height: 1em;
}
@@ -635,10 +732,12 @@ br {
visibility: visible;
transition: visibility 0s, opacity .3s linear;
}
+
.notification.closed {
opacity: 0;
visibility: hidden;
}
+
.notification a.close {
position: absolute;
top: 0; bottom: 0;
@@ -649,27 +748,31 @@ br {
#actualizeProgress {
position: fixed;
}
+
#actualizeProgress progress {
max-width: 100%;
vertical-align: middle;
}
+
#actualizeProgress .progress {
vertical-align: middle;
}
/*=== Navigation menu (for articles) */
#nav_entries {
+ background: #fff;
+ display: table;
position: fixed;
bottom: 0; left: 0;
- display: table;
width: 300px;
- background: #fff;
table-layout: fixed;
}
+
#nav_entries .item {
display: table-cell;
width: 30%;
}
+
#nav_entries a {
display: block;
}
@@ -678,19 +781,22 @@ br {
#load_more {
min-height: 40px;
}
+
.loading {
background: url("loader.gif") center center no-repeat;
font-size: 0;
}
+
#bigMarkAsRead {
+ margin: 0 0 100% 0;
+ margin: 0 0 100vh 0;
+ padding: 1em 0 50px 0;
display: block;
width: 100%;
text-align: center;
font-size: 1.4em;
- padding: 1em 0 50px 0;
- margin: 0 0 100% 0;
- margin: 0 0 100vh 0;
}
+
.bigTick {
font-size: 4em;
}
@@ -699,14 +805,17 @@ br {
.stat {
margin: 15px 0;
}
+
.stat.half {
+ padding: 0 2%;
display: inline-block;
width: 46%;
- padding: 0 2%;
}
+
.stat > table {
width: 100%;
}
+
.statGraph {
height: 300px;
}
@@ -735,12 +844,14 @@ br {
#stream.global .box {
text-align: left;
}
+
#global > #panel {
bottom: 99vh;
display: block;
transition: visibility .3s, bottom .3s;
visibility: hidden;
}
+
#global > #panel.visible {
bottom: 1em;
visibility: visible;
@@ -755,24 +866,28 @@ br {
transition: visibility .3s, opacity .3s;
visibility: hidden;
}
+
#overlay.visible {
opacity: 1;
visibility: visible;
}
+
#panel {
+ background: #fff;
display: none;
position: fixed;
top: 1em; bottom: 1em;
left: 2em; right: 2em;
overflow: auto;
- background: #fff;
}
+
#overlay .close {
position: fixed;
top: 0; bottom: 0;
left: 0; right: 0;
display: block;
}
+
#overlay .close img {
display: none;
}
@@ -786,20 +901,19 @@ br {
background: #fff;
border-left: 1px solid #aaa;
transition: left 200ms linear;
- -moz-transition: left 200ms linear;
- -webkit-transition: left 200ms linear;
- -o-transition: left 200ms linear;
- -ms-transition: left 200ms linear;
}
+
#slider.active {
left: 40%;
}
+
#close-slider {
position: fixed;
top: 0; bottom: 0;
left: 100%; right: 0;
cursor: pointer;
}
+
#close-slider.active {
left: 0;
}
@@ -808,85 +922,98 @@ br {
/*==============*/
.slides {
padding: 0;
- height: 320px;
display: block;
+ max-width: 640px;
+ height: 320px;
+ border: 1px solid #aaa;
position: relative;
min-width: 260px;
- max-width: 640px;
margin-bottom: 30px;
- border: 1px solid #aaa;
}
+
.slides input {
display: none;
}
+
.slide-container {
display: block;
}
+
.slide {
- top: 0;
- opacity: 0;
+ display: block;
width: 100%;
height: 100%;
- display: block;
+ top: 0;
+ opacity: 0;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
+
.slide img {
width: 100%;
height: 100%;
}
+
.nav label {
+ padding: 0;
+ display: none;
width: 10%;
height: 100%;
- display: none;
+ color: #fff;
+ font-family: "Varela Round", sans-serif;
+ font-size: 1000%;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
- color: #FFF;
- font-size: 1000%;
text-align: center;
line-height: 225%;
- font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
- padding: 0;
}
+
.properties {
- display: none;
- bottom: 0;
- left: 0; right: 0;
- position: absolute;
padding: 5px;
background: rgba(255, 255, 255, 0.7);
+ display: none;
color: #000;
border-top: 1px solid #aaa;
+ bottom: 0;
+ left: 0; right: 0;
+ position: absolute;
z-index: 10;
}
+
.properties .page-number {
right: 5px;
top: 0;
position: absolute;
}
+
.slide:hover + .nav label {
opacity: 0.5;
}
+
.nav label:hover {
opacity: 1;
}
+
.nav .next {
right: 0;
}
+
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
+
input:checked + .slide-container .nav label {
display: block;
}
+
input:checked + .slide-container .properties {
display: block;
}
@@ -896,13 +1023,16 @@ input:checked + .slide-container .properties {
.category .title:not([data-unread="0"])::after {
content: attr(data-unread);
}
+
.category .title.error::before {
content: "âš  ";
color: #bd362f;
}
+
.feed .item-title:not([data-unread="0"])::before {
content: "(" attr(data-unread) ") ";
}
+
.feed .item-title:not([data-unread="0"]) {
font-weight: bold;
}
@@ -953,7 +1083,8 @@ pre.enclosure-description {
/*=== MOBILE */
/*===========*/
-@media(max-width: 840px) {
+
+@media (max-width: 840px) {
.header,
.aside .btn-important,
.flux_header .item.website span,
@@ -962,19 +1093,23 @@ pre.enclosure-description {
.no-mobile {
display: none;
}
+
.dropdown .dropdown-menu {
+ width: 100%;
border-radius: 0;
bottom: 0;
position: fixed;
- width: 100%;
}
+
.dropdown-menu::after {
display: none;
}
+
.aside .toggle_aside,
.nav-login {
display: block;
}
+
.nav_menu .toggle_aside,
.nav_menu .search,
#panel .close img {
@@ -989,6 +1124,7 @@ pre.enclosure-description {
overflow: hidden;
z-index: 100;
}
+
.aside:target {
width: 90%;
}
@@ -1017,6 +1153,7 @@ pre.enclosure-description {
top: 25px; bottom: 30px;
left: 0; right: 0;
}
+
#panel .close {
top: 0; right: 0;
left: auto; bottom: auto;
@@ -1028,6 +1165,7 @@ pre.enclosure-description {
/*=== PRINTER */
/*============*/
+
@media print {
.header, .aside,
.nav_menu, .day,
@@ -1037,21 +1175,26 @@ pre.enclosure-description {
#nav_entries {
display: none;
}
+
html, body {
background: #fff;
color: #000;
font-family: Serif;
}
+
#global,
.flux_content {
display: block !important;
}
+
.flux_content .content {
width: 100% !important;
}
+
.flux_content .content a {
color: #000;
}
+
.flux_content .content a::after {
content: " [" attr(href) "] ";
font-style: italic;