Changeset View
Changeset View
Standalone View
Standalone View
webroot/rsrc/css/phui/phui-formation-view.css
- This file was added.
| /** | |||||
| * @provides phui-formation-view-css | |||||
| */ | |||||
| .phui-formation-view { | |||||
| table-layout: fixed; | |||||
| width: 100%; | |||||
| } | |||||
| .phui-formation-view-expander { | |||||
| position: fixed; | |||||
| width: 24px; | |||||
| height: 36px; | |||||
| top: 64px; | |||||
| border-style: solid; | |||||
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); | |||||
| border-color: {$lightgreyborder}; | |||||
| background: {$lightgreybackground}; | |||||
| z-index: 4; | |||||
| } | |||||
| .phui-formation-view-expander-left { | |||||
| border-radius: 0 12px 12px 0; | |||||
| border-width: 1px 1px 1px 0; | |||||
| cursor: e-resize; | |||||
| } | |||||
| .phui-formation-view-expander-right { | |||||
| border-radius: 12px 0 0 12px; | |||||
| border-width: 1px 0 1px 1px; | |||||
| cursor: w-resize; | |||||
| } | |||||
| .phui-formation-view-expander-icon { | |||||
| position: absolute; | |||||
| width: 18px; | |||||
| height: 18px; | |||||
| top: 9px; | |||||
| left: 3px; | |||||
| text-align: center; | |||||
| } | |||||
| .device-desktop .phui-formation-view-expander:hover { | |||||
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); | |||||
| background: {$darkgreybackground}; | |||||
| transition: 0.1s; | |||||
| } | |||||
| .device-desktop .phui-formation-view-expander:hover | |||||
| .phui-icon-view { | |||||
| color: {$bluetext}; | |||||
| transition: 0.1s; | |||||
| } | |||||
| .phui-flank-header { | |||||
| padding: 8px; | |||||
| background: {$greybackground}; | |||||
| border-bottom: 1px solid {$lightgreyborder}; | |||||
| } | |||||
| .phui-flank-header-text { | |||||
| color: {$darkgreytext}; | |||||
| font-weight: bold; | |||||
| } | |||||
| .phui-flank-header-hide { | |||||
| font-size: {$normalfontsize}; | |||||
| position: absolute; | |||||
| display: inline-block; | |||||
| top: 6px; | |||||
| right: 6px; | |||||
| width: 20px; | |||||
| height: 20px; | |||||
| text-align: center; | |||||
| border: 1px solid {$lightgreyborder}; | |||||
| border-radius: 4px; | |||||
| line-height: 20px; | |||||
| } | |||||
| .phui-flank-header-hide-left { | |||||
| cursor: w-resize; | |||||
| } | |||||
| .device-desktop .phui-flank-header-hide:hover { | |||||
| box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05); | |||||
| background: {$darkgreybackground}; | |||||
| transition: 0.1s; | |||||
| } | |||||
| .device-desktop .phui-flank-header-hide:hover | |||||
| .phui-icon-view { | |||||
| color: {$bluetext}; | |||||
| transition: 0.1s; | |||||
| } | |||||
| .phui-formation-resizer { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| bottom: 0; | |||||
| cursor: col-resize; | |||||
| background: #f5f5f5; | |||||
| border-style: solid; | |||||
| border-width: 0 1px 0 1px; | |||||
| border-color: #fff #999c9e #fff #999c9e; | |||||
| box-sizing: border-box; | |||||
| box-shadow: inset -1px 0px 1px rgba({$alphablack}, 0.15); | |||||
| background-image: url(/rsrc/image/divot.png); | |||||
| background-position: center; | |||||
| background-repeat: no-repeat; | |||||
| } | |||||
| .phui-flank-view-fixed { | |||||
| position: fixed; | |||||
| top: {$menu.main.height}; | |||||
| bottom: 0; | |||||
| overflow: hidden; | |||||
| } | |||||
| .phui-flank-view-fixed .phui-flank-view-body { | |||||
| overflow: hidden auto; | |||||
| } | |||||
| .device-desktop .phui-flank-view-fixed | |||||
| .phui-flank-view-body::-webkit-scrollbar { | |||||
| height: 6px; | |||||
| width: 6px; | |||||
| background: rgba(0, 0, 0, 0.1); | |||||
| border-radius: 4px; | |||||
| } | |||||
| .device-desktop .phui-flank-view-fixed | |||||
| .phui-flank-view-body::-webkit-scrollbar-thumb { | |||||
| background: rgba(0, 0, 0, 0.25); | |||||
| border-radius: 4px; | |||||
| } | |||||
| .phui-flank-view-fixed .phui-flank-view-tail { | |||||
| position: absolute; | |||||
| bottom: 0; | |||||
| width: 100%; | |||||
| } | |||||