9d31eb1a01
I've dropped it accidentally with my last commit. Furthermore I moved
the data-feed-id definition to the article element and dropped multiple
references of the feed id. That's similar to what I've done before with
the data-item-id in 3dae99ac.
The article element holds the information whether a feed is disabled now.
Now it is shown if a feed had errors while updating.
420 lines
7.0 KiB
Plaintext
420 lines
7.0 KiB
Plaintext
// Bootstrap 3 theme integration for miniflux
|
|
// --------------------------------------
|
|
|
|
// Form
|
|
.btn {
|
|
&:extend(.btn all, .btn-primary all);
|
|
}
|
|
.btn-blue {
|
|
&:extend(.btn all, .btn-info all);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
select {
|
|
&:extend(.form-control all);
|
|
}
|
|
|
|
// Alerts
|
|
.alert {
|
|
&:extend(.alert all);
|
|
}
|
|
.alert-normal {
|
|
&:extend(.alert-success all);
|
|
}
|
|
.alert-info {
|
|
&:extend(.alert-info all);
|
|
}
|
|
.alert-error {
|
|
&:extend(.alert-danger all);
|
|
}
|
|
|
|
// Icons
|
|
header > nav > ul a:before {
|
|
font-family:'Glyphicons Halflings';
|
|
margin-right: 5px;
|
|
}
|
|
header > nav > ul li:nth-child(1) a:before {content:"\e043";} // Unread
|
|
header > nav > ul li:nth-child(2) a:before {content:"\1f516";} // Bookmarks
|
|
header > nav > ul li:nth-child(3) a:before {content:"\e023";} // History
|
|
header > nav > ul li:nth-child(4) a:before {content:"\e012";} // Subscriptions
|
|
header > nav > ul li:nth-child(5) a:before {content:"\1f527";} // Préférences
|
|
header > nav > ul li:nth-child(6) a:before {content:"\e017";} // Logout
|
|
|
|
// Counter
|
|
span {
|
|
&#nav-counter,
|
|
&#page-counter {
|
|
&:not(:empty) {
|
|
&:before {
|
|
content: " @{icon-bracket-open}";
|
|
}
|
|
|
|
&:after {
|
|
content: "@{icon-bracket-close}";
|
|
}
|
|
}
|
|
}
|
|
|
|
&.items-count {
|
|
&:before {
|
|
content: "@{icon-bracket-open}";
|
|
}
|
|
|
|
&:after {
|
|
content: "@{icon-bracket-close}";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Loading
|
|
.loading-icon:before {
|
|
content: "@{icon-loading}";
|
|
animation-name: blinker;
|
|
-webkit-animation-name: blinker; /* Chrome, Safari, Opera */
|
|
animation-duration: 500ms;
|
|
-webkit-animation-duration: 500ms; /* Chrome, Safari, Opera */
|
|
animation-timing-function: ease-in-out;
|
|
-webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
// Logo
|
|
.logo {
|
|
min-width: 100px;
|
|
min-height: 45px;
|
|
font-size: 18px;
|
|
transition: all 0.4s;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.logo:hover, .logo:focus {
|
|
text-decoration: none;
|
|
outline: medium none;
|
|
transition: all 0.4s
|
|
}
|
|
.logo span ,
|
|
.logo:hover span {
|
|
transition: all 0.4s
|
|
}
|
|
|
|
// Container
|
|
// --------------------------------------
|
|
body {
|
|
.container-fixed();
|
|
}
|
|
|
|
// Menu
|
|
// --------------------------------------
|
|
body > header {
|
|
position: fixed;
|
|
top: 10px; left: 10px;
|
|
|
|
> nav > ul {
|
|
&:extend(.nav all, .nav-pills all, .nav-stacked all);
|
|
|
|
li {
|
|
a {
|
|
min-width: 120px;
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
li.hide-mobile {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Page
|
|
// --------------------------------------
|
|
.page {
|
|
.clearfix();
|
|
padding-left: 150px ;
|
|
padding-top: 10px ;
|
|
}
|
|
|
|
// Page header
|
|
// --------------------------------------
|
|
.page-header {
|
|
.make-row();
|
|
margin-top: 0;
|
|
}
|
|
|
|
.page-header h2 {
|
|
.make-sm-column(7);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.page-header ul {
|
|
.make-sm-column(5);
|
|
&:extend(.nav all, .nav-pills all, .nav-justified all);
|
|
> li > a > span.hide-mobile {
|
|
display: inline-block !important;
|
|
margin-left: 5px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
|
|
// Page footer
|
|
// --------------------------------------
|
|
#bottom-menu,
|
|
#items-paging {
|
|
float: right;
|
|
}
|
|
#bottom-menu a,
|
|
#items-paging a {
|
|
&:extend(.btn all, .btn-primary all);
|
|
margin: 10px;
|
|
}
|
|
|
|
// item pagination
|
|
.item nav {
|
|
&:extend(.pager all);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.item nav > span {
|
|
border-radius: 15px;
|
|
display: inline-block;
|
|
padding: 5px 14px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.item nav .nav-left {
|
|
float: left;
|
|
}
|
|
.item nav .nav-right {
|
|
float: right;
|
|
}
|
|
|
|
// Top pagination
|
|
.item nav.top {
|
|
margin: 30px 0 10px 0;
|
|
}
|
|
|
|
|
|
// Articles
|
|
// --------------------------------------
|
|
.item h2 {font-size:18px}
|
|
.item h3 {font-size:16px}
|
|
.item h4 {font-size:15px}
|
|
.item h5 {font-size:14px}
|
|
.item h6 {font-size:12px}
|
|
.item blockquote p {font-size: 15px;}
|
|
|
|
article {
|
|
&[data-item-status="read"] {
|
|
.read-icon:before {
|
|
content: "@{icon-read}";
|
|
}
|
|
}
|
|
|
|
&[data-item-bookmark="1"] {
|
|
.bookmark-icon:before {
|
|
content: "@{icon-bookmarked}";
|
|
}
|
|
}
|
|
|
|
&[data-item-bookmark="0"] {
|
|
.item-infos {
|
|
.bookmark-icon:before {
|
|
content: "@{icon-not-bookmarked}";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
article img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.items {
|
|
.clearfix();
|
|
}
|
|
|
|
article.item,
|
|
.items article {
|
|
.clearfix();
|
|
&:extend(.panel all, .panel-default all);
|
|
position: relative;
|
|
padding: 10px;
|
|
}
|
|
|
|
article.item h1,
|
|
.items article h2 {
|
|
margin-top: 0;
|
|
padding-top: 20px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.items article .preview {
|
|
margin-bottom: 0;
|
|
text-align: justify;
|
|
}
|
|
|
|
// Actions links
|
|
article ul.item-infos,
|
|
article ul.item-menu {
|
|
.clearfix();
|
|
list-style: none;
|
|
margin: 0; padding: 0;
|
|
position: absolute;
|
|
top: 5px; right: 10px;
|
|
> li {
|
|
display: block;
|
|
float: left;
|
|
a {
|
|
&:extend(.btn all, .btn-primary all, .btn-xs all);
|
|
margin-left: 5px;
|
|
}
|
|
> span {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#download-item {
|
|
&:extend(.text-muted all);
|
|
}
|
|
|
|
// Subscriptions
|
|
// --------------------------------------
|
|
.feed-last-checked {
|
|
font-size: 14px;
|
|
&:extend(.text-muted all);
|
|
}
|
|
|
|
// Preferences
|
|
// --------------------------------------
|
|
section form input,
|
|
section form select {max-width: 300px;}
|
|
section form .form-actions input {
|
|
&:extend(.btn-block all);
|
|
}
|
|
|
|
section .alert ul {
|
|
list-style: square;
|
|
}
|
|
|
|
// Login
|
|
// --------------------------------------
|
|
#login-page .page {
|
|
margin: 0 auto;
|
|
max-width: 330px;
|
|
padding: 15px;
|
|
}
|
|
#form-username,
|
|
#form-password {
|
|
&:extend(.form-control all);
|
|
}
|
|
#login-page .btn {
|
|
margin-top: 15px;
|
|
&:extend(.btn-block all);
|
|
}
|
|
|
|
// Help
|
|
// --------------------------------------
|
|
#help-page .page {
|
|
padding-left: 0;
|
|
}
|
|
|
|
// Responsive
|
|
// --------------------------------------
|
|
.hide-mobile {
|
|
.visible-lg();
|
|
}
|
|
.hide-desktop {
|
|
.visible-xs();
|
|
}
|
|
|
|
|
|
@media (max-width: @screen-sm) {
|
|
//.logo
|
|
body > header > nav > ul {
|
|
li {
|
|
&.hide-desktop {display: none !important;}
|
|
&.hide-mobile {display: block !important;}
|
|
a {
|
|
max-width: 45px;
|
|
min-width: 0;
|
|
width: 45px;
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space:nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.logo {display: none;}
|
|
|
|
header > nav > ul a:before {
|
|
margin-right: 9999px;
|
|
}
|
|
|
|
.page {
|
|
padding-left: 55px ;
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
article.item h1,
|
|
.items article h2 {
|
|
margin-top: 0;
|
|
padding-top: 0px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
article ul.item-menu {
|
|
position: static;
|
|
margin-top: 10px;
|
|
> li {
|
|
display: block;
|
|
float: none;
|
|
|
|
> span,
|
|
> a {
|
|
margin: 0 0 5px 0;
|
|
display: block;
|
|
font-size: 15px;
|
|
min-height: 40px;
|
|
line-height: 35px;
|
|
}
|
|
> span {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
// pagination
|
|
.item nav > span,
|
|
.item nav > span a {
|
|
display: block;
|
|
}
|
|
.item nav .nav-left,
|
|
.item nav .nav-middle,
|
|
.item nav .nav-right {
|
|
float: none;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
#items-paging,
|
|
#bottom-menu {
|
|
float: none;
|
|
max-height: 20px;
|
|
}
|
|
#bottom-menu a,
|
|
#items-paging a {
|
|
display: block;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
}
|