summaryrefslogtreecommitdiff
path: root/public/css/pi.css
diff options
context:
space:
mode:
authorGeo Halkiadakis <gchalkiadakis@sklavenitis.co.gr>2026-07-12 15:51:52 +0300
committerGeo Halkiadakis <gchalkiadakis@sklavenitis.co.gr>2026-07-12 15:51:52 +0300
commit02608271bb2a9f3a65ed536984d306ee14b48e34 (patch)
tree3f23ec48a694ec014e845c4f70d9b5f1c065403c /public/css/pi.css
downloadkalassa-master.tar.gz
kalassa-master.tar.bz2
kalassa-master.zip
initialize repository; add docker config; migrate configuration to new specsHEADmaster
Diffstat (limited to 'public/css/pi.css')
-rw-r--r--public/css/pi.css192
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; } */
+}