miniflux-legacy/themes/cards/css/app.css

214 lines
3.8 KiB
CSS
Raw Normal View History

@import url('../../../assets/css/app.css');
@import url("feed-color.css");
body {
max-width: 960px;
}
/* header */
header {
margin-bottom: 0;
margin-top: 20px;
background-color: #e4e4e4;
padding: 16px 16px;
position: relative;
}
@media only screen and (min-width: 980px) {
header::before{
content: "";
position: absolute;
bottom : -15px;
left: 0px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent #d0d0d0 transparent transparent;
}
header::after{
content: "";
position: absolute;
bottom : -15px;
right: 0px;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #d0d0d0 transparent transparent
}
}
header ul {
font-size: 100%;
}
header a {
color: #7c7c7c;
}
nav .active a {
font-weight: normal;
}
.logo {
color: #559966;
}
.page{
max-width: 930px;
margin: auto;
}
.page-header{
background-color: #eeeeee;
border: 1px solid #e4e4e4;
padding: 13px 13px;
}
.page-section h2,
.page-header h2 {
color: #333;
border-bottom: 0;
}
.page-header h2,
.page-header ul{
display: inline-block;
}
.page-header li {
font-size: 100%;
margin-left: 6px;
border-right: 1px solid #559966;
}
.page-header a{
text-decoration: none;
color: #559966;
}
/* items listing */
.items article {
border: 0;
margin-bottom: 30px;
background-color: #e4e4e4;
width: 440px;
display: inline-block;
vertical-align: top;
position: relative;
margin-right : 25px;
}
.items article::before{
content: "";
position: absolute;
bottom: -5px;
left: 10px;
width: 42px;
height: 5px;
}
.items article:nth-child(2n+2){
margin-right : 0;
}
.items #current-item {
padding: 2px 2px;
}
.items #current-item::before{
bottom: -9px;
left: 7px;
width: 430px;
height: 3px;
-webkit-transition: width 200ms ease;
-moz-transition: width 200ms ease;
-ms-transition: width 200ms ease;
-o-transition: width 200ms ease;
transition: width 200ms ease;
}
.items h2 {
padding: 3px 0 11px 5px;
font-weight: normal;
min-height: 35px;
}
.items .preview {
line-height: 1.25em;
font-size: 100%;
font-family: Georgia, serif;
overflow: auto;
color: #949494;
background-color: #eeeeee;
padding: 5px 5px;
min-height: 125px;
width: 430px;
}
.items .item-menu{
font-size: 76%;
padding: 5px 0 0 5px;
color: #929292;
}
.items .item-menu a{
color: #929292;
}
.items .item-menu .bookmark,
.items .item-menu .delete,
.items .item-menu .mark{
color: transparent;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
width: 15px;
height: 15px;
}
.items .item-menu .bookmark{
background-image: url("../img/star.png");
}
.items .item-menu .delete{
background-image: url("../img/cross.png");
}
.items .item-menu .mark{
background-image: url("../img/tick.png");
}
/* item */
.item-menu li,
ul.item-infos li {
border-right: 1px solid #929292;
}
/* responsive for big screen */
@media only screen and (min-width: 1440px) {
body{max-width: 1435px;}
.page{max-width: 1405px;}
.items article {margin-right : 23px;}
.items article:nth-child(2n+2){margin-right : 23px;}
.items article:nth-child(3n+3){margin-right : 0;}
}
/* responsive for little screen */
@media only screen and (max-width: 980px) {
header {margin-top: 0px;}
.items article {
margin-bottom: 20px;
width: 100%;
margin-right : 0;
padding: 5px 0;
}
.items h2{min-height: initial;}
.items .preview {
width: 98%;
min-height: initial;
}
}