312 lines
5.3 KiB
Plaintext
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;
|
|
}
|
|
} |