Mercurial > libervia-templates
view sat_templates/default/static/styles.css @ 161:bfe72370ca49
install (setup.py): unset zip_safe, as Libervia or jp need to access files and don't handle zip
author | Goffi <goffi@goffi.org> |
---|---|
date | Sun, 15 Jul 2018 08:56:15 +0200 |
parents | 79e9d7bcd96e |
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; } .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; } /*** boxes ***/ .box { background-color: #edf2ff; border-radius: 0; border-color: silver; margin: 0 auto; } .box--medium { max-width: 50em; } .box--small { max-width: 20em; } .box--hollow { border-radius: 0; border-style: solid; border-color: silver; border-width: 1px 0; margin: 0; } .box--paper { text-align: center; font-variant: small-caps; border: none; } .box--center { } .box__tools { /* toolbar in a box */ 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); } /*** 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; } /*** lists ***/ .list { list-style: none; display: flex; flex-direction: column; } .list__item>a { text-decoration: none; color: inherit; } /*** grids ***/ .grid { display: flex; flex-wrap: wrap; } ul.grid { list-style: none; } .grid--center { justify-content: center; } li.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); } /*** tables ***/ .table--main { margin: 1em auto; border-collapse: collapse; text-align: center; } .table--main th { font-variant: small-caps; border: 1px solid; padding: 0.5em; } .table--main td { border: 1px solid; padding: 0 0.5em; } .table__total { font-variant: small-caps; } .table__total_value { font-weight: bold; } /*** avatars ***/ .avatar { height: 2rem; width: 2rem; align-content: center; justify-content: center; background: #ccc; border-radius: 0.2rem; } .avatar--generated{ display: inline-flex; flex-direction: column; } .avatar--float-left { float: left; margin-top: 0.3em; margin-right: 0.5em; } .avatar__content { } .avatar--medium { height: var(--size-medium); width: var(--size-medium); border-radius: 0.5rem; } .avatar--generated { text-align: center; background: #43d2f6; } /*** images ***/ .img--small { height: 100px; } /*** 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; } .message--note { max-width: 500px; margin: 0 auto; padding: 1em; text-align: center; } /*** 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; overflow: auto; } .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--paper label { font-variant: small-caps; } .form--paper label.required:after { content: " *"; font-weight: bold; } .form--paper textarea { resize: vertical; } .form--single { display: flex; justify-content: center; align-items: center; flex-direction: column; } .form--single input:not([type="submit"]) { margin: 1em 1em; width: 15em; border-radius: 0.7em; outline: none; border: 1px solid black; padding: 0.4em; box-shadow: none; } .form--single .form_input { display: flex; justify-content: center; align-items: center; flex-direction: column; } .form_submit { margin: 1em auto 0; display: block; } .form--single .form_submit { margin: 0; } .form_jid { text-align: center; } .form__panel--vertical { display: flex; flex-direction: column; padding: 2em 0; } .form__panel--vertical label { display: block; } .form__panel--vertical .form_input { margin: 0.5em 0; } .form__panel--center textarea,input:not([type="radio"]) { display: block; margin-left: auto; margin-right: auto; } .form__panel--center label { text-align: center; } .form__field--tiny>input { box-sizing: border-box; width: 3em; } .form__field--small>input { box-sizing: border-box; width: 20em; max-width: 95%; } .form__field--medium>input { box-sizing: border-box; width: 50em; max-width: 95%; } .form__field--big>input,textarea { box-sizing: border-box; width: 100%; } /* Textboxes */ .textbox { margin-left: auto; margin-right: auto; } 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; } /*** boxes ***/ .box { border-radius: 1em; box-shadow: 10px 10px 16px -5px rgba(0,0,0,0.5); width: 94%; margin: 1em auto; border: solid 1px; border-color: #9ca0a8; } .box--medium { width: 33rem; max-width: 100%; } .box--hollow { border-radius: 0.2em; border-width: 1px; margin: 0.5em; } /*** Forms ***/ .form__panel--vertical { display: flex; flex-direction: column; padding: 2em; } .form__field--big>input,textarea { box-sizing: border-box; width: 95%; } .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 input:not([type="submit"]) { margin: 0 1em; } .form--single { display: flex; justify-content: center; flex-direction: row; } .form--single .form_input { flex-direction: row; } }