FreshRSS/p/themes/Ansum/_layout.scss

/*=== STRUCTURE */
/*===============*/
/*=== Header */
.header {
    background: $sid-bg;
    padding: 0.5rem 1.35rem;
    display: block;
    table-layout: none;
    width: auto;

    .item{
	vertical-align: middle;
	// text-align: center;
	// display: flex;
	// justify-content: space-between;
	// flex-direction: row;
	
	&.title{

	    font-weight: 400;
	    width: 280px;
	    
	    h1{
		a{
		    text-decoration: none;
		    color: $sid-font-color;
		    font-size: 1rem;
		    text-transform: uppercase;
		    letter-spacing: 1px;
		    
		    img{
			margin-right: 0.5rem;

		    }
		}
	    }
	}
	&.search{
	    // text-align: center;
	    // width: 50%;

	    input{
		width: 230px;
		border-radius: 2px 0 0 2px;
		background-color: $sid-bg-alt;
		color: $sid-font-color;
		border: none;

		@include transition(all, 0.15s, ease-in-out);

		&:hover{
		    background-color: $sid-bg-dark;
		}
		
		&:focus{
		    width: 350px;

		    background-color: $white;
		    color: $grey-dark;
		}
	    }
	    .btn{
		img{display: none;}
		border-radius: 0 2px 2px 0;

		background-color: $main-first;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url(icons/magnifier.svg);
		
		border-left-width: 0;

		width: 3rem;
		min-height: 35px;

		&:hover{
		    background-color: $main-first-alt;
		}
	    }
	}
	&.configure{
	    width: 2rem;
	    position: absolute;
	    right: 1rem;
	    top: 1.25rem;
	    text-align: center;
	    // float: right;
	    
	    .btn{
		img{display: none;}
		// border-radius: 0 2px 2px 0;

		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-image: url(icons/cog.svg);

		padding: 0 0.5rem;
		
		// border-left-width: 0;

		// width: 3rem;

		&:hover{
		    // background-color: $main-first-alt;
		}
	    }
	}
    }

    
}

/*=== Body */
#global {
    height: calc(100% - 85px);
}




/*=== Prompt (centered) */
.prompt {
    text-align: center;
}
.prompt label {
    text-align: left;
}
.prompt form {
    margin: 10px auto 20px auto;
    width: 200px;
}
.prompt input {
    margin: 5px auto;
    width: 100%;
}
.prompt p {
    margin: 20px 0;
}

/*=== New article notification */
#new-article {
    text-align: center;
    font-size: 1rem;
    background: $main-first;
}
#new-article:hover {
    background: $main-first-alt;
}
#new-article > a {
    line-height: 3em;
    font-weight: bold;
    color: $white;
}
#new-article > a:hover {
    text-decoration: none;
}

/*=== Day indication */
.day {
    padding: 1rem 0 0 1.25rem;
    font-weight: 700;
    line-height: 3em;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.875rem;
    color: $light-font-color;
    // border-left: 2px solid #ecf0f1;

    .name{
	padding: 0 1rem 0 1rem;
	font-size: 0.875rem;
	// font-weight: 700;
	color: $main-font-color;
	position: relative;
	left: 0;
	
	// letter-spacing: 1px;
	text-transform: uppercase;
    }
}

