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

// 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;
	}

}