Mercurial > libervia-templates
view default/static/blog.css @ 134:f1d47c2942ae
blog (discover): new discover template
author | Goffi <goffi@goffi.org> |
---|---|
date | Mon, 26 Mar 2018 08:13:53 +0200 |
parents | ab2dd835e597 |
children |
line wrap: on
line source
/*** articles ***/ article.box { position: relative; margin: 2% auto; border-style: solid none none; border-width: 1px; padding: 2%; min-height: 9em; max-height: 20em; overflow: hidden; transition: max-height 0.5s; } article video { max-width: 100%; height: auto; } .main_article article.box:not(.clicked) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } /** header **/ header a { color: inherit; text-decoration: inherit; } header .metadata { text-align: right; } article .author { font-weight: bold; } article .author::after { content: ", "; } /*** labels ***/ .labels { text-align: right; white-space: nowrap; } .labels a { text-decoration: none; color: inherit; } .labels span { font-variant: small-caps; font-size: 0.8rem; background-color: #ddd; border-radius: 0.4em; padding: 0 0.5em; transition: all 0.5s; } .labels a>span { cursor: pointer; } .labels a>span:hover { box-shadow: 0px 0px 6px 1px #000; } /** content **/ article div.content { text-align: justify; font-size: 0.9em; } article div.content.text { white-space: pre-wrap; } article img { max-width: 100%; margin: 0; } /** reduce/expand buttons **/ .expand_box { cursor: pointer; } .box_top { position: absolute; top: 0; left: 0; width: 100%; } .box_bottom { position: absolute; bottom: 0; left: 0; width: 100%; } .expand_box.box_bottom::before { /* we do a gradient to show that text can be expanded */ background-image: linear-gradient(to bottom,rgba(0,0,0,0),#ffffff); display: block; content: ""; width: 100%; height: 4em; border: none; } .expand_box p { background-color: white; margin: 0; text-align: center; font-weight: bold; font-size: 0.8em; border-style: solid none dotted none; border-width: 1px 0 1px; border-bottom-color: gray; } article .expand_box .hide { /* when not clicked, we only display .show */ display: none; } article .expand_box.box_top { /* top expand box only show a reduce button * so it should be displayed only when article is .clicked */ display: none; } /** other language **/ /* we hide everything just to display a message informing that * the item is in an other language, and asking to click * to display it */ article.other_lang>div.info { display: none; } article.other_lang.init>* { display: none; } article.other_lang.init>div.info { display: initial; } article.other_lang.init>div.expand_box.box_top { /* as we need to have the message clickable, we cheat and use * expand box on the whole surface but fully transparent */ display: initial; height: 100%; opacity: 0; } article.other_lang.init>div.info>p { margin: 0; padding: 0.2em; text-align: center; font-style: italic; } article.other_lang.init { border: none; border-radius: 0; padding: 0; min-height: 0; } /*** comments ***/ button.comments_btn { border: none; font-weight: bold; display: block; margin: 0 10% 0 auto; border-radius: 1em; background: #b8bcc4; color: #4d4d4d; } button.comments_btn:active { background: #4d4d4d; color: #b8bcc4; } button.comments_btn.clicked span.show { display: none; } button.comments_btn:not(.clicked) span.hide { display: none; } .comments_panel { max-height: 0; opacity: 0; transition: max-height 1s, opacity 2s; overflow: hidden; } .comments_panel.clicked { opacity: 1; } .comments article { background-color: #9ca0a8; border: none; max-height: none; } .comment_post { text-align: center; } .comment_post textarea { border-style: solid; border-width: 1px 0; border-color: black; max-width: 100%; } .comments_panel article .expand_box { /* no expand box in comments */ display: none; } /*** media queries ***/ @media (min-width: 500px) { /*** general ***/ #main_area { background-image: var(--bg-img); background-repeat: no-repeat; background-size: cover; } article.box { width: 80%; border-style: solid solid none solid; } .comments article.box { width: 30rem; margin: 2% auto; border: none; } .comment_post textarea { border-width: 1px; border-radius: 1em; border: solid 1px; padding: 0.5em; } footer span { background: rgba(200,200,200,0.6); border-radius: 0.5em 0.5em 0 0; padding: 0 0.5em; margin-top: 1em; } } /*** clicked ***/ .main_article article.clicked { border-bottom-style: solid; } .main_article article.clicked .expand_box.box_top { display: initial; } .main_article article.clicked .expand_box { opacity: 0; transition: opacity 0.5s; } .main_article article.clicked .expand_box p { background-color: transparent; border: none; } .main_article article.clicked .expand_box:hover { opacity: 1; color: grey; } .main_article article.clicked .expand_box::before { background-image: none; display: none; } .main_article article.clicked .expand_box .hide { display: inline; } .main_article article.clicked .expand_box .show { display: none; }