/*=== Index menu */
.nav_menu {
    text-align: center;
    padding: 5px 0;

    .btn{
	border-left-width: 0;
	padding: 0.5rem 1rem;
	background-color: $grey-lighter;
	background-position: center;
	background-repeat: no-repeat;

	&:hover{
	    background-color: $grey-light;
	}
    }
  
    .stick{
	background: $grey-lighter;
	
	.btn{
	    border-left-width: 0;
	    padding: 0.5rem 1rem;
	    background-color: $grey-lighter;
	    background-position: center;
	    background-repeat: no-repeat;
	    @include transition(all, 0.15s, ease-in-out);

	    &:hover{
		background-color: $grey-medium-light;
	    }

	    &.active{
		background-color: $main-first;
	    }
	    
	    img.icon{display: none;} // on efface pour afficher nos icones, mouhahaha !!


	    // actions
	    &#toggle-read{
		background-image: url(icons/read.svg);
	    }
	    &#toggle-read.active{
		background-image: url(icons/read-white.svg);
	    }
	    
	    &#toggle-unread{
		background-image: url(icons/unread.svg);
	    }
	    &#toggle-unread.active{
		background-image: url(icons/unread-white.svg);
	    }

	    &#toggle-starred{
		background-image: url(icons/starred.svg);
	    }
	    &#toggle-starred.active{
		background-image: url(icons/starred-white.svg);
	    }

	    &#toggle-non-starred{
		background-image: url(icons/non-starred.svg);
	    }
	    &#toggle-non-starred.active{
		background-image: url(icons/non-starred-white.svg);
	    }

	    // read all
	    &.read_all{
		background-color: $grey-lighter;
		// min-height: 0;
		color:$main-font-color;
		padding: 5px 16px;
		@include transition(all, 0.15s, ease-in-out);

		&:hover{
		    background-color: $grey-medium-light;
		}
	    }

	    // views
	    &.view-normal{
		background-image: url(icons/view-list.svg);
	    }
	    &.view-normal.active{
		background-image: url(icons/view-list-white.svg);
	    }

	    &.view-global{
		background-image: url(icons/view-global.svg);
	    }
	    &.view-global.active{
		background-image: url(icons/view-global-white.svg);
	    }

	    &.view-reader{
		background-image: url(icons/view-reader.svg);
	    }
	    &.view-reader.active{
		background-image: url(icons/view-reader-white.svg);
	    }

	    &.view-rss{
		background-image: url(icons/rss.svg);
	    }
	    
	}
	.dropdown {
	    a.dropdown-toggle{
		border-left-width: 0;
		background-image: url(icons/more.svg);
	    }
	}
	
	&#nav_menu_action{
	    
	}
	&#nav_menu_read_all{
	    
	}
	&#nav_menu_views{
	    
	}
    }
}


#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
    vertical-align: middle;
    background-color: $grey-medium-dark;
    border-radius: 3px;
}


/*=== Content of feed articles */
.content, .content.thin {
    padding: 20px 10px;

    font-size: 1.125rem;
    line-height: 1.8rem;

    h1.title, h1{

	a{
	    color: $main-font-color;
	    font-family: "spectral";
	    font-size: 2rem;

	    &:hover{
		color: $main-first;
		text-decoration: none;
	    }
	}
    }
    .author{
	font-size: 1.125rem;
	color: $light-font-color;
    }
    p, ul{
	font-size: 1.125rem;
	line-height: 1.8rem;
    }
    hr{
    }
    .content hr {
	margin: 30px 10px;
	height: 1px;
	background: $grey-medium-light;
	border: 0;
	box-shadow: 0 2px 5px #ccc;
    }

    pre {
	margin: 10px auto;
	padding: 10px 20px;
	overflow: auto;
	background: $main-first-darker;
	color: $white;
	font-size: 0.9rem;
	border-radius: 3px;

	code {
	    background: transparent;
	    color: $white;
	    border: none;
	}
    }
    code {
	padding: 2px 5px;
	color: $grey-light;
	background: $grey-lighter;
	border: 1px solid $grey-light;
	border-radius: 3px;
    }


    blockquote {
	display: block;
	margin: 0;
	padding: 5px 20px;
	border-top: 1px solid $grey-medium-light;
	border-bottom: 1px solid $grey-medium-light;
	background: $grey-lighter;
	color: $main-font-color;

	p {
	    margin: 0;
	}
    }

}


/*=== Notification and actualize notification */
.notification {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 3rem;
    
    padding: 1rem 0;
    text-align: center;
    // font-weight: bold;
    font-size: 1em;
    line-height: 3em;
    z-index: 10;
    vertical-align: middle;
    background: $grey-medium-light;
    color: $grey-dark;
    // border-radius: 3px;
    border: none;

    .msg{
	font-size: 1rem;
	display: inline-block;
    }
    
    &.good {
	background: $success-bg;
	color: $white;
    }
    &.bad {
	background: $alert-bg;
	color: $white;
    }
    a.close {
	padding: 0 15px;
	line-height: 3em;
	border-radius: 0 3px 3px 0;
    }
    
    &.good a.close:hover {
	background: $success-text;
    }
    &.bad a.close:hover {
	background: $alert-text;
    }

    &#actualizeProgress {
	line-height: 2em;

	br{
	    display: none;
	}
    }
}


/*=== Navigation menu (for articles) */
#nav_entries {
    margin: 0;
    text-align: center;
    line-height: 3em;
    table-layout: fixed;
    background: $sid-bg;
}