Mercurial > libervia-templates
view default/static/styles.css @ 143:a37d535b7ddd
login/logged.html: show a different message when user is guest + show how long the session has been run for
author | Goffi <goffi@goffi.org> |
---|---|
date | Fri, 01 Jun 2018 18:34:26 +0200 |
parents | b1e22caab8bc |
children |
line wrap: on
line source
:root { --select-bg-color: #ddd; --size-medium: 3em; } html { font-family: "sat-base-font"; } body { margin: 0; padding: 0; display: flex; height: 100vh; flex-direction: column; box-sizing: border-box; } ul { padding: 0; } #main_side_bar { } #main_area { flex: 1; display: flex; flex-direction: column; box-sizing: border-box; } #body { flex: 1; position: relative; } footer { text-align: center; font-size: 0.7em; font-weight: bold; } .box { background-color: #edf2ff; border-radius: 0; border-color: silver; } .box__tools { margin: 0; padding: 0; } .box__tools a { text-decoration: none; color: inherit; padding: 0.2em; border-radius: 0.4em; } .box__tools a:hover { background-color: var(--select-bg-color); } .title { font-weight: bold; text-align: center; } .post_confirm { text-align: center; background-color: lightgreen; padding: 1em; font-size: 1.2em; font-weight: bold; width: 60%; margin: 1.5em auto; } /*** Generic ***/ .button { padding: 0.5em 1em; background: #333; color: #ccc; border: 1px solid #555; border-radius: 0.8em; font-weight: bold; } .button:hover { background-color: #bc0000; } .instructions--head { font-size: 1.5em; text-align: center; } .instructions--alt { text-align: center; font-style: italic; } .items_vert--centered { display: flex; flex-direction: column; align-items: center; } /*** blocks ***/ .block_separator { font-size: 1.4em; display: flex; } .block_separator__label { display: inline-block; margin: 0 0.2em; } .block_separator__line { height: 1px; background: #ccc; flex: 1; margin-top: 0.7em; } /*** grids ***/ .grid { list-style: none; display: flex; flex-wrap: wrap; } .grid--center { justify-content: center; } .grid__item>a { text-decoration: none; color: inherit; } .grid__item--medium { width: 170px; padding: 0.2em; text-align: center; } .grid__item--selectable { cursor: pointer; } .grid__item--selectable:hover { background-color: var(--select-bg-color); } /*** avatars ***/ .avatar { height: 2rem; width: 2rem; display: inline-flex; flex-direction: column; align-content: center; justify-content: center; background: #ccc; border-radius: 0.2rem; } .avatar__content { } .avatar--medium { height: var(--size-medium); width: var(--size-medium); border-radius: 0.5rem; } .avatar--generated { text-align: center; background: #43d2f6; } /*** icons ***/ .icon--medium { height: var(--size-medium); display: block; margin: 0 auto; } .icon--small { height: 1em; } .icon--soft { fill: #777; } .icon__name { } /*** Messages ***/ .message--info { max-width: 500px; margin: 0 auto; padding: 1em; text-align: justify; } .message--info pre { background: #ddd; padding: 1em; } /*** Menus ***/ .menu ul { display: flex; margin-top: 8px; list-style: none; } .menu a { display: block; color: inherit; text-decoration: none; font-variant: small-caps; } .main_menu { min-width: 200px; /* background-color: #eaeaea; */ background-color: #333; color: white; } .main_menu ul { flex-direction: row; flex-wrap: wrap; } .main_menu li { flex: 1; padding: 0; margin: 0 0.5em; } .main_menu a { display: inline; white-space: nowrap; } .main_menu a:hover { background-color: initial; text-shadow: 1px 1px 2px; font-weight: bold; } .category_menu ul { justify-content: center; } .category_menu li { margin: 0.5em; text-align: center; } .category_menu a { border: solid 1px; padding: 0.5em; border-radius: 0.2em; background: #eee; } /*** containers ***/ /* tabs */ .tab_container { max-width: 1000px; margin: 0 auto; } .tab_header { background-color: white; border-bottom: 1px solid lightgrey; } .tab_header ul { display: flex; margin: 0; padding: 0; list-style: none; background-color: white; } .tab_page { box-sizing: border-box; padding-top: 2em; border: 1px solid lightgrey; border-top: none; display: None; } .tab_page.clicked { display: block; } .tab_button { display: inline; color: grey; background-color: white; border-top: 1px solid lightgrey; border-left: 1px solid lightgrey; border-bottom: 1px solid lightgrey; padding: 0 1em; cursor: pointer; /* we go down by 1px to remove bottom border from .tab_header */ margin-bottom: -1px; } .tab_button.clicked { /* background: lightgrey; */ color: inherit; border-bottom: none; } li.tab_button:last-child { border-right: 1px solid lightgrey; } .tab_button input { display: None; } .tab_button label { margin: 1em; } .tab_button input:checked + label { font-weight: bold; } /*** Forms ***/ /* a form with only one field */ .form_single { text-align: center; } .form_single input:not([type="submit"]) { margin: 0 1em; width: 15em; border-radius: 0.7em; outline: none; border: 1px solid black; padding: 0.4em; box-shadow: none; } .form_submit { margin: 1em auto 0; display: block; } .form_jid { text-align: center; } /* Textboxes */ form.textbox>* { display: block; margin: 1em auto; text-align: center; max-width: 100%; box-sizing: border-box; } form.textbox>textarea { text-align: left; } .log_request { text-align: center; } /*** Navigation ***/ .prev_next_links ul { list-style: none; display: flex; padding: 0 2em; margin: 0; } .prev_next_links li { flex: 1; } .prev_next_links li.older_items { text-align: right; } .prev_next_links img { display: block; } .prev_next_links .older_items img { display: block; margin-left: auto; margin-right: 0; } .prev_next_links a { display: inline-block; margin-top: 1em; padding: 0.2em; text-decoration: None; color: inherit; font-variant: small-caps; background: rgba(200,200,200,0.6); border-radius: 0.5em; } .prev_next_links a:hover { background-color: #ddd; } /*** XMLUI ***/ .xmlui_cont_vertical>* { display: block; box-sizing: border-box; } .xmlui_cont_vertical>.xmlui_widget { width: 100%; min-height: 1em; min-width: 1px; } label.xmlui_label { font-weight: bold; } td a { /* we use <a> for non JS links in table * so we don't want specific color/text-decoration by default */ color: inherit; text-decoration: inherit; } /*** Notifications ***/ .notification.retry { position: fixed; top: 1rem; margin: auto; width: 80%; background: #DB1616; border: 3px solid silver; left: 10%; text-align: center; } #retry_counter { font-weight: bold; } #retry_now { color: blue; text-decoration: underline; cursor: pointer; } @media (min-width: 800px) { html { background-size: auto; } body { flex-direction: row; } #main_area { overflow: auto; } .box { border-radius: 1em; box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); } .main_menu a { display: block; padding: 2em 0; } .main_menu ul { flex-direction: column; padding-left: 2em; } .prev_next_links ul { padding: 0 6em; } .instructions--alt { padding-top: 3rem; } /*** forms ***/ .form_single .form_submit.button { display: inline; } }