PHP Classes

File: admin/css/jspanel.css

Recommend this page to a friend!
  Classes of Mark Richards   CliqonV4   admin/css/jspanel.css   Download  
File: admin/css/jspanel.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: CliqonV4
Framework with modules to build Web applications
Author: By
Last change: Merge branch 'master' of https://github.com/webcliq/CliqonV4
Date: 5 years ago
Size: 19,582 bytes
 

Contents

Class file image Download
@charset "UTF-8"; /* jspanel.sass: 2017-06-17 11:56 */ @font-face { font-family: "jsglyph"; src: url("../fonts/jsglyph.eot"); src: url("../fonts/jsglyph.eot?#iefix") format("embedded-opentype"), /* url("../fonts/jsglyph.ttf") format("truetype"), url("../fonts/jsglyph.woff") format("woff"), */ url("../fonts/jsglyph.svg#jsglyph") format("svg"); } .jsglyph { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "jsglyph" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .jsglyph-chevron-down::before { content: "?"; } .jsglyph-chevron-up::before { content: "?"; } .jsglyph-close::before { content: "?"; } .jsglyph-maximize::before { content: "?"; } .jsglyph-minimize::before { content: "?"; } .jsglyph-normalize::before { content: "?"; } .jsPanel { border: 0; box-sizing: border-box; vertical-align: baseline; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); opacity: 0; overflow: visible; position: absolute; border-radius: 3px; z-index: 100; } .jsPanel .jsPanel-hdr { border: 0; box-sizing: border-box; vertical-align: baseline; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; border-top-left-radius: 3px; border-top-right-radius: 3px; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .jsPanel .jsPanel-content { border: 0; box-sizing: border-box; vertical-align: baseline; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal; background: #ffffff; color: #000000; font-size: 12px; position: relative; overflow: hidden; padding: 5px; } .jsPanel .jsPanel-content pre { color: inherit; } .jsPanel .jsPanel-ftr { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top: 1px solid #e0e0e0; cursor: move; display: none; box-sizing: border-box; font-size: 12px; height: auto; background: #f5f5f5; font-weight: normal; color: black; overflow: hidden; } .jsPanel .jsPanel-ftr.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .jsPanel .jsPanel-ftr.active > * { margin: 8px; } .jsPanel .jsPanel-ftr.panel-footer { padding: 0; } .jsPanel-headerbar, .jsPanel-hdr-toolbar { font-size: 18px; } .jsPanel-headerbar { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; min-height: 38px; } .jsPanel-headerbar img { vertical-align: middle; max-height: 38px; } .jsPanel-titlebar { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; cursor: move; min-height: 32px; overflow: hidden; } .jsPanel-titlebar h3 { color: #000000; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-variant: small-caps; font-weight: normal; margin: 10px 5px 10px 8px; } .jsPanel-titlebar h3 small { font-size: 75%; color: inherit; } .jsPanel-titlebar.jsPanel-rtl h3 { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .jsPanel-controlbar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .jsPanel-controlbar div span:hover { opacity: 0.6; } .jsPanel-controlbar .jsPanel-btn { padding: 0 3px; cursor: pointer; } .jsPanel-controlbar .jsPanel-btn span { vertical-align: middle; } .jsPanel-controlbar .jsPanel-btn-normalize { display: none; } .jsPanel-controlbar .jsPanel-btn-smallifyrev { display: none; } .jsPanel-hdr-toolbar { display: none; width: auto; height: auto; font-size: 16px; } .jsPanel-hdr-toolbar.active { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .jsPanel-hdr-toolbar.active > * { margin: 6px 8px; } /* styles for panels using option.rtl */ .jsPanel-headerbar.jsPanel-rtl, .jsPanel-controlbar.jsPanel-rtl, .jsPanel-hdr-toolbar.jsPanel-rtl { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .jsPanel-hdr-toolbar.active.jsPanel-rtl { padding: 7px 0 10px 0; } .jsPanel-ftr.jsPanel-rtl { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } /* css for tooltip connectors */ .jsPanel-connector { pointer-events: none; } /* naming of connectors reflects position of tooltip and not pos of connector */ .jsPanel-connector-top { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-top-width: 10px; left: calc(50% - 12px); bottom: -22px; } .jsPanel-connector-topleft { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-top-width: 10px; left: 2px; bottom: -22px; } .jsPanel-connector-topright { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-top-width: 10px; left: calc(100% - 26px); bottom: -22px; } .jsPanel-connector-right { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-right-width: 10px; left: -22px; top: calc(50% - 12px); } .jsPanel-connector-righttop { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-right-width: 10px; left: -22px; top: 2px; } .jsPanel-connector-rightbottom { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-right-width: 10px; left: -22px; top: calc(100% - 26px); } .jsPanel-connector-bottom { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-bottom-width: 10px; left: calc(50% - 12px); top: -22px; } .jsPanel-connector-bottomleft { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-bottom-width: 10px; left: 2px; top: -22px; } .jsPanel-connector-bottomright { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-bottom-width: 10px; left: calc(100% - 26px); top: -22px; } .jsPanel-connector-left { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-left-width: 10px; left: 100%; top: calc(50% - 12px); } .jsPanel-connector-lefttop { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-left-width: 10px; left: 100%; top: 2px; } .jsPanel-connector-leftbottom { width: 0; height: 0; border: 12px solid transparent; position: absolute; border-left-width: 10px; left: 100%; top: calc(100% - 26px); } /* naming of connectors reflects position of tooltip and not pos of connector */ .jsPanel-connector-lefttopcorner { position: absolute; width: 12px; height: 12px; border: none; border-radius: 50%; left: calc(100% - 6px); top: calc(100% - 6px); } .jsPanel-connector-righttopcorner { position: absolute; width: 12px; height: 12px; border: none; border-radius: 50%; left: -6px; top: calc(100% - 6px); } .jsPanel-connector-rightbottomcorner { position: absolute; width: 12px; height: 12px; border: none; border-radius: 50%; left: -6px; top: -6px; } .jsPanel-connector-leftbottomcorner { position: absolute; width: 12px; height: 12px; border: none; border-radius: 50%; left: calc(100% - 6px); top: -6px; } /* container that takes the minified jsPanels */ #jsPanel-replacement-container, .jsPanel-minimized-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap-reverse; flex-flow: row wrap-reverse; background: transparent none repeat scroll 0 0; bottom: 0; height: auto; left: 0; position: fixed; width: auto; z-index: 9998; } #jsPanel-replacement-container .jsPanel-replacement, .jsPanel-minimized-box .jsPanel-replacement { width: 200px; height: 40px; margin: 1px 1px 0 0; z-index: 9999; } #jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr { padding: 0; } #jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo { max-width: 50%; overflow: hidden; } #jsPanel-replacement-container .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-hdr .jsPanel-headerlogo img { max-width: 100px; max-height: 38px; } #jsPanel-replacement-container .jsPanel-replacement .jsPanel-titlebar, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-titlebar { -webkit-box-flex: 1; -ms-flex: 1 1 60%; flex: 1 1 0; cursor: default; } #jsPanel-replacement-container .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize, .jsPanel-minimized-box .jsPanel-replacement .jsPanel-btn.jsPanel-btn-normalize { display: block; } .jsPanel-minimized-box { position: absolute; width: auto; } /* css for the modal backdrop ------------------------------- */ .jsPanel-modal .jsPanel-hdr, .jsPanel-modal .jsPanel-ftr { cursor: default; } /* css for the hints --------------------------------------- */ .jsPanel-hint .jsPanel-hdr, .jsPanel-hint .jsPanel-ftr { cursor: default; } /* css for the tooltips --------------------------------------- */ .jsPanel-tooltip { overflow: visible; } .jsPanel-tooltip .jsPanel-hdr, .jsPanel-tooltip .jsPanel-ftr { cursor: default; } /* helper classes to make .jsPanel-content a flex box */ .flexOne { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } /* css for resizeit handles ------------------------- */ .jsPanel-resizeit-handle { display: block; font-size: 0.1px; position: absolute; } .jsPanel-resizeit-handle.jsPanel-resizeit-n { cursor: n-resize; height: 10px; left: 0; top: -5px; width: 100%; } .jsPanel-resizeit-handle.jsPanel-resizeit-e { cursor: e-resize; height: 100%; right: -5px; top: 0; width: 10px; } .jsPanel-resizeit-handle.jsPanel-resizeit-s { bottom: -5px; cursor: s-resize; height: 10px; left: 0; width: 100%; } .jsPanel-resizeit-handle.jsPanel-resizeit-w { cursor: w-resize; height: 100%; left: -5px; top: 0; width: 10px; } .jsPanel-resizeit-handle.jsPanel-resizeit-ne { cursor: ne-resize; height: 12px; right: -6px; top: -6px; width: 12px; } .jsPanel-resizeit-handle.jsPanel-resizeit-se { bottom: 1px; cursor: se-resize; height: 12px; right: 1px; width: 12px; } .jsPanel-resizeit-handle.jsPanel-resizeit-sw { bottom: -6px; cursor: sw-resize; height: 12px; left: -6px; width: 12px; } .jsPanel-resizeit-handle.jsPanel-resizeit-nw { cursor: nw-resize; height: 12px; left: -6px; top: -6px; width: 12px; } /* bootstrap adjustments */ .jsPanel.panel-default, .jsPanel.panel-primary, .jsPanel.panel-info, .jsPanel.panel-success, .jsPanel.panel-warning, .jsPanel.panel-danger, .jsPanel.card.card-inverse { box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4); } .jsPanel.panel { margin: 0; } .jsPanel-hdr.panel-heading { border-bottom: none; padding: 0; } .jsPanel-title.panel-title .small, .jsPanel-title.panel-title small { font-size: 75%; } /* bootstrap 4 adjustments */ .jsPanel.card.card-inverse { box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4); } .card-default { background: #f5f5f5; } .card-primary > .jsPanel-content.jsPanel-content-filled, .card-success > .jsPanel-content.jsPanel-content-filled, .card-info > .jsPanel-content.jsPanel-content-filled, .card-warning > .jsPanel-content.jsPanel-content-filled, .card-danger > .jsPanel-content.jsPanel-content-filled { background: transparent; color: #f5f5f5; } .card-default > .jsPanel-content.jsPanel-content-filled { background: transparent; color: #000000; } /* css3 animations */ @keyframes jsPanelFadeIn { from { opacity: 0; } to { opacity: 1; } } .jsPanelFadeIn { opacity: 0; animation: jsPanelFadeIn ease-in 1; animation-fill-mode: forwards; animation-duration: 600ms; } @keyframes modalBackdropFadeIn { from { opacity: 0; } to { opacity: 0.65; } } .jsPanel-modal-backdrop { animation: modalBackdropFadeIn ease-in 1; animation-fill-mode: forwards; animation-duration: 750ms; background: black; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } @keyframes modalBackdropFadeOut { from { opacity: 0.65; } to { opacity: 0; } } .jsPanel-modal-backdrop-out { animation: modalBackdropFadeOut ease-in 1; animation-fill-mode: forwards; animation-duration: 400ms; } .jsPanel-modal-backdrop-multi { background: rgba(0, 0, 0, 0.15); } /* _themes_mdl.sass: 2017-02-14 08:56 */ /* default ---------------------------------------------------------------------------------------------------------- */ .jsPanel-theme-default { background-color: #f5f5f5; border-color: #f5f5f5; } .jsPanel-theme-default > .jsPanel-hdr * { color: #000000; } .jsPanel-theme-default > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #e0e0e0; } .jsPanel-theme-default > .jsPanel-content { border-top: 1px solid #e0e0e0; } .jsPanel-theme-default > .jsPanel-content.jsPanel-content-filled { background-color: #f5f5f5; border-top: 1px solid #e0e0e0; } .jsPanel-theme-default > .jsPanel-content.jsPanel-content-filledlight { background-color: #fafafa; } /* primary ---------------------------------------------------------------------------------------------------------- */ .jsPanel-theme-primary { background-color: #3f51b5; border-color: #3f51b5; } .jsPanel-theme-primary > .jsPanel-hdr * { color: #ffffff; } .jsPanel-theme-primary > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #5c6bc0; } .jsPanel-theme-primary > .jsPanel-content { border-top: 1px solid #5c6bc0; } .jsPanel-theme-primary > .jsPanel-content.jsPanel-content-filled { background-color: #3f51b5; border-top: 1px solid #5c6bc0; color: #ffffff; } .jsPanel-theme-primary > .jsPanel-content.jsPanel-content-filledlight { background-color: #c5cae9; color: #000000; } /* info ------------------------------------------------------------------------------------------------------------- */ .jsPanel-theme-info { background-color: #03a9f4; border-color: #03a9f4; } .jsPanel-theme-info > .jsPanel-hdr * { color: #ffffff; } .jsPanel-theme-info > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #29b6f6; } .jsPanel-theme-info > .jsPanel-content { border-top: 1px solid #29b6f6; } .jsPanel-theme-info > .jsPanel-content.jsPanel-content-filled { background-color: #03a9f4; border-top: 1px solid #29b6f6; color: #ffffff; } .jsPanel-theme-info > .jsPanel-content.jsPanel-content-filledlight { background-color: #b3e5fc; color: #000000; } /* success ---------------------------------------------------------------------------------------------------------- */ .jsPanel-theme-success { background-color: #43a047; border-color: #43a047; } .jsPanel-theme-success > .jsPanel-hdr * { color: #ffffff; } .jsPanel-theme-success > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #66bb6a; } .jsPanel-theme-success > .jsPanel-content.jsPanel-content-filled { background-color: #43a047; border-top: 1px solid #66bb6a; color: #ffffff; } .jsPanel-theme-success > .jsPanel-content.jsPanel-content-filledlight { background-color: #c8e6c9; color: #000000; } /* warning ---------------------------------------------------------------------------------------------------------- */ .jsPanel-theme-warning { background-color: #fb8c00; border-color: #fb8c00; } .jsPanel-theme-warning > .jsPanel-hdr * { color: #000000; } .jsPanel-theme-warning > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #ffb74d; } .jsPanel-theme-warning > .jsPanel-content.jsPanel-content-filled { background-color: #fb8c00; border-top: 1px solid #ffb74d; color: #000000; } .jsPanel-theme-warning > .jsPanel-content.jsPanel-content-filledlight { background-color: #ffe0b2; color: #000000; } /* danger ----------------------------------------------------------------------------------------------------------- */ .jsPanel-theme-danger { background-color: #f4511e; border-color: #f4511e; } .jsPanel-theme-danger > .jsPanel-hdr * { color: #ffffff; } .jsPanel-theme-danger > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #ff7043; } .jsPanel-theme-danger > .jsPanel-content.jsPanel-content-filled { background-color: #f4511e; border-top: 1px solid #ff7043; color: #ffffff; } .jsPanel-theme-danger > .jsPanel-content.jsPanel-content-filledlight { background-color: #ffccbc; color: #000000; } /* custom theme example myblue -------------------------------------------------------------------------------------- */ .jsPanel-theme-myblue { background-color: #1565c0; border-color: #1565c0; } .jsPanel-theme-myblue > .jsPanel-hdr * { color: #ffff00; } .jsPanel-theme-myblue > .jsPanel-hdr .jsPanel-hdr-toolbar { border-top: 1px solid #ffff00; } .jsPanel-theme-myblue > .jsPanel-content { background-color: #eceff1; border-top: 1px solid #ffff00; color: #000000; } .jsPanel-theme-myblue > .jsPanel-content.jsPanel-content-filled { background-color: #42a5f5; border-top: 1px solid #ffff00; color: #ffff00; } .jsPanel-theme-myblue > .jsPanel-content.jsPanel-content-filledlight { background-color: #bbdefb; border-top: 1px solid #ffff00; color: #e65100; } .jsPanel-content.jsPanel-content-noheader { border-top-left-radius: 3px; border-top-right-radius: 3px; border: none !important; } .jsPanel-content.jsPanel-content-nofooter { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }