/******* Do not edit this file ******* Simple Custom CSS and JS - by Silkypress.com Saved: Aug 08 2025 | 05:25:20 */ /* ///// Alpha UI ////////////////// ///////////////////////////////// *//*** Webapp theme for AJAX-based pages ***/ :root { --a-panel-border: var(--a-line-border); --a-panel-padding: var(--a-pad); --a-panel-margin: var(--a-mar); --a-panel-gap: var(--a-gap); --a-panel-handle-border: 2px solid #ccc; --a-panel-handle-height: 10px; --a-toolbar-pad: var(--a-gap); --a-tab-frame-bg: rgba(var(--a-white ),1); --a-tab-leaf-bg: rgba(var(--a-gray1 ),1); --a-tab-leaflet-bg: rgba(var(--a-white ),1); } /* ///// Large UI Themes //////////////////////// ////////////////////////////////////////////// */ /*///// Panel - Core Component /////*/ .panel { display:flex; flex-direction:column; box-sizing:border-box; border-radius: var(--a-border-radius); border: var(--a-panel-border); gap: var(--a-panel-gap); position:relative; font-size: 1rem; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .panel:not([bg]) { background-color: #ffffff; } .panel.no-rim { border:0; } .panel > header:first-child, .panel > footer:last-child, .panel > .content { display:flex; justify-content:space-between; gap:var(--a-panel-gap) } .panel > header, .panel > footer, .panel > .content { font-size:0.875rem; padding: var(--a-panel-padding); } .panel > .content { flex-direction:column; padding:0px var(--a-panel-padding); } .panel > footer { flex-direction:row-reverse; } .panel b { font-size:0.875rem; } .panel i { font-size:0.750rem; color: rgb(var(--a-font2-color)); } .panel h4,.panel h5,.panel h6 { line-height:1.25; } .panel > :first-child { border-top-left-radius: calc(var(--a-border-radius) - 1px); border-top-right-radius: calc(var(--a-border-radius) - 1px); } .panel > :last-child { border-bottom-left-radius: calc(var(--a-border-radius) - 1px); border-bottom-right-radius: calc(var(--a-border-radius) - 1px); } /*** Paddings ***/ .panel.slim > *:not(.block):first-child { padding-bottom: 0; } .panel.slim > *:not(.block):last-child { padding-top: 0; } .panel.slim > *:nth-child(n+2):not(:last-child) { padding:0 var(--a-panel-padding); } /*** Margins ***/ .panel.fit-items > .block { margin:0; } /*** Handle ***/ .panel div[handle] { display:flex; justify-content:center; gap:0; align-items:center; position:absolute; bottom:0px; left:0px; right:0px; height:15px; margin-bottom:calc(15px - var(--a-panel-gap)); cursor:grab; } .panel div[handle] + footer { padding-bottom: calc(var(--a-panel-handle-height) + var(--a-panel-padding)); } .panel div:where([handle],[vhandle]):before { content:''; border:var(--a-panel-handle-border); border-radius:3px; display:inline-block; width:0px; height:0px; } .panel div[handle]:before { width: 40px; } .panel div[vhandle]:before { height:40px; } /*///// Block - Core Component /////*/ /* note: blocks are padded and has highlighting */ .block { display:flex; align-items:flex-start; justify-content:space-between; padding: 5px var(--a-panel-padding); gap:var(--a-panel-gap); } .block > :nth-child(2) { flex-grow:1; align-self:center; } .block > .center { text-align:center; } .block > .middle { align-self:center; } .block > header:first-child, .block > footer:last-child, .block > .content { display: flex; justify-content:space-between; gap:var(--a-panel-gap) } /*** Basic Add-on ***/ .rounded > .block { border-radius:var(--a-button-radius); margin:0 var(--a-panel-margin) } .slim > .block { padding:5px var(--a-panel-padding) !important; } /*** Border Add-on - Activities ***/ .block.activity { --a-act-color: gainsboro; position:relative; box-shadow:0px 1px 3px 0px #00000033; border-radius:4px; gap:10px; } .block.activity[ln] { --a-act-color: rgb(var(--a-bg-outline)); } .block.activity:before { content:''; border:2px solid var(--a-act-color); border-radius:999px; width:0; margin-left:-6px; align-self: stretch; margin:0px; } .block.activity.icon-top > .oval { align-self:flex-start; margin-top:5px; } /*///// Toolbar - Core Component /////*/ .toolbar { display:flex; align-items:center; position:relative; left:0; z-index:9; min-height:40px; /* note: [bg] adds color to buttons */ --a-bg-outline: none; --a-toolbar-color: rgba(var(--a-font-color, var(--a-font1-color)), 1.00); /*color: var(--a-toolbar-color);*/ --a-toolbar-bg: rgba(var(--a-bg , var(--a-white) ), 1.00); --a-toolbar-bg-hover: rgba(var(--a-bg-hover , var(--a-white-hover)), 1.00); --a-toolbar-bg-active: rgba(var(--a-bg-active , 0,0,0 ), 0.09); --a-toolbar-bg-outline: rgba(var(--a-bg-outline, 0,0,0 ), 0.09); padding-left: var(--a-toolbar-pad); padding-right: var(--a-toolbar-pad); box-sizing:border-box; border-radius: 0; } .panel > .toolbar:first-child { border-bottom: var(--a-panel-border); border-top-left-radius: calc(var(--a-border-radius) + -1px); border-top-right-radius: calc(var(--a-border-radius) + -1px); } /* ### subject for review if footer border is needed .panel > .toolbar:last-child { border-top: var(--a-panel-border); border-bottom-left-radius: calc(var(--a-border-radius) + -1px); border-bottom-right-radius: calc(var(--a-border-radius) + -1px); }*/ .toolbar span:where(.glyphicons, .mdl2) { font-size:1rem; } .toolbar button:not(.oval) { border-radius: calc(var(--a-border-radius) + -1px); } .toolbar button { display:flex; align-items:center; justify-content:space-evenly; gap:10px; /* color inherited from toolbar [bg] */ --a-button-bg-outline: none; white-space: nowrap; box-sizing:border-box; border:0; } .toolbar input,.toolbar select { height:30px; padding:0 10px; margin-top:auto; margin-bottom:auto; border: var(--a-panel-border ); border-radius: var(--a-border-radius); outline:none; } .toolbar.maxed button, .toolbar.maxed > *, .toolbar button.maxed { margin:0; height:100%; } .toolbar > * { border:1px solid transparent; box-sizing:border-box; } .toolbar > label { display:flex; flex-direction:row; gap:10px; align-items:center; } /* for title bar */ .toolbar > hr { margin-left:auto !important; margin-top:auto !important; } /*** Toolbar Detail Add-on ***/ .toolbar.fit { padding-left:0px; padding-right:0px; } .toolbar.slim button { padding-left:10px; padding-right:10px; min-height:26px; } .toolbar.border, .toolbar.border button { border: var(--a-button-border) !important; } .toolbar.no-rim { border: 0 !important; } .toolbar.square > *:where(input,button,select) { border-radius: 0; } .toolbar.inline { padding-left: 0; margin-left: var(--a-toolbar-pad); padding-right: 0; margin-right: var(--a-toolbar-pad); } /* check alpha.utils.css for grouping (.group)*/ /*///// Tooltip - Core Component /////*/ .tooltip,.tooltip:before { --a-tooltip-bg: rgba(var(--a-bg, var(--a-white)), var(--a-bg-a,1)); --a-tooltip-ln: 1px 0 0 1px ; --a-tooltip-ln-color: var(--a-line-color); --a-tooltip-tail: 10px; --a-tooltip-tail-pos: calc(var(--a-tooltip-tail) / -2 - 1px); --a-tooltip-space: 3px; --a-pos: relative; --a-y: auto; position:absolute; border:var(--a-line-border); background-color:var(--a-tooltip-bg); transform: translateZ(0); /* top:0; removed due to conflict */ } .tooltip { padding:10px; border-radius:5px; z-index:999; line-height:1; box-shadow:0 2px 3px 1px rgba(0,50,100, 0.13) ,0 -1px 5px rgba(0,50,100, 0.05); } .tooltip:before { content:''; display:inline-block; top:-1px; bottom:0; left:0; right:0; background-color:var(--a-tooltip-bg); width: var(--a-tooltip-tail); height: var(--a-tooltip-tail); border-width: var(--a-tooltip-ln ); transform:rotate( 45deg); margin-top:var(--a-tooltip-tail-pos); margin-left: calc(var(--a-tooltip-tail-pos) + 0px); } .tooltip-wrap { position:relative; display:inline-block; } .tooltip-wrap.fit > * { min-width:100% !important; } .tooltip[z] { position:absolute; } /*** Settings ***/ .tooltip.no-tail:before, .no-tail .tooltip:before { display:none !important; } .tooltip[fill="width"] { left: 0; right: 0; width: auto; transform: translateX(0) } .tooltip[fill="height"] { top: 0; bottom:0; height:auto; transform: translateY(0) } /*** Body Position Add-on ***/ .tooltip:not([position]), .tooltip[position~=bottom] { top: 100%; bottom: auto; margin-top: calc(var(--a-tooltip-space) - 3px) } .tooltip[position~=right] { left: 100%; right: auto; margin-left: calc(var(--a-tooltip-space) - 3px) } .tooltip[position=right] { top:0px; } .tooltip[position~=left] { right: 100%; left: auto; margin-right: calc(var(--a-tooltip-space) - 3px) } .tooltip[position=left] { top:0px; } .tooltip[position~=top] { bottom:100%; top: auto; margin-bottom: calc(var(--a-tooltip-space) - 3px) } /*** Arrow Position Add-on ***/ .tooltip[position~=to-bottom],.tooltip[position~=to-bottom]:before { bottom:0; } .tooltip[position~=to-right] ,.tooltip[position~=to-right]:before { right: 0; } .tooltip[position~=to-left] ,.tooltip[position~=to-left]:before { left: 0; } .tooltip[position~=to-top] ,.tooltip[position~=to-top]:before { top: 0; } .tooltip[position~=to-center],.tooltip[position~=to-center]:before { left:50%; transform: translateX(-50%); } .tooltip[position~=to-middle],.tooltip[position~=to-middle]:before { top: 50%; transform: translateY(-50%); } .tooltip:not([position*=to-]):where([position=top],[position=bottom],:not([position])):before, .tooltip[position~=to-left]:before { left: calc( 0% + var(--a-tooltip-tail) * 2); } .tooltip[position~=to-right]:before { left: calc(100% - var(--a-tooltip-tail) * 2); } .tooltip:not([position*=to-]):where([position=left],[position=right]):before, .tooltip[position~=to-top]:before { top: calc( 0% + var(--a-tooltip-tail) + 4px); } .tooltip[position~=to-bottom]:before { top: calc(100% - var(--a-tooltip-tail) - 4px); } .tooltip[position~=to-center]:before { margin-left: calc(var(--a-tooltip-tail-pos) - 1px); } .tooltip[position~=to-middle]:before { margin-top: calc(var(--a-tooltip-tail-pos) - 1px); } .tooltip:not([position]):before, .tooltip[position^=bottom]:before { transform:rotate( 45deg); margin-top:calc(var(--a-tooltip-tail-pos) + 1px); margin-left: calc(var(--a-tooltip-tail-pos) + 1px); } .tooltip[position^=right]:before { transform:rotate( -45deg); margin-top:calc(var(--a-tooltip-tail-pos) + 0px); margin-left: calc(var(--a-tooltip-tail-pos) + 0px); } .tooltip[position^=left]:before { transform:rotate( 135deg); margin-top:calc(var(--a-tooltip-tail-pos) + 0px); margin-left: calc(var(--a-tooltip-tail-pos) + 1px); left:100%; } .tooltip[position^=top]:before { transform:rotate(-135deg); margin-top:calc(var(--a-tooltip-tail-pos) + 1px); margin-left: calc(var(--a-tooltip-tail-pos) + 0px); top: 100%; } /*** Core Interactions *** note: add tabindex=-1 for non-focusable element to become focusable
Click
*/ .tooltip { transition: all 0.07s ease; -o-transition: all 0.07s ease; -ms-transition: all 0.07s ease; -moz-transition: all 0.07s ease; -webkit-transition: all 0.07s ease; transition-delay:0s; } :not(:hover) + .tooltip:not(:hover,[focus],[selected]), :not(:focus) + .tooltip[focus]:not(:hover), :not(:focus) + .tooltip:not(:hover), :not([selected]) + .tooltip[selected]:not(:hover) { opacity:0; visibility:hidden; transition-delay: 0s; animation: tooltip-hide 1.5s ease-in-out 1; } [selected]:focus + .tooltip[selected], :hover + .tooltip:not([focus],[selected]), :focus + .tooltip[focus],.tooltip[pinned], :not(:focus) + .tooltip[focus]:hover { opacity:1; visibility:visible; z-index:1000; height:auto; } :not(:hover) + .tooltip:not([focus],[selected]):not(:hover){ transition-delay: 0.2s; } /* delay hiding */ :hover + .tooltip:not([focus],[selected]):not([position]) ,:focus + .tooltip[focus]:not([position]) ,[selected]:focus + .tooltip[selected]:not([position]) ,.tooltip:not([position]):hover, :hover + .tooltip:not([focus],[selected])[position~=bottom],:focus + .tooltip[focus][position~=bottom],[selected]:focus + .tooltip[selected][position~=bottom],.tooltip[position~=bottom]:hover,.tooltip[pinned][position=bottom] { margin-top : var(--a-tooltip-space) !important; } :hover + .tooltip:not([focus],[selected])[position~=left] ,:focus + .tooltip[focus][position~=left] ,[selected]:focus + .tooltip[selected][position~=left] ,.tooltip[position~=left]:hover ,.tooltip[pinned][position=left] { margin-right : var(--a-tooltip-space) !important; } :hover + .tooltip:not([focus],[selected])[position~=right] ,:focus + .tooltip[focus][position~=right] ,[selected]:focus + .tooltip[selected][position~=right] ,.tooltip[position~=right]:hover ,.tooltip[pinned][position=right] { margin-left : var(--a-tooltip-space) !important; } :hover + .tooltip:not([focus],[selected])[position~=top] ,:focus + .tooltip[focus][position~=top] ,[selected]:focus + .tooltip[selected][position~=top] ,.tooltip[position~=top]:hover ,.tooltip[pinned][position=top] { margin-bottom: var(--a-tooltip-space) !important; } /*** Pseudo Click Event ***/ /* usage: experimental way to hide tooltip without javascript. note: requires [focus] to work tip: you can use label[for] to retain focus on sibling element */ :not(:focus) + .pseudo-click { animation: tooltip-hide 1.5s ease-in-out 1; } @keyframes tooltip-hide { 0% { opacity: 1; } 10%, 100% { opacity: 0; } 30%, 100% { height: 0; overflow: hidden; } } /*** Context Menu ***/ .tooltip[mode~=contextmenu] { border:0; padding:0; box-shadow:none; width:auto; } .tooltip[mode~=contextmenu]:before { display:none !important } .tooltip:hover .tooltip[mode~=contextmenu]{ transition-delay: 0s; min-height:auto; --a-tooltip-space: 0px; transition-delay:0s !important; } .tooltip:not(:hover) .tooltip[mode~=contextmenu]{ transition-delay: 0s; } /* ##### future updates ##### ??? generic js plugin that injects location attribute ex: data-x="1" data-y="99" * location variables: --a-x --a-y ########## associate Menu.js ??? needs a class .closed menu programatically and removes .closed upon blur of focusable element */ /*** Tooltip Select Box ***/ .select-box { display:inline-flex; flex-direction:row; gap:0; justify-content:stretch; min-height:32px; padding:0; position:relative; box-sizing:border-box; border: var(--a-button-border); border-radius:var(--a-border-radius); } .select-box.slim { min-height:26px; } .select-box > input, .select-box > button { border:0px; padding-right:20px; outline:none; } .select-box > input:focus, .select-box > button:focus { } .select-box > *:first-child { display:flex; flex-grow:3; gap:15px; padding-left:15px; align-items:center; width:100%; } .select-box > .tooltip { min-width: calc(100% + 2px); margin: -1px; box-sizing:border-box; } .select-box.arrow:after { content: "\e96e"; font-size:10px; font-family:MDL2; width:15px; height:100%; pointer-events:none; display:flex; align-items:center; position:absolute; right: 0px; margin: auto 0px; } /*///// Tabs - Core Component /////*/ .tabs { overflow:hidden; --a-tab-line-color:dodgerblue; --a-tabs-bt-h: 39px; } .tabs .tab-frame { display:flex; flex-grow:3; background-color: var(--a-tab-frame-bg); } .tabs .tab-frame.window { flex-direction: column; } .tabs .tab-frame.window > :first-child { flex-grow:3; flex-basis:0; } .tabs .tab-frame:not(.active) { display:none !important; } /* ### update: add transition */ .tabs .tab-rack.light { border-color: #f0f0f0; } .tabs .tab-rack.toolbar:not(.fit) { padding:0 5px; } .tabs .tab-rack.toolbar > button { white-space: nowrap; min-height: var(--a-tabs-bt-h); font-weight:500; } .tabs .tab-rack.toolbar > button:focus { text-shadow:none !important; } /*** Tabs Details ***/ .tabs .tab-line { position:absolute; bottom:1px; height:0px; box-sizing:border-box; margin:0; padding:0 var(--a-button-padding); } .tabs .tab-line:after { content:' '; position:relative; display:inline-block; width:100%; border-bottom: 2px solid var(--a-tab-line-color); border-bottom-width:var(--a-tab-line-width, 2px); box-sizing:border-box; pointer-events: none; } .tabs .active { color:rgba(var(--a-font-active),1) !important; } .tabs .active:hover ~ .tab-line { padding:0; } .tabs .tab-content { padding:10px 20px; height:inherit; box-sizing:border-box; font-size:.875rem; } .tabs .tab-option { margin-left:auto !important; background: rgba(var(--a-white), 0.9); z-index:1; font-size:12px; position:relative; display:inline-block; } .tabs .tab-leaflet { background:var(--a-tab-leaflet-bg); z-index:1; } .tabs .tab-leaf { background:var(--a-tab-leaf-bg); } /* ##### tab leaf conversion to pane */ /*** Tab Button Styles ***/ /* Style 2 */ .tabs .tab-rack.tabs-style2 { --a-tabs-bt-h:32px; } .tabs .tab-rack.tabs-style2.toolbar > button[for] { border-radius:999px !important; margin:0 5px; } .tabs .tab-rack.tabs-style2.toolbar > button.active:hover { background:none !important; } .tabs .tab-rack.tabs-style2.toolbar > .tab-line:after { background-color:rgba(var(--a-bg-active),1); position:relative; top:-30px; left:0px; z-index:-1; border:0; border-radius:999px !important; min-height:var(--a-tabs-bt-h); } .tabs .tab-rack.tabs-style2.toolbar > .tab-line { padding:0 } /*** Tabs - Vertical ***/ .tabs.vertical { display:flex; flex-direction:row; --a-tabs-bt-h:40px; } .tabs.vertical .tab-line { min-height:var(--a-tabs-bt-h); right:0px; z-index:-1; padding: 0; } .tabs.vertical .tab-line:after { min-height:var(--a-tabs-bt-h); height:100%; border:0px; border-right: 2px solid var(--a-tab-line-color); border-right-width:var(--a-tab-line-width, 3px); } .tabs.vertical .tab-line.left { right:auto; } .tabs.vertical .tab-line.left:after { border:0px; border-left: 2px solid var(--a-tab-line-color); border-left-width:var(--a-tab-line-width, 3px); } .tabs.vertical .tab-rack { display:flex; flex-direction:column; align-items:flex-start; justify-content:stretch; border-bottom:0; } .tabs.vertical .tab-rack.mini-scroll { overflow-x:hidden; } .tabs.vertical .tab-rack.mini-scroll:hover { overflow-y:auto; } .tabs.vertical .tab-rack.mini-scroll:not(:hover) { overflow-y:hidden; } .tabs.vertical .tab-rack.toolbar { flex-grow:3; padding:0; } .tabs.vertical .tab-rack.toolbar > button[for] { min-height:40px; width:100%; justify-content:flex-start; border-radius:0px !important; margin:0; } .tabs.vertical .tab-rack.toolbar.slim { --a-tabs-bt-h:36px; } .tabs.vertical .tab-rack.toolbar.mini { --a-tabs-bt-h:30px; } .tabs.vertical .tab-rack.toolbar.tiny { --a-tabs-bt-h:26px; } .tabs.vertical .tab-rack.tabs-style2.toolbar > .tab-line:after { border-radius:0px !important; position:relative; top:0px; z-index:-1; border:0; min-width:3px; } /* Tabs - Colored Font */ .tabs .tab-rack.tabs-color.toolbar > button.active { color: var(--a-tab-line-color) !important } .tabs .tab-rack.tabs-color.toolbar > button:focus * { text-shadow:none !important; } /* ##### unfinished ##### */ /*///// Lighbox /////*/ /* add animation */ .lightbox { background:rgba(0,0,0,0.65) !important; position:fixed; top:0px; left:0px; right:0px; bottom:0px; z-index:99; opacity:0; overflow:hidden; visibility:hidden; display:flex; align-items:center; justify-content:center; flex-direction:column; } .lightbox > .panel > .toolbar { justify-content:space-between; } .lightbox > * { box-shadow:0 0 15px rgba(0,0,0, 0.50); border:0; } .lightbox.slide-down:not(.show) { top:-40px; } .lightbox.show { top:0px; opacity:1; visibility:visible; } /*** Screen Positioning ***/ .lightbox.top { align-items:flex-start; } .lightbox .lightbox-pane { display:flex; flex-direction:column; gap:var(--a-gap); padding:var(--a-gap) 0 var(--a-gap) var(--a-gap); } .lightbox .lightbox-pane > * { margin-right: var(--a-pad); } .lightbox .lightbox-pane > .mini-scroll { padding-right:1px; margin-right:0px; } /*** Javascript Functionality ***/ /* step 1: add .lightbox-bt[for] = id to bind */ /* step 2: add .lightbox-close as close button */ /* optional: add .lightbox.modal to disable escape key press */ /* ##### unfinished ##### */ /*///// Form - Core Component /////*/ /*** Form Default ***/ .form { display: grid; box-sizing: border-box; --a-form-grid-pad: 0; /* offset amount if padded */ --a-form-columns: 5; /* cols-5 default */ align-content: start; /* grid align content */ align-items: flex-end; margin-bottom:40px; grid-template-columns: repeat(var(--a-form-columns), 1fr); grid-auto-flow: row; grid-gap:5px; } /*** Form Inputs ***/ .form input, .form textarea, .form select { margin:0; padding:5px 10px; font-size:0.875rem; font-weight:400; min-height:32px; width:100%; box-sizing:border-box; outline:none; } .form input:not([disabled]):hover, .form textarea:not([disabled]):hover, .form select:not([disabled]):hover { border:1px solid rgba(var(--a-primary),1); background-color: rgba(var(--a-primary-hover),0.1) !important; } .form input:focus, .form textarea:focus, .form select:focus { border:1px solid rgba(var(--a-primary),1); box-shadow: 0 0 1px 3px rgba(var(--a-primary-active), var(--a-bs-a,0.35)) !important; } .form input:read-only, .form textarea:read-only:focus, .form select:read-only:focus { border:1px solid rgba(var(--a-yellow ),1); background-color: rgba(var(--a-yellow-hover),0.1) !important; } .form [invalid] { } .form [required]:after { min-height:26px; padding-top:6px; align-self:flex-start; } .form > * { position:relative; grid-column: auto / span 1; box-sizing:border-box; text-align:left; } .form > hr { border: var(--a-line-border); border-width:1px 0 0 0; margin:20px 0; } .form *:where(h1,h2,h3,h4,h5,h6,hr), .form > .toolbar { grid-column: auto / span calc(var(--a-form-columns) - var(--a-form-grid-pad)); box-sizing:border-box; padding-left:0px; padding-right:0px; padding-bottom:5px; margin:20px 0 10px; } .form label { font-weight: 500; } /*** Input Forms ***/ select.form-item:focus { border:1px solid rgba(var(--a-primary),1); box-shadow: 0 0 1px 3px rgba(var(--a-primary-active), var(--a-bs-a,0.35)) !important; } /*** Grids - Based on alpha.grid.css ***/ .form.cols-2 { --a-form-columns: 2; } .form.cols-3 { --a-form-columns: 3; } .form.cols-4 { --a-form-columns: 4; } .form.cols-6 { --a-form-columns: 6; } .form.cols-7 { --a-form-columns: 7; } .form.cols-8 { --a-form-columns: 8; } .form > *[c] { grid-column: auto / span min(calc(var(--a-form-columns) - var(--a-form-grid-pad)), var(--a-form-colspan)) !important; } .form > *[c="2"] { --a-form-colspan:2; } .form > *[r="2"] { grid-row: auto / span 2 } .form > *[c="3"] { --a-form-colspan:3; } .form > *[r="3"] { grid-row: auto / span 3 } .form > *[c="4"] { --a-form-colspan:4; } .form > *[r="4"] { grid-row: auto / span 4 } .form > *[c="5"] { --a-form-colspan:5; } .form > *[r="5"] { grid-row: auto / span 5 } .form > *[c="6"] { --a-form-colspan:6; } .form > *[r="6"] { grid-row: auto / span 6 } .form > *[c="7"] { --a-form-colspan:7; } .form > *[r="7"] { grid-row: auto / span 7 } .form > *[c="8"] { --a-form-colspan:8; } .form > *[r="8"] { grid-row: auto / span 8 } /*** Gaps ***/ .form[gap="0"] { grid-gap: 0px; } .form[gap="5"] { grid-gap: 5px; } .form[gap="10"] { grid-gap:10px; } .form[gap="15"] { grid-gap:15px; } .form[gap="20"] { grid-gap:20px; } /*** Grid Gutter ***/ /* note: adds a pseudo-element that serves as gutter. occupies first and last columns */ .form.grid-pad { --a-form-rows: 12; --a-form-grid-pad:2; } .form.grid-pad.rows-16 { --a-form-rows: 16; margin-bottom:0; } .form.grid-pad.rows-24 { --a-form-rows: 24; margin-bottom:0; } /* use style attribute if more than 24 */ .form.grid-pad:before { content:''; height:100%; grid-column: 1 / span 1; grid-row: 1 / span var(--a-form-rows); } .form.grid-pad:after { content:''; height:100%; grid-column: var(--a-form-columns) / span 1; grid-row: 1 / span var(--a-form-rows); } /*** Placement Styles ***/ .form.form-style2,.form.form-style2b { align-items: center; grid-template-columns: repeat(var(--a-form-columns), 1fr); } .form.form-style2b label { float:right; } /*** Cell Styles ***/ .form.label-bold label { font-weight:700 } .form.label-medium label { font-weight:600 } .form.label-icon label { display:inline-flex; align-items:center; gap:10px; padding:0 15px; min-height:26px; line-height:1 !important } .form.label-start > div[c]:not(.block) { min-height:26px; align-self: stretch; } .form.label-start > div[c]:not(.block) label { min-height:26px; align-items: center; display:flex; } .form.label-shaded > div[c]:not(.block) { background-color: #EDF0F3; padding:0 5px; } .form.block-underline { column-gap: 0px !important; } .form.block-underline > div[c] { border-bottom: 1px solid #efefef; margin-bottom:-1px; } /*** Paddings ***/ .form.slim, .form.mini,.form.tiny { font-weight:400; line-height:1; } .form.slim > hr,.form.mini > hr,.form.tiny > hr { margin: 5px 0; } .form.slim *:where(input,textarea,select) { font-size:12px; padding: 3px 5px; min-height:26px; } .form.slim *:where(label,.block) { font-size:12px; } .form.mini *:where(input,textarea,select) { font-size:11px; padding: 1px 5px; min-height:25px; } .form.mini *:where(label,.block) { font-size:11px; } .form.tiny *:where(input,textarea,select) { font-size:10px; padding: 0 5px; min-height:22px; } .form.tiny *:where(label,.block) { font-size:10px; } /*** Input Field Frames ***/ .form.input-lines *:where(input,textarea,select){ border-width:1px 0 1px 0; border-top-color: transparent; } .form.input-shade *:where(input,textarea,select){ box-shadow:0 0 3px rgba(0,30,155, 0.25) inset; } .form.input-soft *:where(input,textarea,select){ border-radius:5px; padding-left:10px; padding-right:10px; } .form.input-round *:where(input,textarea,select){ border-radius:50px; padding-left:15px; padding-right:15px; } /** ##### configure checkbox and radio designs .form input:where([type=checkbox],[type=radio]) { border:1px solid red; } **/ /*///// Record Table - Core Component /////*/ /*** Base ***/ .recordTable { border-collapse: separate; padding:0; font-size:12px; font-weight:500; --a-table-border-v: var(--a-border-width,1px); --a-table-border-rim: var(--a-border-width,1px); --a-table-border-h: var(--a-border-width,1px); --a-table-pad: 5px; --a-table-border-color: var(--a-line-color); --a-row-min-height:30px; background:transparent; color:rgba(var(--a-font1-color),1); --a-bg-hover: var(--a-gray2); --a-stripe: var(--a-gray2); } @media print { /*** Table Print Mode ***/ .recordTable { --a-table-border-v: 0.25pt; --a-table-border-h: 0.25pt; --a-table-border-color: #111; --a-bg: 255,255,255; --a-bg-a:1; } } .recordTable thead > tr:only-child > th { height:var(--a-row-min-height, 30px) } .recordTable th , .recordTable td, .recordTable input, .recordTable select { padding: var(--a-table-pad) 5px; min-height:var(--a-row-min-height, 30px); line-height:1; } .recordTable th , .recordTable td { border:0px solid var(--a-table-border-color); vertical-align:middle; } .recordTable input, .recordTable select { border-radius: 0; display:block; width:100%; color:#036; text-align:center; box-sizing:border-box; } .recordTable th input:focus, .recordTable td input:focus, .recordTable th select:focus, .recordTable td select:focus { box-shadow: 0 0 8px rgba(240,120,0,0.75) inset; outline:none; } .recordTable label { margin: 0; } .recordTable thead tr:only-child { min-height: var(--a-row-min-height,30px); } .recordTable .total, .recordTable input[placeholder=0.00] { text-align: right; } .recordTable thead th { padding: calc(var(--a-table-pad) - 3px) 5px; } .recordTable tbody:after { content:''; display:table-row; column-span:all; width:100%; height:100%; background-color:rgba(var(--a-bg-hover, --a-bg), 0.5); } .recordTable > thead > tr > th, .recordTable > tfoot > tr > * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .recordTable > thead > tr > th { position: relative; vertical-align:middle; font-weight:bold; text-align:center; } .recordTable > thead { position: sticky; z-index:5; top:0px; } .recordTable > tfoot { position: sticky; z-index:6; bottom:0px; font-weight:bold; } .recordTable > thead > tr:not([bg*=gradient]) > *, .recordTable > tfoot > tr:not([bg*=gradient]) > * { background-color: rgba(var(--a-bg , var(--a-palette3 )), var(--a-bg-a,1)); color: rgba(var(--a-font-color, var(--a-palette3-color)), var(--a-fc-a,1)); } .recordTable > tbody > tr:nth-child(even):not(:hover) > td { background-color: rgba(var(--a-stripe ),0.33); } .recordTable > tbody > tr:not([nohover]):hover { background-color: rgba(var(--a-bg-hover),var(--a-bg-a,1)); } /*** Cell Settings ***/ .recordTable.cell-rel td,.recordTable .cell-rel td, .recordTable.cell-rel th,.recordTable .cell-rel th { position:relative; } .recordTable > thead[buttons] button { width:100%; height:100%; box-shadow:none; } /*** Style Settings ***/ .no-stripe > tbody > tr:not(:hover) > td { background: var(--a-bg, transparent) !important } .recordTable .lite, .recordTable .lite th, .recordTable .lite td { background-color: rgb(var(--a-white)); color:#036; --a-table-border-v:0; border-bottom-width:0; } .recordTable td[align=left] , .recordTable th[align=left] { text-align:left; } .recordTable td[align=right], .recordTable th[align=right] { text-align:right; } /*** Padding Settings ***/ .recordTable.slim0, .recordTable .slim0 { --a-table-pad: 0px; --a-row-min-height:21px; } .recordTable.slim , .recordTable .slim { --a-table-pad: 1px; --a-row-min-height:25px; } .recordTable.slim2, .recordTable .slim2 { --a-table-pad: 2px; --a-row-min-height:28px; } .recordTable.slim3, .recordTable .slim3 { --a-table-pad: 3px; --a-row-min-height:30px; } .recordTable.slim4, .recordTable .slim4 { --a-table-pad: 4px; --a-row-min-height:35px; } /*** Border Settings ***/ .recordTable > :first-child > tr:first-child td { border-top-width: var(--a-table-border-rim); } .recordTable > tfoot > tr:last-child td { border-bottom-width: var(--a-table-border-rim); } .no-border input,.no-border select { border:0 !important; } .no-border ,.no-border td,.no-border th { --a-table-border-v: 0px; --a-table-border-h: 0px; } .no-border-v,.no-border-v td,.no-border-v th { --a-table-border-v: 0px; } .no-border-h,.no-border-h td,.no-border-h th { --a-table-border-h: 0px; } .no-rim { --a-table-border-rim: 0; } .recordTable td, .recordTable th { border-bottom-width: var(--a-table-border-h); border-right-width: var(--a-table-border-v); } .recordTable th:last-child { border-bottom-width: var(--a-table-border-h); border-right-width: 0; } .recordTable tr:last-child td { border-bottom-width: 0; } .divider th { --a-table-border-v: 0; } .divider th:not(:first-child):before { content:''; position:absolute; left:-1px; top:20%; height:60%; width:0px; box-shadow: 0 0 0 1px #CCCCCC33; border-left:var(--a-border-width) solid var(--a-table-border-color); } /*** Table Rim ***/ .recordTable > thead > tr:first-child > th { border-top-width: var(--a-table-border-rim); } .recordTable > tfoot > tr:first-child > * { border-top-width: var(--a-table-border-h ); } .recordTable > thead > tr > th:last-child, .recordTable > tbody > tr > td:last-child, .recordTable > tfoot > tr > td:last-child { border-right-width: var(--a-table-border-rim); } .recordTable > thead > tr:last-child > th, .recordTable > tbody > tr:last-child > td { border-bottom-width: var(--a-table-border-h ); } .recordTable > tfoot > tr:last-child > * { border-bottom-width: var(--a-table-border-rim); } .recordTable > thead > tr:first-child > th:first-child, .recordTable > tbody > tr > td:first-child, .recordTable > tfoot > tr > *:first-child { border-left-width: var(--a-table-border-rim); } /*** Table Auto-Counter ***/ /* experimental: mutationObserver for attribute change redeclares css variable */ tbody[count] { counter-reset: row-counter calc((var(--a-p, 1) - 1) * var(--a-i, 15)) } tbody[count] > tr:not(.splash) > td:empty { counter-increment: row-counter; text-align:center; } tbody[count] > tr:not(.splash) > td:first-child:before { content: counter(row-counter); display: inline; } /* ///// Small UI Themes //////////////////////// ////////////////////////////////////////////// */ /*///// Oval - Core Component /////*/ .oval { display:flex; align-items:center; justify-content:center; border:1px solid rgb(var(--a-bg-outline, var(--a-gray3))); border-radius:99999px; box-sizing:border-box; line-height:0.5; letter-spacing:1px; } .oval[radius] { min-width: auto; min-height:auto; margin:initial; padding:initial; letter-spacing: 0px; } .oval[radius="1"] { min-width: 20px !important; min-height: 20px !important; width: 20px; height: 20px; } .oval[radius="2"], .oval:not([radius]):not([size]) { min-width: 30px !important; min-height: 30px !important; width: 30px; height: 30px; } .oval[radius="3"] { min-width: 40px !important; min-height: 40px !important; width: 40px; height: 40px; } .oval[radius="4"] { min-width: 60px !important; min-height: 60px !important; width: 60px; height: 60px; } .oval[radius="5"] { min-width: 80px !important; min-height: 80px !important; width: 80px; height: 80px; } .oval[radius="6"] { min-width:100px !important; min-height:100px !important; width:100px; height:100px; } .oval[radius="7"] { min-width:120px !important; min-height:120px !important; width:120px; height:120px; } .oval[radius="8"] { min-width:150px !important; min-height:150px !important; width:150px; height:150px; } .oval[radius="9"] { min-width:200px !important; min-height:200px !important; width:200px; height:200px; } /*///// Checkbox - Core Component /////*/ input[type=checkbox][size="1"] { min-width: 15px !important; min-height: 15px !important; width: 15px; height: 15px; } input[type=checkbox][size="2"] { min-width: 18px !important; min-height: 18px !important; width: 18px; height: 18px; } input[type=checkbox][size="3"], input[type=checkbox]:not([size]) { min-width: 20px !important; min-height: 20px !important; width: 20px; height: 20px; } input[type=checkbox][size="4"] { min-width: 23px !important; min-height: 23px !important; width: 23px; height: 23px; } input[type=checkbox][size="5"] { min-width: 25px !important; min-height: 25px !important; width: 25px; height: 25px; } .round[type=checkbox] { appearance:none; flex-grow:0; border:0; border-radius:50%; box-sizing:border-box; background-color:transparent; padding:0px; transition:background 300ms; cursor:pointer; } .round[type=checkbox], .round[type=checkbox] ~ * { vertical-align: middle; } .round[type=checkbox]::before { content: ""; color:transparent; display:block; width:inherit; height:inherit; border-radius:inherit; background-color:transparent; background-size: contain; box-shadow:inset 0 0 0 1px rgb(var(--a-bg-outline, var(--a-gray2))); } .round[type=checkbox]:checked { background: rgb(var(--a-bg, var(--a-green))); } .round[type=checkbox]:checked::before { box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff' stroke='%23fff' stroke-width='1'/%3E %3C/svg%3E") } .round[type=checkbox]:disabled { background-color: rgb(var(--a-bg-outline, var(--a-gray2))); opacity: 0.84; cursor: not-allowed; box-shadow:inset 0 0 0 1px rgb(var(--a-bg-outline, var(--a-gray2)));} /* IE - do not merge with above */ .round[type=checkbox]::-ms-check { content: ""; color:transparent; display:block; width:inherit; height:inherit; border-radius:inherit; border: 0; background-color:transparent; background-size: contain; box-shadow:inset 0 0 0 1px rgb(var(--a-bg-outline, var(--a-gray2))); } .round[type=checkbox]:checked::-ms-check { box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff' stroke='%23fff' stroke-width='1'/%3E %3C/svg%3E") } /*** label wrapper ***/ label { display:flex; flex-direction:row; gap:5px; } label[readonly] > input ~ * { align-self:center; cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /*///// Minimalist Scroll - Effect /////*/ /*** Mini Scrollbar ***/ .scroll-win,.mini-scroll { scrollbar-color: #CCD3D6AA #9DB4C400 !important; scrollbar-width: thin; /* firefox compatibility */ } .scroll-win:not(.y-only), .mini-scroll:not(.y-only) { overflow:auto; } .mini-scroll::-webkit-scrollbar { width: var(--a-thumb-body,14px); height: var(--a-thumb-body,14px); --a-thumb-body:14px; } .mini-scroll::-webkit-scrollbar-track, .mini-scroll::-webkit-scrollbar-corner { background-color: transparent; } .mini-scroll::-webkit-scrollbar-thumb { background-color: #CCD3D6AA; border: 4px solid transparent; background-clip: padding-box; border-radius: var(--a-thumb-rad,9999px); } .mini-scroll::-webkit-scrollbar-thumb:hover { background-color: #9DB4C4AA; } .mini-scroll::-webkit-scrollbar-thumb:active { background-color: #98A3A6AA; } .mini-scroll::-webkit-scrollbar-button { background-color: transparent; height: var(--a-thumb-body,14px); background-size: 6px 6px; background-position: center center; background-repeat:no-repeat; border-radius:0; } .mini-scroll::-webkit-scrollbar-button:hover { background-color: transparent; } .mini-scroll::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23CCD3D6AA' d='M 4 0 L 0 8 L 8 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:vertical:decrement:hover { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239DB4C4AA' d='M 4 0 L 0 8 L 8 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:vertical:decrement:active { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2398A3A6AA' d='M 4 0 L 0 8 L 8 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23CCD3D6AA' d='M 0 0 L 8 0 L 4 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:vertical:increment:hover { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239DB4C4AA' d='M 0 0 L 8 0 L 4 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:vertical:increment:active { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2398A3A6AA' d='M 0 0 L 8 0 L 4 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23CCD3D6AA' d='M 8 0 L 0 4 L 8 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:horizontal:decrement:hover { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239DB4C4AA' d='M 8 0 L 0 4 L 8 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:horizontal:decrement:active { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2398A3A6AA' d='M 8 0 L 0 4 L 8 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23CCD3D6AA' d='M 0 0 L 8 4 L 0 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:horizontal:increment:hover { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239DB4C4AA' d='M 0 0 L 8 4 L 0 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:horizontal:increment:active { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2398A3A6AA' d='M 0 0 L 8 4 L 0 8 Z'/%3E%3C/svg%3E"); } .mini-scroll::-webkit-scrollbar-button:vertical:start:increment, .mini-scroll::-webkit-scrollbar-button:vertical:end:decrement, .mini-scroll::-webkit-scrollbar-button:horizontal:start:increment, .mini-scroll::-webkit-scrollbar-button:horizontal:end:decrement { display:none; } .mini-scroll.scroll-hidden:not(:hover)::-webkit-scrollbar-thumb, .mini-scroll.scroll-hidden:not(:hover)::-webkit-scrollbar-button:vertical:decrement { background:#00000000; } .mini-scroll.scroll-hidden:not(:hover)::-webkit-scrollbar-button:vertical:increment { background:#00000000; } .mini-scroll.scroll-hidden:not(:hover)::-webkit-scrollbar-button:horizontal:decrement { background:#00000000; } .mini-scroll.scroll-hidden:not(:hover)::-webkit-scrollbar-button:horizontal:increment { background:#00000000; } .mini-scroll.scroll-hidden:not(:hover)::-webkit-scrollbar-thumb { background-color: #CCD3D600; border: 4px solid transparent; background-clip: padding-box; border-radius: var(--a-thumb-rad,9999px); } /*** Scroll Window Add-on ***/ .scroll-win.scroll-x { overflow-x:scroll; overflow-y:hidden; } .scroll-win.scroll-y { overflow-y:scroll; overflow-x:hidden; } .scroll-win.y-only { overflow-x:hidden; } .scroll-win.x-only { overflow-y:hidden; } .no-scroll { overflow: hidden; } .scroll-win.square { --a-thumb-rad: 0px } .scroll-thumb0 { --a-thumb-body:12px; } .scroll-thumb { --a-thumb-body:14px; } .scroll-thumb2 { --a-thumb-body:16px; } .scroll-thumb3 { --a-thumb-body:18px; } .scroll-thumb4 { --a-thumb-body:20px; } .scroll-wrap { min-height:0; } /* constrains height of scroll-win */ /*** Auto-Config ***/ .scroll-win table { width: 100%; } /*///// Menu Box /////*/ .panel.menu { gap:0; --a-block-min-h: 35px; --a-block-font-size: 13px; font-size: var(--a-block-font-size); } .panel.menu > *:not(hr),.panel.menu .block:not(.column) { min-height:var(--a-block-min-h); position:relative; } .panel.menu > *:not(hr), .panel.menu .item { padding:0 !important; align-items:center !important; justify-content:flex-start; cursor:pointer; } .panel.menu .item:before { margin-left: var(--a-panel-padding); } .panel.menu .item:after { margin-right:var(--a-panel-padding); } .panel.menu .item.indent:before, .panel.menu .item:not(.mdl2-block):before, .panel.menu .item:not(.mdl2-block):after { content:''; margin-left:0; } .panel.menu .item { display:flex; gap:var(--a-gap); width:100%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel.menu > hr { border-top: 1px solid rgba(var(--a-gray1,1)); min-width: 75%; } /* ###### bug: .item+.tooltip bypasses .tooltip[position] settings *** make it compatible to detail/summary accordion .panel.menu .item+.tooltip { position:absolute; left:100%; top:-1px; border-radius:0; } */ .panel.menu .item:after, .panel.menu .block:not(.column):after { margin-left:auto; display:inline-block; width:20px; text-align:center; } .panel.menu .block:not(.column) { padding:0px !important; } .panel.menu .sub-menu > .item { position:absolute; left:0; right:0; top:0; bottom:0; } .panel.menu .sub-menu.arrow > .mdl2-block:after { content:'\e970'; font-size:10px; } .panel.menu [type=checkbox] { display:none; } .panel.menu .mdl2[type=checkbox] + :after { --a-text:"\ecca"; } .panel.menu .mdl2[type=checkbox]:checked + :after { --a-text:"\ec61"; } .panel.menu .toggle:after { content:var(--a-text); font-size:16px; } .panel.menu:empty:before { content:attr(placeholder); padding:20px; text-decoration:italicised; color:rgb(var(--a-gray3)); font-style: italic; } /*** Menu Item Size Options ***/ .panel.menu.mid { --a-block-font-size:14px; --a-block-min-h:40px; } .panel.menu.slim { --a-block-font-size:12px; --a-block-min-h:30px; } .panel.menu.tiny { --a-block-font-size:11px; --a-block-min-h:25px; } /* ///// Bundled Themes ///////////////////////// ////////////////////////////////////////////// */ /*///// Notification Box /////*/ .notification { min-width:360px; min-height:180px; } /*///// Lists Panel /////*/ .panel.list { gap:0; } .panel.list > .block:not(.column) { padding: 0 var(--a-panel-padding); align-items:center; min-height:40px; } .panel.list > header:first-child, .panel.list > footer:last-child { align-items:center; } .panel.list.slim > .block:not(.column) { min-height:30px; } .panel.list.slim > header:first-child, .panel.list.slim > footer:last-child { padding: 0 var(--a-panel-padding); } .panel.list > .block.activity { padding: 5px var(--a-panel-padding) 5px 5px; margin:0; } .panel.list-style2 { justify-content:flex-start; } .panel.list-style2 > header:first-child { justify-content:flex-start; align-content:center; } .panel.list-style2 > .block:not(.column) { border-top: 1px solid rgba(var(--a-bg),0.3 ); margin-left:15px; margin-right:15px; padding: 5px 10px !important; } .panel.list-style2 > *:not(.block):first-child { padding-bottom: var(--a-panel-padding); } .panel.list-style2 > .block :first-child:where(.glyphicons,.mdl2){ font-size:20px; width:30px; } .panel.list-style2 > .block:not(.column) > :last-child { margin-right:0px; } .panel.list-style2b { justify-content:flex-start; font-size:13px; border:0; } .panel.list-style2b > header:first-child { justify-content:flex-start; align-content:center; } .panel.list-style2b > .block:not(.column) { border-top: 1px solid rgba(var(--a-bg),0.3 ); padding: 5px 15px !important; } .panel.list-style2b > *:not(.block):first-child { padding-bottom: var(--a-panel-padding); } .panel.list-style2b > .block :first-child:where(.glyphicons,.mdl2){ font-size:20px; width:20px; } .panel.list-style2b > .block:not(.column) > :last-child { margin-right:0px; } .panel.list-style2b > .block:not(.column) a { font-size:12px; font-weight:bold; } /*///// Alert Box /////*/ .alert.panel { background-color: rgba(var(--a-bg-active ),0.25); color: rgba(var(--a-font1-color),0.75); border: 1px solid rgba(var(--a-bg ),1.00); } .alert.panel hr { border: 1px solid rgba(var(--a-bg ),0.5 ); } /* ///// Overriden Themes /////////////////////// ////////////////////////////////////////////// */ /*** Prism.js code highlight ***/ code[class*=language-],pre[class*=language-] { background-color: #1f2937 }