diff options
| author | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2026-07-12 15:51:52 +0300 |
|---|---|---|
| committer | Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2026-07-12 15:51:52 +0300 |
| commit | 02608271bb2a9f3a65ed536984d306ee14b48e34 (patch) | |
| tree | 3f23ec48a694ec014e845c4f70d9b5f1c065403c /public/css/pi.css | |
| download | kalassa-02608271bb2a9f3a65ed536984d306ee14b48e34.tar.gz kalassa-02608271bb2a9f3a65ed536984d306ee14b48e34.tar.bz2 kalassa-02608271bb2a9f3a65ed536984d306ee14b48e34.zip | |
Diffstat (limited to 'public/css/pi.css')
| -rw-r--r-- | public/css/pi.css | 192 |
1 files changed, 192 insertions, 0 deletions
diff --git a/public/css/pi.css b/public/css/pi.css new file mode 100644 index 0000000..3f9bd7b --- /dev/null +++ b/public/css/pi.css @@ -0,0 +1,192 @@ +/*! + * pi-kallassa v0.2 + * Copyright 2019-2020 Geo Halkiadakis + * Licensed under MIT + */ + +/* common CSS -------------------------------------------------------------- +//////////////////////////////////////////////////////////////////////////// */ + +html, body { padding: 16px; font-family: Ubuntu, Arial, sans-serif; font-size: 14px; } +h2 { font-family: Ubuntu, Arial, sans-serif; font-size: 28px; font-weight: 300; padding: 40px 0 24px 0; text-align: right; } +h3 { font-family: Ubuntu, Arial, sans-serif; font-size: 22px; font-weight: 300; } +h4 { font-family: Ubuntu, Arial, sans-serif; font-size: 16px; font-weight: 300; } +/* input, select, textarea { width: 33%; max-width: 320px; font-size: 14px; padding: 3px; } */ +textarea { height: 120px !important; } + +/* upgrade bootstrap ------------------------------------------------------- + * add 1/5th column widths as col-md-15 +//////////////////////////////////////////////////////////////////////////// */ +/* .col-md-15 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } */ +.col-md-15 { position: relative; width: 50%; padding-right: 15px; padding-left: 15px; } +@media screen and (min-width: 768px) { .col-md-15 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } + + + +/* pi containers and classes ----------------------------------------------- +//////////////////////////////////////////////////////////////////////////// */ + +.pi-container { max-width: 960px; width: 100%; margin: 0 auto; } +.login-container { width: 100%; max-width: 360px; margin: 0 auto; } +.profile-container { width: 100%; max-width: 480px; margin: 0 auto; } + +#pi-menu { position: absolute;; top: 8px; left: 8px; z-index: 99; } + +#empty-fields { padding: 15px; line-height: 18px; + font: 12px "Ubuntu Mono", Consolas, Monaco, fixed; font-weight: 700; color: #777; +} +#empty-fields span { font-weight: 400; color: #999; background: #f6f6f6; border-radius: 3px; padding: 3px 7px; } + +.auto-field { color: #f6f6f6; background: #444; border-radius: 3px; padding: 3px 7px; + font: 14px "Ubuntu Mono", Consolas, Monaco, fixed; font-weight: 700; +} + +/* panel sections +---------------------------------------------------------------------------- */ +.panel-sections .btn { width: 100%; } +.stats table { font-size: 13px; color: #777; width: 100%; } +.stats tr { border-bottom: 1px solid #ddd; height: 32px;} +.stats tr.summary { color: #444; font-weight: 700; border-bottom: none; } +.stats td span { display: inline-block; width: 47px; color: #555; } +.stats table a { float:right; width: 96px !important; } + +@media screen and (max-width: 767.98px) { + .panel-sections { padding-top: 32px; } +} + +/* .border-r { border-right: 1px solid #eee; } */ + +/* overides ---------------------------------------------------------------- +//////////////////////////////////////////////////////////////////////////// */ + +.card-body { margin-bottom: 2em; } + +.select-field { width: 100%; } +.select2-container .select2-selection--single { height: 32px; } +.select2-container--default .select2-selection--single .select2-selection__clear { font-size: 18px; color: #999; } + +.dropdown-item.disabled, .dropdown-item:disabled { font-size: 12px; } + +textarea.tall { height: 180px !important; } + + +/* extends ----------------------------------------------------------------- +//////////////////////////////////////////////////////////////////////////// */ +.btn-pi-color, .btn-pi-light { font-size: 12px; padding: 3px 8px; margin-left: 8px; } +.btn-pi-color { color: #444 !important; background: #def; border-color: #bcd; } +.btn-pi-light { color: #444 !important; background: #eee; border-color: #ddd; } + + +/* special classes --------------------------------------------------------- +//////////////////////////////////////////////////////////////////////////// */ + +.more { color: #566; } +.line-right { border-right: 1px solid #eee; } +.login-container label { color: #444; font-size: 12px; text-align: left; padding: 4px 0 0 0 !important; font-weight: 300; width: 100%; } + +.pi-preview { font-size: 12px; border-bottom: 1px solid #ddd; } +.user-profile span, +.pi-preview span { padding: 2px 6px; margin-right: 3px; color: #222; background: #eee; border-radius: 2px; } + +a.pi-show--tab, a.pi-show--tab:hover { display: block; font-size: 15px; color: #333; } + +.pi-action { float: right; } + +.list-results h4 { height: 24px; } +.list-results .img-thumbnail { max-height: 102px; } + +.user-profile div { padding-top: 8px; } +.some-form label { color: #444; font-size: 12px; text-align: left; padding: 4px 0 0 0 !important; font-weight: 300; width: 100%; } + +.light-text { color: #999; } + + +/* upload image form +//////////////////////////////////////////////////////////////////////////// */ + +#collapse-image .card { background: #fcfaf9; } +#collapse-image .pi-note { display: none; } +.bgColor { max-width: 440px; height:150px; background: #fcfaf9; /*#fff4be; */ border-radius: 4px; } +.bgColor label{ font-weight: bold; color: #A0A0A0; } +#targetLayer, #targetLayer2 { float:left; + width:150px; height:150px; + text-align:center; line-height:150px; + font-weight: 700; color: #C0C0C0; background: #F0E8E0; + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +#uploadFormLayer, #uploadFormLayer2{ float:left; padding: 20px; } + +.btnSubmit { background-color: #696969; color: #fff; + border: #696969 1px solid; border-radius: 4px; + padding: 5px 30px; margin-top: 10px; +} +.inputFile { width: 240px; padding: 5px; background: #fff; + border:#F0E8E0 1px solid; border-radius: 4px; + width: 148px; +} +.image-preview { max-width:100%; max-height:100%; + border-bottom-left-radius: 4px; border-top-left-radius: 4px; +} +@media screen and (min-width: 540px) { .inputFile { width: 220px; } } +@media screen and (min-width: 840px) { + .bgColor { max-width: 720px; height: 240px; } + #targetLayer, #targetLayer2 { width: 240px; height: 240px; line-height: 240px; } + #uploadFormLayer, #uploadFormLayer2 { width: 480px; } + .inputFile { width: 100%; } + #collapse-image .pi-note { display: block; } +} + + +/* tabs to accorderon ------------------------------------------------------ +//////////////////////////////////////////////////////////////////////////// */ + +#tabsContainer { padding: 35px 0 ; margin: 0 auto; + background: #fff; + max-width: 960px; width: 100%; + /* border: 1px solid #c00; */ +} +.tabArea { border-bottom: 1px solid #ccc; text-align: center; } +.tab--content { display: none; position: absolute; + max-width: 960px; width: calc(100% - 64px); + padding: 10px 15px; margin: 0 auto; margin-top: 4px; + background: #f6f6f6; text-align: left; +} +.tab--content.ghost{ position: relative; visibility: hidden; + width: 100%; top: 0; left: 0; +} +.tabArea input[name=tabs] { display: none; } +.tabArea label { display: inline-block; width: calc(16.66% - 36px); + margin: 0; padding: 14px 16px; + font-weight: 400; text-align: center; + color: #aaa; + border: 1px solid transparent; +} +.tabArea label:hover { color: #888; cursor: pointer; } +.tabArea input:checked + label { color: #444; border-bottom: 3px solid orange; font-weight: 700; } +#tab1:checked ~ #content1, +#tab2:checked ~ #content2, +#tab3:checked ~ #content3, +#tab4:checked ~ #content4, +#tab5:checked ~ #content5, +#tab6:checked ~ #content6 { display: block; } + +.tab--content label, +.tab--content label:hover { color: #444; font-size: 12px; text-align: left; padding: 4px 0 0 0 !important; font-weight: 300; width: 100%; } +.tab--content label span { background: #ddd; padding: 0 4px; border-radius: 2px; } + +@media screen and (max-width: 960px) { + .tabArea label { width: calc(16.66% - 12px); padding: 14px 2px; font-size: .9em; } + .tab--content label, .tab--content label:hover { width: 100%; font-size: 13px !important; } +} +@media screen and (max-width: 720px) { + .tabArea label { display: block; text-align: left; width: 100%; font-weight: 700; font-size: 1em; } + .tabArea label:before { content: "+"; margin: 0; font-size: 18px; padding-right: 14px; } + .tab--content { position: relative; height: auto; width: 100%; padding: 10px 8px; } + .tab--content label, .tab--content label:hover { font-weight: 300; } + .tab--content label:before { content: none; } + .tabArea { border: none; } +} +@media screen and (max-width: 400px) { + /* label { padding: 15px; } */ +} |
