/* ====================================================================== AIS css_utama.css - ZKoss 5.x Bootstrap-like UI Core Target: ZK 5.x Breeze, kompatibel dengan Java/ZUL/JSP lama. Catatan: - File ini menjadi pusat seluruh styling utama aplikasi. - File theme pilihan tenant/sekolah/PT hanya berisi token warna. - Urutan load: zk.wcs -> css_utama.css -> theme pilihan. - MyThemeProvider menambahkan timemilis agar cache browser tidak menahan CSS lama. ====================================================================== */ :root { --ais-theme-primary:#007131; --ais-theme-primary-rgb:0,113,49; --ais-theme-primary-dark:#005c28; --ais-theme-accent:#e27d21; --ais-theme-accent-rgb:226,125,33; --ais-theme-accent-dark:#b95f12; --ais-theme-primary-bg:linear-gradient(92deg,#006b32 0%,#0f8a4b 42%,#e27d21 100%); --ais-theme-contrast:#fff; --theme-primary:#007131; --theme-primary-dark:#005c28; --theme-light:rgba(var(--ais-theme-primary-rgb),.10); --theme-hover:#e27d21; --theme-gradient:linear-gradient(92deg,#006b32 0%,#0f8a4b 42%,#e27d21 100%); --theme-scrollbar-thumb:#007131; --theme-text-on-primary:#fff; --theme-text-shadow:0 1px 4px rgba(0,0,0,.28); --ais-bg:#f5f7fb; --ais-bg-soft:#f8fafc; --ais-surface:#fff; --ais-surface-2:#fbfdff; --ais-border:#dce6ef; --ais-border-soft:#edf2f7; --ais-text:#1f2937; --ais-text-muted:#64748b; --ais-link:#006b32; --ais-danger:#dc2626; --ais-warning:#e27d21; --ais-success:#16a34a; --ais-info:#2563eb; --ais-radius-sm:6px; --ais-radius:10px; --ais-radius-lg:16px; --ais-shadow-xs:0 1px 2px rgba(15,23,42,.06); --ais-shadow:0 8px 24px rgba(15,23,42,.10); --ais-shadow-lg:0 18px 45px rgba(15,23,42,.18); --ais-focus:rgba(var(--ais-theme-accent-rgb),.24); --ais-font:Poppins,Arial,Helvetica,sans-serif; } html,body{width:100%!important;min-height:100%!important;margin:0!important;background:var(--ais-bg)!important;color:var(--ais-text)!important;font-family:var(--ais-font)!important;overflow-x:hidden!important;} body.breeze{background:radial-gradient(circle at top left,rgba(var(--ais-theme-accent-rgb),.10),transparent 28%),radial-gradient(circle at top right,rgba(var(--ais-theme-primary-rgb),.10),transparent 26%),var(--ais-bg)!important;} *,*:before,*:after{box-sizing:border-box;} .z-label,.z-a,.z-radio-cnt,.z-checkbox-cnt,.z-toolbarbutton-cnt,div.z-column-cnt,div.z-row-cnt,div.z-listcell-cnt,div.z-listheader-cnt,div.z-treecell-cnt,div.z-treecol-cnt,.z-window-embedded-header,.z-window-modal-header,.z-window-highlighted-header,.z-window-overlapped-header,.z-window-popup-header,.z-panel-header,.z-fieldset legend,.z-loading,input,textarea,select,button{font-family:var(--ais-font)!important;} .z-label,.z-radio-cnt,.z-checkbox-cnt,.z-a,div.z-row-cnt,div.z-listcell-cnt,div.z-treecell-cnt{font-size:12px!important;line-height:1.45!important;} .z-a,a.z-a,.z-a:visited{color:var(--ais-link)!important;text-decoration:none!important;} .z-a:hover,a.z-a:hover,a.z-a span.z-label:hover{color:var(--ais-theme-accent)!important;text-decoration:none!important;} ::-webkit-scrollbar{width:8px;height:8px;}::-webkit-scrollbar-track{background:#eef2f7;border-radius:999px;}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--ais-theme-primary),var(--ais-theme-accent));border-radius:999px;border:1px solid rgba(255,255,255,.7);}::-webkit-scrollbar-thumb:hover{background:var(--ais-theme-accent-dark);} /* =========================== SHELL UTAMA =========================== */ .main-responsive-root,.zk55-responsive-shell,.main-responsive-root .z-window-embedded-cnt,.main-responsive-root .z-window-embedded-cnt-noborder,.main-responsive-main-grid,.main-responsive-main-grid>.z-grid-body,.main-responsive-frame,.main-responsive-center,.main-responsive-tabbox,.main-responsive-tabpanels,.main-responsive-home-panel{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;} .main-responsive-root,.zk55-responsive-shell{background:var(--ais-bg)!important;} .main-responsive-main-grid,.main-responsive-main-grid>.z-grid-body,.main-responsive-main-grid .z-row-inner,.main-responsive-main-grid .z-cell,.main-responsive-main-grid tr.z-row,.main-responsive-main-grid tr.z-grid-odd,.main-responsive-main-grid tr.z-grid-odd td.z-row-inner{background:transparent!important;border:0!important;padding:0!important;} /* Menimpa inline height sangat besar, misalnya 3000px, agar area kerja mengikuti layar. */ .main-responsive-frame{height:calc(100vh - 112px)!important;min-height:520px!important;max-height:none!important;overflow:hidden!important;background:var(--ais-bg)!important;} .main-responsive-center,.main-responsive-center .z-center-body,.main-responsive-tabbox,.main-responsive-tabpanels,.main-responsive-home-panel{height:100%!important;overflow:hidden!important;background:var(--ais-bg)!important;} .main-responsive-home-panel{overflow:auto!important;padding:10px!important;} /* =========================== HEADER / NAVBAR ======================== */ .gridHeader, .headerHbox, .rowHeader, .ais-theme-header, .navigasi { background: var(--ais-theme-primary-bg) !important; color: var(--ais-theme-contrast) !important; } .headerHbox .z-label, .headerHbox .z-a, .headerHbox .z-toolbarbutton-cnt, .gridHeader .z-label, .gridHeader .z-a, .gridHeader .z-toolbarbutton-cnt, .rowHeader .z-label, .rowHeader .z-a, .rowHeader .z-toolbarbutton-cnt, .ais-theme-header .z-label, .ais-theme-header .z-a, .ais-theme-header .z-toolbarbutton-cnt, .user_button_profile, .users_online_button, .menu_item { color: var(--ais-theme-contrast) !important; } .main-responsive-header,.main-responsive-header-grid{background:var(--ais-theme-primary-bg)!important;color:var(--ais-theme-contrast)!important;} .main-responsive-header{position:relative!important;min-height:86px!important;box-shadow:0 10px 28px rgba(15,23,42,.16)!important;border-bottom:1px solid rgba(255,255,255,.18)!important;overflow:visible!important;z-index:20!important;} .main-responsive-header:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 36%,rgba(255,255,255,.08));pointer-events:none;} .main-responsive-header-grid,.main-responsive-header-grid .z-grid-body,.main-responsive-header-grid .z-row-inner,.main-responsive-header-grid .z-cell,.main-responsive-header .z-row-cnt{position:relative!important;z-index:2!important;background:transparent!important;border:0!important;overflow:visible!important;} .main-responsive-header img,.headerHbox img,.gridHeader img{max-height:48px!important;object-fit:contain!important;} .title1,.main-responsive-header .title1,.gridHeader .title1{display:block!important;color:#fff!important;font-size:18px!important;font-weight:800!important;line-height:1.2!important;letter-spacing:.1px!important;text-shadow:var(--theme-text-shadow)!important;white-space:normal!important;} .motto,.main-responsive-header .motto,.gridHeader .motto,.alamat{display:block!important;color:rgba(255,255,255,.86)!important;font-size:11.5px!important;font-weight:500!important;line-height:1.25!important;text-shadow:0 1px 3px rgba(0,0,0,.24)!important;white-space:normal!important;} .main-responsive-header .z-label,.main-responsive-header .z-a,.main-responsive-header .z-toolbarbutton-cnt,.fa-big{color:var(--ais-theme-contrast)!important;} .user_button_profile,.main-responsive-header-actions .z-a,.main-responsive-header-actions .z-toolbarbutton,.main-responsive-header-actions .z-toolbarbutton-cnt{display:inline-block!important;padding:5px 8px!important;border-radius:999px!important;color:#fff!important;text-shadow:none!important;transition:background .15s ease,transform .15s ease!important;} .user_button_profile:hover,.main-responsive-header-actions .z-a:hover,.main-responsive-header-actions .z-toolbarbutton:hover{background:rgba(255,255,255,.16)!important;color:#fff!important;transform:translateY(-1px);} .users_online_button,.main-responsive-online-button,.main-responsive-online-button .z-toolbarbutton-cnt{display:inline-block!important;margin-top:3px!important;padding:4px 10px!important;border-radius:999px!important;background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.24)!important;color:#fff!important;font-size:10px!important;font-weight:600!important;line-height:1.3!important;text-shadow:none!important;} /* Shortcut modul di bawah header dibuat horizontal-scroll agar tidak melayang. */ /* Baris tombol modul: transparan agar mengikuti background header tema */ .main-responsive-module-row,.headerHbox.main-responsive-module-row{min-height:38px!important;background:transparent!important;border-top:1px solid rgba(255,255,255,.14)!important;} .main-responsive-module-row .z-row-cnt,.main-responsive-module-row .z-row-inner,.main-responsive-module-row .z-cell{background:transparent!important;border:0!important;} .main-responsive-module-row .z-toolbarbutton,.main-responsive-module-row .z-toolbarbutton-body,.main-responsive-module-row .z-toolbarbutton-cnt{display:inline-block!important;vertical-align:middle!important;} .main-responsive-module-row .z-toolbarbutton{margin:4px 3px!important;border-radius:999px!important;background:rgba(255,255,255,.11)!important;border:1px solid rgba(255,255,255,.16)!important;transition:background .16s ease,transform .16s ease,box-shadow .16s ease!important;} .main-responsive-module-row .z-toolbarbutton-cnt{padding:6px 10px!important;color:#fff!important;font-size:11px!important;font-weight:600!important;line-height:1.2!important;} .main-responsive-module-row .z-toolbarbutton:hover,.main-responsive-module-row .z-toolbarbutton-over{background:rgba(255,255,255,.22)!important;box-shadow:0 6px 18px rgba(0,0,0,.14)!important;transform:translateY(-1px);} .main-responsive-module-row img{max-width:16px!important;max-height:16px!important;margin-right:3px!important;vertical-align:-3px!important;} /* =========================== SIDEBAR ================================ */ .navigasi,.main-responsive-sidebar,.z-west.main-responsive-sidebar,.main-responsive-sidebar .z-west-body{background:var(--ais-theme-primary-bg)!important;color:var(--ais-theme-contrast)!important;} .main-responsive-sidebar,.z-west.main-responsive-sidebar{height:calc(100vh - 112px)!important;max-height:calc(100vh - 112px)!important;min-height:520px!important;overflow-y:auto!important;overflow-x:hidden!important;border-right:1px solid rgba(255,255,255,.10)!important;box-shadow:inset -1px 0 0 rgba(255,255,255,.08),8px 0 24px rgba(15,23,42,.10)!important;} .main-responsive-sidebar .z-west-header,.navigasi .z-west-header,.z-west-header,.z-center-header,.z-east-header,.z-north-header,.z-south-header{background:rgba(255,255,255,.12)!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.13)!important;color:#fff!important;font-size:12px!important;font-weight:700!important;line-height:20px!important;padding:7px 10px!important;text-shadow:none!important;} .main-responsive-sidebar .z-grid,.main-responsive-sidebar .z-grid-body,.main-responsive-sidebar tr.z-row,.main-responsive-sidebar td.z-row-inner,.main-responsive-sidebar .z-cell,.main-responsive-sidebar .z-row-cnt,.navigasi .z-grid,.navigasi .z-grid-body,.navigasi tr.z-row,.navigasi td.z-row-inner,.navigasi .z-cell,.navigasi .z-row-cnt{background:transparent!important;border:0!important;color:#fff!important;} .main-responsive-sidebar .z-a,.main-responsive-sidebar .z-label,.navigasi .z-a,.navigasi .z-label,.cari_menu{color:var(--ais-theme-contrast)!important;text-shadow:none!important;} .main-responsive-sidebar tr.z-row:hover,.main-responsive-sidebar tr.z-row-over,.navigasi tr.z-row:hover,.navigasi tr.z-row-over{background:rgba(255,255,255,.12)!important;} /* =========================== GRID / TABLE =========================== */ .z-grid,.z-listbox,.z-dottree,div.z-tree{background:var(--ais-surface)!important;border:1px solid var(--ais-border)!important;border-radius:var(--ais-radius)!important;box-shadow:var(--ais-shadow-xs)!important;overflow:hidden!important;} .main-responsive-main-grid,.main-responsive-header-grid,.main-responsive-sidebar .z-grid,.navigasi .z-grid{border:0!important;border-radius:0!important;box-shadow:none!important;} div.z-grid-body,div.z-listbox-body,div.z-dottree-body,div.z-tree-body{background:transparent!important;border:0!important;overflow:hidden !important;overflow-y:auto !important;width:100%!important;} div.z-grid-header,div.z-listbox-header,div.z-dottree-header,div.z-tree-header{background:#f8fafc!important;border-bottom:1px solid var(--ais-border)!important;} div.z-grid-header tr.z-columns,div.z-grid-header tr.z-auxhead,div.z-listbox-header tr.z-listhead,div.z-dottree-header tr.z-treecols,div.z-tree-header tr.z-treecols{background:#f8fafc!important;background-image:none!important;} th.z-column,th.z-listheader,th.z-treecol{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;border-right:1px solid var(--ais-border-soft)!important;border-bottom:1px solid var(--ais-border)!important;padding:0!important;} div.z-column-cnt,div.z-listheader-cnt,div.z-treecol-cnt{color:#334155!important;font-size:11px!important;font-weight:700!important;letter-spacing:.01em!important;padding:8px 9px!important;text-transform:none!important;} tr.z-row td.z-row-inner,tr.z-row .z-cell,tr.z-listitem td.z-listcell,tr.z-treerow td.z-treecell{background:#fff!important;border:0!important;border-bottom:1px solid var(--ais-border-soft)!important;padding:0!important;} tr.z-grid-odd td.z-row-inner,tr.z-grid-odd .z-cell,tr.z-listitem-odd td.z-listcell{background:#fbfdff!important;} tr.z-row-over>td.z-row-inner,tr.z-row-over>.z-cell,tr.z-listitem-over>td.z-listcell,tr.z-treerow-over>td.z-treecell{background:var(--theme-light)!important;color:#111827!important;} tr.z-row-seld>td.z-row-inner,tr.z-listitem-seld>td.z-listcell,tr.z-treerow-seld>td.z-treecell{background:rgba(var(--ais-theme-primary-rgb),.10)!important;} div.z-row-cnt,div.z-listcell-cnt,div.z-treecell-cnt{color:#334155!important;padding:7px 9px!important;} tr.z-group,td.z-group-inner{background:var(--ais-theme-primary-bg)!important;border:0!important;color:#fff!important;} .z-group-inner .z-group-cnt,.z-group-inner .z-group-cnt .z-label{color:#fff!important;font-size:11px!important;font-weight:700!important;padding:5px 8px!important;text-shadow:none!important;} .z-grid-empty-body td,.z-listbox-empty-body td{padding:18px!important;color:var(--ais-text-muted)!important;text-align:center!important;background:#fff!important;} /* =========================== TABS =================================== */ .z-tabbox,.z-tabbox-ver{background:transparent!important;border:0!important;} .z-tabs-scroll,.z-tabs,.z-tabs-ver-scroll,.z-tabs-ver{background:transparent!important;border:0!important;} .z-tabs .z-tabs-cnt,.z-tabs-ver .z-tabs-ver-cnt{background:transparent!important;border:0!important;margin:0!important;padding:4px 4px 0 4px!important;} .z-tabs-cnt li,.z-tab,.z-tab-seld,.z-tab-ver,.z-tab-ver-seld{border:0!important;background:transparent!important;margin-right:3px!important;} .z-tab-hl,.z-tab-hr,.z-tab-hm,.z-tab-ver-hl,.z-tab-ver-hr,.z-tab-ver-hm{background:#fff!important;background-image:none!important;border:1px solid var(--ais-border)!important;border-bottom:0!important;border-radius:10px 10px 0 0!important;padding:0!important;} .z-tab .z-tab-text,.z-tab-seld .z-tab-text{font-size:12px!important;padding:8px 13px!important;color:#475569!important;font-weight:600!important;} .z-tab-seld .z-tab-hl,.z-tab-seld .z-tab-hr,.z-tab-seld .z-tab-hm,.z-tab-ver-seld .z-tab-ver-hl,.z-tab-ver-seld .z-tab-ver-hr,.z-tab-ver-seld .z-tab-ver-hm{background:#fff!important;border-color:rgba(var(--ais-theme-primary-rgb),.35)!important;box-shadow:0 -2px 10px rgba(15,23,42,.07)!important;} .z-tab-seld .z-tab-text,.z-tab-ver-seld .z-tab-ver-text{color:var(--ais-theme-primary)!important;font-weight:800!important;} .z-tabpanel,.z-tabbox-ver .z-tabpanels-ver{background:var(--ais-surface)!important;border:1px solid var(--ais-border)!important;border-radius:0 0 var(--ais-radius) var(--ais-radius)!important;padding:8px!important;overflow:hidden!important;} .main-responsive-tabbox .z-tabpanel,.main-responsive-tabbox .z-tabpanels,.main-responsive-tabbox .z-tabpanels-cnt{height:100%!important;} /* =========================== FORM & BUTTON ========================== */ .z-textbox,.z-decimalbox,.z-intbox,.z-longbox,.z-doublebox,.z-combobox-inp,.z-bandbox-inp,.z-datebox-inp,.z-timebox-inp,.z-spinner-inp,.z-doublespinner-inp,textarea.z-textbox,input[type=text],input[type=password],input[type=search],select{background:#fff!important;border:1px solid #cbd5e1!important;border-radius:6px!important;color:#111827!important;font-size:12px!important;min-height:24px!important;padding:4px 7px!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.04)!important;} .z-textbox:focus,.z-decimalbox:focus,.z-intbox:focus,.z-longbox:focus,.z-doublebox:focus,.z-combobox-inp:focus,.z-bandbox-inp:focus,.z-datebox-inp:focus,.z-timebox-inp:focus,textarea.z-textbox:focus,input:focus,textarea:focus{outline:none!important;border-color:var(--ais-theme-accent)!important;box-shadow:0 0 0 3px var(--ais-focus)!important;} input[type=text]:disabled,.z-textbox[disabled],.z-combobox-inp[disabled]{background:#f1f5f9!important;color:#64748b!important;border-color:#dbe3ec!important;} .z-combobox-btn,.z-bandbox-btn,.z-datebox-btn,.z-timebox-btn,.z-spinner-btn,.z-doublespinner-btn,.z-combobox-rounded-btn,.z-bandbox-rounded-btn,.z-datebox-rounded-btn,.z-timebox-rounded-btn,.z-spinner-rounded-btn,.z-doublespinner-rounded-btn{background:#f8fafc!important;border:1px solid #cbd5e1!important;border-left:0!important;border-radius:0 6px 6px 0!important;height:24px!important;width:22px!important;} .z-button,input.button,button,.btn,.btn-primary{background:var(--ais-theme-primary-bg)!important;border:1px solid var(--ais-theme-primary-dark)!important;border-radius:6px!important;color:#fff!important;cursor:pointer!important;font-weight:700!important;font-size:12px!important;line-height:1.25!important;padding:6px 12px!important;text-shadow:none!important;box-shadow:var(--ais-shadow-xs)!important;} .z-button:hover,input.button:hover,button:hover,.btn:hover,.btn-primary:hover{background:linear-gradient(92deg,var(--ais-theme-primary-dark),var(--ais-theme-accent-dark))!important;color:#fff!important;box-shadow:0 8px 18px rgba(15,23,42,.16)!important;transform:translateY(-1px);} .z-toolbarbutton{border-radius:6px!important;color:var(--ais-theme-primary)!important;} .z-toolbarbutton-cnt{padding:5px 7px!important;font-size:12px!important;font-weight:700!important;} .z-toolbarbutton:hover,.z-toolbarbutton-over{background:rgba(var(--ais-theme-primary-rgb),.08)!important;color:var(--ais-theme-primary)!important;} /* =========================== TOOLBAR / PAGING ======================= */ .z-toolbar,.ais-toolbar{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;border:1px solid var(--ais-border)!important;border-radius:var(--ais-radius)!important;padding:6px!important;color:var(--ais-text)!important;box-shadow:var(--ais-shadow-xs)!important;min-height: 46px;} .z-paging,.z-paging-os{background:#fff!important;border:1px solid var(--ais-border)!important;border-radius:0 0 var(--ais-radius) var(--ais-radius)!important;padding:5px!important;box-shadow:none!important;} .z-paging-os .z-paging-os-cnt{background:#fff!important;border:1px solid var(--ais-border)!important;border-radius:6px!important;color:#334155!important;font-size:12px!important;margin:0 2px!important;padding:3px 7px!important;text-decoration:none!important;} .z-paging-os .z-paging-os-seld{background:var(--ais-theme-primary-bg)!important;border-color:var(--ais-theme-primary)!important;color:#fff!important;font-weight:800!important;text-shadow:none!important;} /* =========================== WINDOW / PANEL / POPUP ================= */ .z-window-embedded,.z-window-modal,.z-window-highlighted,.z-window-overlapped,.z-window-popup,.z-panel{border:0!important;background:transparent!important;} .z-window-embedded-cnt,.z-window-embedded-cnt-noborder,.z-window-modal-cm,.z-window-highlighted-cm,.z-window-overlapped-cm,.z-window-popup-cm,.z-panel-children{background:var(--ais-surface)!important;border:1px solid var(--ais-border)!important;border-radius:var(--ais-radius-lg)!important;box-shadow:var(--ais-shadow)!important;color:var(--ais-text)!important;overflow:hidden!important;} .z-window-embedded-header,.z-window-modal-header,.z-window-highlighted-header,.z-window-overlapped-header,.z-window-popup-header,.z-panel-header,.z-panel-hl .z-panel-header{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;border-bottom:1px solid var(--ais-border)!important;color:#0f172a!important;font-size:14px!important;font-weight:800!important;padding:10px 12px!important;} .z-window-modal-shadow,.z-window-highlighted-shadow{box-shadow:0 22px 70px rgba(15,23,42,.34)!important;} .z-popup .z-popup-cl,.z-menu-popup .z-menu-popup-cnt,.z-combobox-shadow,.z-bandbox-shadow,.z-datebox-shadow{background:#fff!important;border:1px solid var(--ais-border)!important;border-radius:10px!important;box-shadow:var(--ais-shadow-lg)!important;color:var(--ais-text)!important;overflow:auto !important;} .z-menu-popup .z-menu-popup-cnt,.z-menu-popup-cnt .z-menu a.z-menu-cnt,.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt{background:#fff!important;color:#334155!important;border:0!important;} .z-menu-popup-cnt .z-menu a.z-menu-cnt,.z-menu-popup-cnt .z-menu-item a.z-menu-item-cnt{padding:7px 12px!important;font-size:12px!important;} .z-menu-popup-cnt .z-menu-over,.z-menu-popup-cnt .z-menu-item-over{background:var(--theme-light)!important;color:var(--ais-theme-primary)!important;} .z-fieldset{border:1px solid var(--ais-border)!important;border-radius:var(--ais-radius)!important;background:#fff!important;padding:8px!important;} .z-fieldset legend,h2,h4{background:var(--ais-theme-primary-bg)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-size:12px!important;font-weight:800!important;padding:5px 12px!important;text-shadow:none!important;} .z-fieldset-cnt{overflow:auto!important;padding:7px!important;} /* =========================== TREE / MENU ============================ */ tr.z-treerow,tr.z-treerow a,tr.z-treerow a:visited{background:transparent!important;color:inherit!important;font-size:12px!important;text-decoration:none!important;} tr.z-treerow:hover,tr.z-treerow-seld{background:var(--theme-light)!important;} .z-treerow-seld .z-treecell-text,.z-treerow-seld .z-a{color:var(--ais-theme-primary)!important;font-weight:700!important;} .z-menubar-ver,.z-menubar-hor{background:transparent!important;background-image:none!important;border:0!important;} .z-menubar-hor .z-menu,.z-menubar-hor .z-menu-item,.z-menubar-hor .z-menu-btn,.z-menubar-hor .z-menu-item-btn,.z-menubar-hor span,.z-menubar-hor a,.z-menubar-hor div,.z-menubar-ver .z-menu,.z-menubar-ver .z-menu-item,.z-menubar-ver .z-menu-btn,.z-menubar-ver .z-menu-item-btn,.z-menubar-ver span,.z-menubar-ver a,.z-menubar-ver div,.z-menu-cnt,.z-menu-item-cnt{font-family:var(--ais-font)!important;font-size:12px!important;font-weight:600!important;white-space:nowrap!important;} /* =========================== CARD HTML MODERN DI VIEW SOURCE ========= */ .ais-profile-card,.ais-akad-card,.ais-card,.ais-panel,.ais-dashboard-card,.ais-soft-panel,.ais-mywindow,.ais-mygrid,.ais-mypanel,.ais-groupbox-styled,.ais-vbox-styled,.ais-hbox-styled,.ais-div{background:#fff!important;border:1px solid var(--ais-border)!important;border-radius:16px!important;box-shadow:0 12px 30px rgba(15,23,42,.08)!important;color:#0f172a!important;overflow:hidden!important;} .ais-profile-head,.ais-akad-head{background:linear-gradient(135deg,rgba(var(--ais-theme-primary-rgb),.08) 0%,rgba(var(--ais-theme-accent-rgb),.10) 100%)!important;border-bottom:1px solid var(--ais-border)!important;border-left:4px solid var(--ais-theme-accent)!important;padding:14px 16px!important;} .ais-profile-title,.ais-akad-title,.ais-title,.ais-section-title{color:#0f172a!important;font-weight:900!important;letter-spacing:-.01em!important;} .ais-profile-desc,.ais-akad-desc,.ais-help,.ais-description,.ais-muted{color:var(--ais-text-muted)!important;} .ais-profile-stat,.ais-akad-stat{background:linear-gradient(180deg,#fff 0%,#f8fafc 100%)!important;border:1px solid var(--ais-border)!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(15,23,42,.06)!important;} .ais-pill,.ais-badge{background:rgba(var(--ais-theme-primary-rgb),.10)!important;border:1px solid rgba(var(--ais-theme-primary-rgb),.24)!important;border-radius:999px!important;color:var(--ais-theme-primary)!important;display:inline-block!important;padding:2px 8px!important;font-weight:700!important;} /* =========================== UTILITAS ================================ */ .no-highlight tr.z-grid-odd td.z-row-inner,.no-highlight tr.z-grid-odd .z-cell,.no-highlight tr.z-grid-odd,.no-highlight tr.z-row-over>td.z-row-inner{background:transparent!important;} .profile_sclass{padding-top:0!important;}.gambar_profile{border:1px solid rgba(255,255,255,.75)!important;border-radius:16px!important;aspect-ratio:1;object-fit:cover;box-shadow:0 8px 20px rgba(15,23,42,.20)!important;} .fa{display:inline-block;padding-left:6px;padding-right:4px;font-size:17px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.fa-small{font-size:14px!important;}.fa:hover{color:var(--ais-theme-accent)!important;} .headerHbox_mobile{background:var(--ais-theme-primary-bg)!important;min-height:210px!important;height:210px!important;} .z-north,.z-south,.z-west,.z-east,.z-center{border:0!important;border-radius:0!important;background:transparent!important;padding-top:0!important;} .z-east-splt,.z-west-splt,.z-north-splt,.z-south-splt{background:transparent!important;} @media screen and (max-width:900px){ .main-responsive-header{min-height:96px!important;} .main-responsive-frame,.main-responsive-sidebar,.z-west.main-responsive-sidebar{height:calc(100vh - 132px)!important;max-height:calc(100vh - 132px)!important;min-height:460px!important;} .title1,.main-responsive-header .title1{font-size:15px!important;} .motto,.main-responsive-header .motto{font-size:10.5px!important;} .main-responsive-module-row .z-toolbarbutton-cnt{font-size:10.5px!important;padding:6px 8px!important;} .z-tab .z-tab-text,.z-tab-seld .z-tab-text{padding:7px 10px!important;font-size:11px!important;} } @media screen and (max-width:560px){ .main-responsive-header{min-height:108px!important;} .main-responsive-header img,.headerHbox img,.gridHeader img{max-height:40px!important;} .main-responsive-frame,.main-responsive-sidebar,.z-west.main-responsive-sidebar{height:calc(100vh - 148px)!important;max-height:calc(100vh - 148px)!important;min-height:420px!important;} .z-window-embedded-header,.z-window-modal-header,.z-panel-header{font-size:13px!important;padding:8px 10px!important;} div.z-column-cnt,div.z-listheader-cnt,div.z-row-cnt,div.z-listcell-cnt{padding:6px 7px!important;} } /* =========================== UTILITY AIS ============================== */ .ais-m-0 { margin: 0 !important; } .ais-mt-1 { margin-top: 4px !important; } .ais-mt-2 { margin-top: 8px !important; } .ais-mb-1 { margin-bottom: 4px !important; } .ais-mb-2 { margin-bottom: 8px !important; } .ais-p-1 { padding: 4px !important; } .ais-p-2 { padding: 8px !important; } .ais-p-3 { padding: 12px !important; } .ais-w-100 { width: 100% !important; } .ais-h-100 { height: 100% !important; } .ais-text-right { text-align: right !important; } .ais-text-center { text-align: center !important; } .ais-font-bold { font-weight: bold !important; } /* ====================================================================== AIS INLINE-STYLE MIGRATION LAYER Style lama yang dulu tersebar di Java/ZUL dipusatkan di sini. File theme hanya mengubah token warna :root. ====================================================================== */ .ais-label-bold, .ais-label-bold .z-label, .ais-label-bold-config { font-size:14px !important; font-weight:800 !important; } .ais-label-bold-only { font-weight:800 !important; } .ais-label-bold-red { font-size:14px !important; font-weight:800 !important; color:var(--ais-danger) !important; } .ais-label-bolder { font-size:16px !important; font-weight:900 !important; } .ais-label-small, .ais-label-small .z-label { font-size:11px !important; } .ais-label-small-bold { font-size:11px !important; font-weight:800 !important; } .ais-label-small-bold-red { font-size:11px !important; font-weight:800 !important; color:var(--ais-danger) !important; } .ais-label-small-bold-green { font-size:11px !important; font-weight:800 !important; color:var(--ais-success) !important; } .ais-label-small-bold-blue { font-size:11px !important; font-weight:800 !important; color:var(--ais-info) !important; } .ais-label-large { font-size:14px !important; } .ais-label-xsmall { font-size:9px !important; } .ais-caption-styled, .z-caption.ais-caption-styled, .ais-caption-styled .z-caption-cnt { background:var(--ais-surface-muted) !important; border:1px solid var(--ais-border) !important; border-radius:8px 16px !important; color:var(--ais-text) !important; display:inline-block !important; font-size:12px !important; font-weight:800 !important; padding:5px 8px !important; text-decoration:none !important; } .ais-caption-styled .ais-caption-text { margin-left:5px !important; } .ais-button-border-awesome, a.ais-button-border-awesome, .ais-button-border-awesome.z-a { background:#fff !important; border:1px solid var(--ais-border) !important; border-radius:8px !important; box-shadow:0 1px 2px rgba(60,64,67,.30),0 1px 3px rgba(60,64,67,.15) !important; color:var(--ais-text) !important; display:inline-block !important; padding:10px 5px 5px 5px !important; text-decoration:none !important; } .ais-button-border-awesome:hover { border-color:rgba(var(--ais-theme-primary-rgb),.35) !important; box-shadow:0 8px 18px rgba(15,23,42,.14) !important; color:var(--ais-theme-primary) !important; } .ais-button-config, .z-button.ais-button-config { font-size:12.5px !important; } .ais-button-important, .z-button.ais-button-important { font-size:15px !important; font-weight:800 !important; } .ais-checkbox-config, .ais-checkbox-config .z-checkbox-cnt { font-size:11px !important; } .ais-checkbox-picked, .ais-checkbox-picked .z-checkbox-cnt { font-weight:700 !important; } .ais-checkbox-xsmall, .ais-checkbox-xsmall .z-checkbox-cnt { font-size:9px !important; } .ais-comboitem-small, .ais-comboitem-small .z-comboitem-text { font-size:8px !important; } .ais-numberbox, .ais-numberbox.z-intbox, .ais-numberbox.z-doublebox, .ais-numberbox input, .ais-text-right-input, .ais-text-right-input input { text-align:right !important; } .ais-groupbox-styled { border:1px solid #bdbbbb !important; border-radius:8px !important; background:rgba(255,255,255,.78) !important; box-shadow:0 1px 3px rgba(15,23,42,.12) !important; box-sizing:border-box !important; margin:auto !important; max-width:97% !important; overflow:hidden !important; padding:1px 2px 2px 0 !important; width:97% !important; } .ais-hbox-styled, .ais-vbox-styled { border:1px solid #bdbbbb !important; border-radius:8px 8px 20px 20px !important; background:rgba(255,255,255,.78) !important; box-sizing:border-box !important; padding:10px !important; width:100% !important; } .ais-row-styled, tr.ais-row-styled td.z-row-inner, tr.ais-row-styled .z-cell { background:rgba(255,255,255,.50) !important; } .ais-row-transparent, tr.ais-row-transparent td.z-row-inner, tr.ais-row-transparent .z-cell { background:transparent !important; border:0 !important; } .ais-borderless-layout, .ais-borderless-layout-region, .ais-borderless-layout .z-borderlayout, .ais-borderless-layout-region.z-center, .ais-borderless-layout-region .z-center-body { border:0 !important; background:transparent !important; } .ais-div { min-height:40px !important; overflow:hidden !important; overflow-y:hidden !important; width:100% !important; } .ais-mypanel, .z-panel.ais-mypanel { border:0 !important; background:transparent !important; } .ais-mygrid, .dgrid, .fgrid, .dtabel, .ftabel { background:transparent !important; border:0 !important; } .ais-spreadsheet { max-height:2000px !important; min-height:50px !important; overflow:auto !important; } .ais-ckeditor { min-height:450px !important; } .ais-borderlayout-bg { background:transparent !important; } /* ====================================================================== AIS SHELL ALIGNMENT HOTFIX - MainAction/index.zul Menghindari header/frame hanya memakai separuh layar akibat kalkulasi width ZK Grid/Borderlayout lama setelah style inline dipusatkan. ====================================================================== */ .main-responsive-main-grid, .main-responsive-main-grid > .z-grid-body, .main-responsive-main-grid > .z-grid-body > table, .main-responsive-main-grid > .z-grid-body > table > tbody, .main-responsive-main-grid > .z-grid-body > table > tbody > tr, .main-responsive-main-grid > .z-grid-body > table > tbody > tr > td.z-row-inner, .main-responsive-main-grid > .z-grid-body > table > tbody > tr > td.z-row-inner > .z-row-cnt { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .main-responsive-main-grid > .z-grid-body > table, .main-responsive-header-grid > .z-grid-body > table { table-layout: fixed !important; } .main-responsive-header-grid, .main-responsive-header-grid > .z-grid-body, .main-responsive-header-grid > .z-grid-body > table, .main-responsive-header-grid .z-row-inner, .main-responsive-header-grid .z-row-cnt { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .main-responsive-header-grid .z-column, .main-responsive-header-grid th.z-column { box-sizing: border-box !important; } .main-responsive-brand-box, .main-responsive-brand-box table, .main-responsive-brand-box tbody, .main-responsive-brand-box tr, .main-responsive-header-right, .main-responsive-header-actions, .main-responsive-module-strip { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .main-responsive-brand-box { min-width: 0 !important; padding: 8px 12px !important; } .main-responsive-header-right { min-width: 0 !important; padding: 7px 12px 6px 8px !important; } .main-responsive-module-strip { display: block !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; padding-left: 8px !important; padding-right: 8px !important; } .main-responsive-frame { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 560px !important; height: calc(100vh - 112px) !important; overflow: hidden !important; } .main-responsive-frame .main-responsive-sidebar, .main-responsive-frame .z-west.main-responsive-sidebar { top: 0 !important; left: 0 !important; width: 250px !important; max-width: 250px !important; min-width: 220px !important; height: 100% !important; max-height: 100% !important; } .main-responsive-frame .main-responsive-center, .main-responsive-frame .z-center.main-responsive-center { top: 0 !important; left: 250px !important; right: 0 !important; width: auto !important; max-width: none !important; height: 100% !important; overflow: hidden !important; } .main-responsive-center .z-center-body, .main-responsive-tabbox, .main-responsive-tabs, .main-responsive-tabpanels, .main-responsive-tabpanels .z-tabpanel, .main-responsive-home-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 0 !important; box-sizing: border-box !important; } .main-responsive-tabbox, .main-responsive-tabpanels, .main-responsive-tabpanels .z-tabpanel, .main-responsive-home-panel { height: 100% !important; max-height: 100% !important; } .main-responsive-home-panel, .main-responsive-tabpanels .z-tabpanel { overflow: auto !important; } .main-responsive-home-panel .z-tabpanel-cnt, .main-responsive-tabpanels .z-tabpanel-cnt { min-height: 0 !important; width: 100% !important; box-sizing: border-box !important; } .main-responsive-footer { display: none !important; } @media screen and (max-width: 760px) { .main-responsive-frame .main-responsive-sidebar, .main-responsive-frame .z-west.main-responsive-sidebar { width: 220px !important; max-width: 220px !important; } .main-responsive-frame .main-responsive-center, .main-responsive-frame .z-center.main-responsive-center { left: 220px !important; } } /* ====================================================================== AIS PROFILE / AKADEMIK HTML STYLE - dipusatkan dari ProfileUiHelper dan DashboardAkademikHtmlCssHelper. Jangan sisipkan lagi