miniflux-legacy/themes/bootstrap-light/less/miniflux-base.less

312 lines
5.3 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-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
// 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;
}
body > header > nav {
}
body > header > nav > ul {
&:extend(.nav all, .nav-pills all, .nav-stacked all);
}
body > header > nav > ul a {
min-width: 120px;
text-transform: capitalize;
}
// 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);
}
// Buttons for the secondary menu ?
// .page-header ul a {
// &:extend(.btn-primary all);
// }
// .page-header ul a:last-child {
// margin-left: 5px;
// }
// Page footer
// --------------------------------------
#bottom-menu a {
&:extend(.btn all, .btn-primary all, .pull-right);
margin-bottom: 10px;
}
// Articles
// --------------------------------------
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;
}
article p.infos,
.items article p:not(.preview) { //Lack of class...
position: absolute;
top: 5px; right: 10px;
margin-bottom: 0;
}
article p.infos a,
.items article p:not(.preview) a {
&:extend(.btn all, .btn-primary all, .btn-xs all);
}
.downloading {
&:extend(.text-muted all);
}
// Pagination
.item nav {
&:extend(.pager all);
margin-bottom: 0;
}
.item nav > span {
border-radius: 15px 15px 15px 15px;
display: inline-block;
padding: 5px 14px;
border-radius: 4px;
}
.item nav .nav-left {
float: left;
}
.item nav .nav-right {
float: right;
}
.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;}
// 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);
}
// Responsive
// --------------------------------------
@media (max-width: @screen-lg) {
.hide-mobile {
.visible-lg();
}
}
@media (max-width: @screen-sm) {
//.logo ,
body > header > nav > ul a {
max-width: 45px;
min-width: 0;
width: 45px;
display: block;
overflow: hidden;
white-space:nowrap;
}
.logo {display: none;} // Need a shorter version ?
// .logo {
// margin-left: 10px;
// min-height: 0;
// }
// .logo:before,
header > nav > ul a:before {
margin-right: 9999px;
}
// .logo:before {
// font-family:'Glyphicons Halflings';
// content: "";
// }
.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 p.infos ,
.items article p:not(.preview) {
position: static;
font-size: 0;
}
article p.infos a,
.items article p:not(.preview) a {
display: block;
font-size: 12px;
margin-top: 3px;
}
article p.infos {
margin-bottom: 10px;
}
.items article .preview {
text-align: left;
}
// 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;
}
}