Mercurial > libervia-templates
view default/static/blog.css @ 62:e7b62f6980a1
ticket: added menus
author | Goffi <goffi@goffi.org> |
---|---|
date | Sat, 11 Nov 2017 00:17:01 +0100 |
parents | 580670430fa2 |
children | 650f3456f80d |
line wrap: on
line source
/*** articles ***/ article.box { position: relative; margin: 2% auto; border-style: solid none none; border-width: 1px; padding: 2%; max-height: 7em; overflow: hidden; transition: max-height 0.5s; } .main_article article.box:not(.clicked) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } /** header **/ header .metadata { text-align: right; } article .author { font-weight: bold; } article .author::after { content: ", "; } /** 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; } /*** 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 input { display: block; margin: 0 auto; } .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) { 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; } } /*** 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; }