miniflux-legacy/themes/bootswatch-cyborg/less/miniflux-base.less

420 lines
7.0 KiB
Plaintext
Raw Normal View History

2014-04-01 14:01:26 +02:00
// 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 */
}
2014-04-01 14:01:26 +02:00
// 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}";
}
}
}
}
2014-04-01 14:01:26 +02:00
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 {
2014-04-01 14:01:26 +02:00
&: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;
}
}