a4d8abb631
Use CSS3 Animation for the "loading icon" blinking and move the definition of the loading icon to CSS as well. CSS3 Animations are supported by IE10, Firefox and using the -webkit prefix by Chrome and Safari. I've dropped the usage of element.classList in favour of supporting refreshing/ article downloading in IE9 (again). The classList stuff isn't necessarily needed, as the elements in question only get one or no class assigned. I've dropped no longer supported css options like: the appearance option isn't supported by any browser, the -webkit-appearance doesn't change anything visible. -webkit-font-smoothing support was dropped in chrome 22 and font-smoothing isn't specified anywhere.
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}";
|
|
}
|
|
}
|
|
}
|
|
|
|
&[id^="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;
|
|
}
|
|
|
|
}
|