/* ============================================================ TheDOJOApp — theme-refresh.css Version : 4.0 (final consolidated) Covers : web-admin (Bootstrap 3 + Metronic) AND membership-web (the Member Management app) Paste this SAME file into BOTH overrides: 1) admin.dev.thedojoapp.com → assets/css/custom_style.css 2) membership.dev.thedojoapp.com → css/main.css CSS only. No HTML, no JS, no logic. ============================================================ */ /* ============================================================ 1 · TOKENS ============================================================ */ :root{ --dj-brand:#0E8F84; --dj-brand-hover:#0B7A70; --dj-brand-dark:#0B6B63; --dj-brand-tint:#E6F4F2; --dj-brand-tint-2:#CDE9E5; --dj-page:#F5F7F9; --dj-card:#FFFFFF; --dj-line:#E6EAEF; --dj-line-soft:#F0F3F6; --dj-hover:#FAFBFC; --dj-text:#111826; --dj-text-2:#5A6474; --dj-text-3:#8C95A3; --dj-ok:#137A45; --dj-ok-tint:#E7F6ED; --dj-warn:#A55A08; --dj-warn-tint:#FDF2E3; --dj-bad:#B0261B; --dj-bad-tint:#FDEDEB; --dj-info:#0F5B77; --dj-info-tint:#EDF6FA; --dj-r:8px; --dj-r-lg:12px; --dj-h:38px; --dj-side:262px; } /* ============================================================ 2 · BASE ============================================================ */ body{ background:var(--dj-page) !important; color:var(--dj-text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{color:var(--dj-text); letter-spacing:-.015em} a{color:var(--dj-brand-dark)} a:hover{color:var(--dj-brand-hover)} td,th{font-variant-numeric:tabular-nums} hr{border-color:var(--dj-line)} :focus-visible{outline:2px solid var(--dj-brand); outline-offset:2px} @media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}} /* ============================================================ 3 · TOP HEADER ============================================================ */ .page-header, .page-header.navbar, .page-logo, .navbar, .main-header{ background:var(--dj-card) !important; background-color:var(--dj-card) !important; background-image:none !important; box-shadow:none !important; } .page-header, .main-header{border-bottom:1px solid var(--dj-line) !important} .page-header *, .page-logo *, .navbar-brand *, .main-header *{ color:var(--dj-text) !important; -webkit-text-fill-color:var(--dj-text) !important; text-shadow:none !important; } .page-logo{ display:flex !important; align-items:center !important; gap:10px; width:var(--dj-side) !important; min-width:var(--dj-side) !important; height:56px !important; padding:0 16px 0 20px !important; border-right:1px solid var(--dj-line) !important; border-bottom:none !important; white-space:nowrap !important; overflow:hidden; font-size:15px !important; font-weight:700 !important; letter-spacing:.06em !important; } .page-logo img{max-height:26px !important; width:auto !important} .page-logo .menu-toggler, .page-header .menu-toggler.sidebar-toggler{ margin:0 0 0 auto !important; float:none !important; opacity:.35; transform:none !important; } .page-header .top-menu .navbar-nav > li.dropdown > a, .page-header .top-menu .navbar-nav > li.dropdown > a *{ color:var(--dj-text-2) !important; -webkit-text-fill-color:var(--dj-text-2) !important; } /* ============================================================ 4 · SIDEBAR ============================================================ */ .page-sidebar, .page-sidebar-wrapper, .page-sidebar-fixed .page-sidebar, .page-sidebar-closed .page-sidebar, .main-sidebar, .sidebar{ background:var(--dj-card) !important; border-right:1px solid var(--dj-line) !important; } .page-sidebar-wrapper > *{background:transparent !important} .page-sidebar-wrapper{padding-top:6px !important} .page-sidebar-wrapper > hr, .page-sidebar > hr{display:none !important} .page-sidebar select, .page-sidebar .form-control, .page-sidebar-wrapper select{ width:calc(100% - 28px) !important; margin:12px 14px !important; height:36px !important; background:var(--dj-page) !important; border:1px solid var(--dj-line) !important; border-radius:var(--dj-r) !important; color:var(--dj-text) !important; box-shadow:none !important; } [class*="client-id"], [class*="clientId"], [id*="client-id"]{ display:block; background:transparent !important; color:var(--dj-text-3) !important; font-size:11.5px !important; font-weight:400 !important; padding:10px 16px 2px !important; line-height:1.3; letter-spacing:.02em; } .page-sidebar [class*="setup"], .page-sidebar-wrapper [class*="setup"]{ background:var(--dj-brand-tint) !important; border:none !important; border-radius:var(--dj-r-lg) !important; margin:0 14px 14px !important; padding:14px !important; box-shadow:none !important; } .page-sidebar [class*="setup"] *{ color:var(--dj-brand-dark) !important; -webkit-text-fill-color:var(--dj-brand-dark) !important; background:transparent !important; } .page-sidebar [class*="setup"] img{max-width:20px !important; max-height:20px !important} .page-sidebar [class*="setup"] .btn, .page-sidebar [class*="setup"] .btn *{ background:var(--dj-brand) !important; border-color:var(--dj-brand) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; width:100%; margin-top:10px; } .page-sidebar-menu{padding-top:4px !important} .page-sidebar-menu > li > a, .sidebar-menu > li > a{ color:var(--dj-text-2) !important; font-size:13.5px !important; font-weight:500; padding:10px 14px !important; margin:1px 10px; border:none !important; border-radius:var(--dj-r) !important; white-space:nowrap; } .page-sidebar-menu > li > a > i{color:var(--dj-text-3) !important} .page-sidebar-menu > li:hover > a, .page-sidebar-menu > li > a:hover{ background:var(--dj-page) !important; color:var(--dj-text) !important; } .page-sidebar-menu > li.open > a, .page-sidebar-menu > li.open > a > span, .page-sidebar-menu > li.open > a > i{ background:var(--dj-page) !important; color:var(--dj-text) !important; font-weight:600 !important; } .page-sidebar-menu > li.active > a, .page-sidebar-menu > li.active.open > a, .page-sidebar-menu > li.active > a > span{ background:var(--dj-brand-tint) !important; color:var(--dj-brand-dark) !important; font-weight:600 !important; border:none !important; } .page-sidebar-menu > li.active > a > i{color:var(--dj-brand) !important} .page-sidebar-menu > li.active > a .selected{display:none !important} .page-sidebar-menu > li.heading > h3{ color:var(--dj-text-3) !important; font-size:10.5px !important; font-weight:600 !important; letter-spacing:.09em; text-transform:uppercase; padding:18px 18px 6px !important; margin:0 !important; } .page-sidebar-menu .sub-menu{background:transparent !important} .page-sidebar-menu .sub-menu li, .page-sidebar-menu .sub-menu li > a, .page-sidebar-menu .sub-menu li > a > span, .page-sidebar-menu > li.open > .sub-menu li > a, .page-sidebar-menu > li.active > .sub-menu li > a{ color:var(--dj-text-2) !important; -webkit-text-fill-color:var(--dj-text-2) !important; background:transparent !important; } .page-sidebar-menu .sub-menu > li > a{ font-size:13px !important; padding:7px 14px 7px 44px !important; margin:0 10px; border:none !important; border-radius:var(--dj-r); } .page-sidebar-menu .sub-menu > li > a:hover, .page-sidebar-menu .sub-menu > li:hover > a{ background:var(--dj-page) !important; color:var(--dj-text) !important; } .page-sidebar-menu .sub-menu > li.active > a, .page-sidebar-menu .sub-menu > li.active > a > span{ color:var(--dj-brand-dark) !important; font-weight:600 !important; background:transparent !important; } .page-sidebar-menu .sub-menu > li > a > i{color:var(--dj-text-3) !important; margin-right:8px} .page-sidebar-menu > li > a > .arrow:before, .page-sidebar-menu > li > a > .arrow.open:before{color:var(--dj-text-3) !important} .ribbon, .corner-ribbon, .menu-ribbon, .page-sidebar-menu .ribbon{ transform:none !important; rotate:none !important; position:static !important; display:inline-block; width:auto !important; height:auto !important; background:var(--dj-warn-tint) !important; color:var(--dj-warn) !important; font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1.6; padding:1px 7px !important; margin-left:6px; border-radius:999px; box-shadow:none !important; overflow:visible !important; text-indent:0 !important; } /* ============================================================ 5 · PAGE FRAME ============================================================ */ .page-content, .content-wrapper{background:var(--dj-page) !important; padding:24px !important} .page-bar{background:transparent !important; border:none !important; padding:0 0 6px !important; margin-bottom:12px} .page-bar .page-breadcrumb > li, .page-bar .page-breadcrumb > li > a, .breadcrumb, .breadcrumb a{color:var(--dj-text-3) !important; font-size:13px; background:transparent !important} .page-title{ font-size:26px !important; font-weight:700 !important; letter-spacing:-.025em; color:var(--dj-text) !important; margin:0 0 18px !important; } .page-title small{color:var(--dj-text-2) !important; font-size:13.5px; display:block; margin-top:5px} /* ============================================================ 6 · STAT CARDS ← the blue tiles on Member Management Turned into white cards with dark, left-aligned figures. ============================================================ */ [class*="col-"] > .panel[class*="blue"], [class*="col-"] > .panel[class*="info"], [class*="col-"] > .card[class*="blue"], [class*="col-"] > .card[class*="info"], [class*="col-"] > div[class*="stat"], [class*="col-"] > div[class*="summary"], [class*="col-"] > div[class*="tile"], [class*="col-"] > div[class*="widget"], .info-box, .small-box, [style*="background-color: #3"], [style*="background-color:#3"], [style*="background: #3"], [style*="background:#3"], [style*="background-color: rgb(62"], [style*="background-color: rgb(61"]{ background:var(--dj-card) !important; background-color:var(--dj-card) !important; background-image:none !important; border:1px solid var(--dj-line) !important; border-radius:var(--dj-r-lg) !important; box-shadow:none !important; color:var(--dj-text) !important; padding:18px 20px !important; text-align:left !important; min-height:0 !important; } [class*="col-"] > .panel[class*="blue"] *, [class*="col-"] > .panel[class*="info"] *, [class*="col-"] > .card[class*="blue"] *, [class*="col-"] > div[class*="stat"] *, [class*="col-"] > div[class*="summary"] *, [class*="col-"] > div[class*="tile"] *, .info-box *, .small-box *, [style*="background-color: #3"] *, [style*="background-color:#3"] *{ color:var(--dj-text) !important; -webkit-text-fill-color:var(--dj-text) !important; background:transparent !important; background-color:transparent !important; text-shadow:none !important; border-color:var(--dj-line-soft) !important; text-align:left !important; } /* card heading inside a stat tile */ [class*="col-"] > div[class*="stat"] h1, [class*="col-"] > div[class*="stat"] h2, [class*="col-"] > div[class*="stat"] h3, [class*="col-"] > div[class*="stat"] h4, .info-box h3, .small-box h3, [style*="background-color: #3"] h1, [style*="background-color: #3"] h2, [style*="background-color: #3"] h3, [style*="background-color: #3"] h4{ font-size:13px !important; font-weight:600 !important; color:var(--dj-text-2) !important; -webkit-text-fill-color:var(--dj-text-2) !important; letter-spacing:.01em; margin:0 0 14px !important; text-align:left !important; } /* the big figures */ [class*="col-"] > div[class*="stat"] strong, [class*="col-"] > div[class*="stat"] b, [style*="background-color: #3"] strong, [style*="background-color: #3"] b{ font-size:24px !important; font-weight:700 !important; letter-spacing:-.02em; } /* icon at the top of a stat tile */ [class*="col-"] > div[class*="stat"] > i, [class*="col-"] > div[class*="stat"] > .fa, .info-box > i, .small-box > i, [style*="background-color: #3"] > i{ display:inline-flex !important; align-items:center; justify-content:center; width:34px !important; height:34px !important; font-size:15px !important; border-radius:var(--dj-r) !important; background:var(--dj-brand-tint) !important; color:var(--dj-brand-dark) !important; -webkit-text-fill-color:var(--dj-brand-dark) !important; margin:0 0 12px !important; float:none !important; } /* rows inside a figure block */ [class*="col-"] > div[class*="stat"] tr > td, [style*="background-color: #3"] tr > td{ border-color:var(--dj-line-soft) !important; padding:7px 0 !important; } /* ============================================================ 7 · CARDS / PANELS — one level only ============================================================ */ .portlet, .panel, .box, .well, .widget, .card{ background:var(--dj-card) !important; border:1px solid var(--dj-line) !important; border-radius:var(--dj-r-lg) !important; box-shadow:none !important; margin-bottom:16px !important; } .portlet > .portlet-title, .panel > .panel-heading, .box > .box-header, .card > .card-header{ background:var(--dj-card) !important; background-image:none !important; border-bottom:1px solid var(--dj-line) !important; border-radius:var(--dj-r-lg) var(--dj-r-lg) 0 0 !important; padding:15px 18px !important; min-height:auto !important; color:var(--dj-text) !important; } .portlet > .portlet-title > .caption, .panel > .panel-heading, .card > .card-header{ color:var(--dj-text) !important; font-size:15px !important; font-weight:600 !important; letter-spacing:-.01em; padding:0 !important; } .portlet > .portlet-body, .panel > .panel-body, .box > .box-body, .card > .card-body{padding:18px !important; background:transparent !important} /* neutralise every coloured header bar (Buyer Details, Payment Method, etc.) */ .portlet.box, .portlet.blue, .portlet.blue-hoki, .portlet.blue-steel, .portlet.green, .portlet.purple, .portlet.red, .portlet.yellow, .panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger{ border-color:var(--dj-line) !important; } .portlet.box > .portlet-title, .portlet.blue > .portlet-title, .portlet.green > .portlet-title, .portlet.red > .portlet-title, .portlet.purple > .portlet-title, .portlet.yellow > .portlet-title, .panel-primary > .panel-heading, .panel-info > .panel-heading, .panel-success > .panel-heading, .panel-warning > .panel-heading, .panel-danger > .panel-heading, .portlet-title[class*="blue"], .portlet-title[class*="teal"], [class*="section-header"], [class*="section-title"], div[class*="header"][style*="background"]{ background:var(--dj-card) !important; background-color:var(--dj-card) !important; background-image:none !important; color:var(--dj-text) !important; border-bottom:1px solid var(--dj-line) !important; border-color:var(--dj-line) !important; } .portlet.box > .portlet-title *, .panel-primary > .panel-heading *, .panel-info > .panel-heading *, .portlet-title[class*="blue"] *, [class*="section-header"] *{ color:var(--dj-text) !important; -webkit-text-fill-color:var(--dj-text) !important; text-shadow:none !important; } .portlet.box > .portlet-body{background:var(--dj-card) !important} /* NESTED — flatten */ .portlet .portlet, .portlet .panel, .panel .panel, .card .card, .portlet-body .portlet, .portlet-body .panel, .portlet-body .box, .portlet-body .well, .panel-body .panel, .card-body .card{ background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; margin:0 0 8px !important; } .portlet .portlet > .portlet-title, .portlet-body .portlet > .portlet-title, .panel .panel > .panel-heading, .card .card > .card-header{ background:transparent !important; border-bottom:1px solid var(--dj-line-soft) !important; border-radius:0 !important; padding:0 0 10px !important; } .portlet .portlet > .portlet-body, .portlet-body .portlet > .portlet-body, .panel .panel > .panel-body{padding:12px 0 0 !important} .portlet-footer, .panel-footer, .box-footer, .card-footer{ background:#FAFBFC !important; border-top:1px solid var(--dj-line) !important; border-radius:0 0 var(--dj-r-lg) var(--dj-r-lg) !important; padding:14px 18px !important; } /* ============================================================ 8 · SECTION ICONS The black glyphs beside "Payouts" / "Failed Payments" are a missing icon font falling back to a solid block. ============================================================ */ .portlet-title > .caption > img, .panel-heading > img, h3 > img, h4 > img, .caption > i.fa-money, .caption > i.fa-usd, .portlet-title .caption > i[class*="money"], .portlet-title .caption > i[class*="dollar"]{ width:18px !important; height:18px !important; object-fit:contain; opacity:.4; filter:grayscale(100%) brightness(1.4) !important; margin-right:8px !important; } /* ============================================================ 9 · BUTTONS — exactly one filled colour ============================================================ */ .btn{ height:var(--dj-h); padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--dj-r) !important; font-size:13.5px; font-weight:500; border:1px solid var(--dj-line); background:var(--dj-card); color:var(--dj-text); box-shadow:none !important; text-shadow:none !important; } .btn:hover, .btn:focus{background:var(--dj-page); border-color:#D6DCE4; color:var(--dj-text)} .btn-primary, .btn-info, .btn.blue, .btn.blue-hoki, .btn.blue-steel, .btn.blue-madison, .btn.blue-chambray, .btn.blue-ebonyclay, .btn.blue-sharp, .btn.blue-soft, .btn.teal, .btn.dark, .btn.purple, .btn.grey-cascade, .btn.green, .btn.green-jungle, .btn.green-meadow, .btn[class*="blue"], a.btn.blue, button.btn.blue, input.btn.blue, input[type="submit"], button[type="submit"]{ background:var(--dj-brand) !important; background-color:var(--dj-brand) !important; background-image:none !important; border-color:var(--dj-brand) !important; color:#fff !important; font-weight:600 !important; text-shadow:none !important; } .btn-primary:hover, .btn-info:hover, .btn.blue:hover, .btn.green:hover, .btn[class*="blue"]:hover, input[type="submit"]:hover, button[type="submit"]:hover{ background:var(--dj-brand-hover) !important; background-color:var(--dj-brand-hover) !important; border-color:var(--dj-brand-hover) !important; } .btn-danger, .btn.red, .btn.red-thunderbird, .btn.red-flamingo{ background:var(--dj-card) !important; background-color:var(--dj-card) !important; border-color:#F0CFCB !important; color:var(--dj-bad) !important; } .btn-danger:hover, .btn.red:hover{background:var(--dj-bad-tint) !important} .btn-default, .btn-secondary, .btn-light{ background:var(--dj-card) !important; border-color:var(--dj-line) !important; color:var(--dj-text) !important; } .btn-sm, .btn-xs{height:31px; padding:0 11px; font-size:12.5px} .btn-lg{height:44px; padding:0 20px; font-size:15px} /* ============================================================ 10 · FORMS ============================================================ */ label, .control-label, .form-label{ font-size:12.5px; font-weight:600; color:var(--dj-text-2); margin-bottom:5px; } .form-control, select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"]{ min-height:var(--dj-h); background:#F7F9FB !important; border:1px solid var(--dj-line) !important; border-radius:var(--dj-r) !important; color:var(--dj-text) !important; font-size:14px; padding:8px 12px; box-shadow:none !important; } textarea{min-height:90px; line-height:1.55} .form-control:focus, select:focus, textarea:focus, input:focus{ background:var(--dj-card) !important; border-color:var(--dj-brand) !important; outline:none !important; box-shadow:0 0 0 3px var(--dj-brand-tint) !important; } ::placeholder{color:var(--dj-text-3)} .input-group-addon, .input-group-text{ background:var(--dj-page) !important; border-color:var(--dj-line) !important; color:var(--dj-text-2) !important; border-radius:var(--dj-r) !important; } /* ============================================================ 11 · TABLES ============================================================ */ .table, table{background:var(--dj-card); font-size:13.5px; margin-bottom:0; border-color:var(--dj-line-soft)} th, thead th, thead tr th, .table thead th, .table > thead > tr > th, table > thead > tr > th, .dataTable thead th, [class*="table"] thead th, th[class], th[style], thead[class] th, tr[class] th{ background:#FAFBFC !important; background-color:#FAFBFC !important; background-image:none !important; color:var(--dj-text-3) !important; -webkit-text-fill-color:var(--dj-text-3) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:.06em; text-transform:uppercase; padding:11px 16px !important; border-bottom:1px solid var(--dj-line) !important; border-top:none !important; white-space:nowrap; vertical-align:middle; text-shadow:none !important; } th a, thead th a, thead th span, th i, thead th i{ color:var(--dj-text-3) !important; -webkit-text-fill-color:var(--dj-text-3) !important; } th .fa, th .glyphicon{opacity:.5} .table > tbody > tr > td, .table tbody td, table tbody td{ padding:12px 16px !important; border-top:none !important; border-bottom:1px solid var(--dj-line-soft) !important; vertical-align:middle; color:var(--dj-text); } .table > tbody > tr:last-child > td{border-bottom:none !important} .table-hover > tbody > tr:hover > td{background:var(--dj-hover) !important} .table-striped > tbody > tr:nth-child(odd) > td{background:transparent !important} .table-bordered, .table-bordered td, .table-bordered th{border-color:var(--dj-line-soft) !important} .table-responsive{border:none !important} .table img.img-circle, .table img.rounded-circle, .table img[class*="avatar"]{ width:32px !important; height:32px !important; border-radius:50%; object-fit:cover; background:var(--dj-line-soft); } /* ============================================================ 12 · BADGES · ALERTS · NOTES ============================================================ */ .badge, .label{ display:inline-flex; align-items:center; padding:3px 9px !important; border-radius:999px !important; font-size:11.5px !important; font-weight:600 !important; line-height:1.5; } .badge, .label-default{background:var(--dj-line-soft) !important; color:var(--dj-text-2) !important} .label-success, .badge-success{background:var(--dj-ok-tint) !important; color:var(--dj-ok) !important} .label-warning, .badge-warning{background:var(--dj-warn-tint) !important; color:var(--dj-warn) !important} .label-danger, .badge-danger {background:var(--dj-bad-tint) !important; color:var(--dj-bad) !important} .label-info, .badge-info {background:var(--dj-info-tint) !important; color:var(--dj-info) !important} .label-primary, .badge-primary{background:var(--dj-brand-tint) !important; color:var(--dj-brand-dark) !important} .alert, .note{border-radius:var(--dj-r-lg) !important; border-width:1px !important; padding:12px 15px !important; font-size:13.5px} .alert-info, .note-info {background:var(--dj-info-tint) !important; border-color:#CFE6F0 !important; color:var(--dj-info) !important} .alert-success, .note-success{background:var(--dj-ok-tint) !important; border-color:#CCE7D8 !important; color:var(--dj-ok) !important} .alert-warning, .note-warning{background:var(--dj-warn-tint) !important; border-color:#F3DFC0 !important; color:var(--dj-warn) !important} .alert-danger, .note-danger {background:var(--dj-bad-tint) !important; border-color:#F0CFCB !important; color:var(--dj-bad) !important} /* ============================================================ 13 · PAGINATION · TABS · MODALS · DROPDOWNS ============================================================ */ .pagination > li > a, .pagination > li > span, .page-link{ border-color:var(--dj-line) !important; color:var(--dj-text-2) !important; border-radius:6px !important; margin:0 2px; padding:6px 11px !important; font-size:12.5px; } .pagination > .active > a, .page-item.active .page-link{ background:var(--dj-brand) !important; border-color:var(--dj-brand) !important; color:#fff !important; font-weight:600; } .nav-tabs{border-bottom:1px solid var(--dj-line)} .nav-tabs > li > a, .nav-tabs .nav-link{ border:none !important; color:var(--dj-text-2) !important; font-size:14px; padding:10px 14px !important; border-radius:0 !important; } .nav-tabs > li.active > a, .nav-tabs .nav-link.active{ background:transparent !important; color:var(--dj-brand-dark) !important; font-weight:600; border-bottom:2px solid var(--dj-brand) !important; } .modal-content{border-radius:var(--dj-r-lg) !important; border:1px solid var(--dj-line) !important; box-shadow:0 12px 32px rgba(17,24,38,.12) !important} .modal-header, .modal-footer{border-color:var(--dj-line) !important} .modal-header{padding:16px 20px !important} .modal-body{padding:20px !important} .dropdown-menu{border:1px solid var(--dj-line) !important; border-radius:var(--dj-r) !important; box-shadow:0 8px 24px rgba(17,24,38,.10) !important; padding:5px !important} .dropdown-menu > li > a, .dropdown-item{border-radius:6px; padding:8px 11px !important; font-size:13.5px; color:var(--dj-text-2) !important} .dropdown-menu > li > a:hover, .dropdown-item:hover{background:var(--dj-page) !important; color:var(--dj-text) !important} /* ============================================================ 14 · ONBOARDING PANEL Layout only. The icons are left as the app ships them — restyling them in CSS made them worse, not better. Replacing the icon set is a template-side task. ============================================================ */ .portlet-body.setup-dashboard > .row{display:flex !important; flex-wrap:wrap} .setup-item{ display:flex !important; flex-direction:column; align-items:center !important; padding:22px 12px !important; } .setup-inner-container{ display:flex !important; flex-direction:column; align-items:center; text-align:center; width:100%; height:100%; } span.setup-img, .setup-img{ display:inline-block !important; width:auto !important; height:auto !important; background:none !important; border-radius:0 !important; margin:0 auto 12px !important; line-height:normal !important; } span.setup-img img, img[id$="_setup"], img[src*="/setup/"], img.img-larger{ width:auto !important; height:auto !important; max-width:46px !important; max-height:46px !important; object-fit:contain !important; filter:none !important; opacity:1 !important; margin:0 auto !important; } .setup-title, .setup-title *{ display:block !important; width:100% !important; float:none !important; clear:both !important; text-align:center !important; font-size:13.5px !important; line-height:1.45 !important; color:var(--dj-text-2) !important; } .setup-title{min-height:46px; margin:0 0 12px !important} .setup-item .btn{margin-top:auto !important; height:32px !important; padding:0 12px !important; font-size:12.5px !important} [id*="ideOther"], [class*="ideOther"]{ display:block !important; clear:both !important; float:none !important; margin:18px auto 0 !important; background:var(--dj-card) !important; border:1px solid var(--dj-line) !important; color:var(--dj-text-2) !important; font-weight:500 !important; } /* ============================================================ 15 · MISC ============================================================ */ .portlet-body img:not(.img-circle):not(.rounded-circle):not([id$="_setup"]):not([class*="avatar"]), .note img, .alert img{ max-width:150px !important; max-height:130px !important; width:auto !important; height:auto !important; opacity:.9; } .dashboard-stat, .dashboard-stat2{border-radius:var(--dj-r-lg) !important; box-shadow:none !important} /* ############################################################ ## PART 2 — STAT CARDS, SIDEBAR ICONS, TITLE ICONS ############################################################ */ /* ============================================================ A · STAT CARDS (membership app) Left-aligned, tight, brand-accented. ============================================================ */ [style*="rgb(51, 122, 183)"], [style*="rgb(51,122,183)"], [style*="#337ab7"], [style*="#337AB7"]{ background:#FFFFFF !important; background-color:#FFFFFF !important; background-image:none !important; border:1px solid #E6EAEF !important; border-radius:12px !important; box-shadow:none !important; min-height:0 !important; height:auto !important; padding:20px 22px !important; color:#111826 !important; row-gap:0 !important; align-content:start !important; } [style*="rgb(51, 122, 183)"] *{ color:#111826 !important; -webkit-text-fill-color:#111826 !important; background:transparent !important; background-color:transparent !important; text-shadow:none !important; border-color:#F0F3F6 !important; } /* title — small, quiet, left */ [style*="rgb(51, 122, 183)"] h1, [style*="rgb(51, 122, 183)"] h2, [style*="rgb(51, 122, 183)"] h3, [style*="rgb(51, 122, 183)"] h4, [style*="rgb(51, 122, 183)"] h5, [style*="rgb(51, 122, 183)"] h6{ font-size:12px !important; font-weight:600 !important; letter-spacing:.07em !important; text-transform:uppercase !important; color:#8C95A3 !important; -webkit-text-fill-color:#8C95A3 !important; text-align:left !important; margin:0 0 18px !important; padding:0 !important; line-height:1.3 !important; } /* icon — small teal chip, top left */ [style*="rgb(51, 122, 183)"] > i, [style*="rgb(51, 122, 183)"] > svg, [style*="rgb(51, 122, 183)"] > img, [style*="rgb(51, 122, 183)"] > .fa, [style*="rgb(51, 122, 183)"] i, [style*="rgb(51, 122, 183)"] svg{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important; max-width:32px !important; max-height:32px !important; font-size:15px !important; border-radius:8px !important; background:var(--dj-brand-tint) !important; background-color:var(--dj-brand-tint) !important; color:var(--dj-brand-dark) !important; -webkit-text-fill-color:var(--dj-brand-dark) !important; fill:var(--dj-brand-dark) !important; margin:0 0 14px 0 !important; float:none !important; padding:0 !important; } [style*="rgb(51, 122, 183)"] svg *{fill:var(--dj-brand-dark) !important} [style*="rgb(51, 122, 183)"] img{ width:26px !important; height:26px !important; max-width:26px !important; max-height:26px !important; border-radius:0 !important; background:transparent !important; margin:0 0 12px !important; display:block !important; filter:grayscale(100%) brightness(0) invert(48%) sepia(72%) saturate(480%) hue-rotate(133deg) brightness(92%) contrast(90%) !important; } /* figure grid inside the card */ [style*="rgb(51, 122, 183)"] table, [style*="rgb(51, 122, 183)"] tbody{width:100% !important} [style*="rgb(51, 122, 183)"] tr{border:none !important} [style*="rgb(51, 122, 183)"] td, [style*="rgb(51, 122, 183)"] th{ border:none !important; border-bottom:1px solid #F0F3F6 !important; padding:9px 0 !important; background:transparent !important; vertical-align:middle !important; } [style*="rgb(51, 122, 183)"] tr:last-child td{border-bottom:none !important} [style*="rgb(51, 122, 183)"] td:first-child, [style*="rgb(51, 122, 183)"] th:first-child{ color:#5A6474 !important; -webkit-text-fill-color:#5A6474 !important; font-size:13px !important; font-weight:400 !important; text-align:left !important; } [style*="rgb(51, 122, 183)"] td:last-child{ font-size:15px !important; font-weight:700 !important; letter-spacing:-.01em !important; text-align:right !important; font-variant-numeric:tabular-nums; } /* label / number column pairs (Total · Active · Inactive) */ [style*="rgb(51, 122, 183)"] [style*="grid"]{ row-gap:4px !important; column-gap:12px !important; text-align:left !important; } [style*="rgb(51, 122, 183)"] [style*="grid"] > *{text-align:left !important} /* ============================================================ B · SIDEBAR ICONS Each glyph becomes a mask container, then gets a shape based on the link target. ============================================================ */ .page-sidebar-menu a > i, .page-sidebar-menu a > .fa, .page-sidebar-menu a > [class*="icon-"]{ font-size:0 !important; width:17px !important; height:17px !important; min-width:17px !important; display:inline-block !important; vertical-align:-3px !important; background-color:currentColor !important; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; margin-right:11px !important; opacity:.9; } .page-sidebar-menu .sub-menu a > i{ width:15px !important; height:15px !important; min-width:15px !important; margin-right:10px !important; } /* --- default: small square, neutral --- */ .page-sidebar-menu a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* home */ .page-sidebar-menu a[href$="/dashboard"] > i, .page-sidebar-menu a[href="/"] > i, .page-sidebar-menu a[href*="admin-dashboard"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* video */ .page-sidebar-menu a[href*="video"] > i, .page-sidebar-menu a[href*="how-to"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* revenue / reports / stats */ .page-sidebar-menu a[href*="revenue"] > i, .page-sidebar-menu a[href*="report"] > i, .page-sidebar-menu a[href*="stat"] > i, .page-sidebar-menu a[href*="tracker"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* organization / school */ .page-sidebar-menu a[href*="organization"] > i, .page-sidebar-menu a[href*="school"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* referral */ .page-sidebar-menu a[href*="referral"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* announcement */ .page-sidebar-menu a[href*="announcement"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* email */ .page-sidebar-menu a[href*="email"] > i, .page-sidebar-menu a[href*="mail"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* news, events, schedule */ .page-sidebar-menu a[href*="event"] > i, .page-sidebar-menu a[href*="news"] > i, .page-sidebar-menu a[href*="schedule"] > i, .page-sidebar-menu a[href*="class"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* tournament */ .page-sidebar-menu a[href*="tournament"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* media / images */ .page-sidebar-menu a[href*="media"] > i, .page-sidebar-menu a[href*="image"] > i, .page-sidebar-menu a[href*="photo"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* resources / materials */ .page-sidebar-menu a[href*="resource"] > i, .page-sidebar-menu a[href*="material"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* birthday */ .page-sidebar-menu a[href*="birthday"] > i, .page-sidebar-menu a[href*="party"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* private lesson */ .page-sidebar-menu a[href*="private"] > i, .page-sidebar-menu a[href*="lesson"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* proshop / purchase */ .page-sidebar-menu a[href*="shop"] > i, .page-sidebar-menu a[href*="purchase"] > i, .page-sidebar-menu a[href*="store"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* promo */ .page-sidebar-menu a[href*="promo"] > i, .page-sidebar-menu a[href*="coupon"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* contact / phone */ .page-sidebar-menu a[href*="contact"] > i, .page-sidebar-menu a[href*="phone"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* settings */ .page-sidebar-menu a[href*="setting"] > i, .page-sidebar-menu a[href*="config"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* help */ .page-sidebar-menu a[href*="help"] > i, .page-sidebar-menu a[href*="support"] > i, .page-sidebar-menu a[href*="guide"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* notification */ .page-sidebar-menu a[href*="notification"] > i, .page-sidebar-menu a[href*="push"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* invite */ .page-sidebar-menu a[href*="invite"] > i, .page-sidebar-menu a[href*="friend"] > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* ============================================================ C · MEMBER MANAGEMENT SUB-MENU These links are JS-driven with no distinct href, so the icons are assigned by position. Order assumed: 1 Dashboard · 2 Create Contracts · 3 Members · 4 Enrollment Programs · 5 Reports · 6 Belt Progress · 7 Attendance · 8 Event Records · 9 Help · 10 Settings ============================================================ */ /* 1 · Dashboard — grid */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(1) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(1) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 2 · Create Contracts — document with pen */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(2) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(2) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 3 · Members — people */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(3) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(3) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 4 · Enrollment Programs — layers */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(4) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(4) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 5 · Reports — bar chart */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(5) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(5) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 6 · Belt Progress — medal */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(6) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(6) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 7 · Attendance — checked calendar */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(7) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(7) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 8 · Event Records — calendar */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(8) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(8) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 9 · Help — question mark */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(9) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(9) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* 10 · Settings — gear */ .page-sidebar-menu li.active > .sub-menu > li:nth-child(10) > a > i, .page-sidebar-menu li.open > .sub-menu > li:nth-child(10) > a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* ============================================================ D · SECTION TITLE ICONS (Payouts / Failed Payments) ============================================================ */ .portlet-title img, .panel-heading img, .card-header img, h1 > img, h2 > img, h3 > img, h4 > img, h5 > img, .caption > img{ width:18px !important; height:18px !important; max-width:18px !important; max-height:18px !important; object-fit:contain !important; margin:0 10px 0 0 !important; vertical-align:-3px !important; opacity:1 !important; filter:grayscale(100%) brightness(0) invert(48%) sepia(72%) saturate(480%) hue-rotate(133deg) brightness(92%) contrast(90%) !important; } /* ############################################################ TheDOJOApp — theme-refresh · v6 tuning block ------------------------------------------------------------ ★ 이 블록은 이전 "v5 패치"와 "이전 v6"를 모두 대체합니다. - 크롬 오버라이드에 붙여둔 이전 패치 부분은 지우고, - 그 자리에 이 v6 하나만 붙여넣으세요. (패치는 하나만 유지) - 위치: 기존 theme-refresh CSS 의 맨 아래 끝. 이번 버전에서 고친 것: 1. 왼쪽 메뉴 글씨 가독성 ↑ (더 진하고 또렷하게) 2. 선택된 메뉴 = teal 바 + 진한 채움 + teal 아이콘 3. 온보딩 빨간 완료 체크(이미지) → 브랜드 teal 체크 4. 전체 teal 컨셉 강화 5. ★ 메뉴별 아이콘 — 각 메뉴의 icon-* 클래스 기준으로 서로 다른 아이콘 지정 (위치 아님 = 순서 바뀌어도 안전) CSS only. No HTML, no JS. ############################################################ */ :root{ --dj-brand-tint-2:#D3EFEF; } /* ============================================================ 1 · 왼쪽 메뉴 글씨 — 더 잘 보이게 ============================================================ */ .page-sidebar-menu > li > a, .sidebar-menu > li > a{ color:#2A3342 !important; font-size:14px !important; font-weight:600 !important; letter-spacing:-.005em !important; } .page-sidebar-menu > li > a > span.title, .page-sidebar-menu > li > a > span{color:#2A3342 !important} .page-sidebar-menu > li.heading > h3{color:var(--dj-text-3) !important} /* ③ 하위 메뉴 글씨 — 더 진하게 (흐림 해결) */ .page-sidebar-menu .sub-menu > li > a, .page-sidebar-menu .sub-menu > li > a > span, .page-sidebar-menu .sub-menu > li > a > .title{color:#2A3342 !important;font-weight:500 !important} /* ============================================================ 2 · 선택된 메뉴 — 컨셉이 확실히 보이도록 ============================================================ */ /* 선택된 최상위 메뉴 (하위 없음 / 닫힘) = 채움 + 바 */ .page-sidebar-menu > li.active > a, .page-sidebar-menu > li.active > a > span, .sidebar-menu > li.active > a{ background:var(--dj-brand-tint-2) !important; color:var(--dj-brand-dark) !important; font-weight:700 !important; box-shadow:inset 3px 0 0 var(--dj-brand) !important; } /* ② 하위가 "열려 있는" 상위 메뉴 = 채움 없이 바+글씨만 (teal 겹침 제거) */ .page-sidebar-menu > li.active.open > a, .page-sidebar-menu > li.open > a{ background:transparent !important; color:var(--dj-brand-dark) !important; font-weight:700 !important; box-shadow:inset 3px 0 0 var(--dj-brand) !important; } .page-sidebar-menu > li.active > a > i, .page-sidebar-menu > li.active > a > .fa, .page-sidebar-menu > li.open > a > i{ background-color:var(--dj-brand) !important; color:var(--dj-brand) !important; opacity:1 !important; } .page-sidebar-menu > li:hover > a{background:var(--dj-page) !important;color:var(--dj-text) !important} /* 열린 하위 목록 중 "현재 선택된 항목"만 채움 + 바 */ /* ★ 글자(span/.title)에는 배경을 주지 않음 → "글자 주변 동그란 박스" 제거 */ .page-sidebar-menu .sub-menu > li.active > a{ background:var(--dj-brand-tint) !important; color:var(--dj-brand-dark) !important;font-weight:700 !important; box-shadow:inset 3px 0 0 var(--dj-brand) !important;border-radius:var(--dj-r) !important; } .page-sidebar-menu .sub-menu > li.active > a > span, .page-sidebar-menu .sub-menu > li.active > a > .title{ background:transparent !important;box-shadow:none !important;border-radius:0 !important; color:var(--dj-brand-dark) !important;font-weight:700 !important; } /* ============================================================ 3 · 메뉴 아이콘 — 진하게 (덜 흐리게) ============================================================ */ .page-sidebar-menu a > i, .page-sidebar-menu a > .fa, .page-sidebar-menu a > [class*="icon-"]{ background-color:#3A4552 !important; opacity:1 !important; } /* ① 아이콘 정렬 — 글자와 세로 중앙 맞춤 + 크기/간격 통일 */ .page-sidebar-menu > li > a > i, .page-sidebar-menu > li > a > .fa, .page-sidebar-menu > li > a > [class*="icon-"]{ width:18px !important; height:18px !important; min-width:18px !important; vertical-align:middle !important; margin:0 12px 0 0 !important; } .page-sidebar-menu > li > a > .title, .page-sidebar-menu > li > a > span{vertical-align:middle !important} .page-sidebar-menu .sub-menu > li > a > i, .page-sidebar-menu .sub-menu > li > a > [class*="icon-"]{ width:16px !important; height:16px !important; min-width:16px !important; vertical-align:middle !important; margin:0 10px 0 0 !important; } .page-sidebar-menu .sub-menu > li > a > .title, .page-sidebar-menu .sub-menu > li > a > span{vertical-align:middle !important} /* ============================================================ 3b · 메뉴별 아이콘 매핑 (Simple Line Icons 클래스 기준) 앱이 각 메뉴에 붙여둔 icon-* 클래스를 그대로 활용해 메뉴마다 다른 선(line) SVG 아이콘을 그립니다. 폰트가 아니라 CSS 마스크라 폰트 로드 실패와 무관하게 항상 보임. ============================================================ */ /* home / dashboard */ .page-sidebar-menu a > i.icon-home, .page-sidebar-menu a > i.icon-house{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* notebook / ledger — Revenue Tracker */ .page-sidebar-menu a > i.icon-notebook, .page-sidebar-menu a > i.icon-note{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* chart / graph — reports, revenue */ .page-sidebar-menu a > i.icon-graph, .page-sidebar-menu a > i.icon-bar-chart, .page-sidebar-menu a > i.icon-chart, .page-sidebar-menu a > i.icon-pie-chart{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* book-open — organization / student resources */ .page-sidebar-menu a > i.icon-book-open, .page-sidebar-menu a > i.icon-notebook-2, .page-sidebar-menu a > i.icon-graduation{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* organization / bank building */ .page-sidebar-menu a > i.icon-organization, .page-sidebar-menu a > i.icon-bank, .page-sidebar-menu a > i.icon-briefcase{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* share — referrals */ .page-sidebar-menu a > i.icon-share, .page-sidebar-menu a > i.icon-share-alt, .page-sidebar-menu li.referal a > i{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* speech / megaphone — announcements */ .page-sidebar-menu a > i.icon-speech, .page-sidebar-menu a > i.icon-bubble, .page-sidebar-menu a > i.icon-bubbles, .page-sidebar-menu a > i.icon-megaphone{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* calendar — news & events / class schedule */ .page-sidebar-menu a > i.icon-calendar, .page-sidebar-menu a > i.icon-event, .page-sidebar-menu a > i.icon-clock{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* trophy — tournament */ .page-sidebar-menu a > i.icon-trophy, .page-sidebar-menu a > i.icon-badge, .page-sidebar-menu a > i.icon-cup{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* picture / camera — school media */ .page-sidebar-menu a > i.icon-picture, .page-sidebar-menu a > i.icon-camera, .page-sidebar-menu a > i.icon-frame{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* film / play — how-to videos */ .page-sidebar-menu a > i.icon-film, .page-sidebar-menu a > i.icon-control-play, .page-sidebar-menu a > i.icon-camrecorder, .page-sidebar-menu a > i.icon-video, .page-sidebar-menu a > i.icon-playlist{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* people — member management */ .page-sidebar-menu a > i.icon-users, .page-sidebar-menu a > i.icon-user, .page-sidebar-menu a > i.icon-people, .page-sidebar-menu a > i.icon-user-following{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* phone — contact us */ .page-sidebar-menu a > i.icon-phone, .page-sidebar-menu a > i.icon-call-end, .page-sidebar-menu a > i.icon-screen-smartphone, .page-sidebar-menu a > i.icon-mobile{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* envelope / mail */ .page-sidebar-menu a > i.icon-envelope, .page-sidebar-menu a > i.icon-envelope-open, .page-sidebar-menu a > i.icon-paper-plane, .page-sidebar-menu a > i.icon-email{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* settings — gear */ .page-sidebar-menu a > i.icon-settings, .page-sidebar-menu a > i.icon-wrench, .page-sidebar-menu a > i.icon-equalizer, .page-sidebar-menu a > i.icon-control-panel{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* tag — promo codes */ .page-sidebar-menu a > i.icon-tag, .page-sidebar-menu a > i.icon-price-tag, .page-sidebar-menu a > i.icon-present{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* bell — notifications */ .page-sidebar-menu a > i.icon-bell, .page-sidebar-menu a > i.icon-notification{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* handbag / basket — proshop / store */ .page-sidebar-menu a > i.icon-handbag, .page-sidebar-menu a > i.icon-basket, .page-sidebar-menu a > i.icon-basket-loaded, .page-sidebar-menu a > i.icon-bag{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* doc / docs — resources, reports */ .page-sidebar-menu a > i.icon-doc, .page-sidebar-menu a > i.icon-docs{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* grid / layers — generic groupings */ .page-sidebar-menu a > i.icon-grid, .page-sidebar-menu a > i.icon-layers, .page-sidebar-menu a > i.icon-list{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* wallet / credit-card — billing */ .page-sidebar-menu a > i.icon-wallet, .page-sidebar-menu a > i.icon-credit-card, .page-sidebar-menu a > i.icon-credit{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* help / question — help & guides */ .page-sidebar-menu a > i.icon-question, .page-sidebar-menu a > i.icon-info, .page-sidebar-menu a > i.icon-support{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* magnifier — search */ .page-sidebar-menu a > i.icon-magnifier, .page-sidebar-menu a > i.icon-search{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* globe / map — locations */ .page-sidebar-menu a > i.icon-globe, .page-sidebar-menu a > i.icon-map, .page-sidebar-menu a > i.icon-location-pin, .page-sidebar-menu a > i.icon-directions{ -webkit-mask-image:url("data:image/svg+xml;utf8,"); mask-image:url("data:image/svg+xml;utf8,"); } /* ============================================================ 4 · 온보딩 완료 체크 — 빨간 이미지 → 브랜드 teal 체크 ============================================================ */ .portlet-body.setup-dashboard .setup-item.setup-done img, .setup-item.setup-done img, .setup-item.setup-done img.img-larger{ content:url("data:image/svg+xml;utf8,") !important; width:54px !important; height:54px !important; max-width:54px !important; max-height:54px !important; opacity:1 !important; filter:none !important; object-fit:contain !important; margin:0 auto 12px !important; } /* ============================================================ 5 · 컨셉 강화 — teal 버튼/탭/페이지네이션 풀강도 ============================================================ */ .btn-primary, .btn.blue, .btn[class*="blue"], .btn.teal, input[type="submit"], button[type="submit"]{ background:var(--dj-brand) !important; background-color:var(--dj-brand) !important; border-color:var(--dj-brand) !important; color:#fff !important; font-weight:600 !important; } .btn-primary:hover, .btn.blue:hover, input[type="submit"]:hover, button[type="submit"]:hover{ background:var(--dj-brand-hover) !important; border-color:var(--dj-brand-hover) !important; } .pagination > .active > a, .page-item.active .page-link{ background:var(--dj-brand) !important; border-color:var(--dj-brand) !important; color:#fff !important; } .nav-tabs > li.active > a, .nav-tabs .nav-link.active{ color:var(--dj-brand-dark) !important; border-bottom:2px solid var(--dj-brand) !important; font-weight:700 !important; } .page-title{color:var(--dj-text) !important} /* ============================================================ 6 · Member Management 대시보드 — 프로토타입 형식에 맞춤 구조는 그대로, 정렬·아이콘 색만 정돈 (CSS-only) ============================================================ */ /* (a) 스탯 카드 내용 왼쪽 정렬 (아이콘도 top-left) */ [style*="rgb(51, 122, 183)"], [style*="rgb(51,122,183)"], [style*="#337ab7"], [style*="#337AB7"]{ text-align:left !important; } [style*="rgb(51, 122, 183)"] [align="center"], [style*="rgb(51, 122, 183)"] .text-center, [style*="rgb(51, 122, 183)"] center{ text-align:left !important; } [style*="rgb(51, 122, 183)"] i, [style*="rgb(51, 122, 183)"] svg, [style*="rgb(51, 122, 183)"] img, [style*="rgb(51, 122, 183)"] .fa{ margin-left:0 !important; margin-right:auto !important; float:none !important; } /* (b) 섹션 헤더 아이콘(Payouts / Failed Payments) 검정 → teal 이 화면 아이콘은 Font Awesome 인라인 SVG(.svg-inline--fa)이고 부모 색(검정)을 따라가므로 색만 teal로 지정하면 됨. 결제 관련 머니 아이콘들에 한정(버튼·표 아이콘엔 영향 최소). */ .svg-inline--fa.fa-money-bill, .svg-inline--fa.fa-money-bill path, .svg-inline--fa.fa-money-bill-alt, .svg-inline--fa.fa-money-bill-alt path, .svg-inline--fa.fa-money-check, .svg-inline--fa.fa-money-check path, .svg-inline--fa.fa-money-check-alt, .svg-inline--fa.fa-money-check-alt path, .svg-inline--fa.fa-hand-holding-usd, .svg-inline--fa.fa-hand-holding-usd path, .svg-inline--fa.fa-file-invoice-dollar, .svg-inline--fa.fa-file-invoice-dollar path{ color:var(--dj-brand) !important; fill:var(--dj-brand) !important; } /* (이미지/포틀릿 아이콘용 폴백 — 혹시 img 형태인 다른 화면 대비) */ .portlet-title img, .portlet-title .caption img, .card-header img, .panel-heading img{ filter:brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(480%) hue-rotate(133deg) brightness(92%) contrast(90%) !important; opacity:1 !important; } /* ============================================================ 7 · 대시보드 색 입히기 — "너무 흰 느낌" 완화 (CSS-only) ============================================================ */ /* (a) 스탯·섹션 아이콘을 teal 틴트 "칩"으로 (흰 배경에 색 포인트) */ .card .svg-inline--fa.fa-user, .card .svg-inline--fa.fa-users, .card .svg-inline--fa.fa-user-friends, .card .svg-inline--fa.fa-user-plus, .card .svg-inline--fa.fa-user-graduate, .card .svg-inline--fa.fa-graduation-cap, .card .svg-inline--fa.fa-layer-group, .card .svg-inline--fa.fa-coins, .card .svg-inline--fa.fa-money-bill, .card .svg-inline--fa.fa-money-bill-alt, .card .svg-inline--fa.fa-money-check, .card .svg-inline--fa.fa-money-check-alt, .card .svg-inline--fa.fa-dollar-sign, .card .svg-inline--fa.fa-chart-line, .card .svg-inline--fa.fa-chart-bar, .card .svg-inline--fa.fa-wallet, .card .svg-inline--fa.fa-hand-holding-usd, .card .svg-inline--fa.fa-file-invoice-dollar{ color:var(--dj-brand-dark) !important; fill:var(--dj-brand-dark) !important; background:var(--dj-brand-tint) !important; box-sizing:content-box !important; width:1em !important; height:1em !important; padding:.5em !important; border-radius:12px !important; vertical-align:middle !important; } /* (b) 카드 상단에 teal 액센트 라인 (밋밋한 흰 박스에 컬러 한 줄) */ .card [style*="0px 2px 8px"], .card [style*="0px 2px 10px"], .card [style*="0px 2px 5px"]{ box-shadow:inset 0 3px 0 var(--dj-brand), rgba(17,24,38,.06) 0 2px 12px !important; } /* ============================================================ 8 · KPI 지표 구분선 + 단계 색 (성공한 대시보드 패턴 참고) 원칙: 절제된 팔레트 + 지표 사이 은은한 구분선 + 라벨은 옅게·숫자는 진하게 + 의미 색(활성=green 등) 흰 카드 안쪽에만 적용(바깥 카드 배열엔 영향 없음). ============================================================ */ /* (a) Students / New Students — 지표 사이 세로 구분선 */ [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr 1fr 1fr"] > div{ border-right:1px solid var(--dj-line) !important; padding-left:8px !important; padding-right:8px !important; } [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr 1fr 1fr"] > div:last-child{ border-right:0 !important; } /* 라벨(Total·Active·Inactive / Today·Week·…)은 옅게, 위 여백 */ [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr 1fr 1fr"] > div > *:first-child{ color:var(--dj-text-3) !important; } /* (b) Tuition Payments — 각 줄에 은은한 단계 배경(위→아래로 teal 틴트가 짙어짐) */ /* 라벨|금액 2단 그리드 줄(1fr auto)을 대상으로 함 */ [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr auto"]:nth-of-type(1){background:rgba(14,143,132,.03) !important} [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr auto"]:nth-of-type(2){background:rgba(14,143,132,.06) !important} [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr auto"]:nth-of-type(3){background:rgba(14,143,132,.09) !important} [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr auto"]:nth-of-type(4){background:rgba(14,143,132,.12) !important} [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr auto"]{ border-radius:6px !important; padding:8px 10px !important; margin-bottom:2px !important; } /* 금액(오른쪽 값)은 브랜드 색으로 강조 */ [style*="rgb(255, 255, 255)"] [style*="grid-template-columns: 1fr auto"] > *:last-child{ color:var(--dj-brand-dark) !important; font-weight:700 !important; } /* ############################################################ TheDOJOApp — theme-refresh · v7 SUB-PAGE ALIGNMENT ------------------------------------------------------------ 목적: 새로 만든 Dashboard 기준으로 나머지 Member Management 서브 페이지(Members · Create Contracts · Reports · Belt Progress · Attendance · Event Records · Enrollment Programs · Settings)의 제목·글자 크기·표·폼· 패널을 일괄 정렬. CSS 전용, 로직/마크업/JS 변경 없음. 원칙: 제목(h1–h6)은 !important 없이 → 대시보드의 인라인 스타일 제목은 보존하고 옛 페이지의 순수 태그만 정규화. 폼/패널/표/탭은 Metronic 클래스를 !important로 눌러 통일. ############################################################ */ /* v7 · 1 · 제목 타이포 정규화 (design-system 타입 스케일) */ h1,h2,h3,h4,h5,h6{ color:var(--dj-text); letter-spacing:-.01em; line-height:1.3; margin-top:0 } h1{ font-size:22px; font-weight:700; margin-bottom:14px } h2{ font-size:18px; font-weight:700; margin-bottom:12px } h3{ font-size:16px; font-weight:600; margin-bottom:10px } h4{ font-size:14px; font-weight:600; margin-bottom:8px } h5{ font-size:12.5px; font-weight:600; margin-bottom:6px } h6{ font-size:11.5px; font-weight:600; margin-bottom:6px } /* v7 · 2 · 폼 — 입력 높이(34→38 통일)·간격·검증 상태 */ .form-control:not(textarea), select:not([multiple]), select.form-control:not([multiple]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"]{ height:var(--dj-h) !important; } textarea.form-control{ height:auto !important; min-height:calc(var(--dj-h) * 2) !important } .form-group{ margin-bottom:16px !important } .help-block, .form-text{ font-size:12px !important; color:var(--dj-text-3) !important; margin-top:5px !important } .has-error .form-control{ border-color:var(--dj-bad) !important } .has-error .control-label, .has-error .help-block, .has-error label{ color:var(--dj-bad) !important } .has-success .form-control{ border-color:var(--dj-ok) !important } .has-success .control-label, .has-success .help-block{ color:var(--dj-ok) !important } .has-warning .form-control{ border-color:var(--dj-warn) !important } .has-warning .control-label, .has-warning .help-block{ color:var(--dj-warn) !important } /* v7 · 3 · 패널 — 남은 Metronic 색상 헤더 바 평탄화 */ .portlet.blue-hoki > .portlet-title, .portlet.blue-steel > .portlet-title, .portlet.blue-madison > .portlet-title, .portlet.blue-chambray > .portlet-title, .portlet.blue-sharp > .portlet-title, .portlet.grey > .portlet-title, .portlet.grey-cararra > .portlet-title, .portlet.grey-salsa > .portlet-title, .portlet.grey-steel > .portlet-title, .portlet.dark > .portlet-title, .portlet.red > .portlet-title, .portlet.red-sunglo > .portlet-title, .portlet.green > .portlet-title, .portlet.green-haze > .portlet-title, .portlet.yellow > .portlet-title, .portlet.yellow-crusta > .portlet-title, .portlet.purple > .portlet-title, .portlet.purple-plum > .portlet-title, .portlet-title[class*="bg-"]{ background:var(--dj-card) !important; background-color:var(--dj-card) !important; background-image:none !important; border-bottom:1px solid var(--dj-line) !important; } .portlet.blue-hoki > .portlet-title *, .portlet.blue-steel > .portlet-title *, .portlet.blue-madison > .portlet-title *, .portlet.blue-chambray > .portlet-title *, .portlet.blue-sharp > .portlet-title *, .portlet.grey > .portlet-title *, .portlet.grey-cararra > .portlet-title *, .portlet.grey-salsa > .portlet-title *, .portlet.grey-steel > .portlet-title *, .portlet.dark > .portlet-title *, .portlet.red > .portlet-title *, .portlet.red-sunglo > .portlet-title *, .portlet.green > .portlet-title *, .portlet.green-haze > .portlet-title *, .portlet.yellow > .portlet-title *, .portlet.yellow-crusta > .portlet-title *, .portlet.purple > .portlet-title *, .portlet.purple-plum > .portlet-title *{ color:var(--dj-text) !important; -webkit-text-fill-color:var(--dj-text) !important; text-shadow:none !important; } /* v7 · 4 · 표 — 셀 글자·행 hover·DataTables 컨트롤 통일 */ .table > tbody > tr > td, .table tbody td, table tbody td, .dataTable tbody td{ font-size:13.5px !important; color:var(--dj-text) !important; vertical-align:middle !important; } .table-hover > tbody > tr:hover, table.table-hover tbody tr:hover{ background:var(--dj-hover) !important } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate{ font-size:12.5px !important; color:var(--dj-text-2) !important; } /* v7 · 5 · 탭(.nav-pills) — .nav-tabs 와 동일 톤 */ .nav-pills > li > a{ color:var(--dj-text-2) !important; border-radius:var(--dj-r) !important; font-size:13.5px !important; font-weight:500 !important; } .nav-pills > li > a:hover{ background:var(--dj-page) !important; color:var(--dj-text) !important } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{ background:var(--dj-brand) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; } .tab-content{ padding-top:14px !important } /* ############################################################ TheDOJOApp — theme-refresh · v8 LIVE REVIEW FIXES ------------------------------------------------------------ 배포된 sang-dev 화면(Create contracts · Members · Enrollment) 실물 검토 기준. 남은 시안(#36C6D3)·네이비(#2F4F6F) 헤더 바가 인라인 스타일로 색이 박혀 있어 앞 블록들이 못 잡던 것을 직접 겨냥. + 헤더 글자 균형 · 표 행 높이 축소 · 파랑 링크 제거. CSS 전용, 로직/마크업 변경 없음. ############################################################ */ /* v8·1 — 색상 헤더 바(시안/네이비/모달) → 브랜드 teal + 글자 균형 */ [style*="rgb(54, 198, 211)"], [style*="rgb(54,198,211)"], [style*="#36C6D3"], [style*="#36c6d3"], [style*="rgb(47, 79, 111)"], [style*="rgb(47,79,111)"], [style*="#2F4F6F"], [style*="#2f4f6f"], [style*="rgb(14, 143, 132)"], [style*="rgb(14,143,132)"], [style*="#0E8F84"], [style*="#0e8f84"], .modal-header{ background:var(--dj-brand) !important; background-color:var(--dj-brand) !important; background-image:none !important; border-color:var(--dj-brand) !important; color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:16px !important; font-weight:600 !important; letter-spacing:-.01em !important; } /* 헤더 안 액션 버튼 = 반투명 흰색 고스트(teal 바 위에서 잘 보이게) */ [style*="rgb(54, 198, 211)"] .btn, [style*="rgb(54,198,211)"] .btn, [style*="#36C6D3"] .btn, [style*="#36c6d3"] .btn, [style*="rgb(47, 79, 111)"] .btn, [style*="rgb(47,79,111)"] .btn, [style*="#2F4F6F"] .btn, [style*="#2f4f6f"] .btn, [style*="rgb(14, 143, 132)"] .btn, [style*="rgb(14,143,132)"] .btn, [style*="#0E8F84"] .btn, [style*="#0e8f84"] .btn, .modal-header .btn{ background:rgba(255,255,255,.16) !important; background-color:rgba(255,255,255,.16) !important; border:1px solid rgba(255,255,255,.35) !important; color:#fff !important; box-shadow:none !important; } [style*="rgb(54, 198, 211)"] .btn i, [style*="rgb(54,198,211)"] .btn i, [style*="#36C6D3"] .btn i, [style*="#36c6d3"] .btn i, [style*="rgb(47, 79, 111)"] .btn i, [style*="rgb(47,79,111)"] .btn i, [style*="#2F4F6F"] .btn i, [style*="#2f4f6f"] .btn i, [style*="rgb(54, 198, 211)"] .btn svg, [style*="#36C6D3"] .btn svg, [style*="rgb(14, 143, 132)"] .btn i, [style*="rgb(14,143,132)"] .btn i, [style*="#0E8F84"] .btn i, [style*="#0e8f84"] .btn i, [style*="rgb(14, 143, 132)"] .btn svg, [style*="#0E8F84"] .btn svg{ color:#fff !important; fill:#fff !important; -webkit-text-fill-color:#fff !important; } /* v8·2 — 표 행 높이 축소 + 셀 아바타 크기 제한 */ .table > tbody > tr > td, .table tbody td, table tbody td, .dataTable tbody td{ padding:8px 12px !important; vertical-align:middle !important; } .table td img, table td img, .table tbody td img{ max-width:36px !important; max-height:36px !important; object-fit:cover !important; } /* v8·3 — 표 안 파랑 링크(상태 등) → 브랜드 */ .table a:not(.btn), table a:not(.btn){ color:var(--dj-brand-dark) !important } .table a:not(.btn):hover, table a:not(.btn):hover{ color:var(--dj-brand-hover) !important } /* ############################################################ TheDOJOApp — theme-refresh · v9 BELT PROGRESS TABLE ------------------------------------------------------------ Belt Progress (BeltsPage)의 표는 JS가 인라인 스타일로 그린다. 헤더가 인라인 rgb(51,122,183)을 쓰던 탓에 위쪽 스탯 카드 블록 ([style*="rgb(51, 122, 183)"])에 걸려 헤더에만 padding 20px 22px 와 text-align:left 가 !important 로 주입됐고, 그래서 Program Name · Action 헤더가 아래 행과 어긋나 보였다. 이제 표가 클래스를 갖고 레이아웃을 직접 소유한다. ############################################################ */ .dj-belt-table{ margin-top:20px; background:var(--dj-card); border:1px solid var(--dj-line); border-radius:var(--dj-r); overflow:hidden; } .dj-belt-table__school{ padding:12px 14px; background:var(--dj-brand-dark); color:#fff; font-size:15px; font-weight:700; letter-spacing:-.01em; } /* 헤더와 본문 행이 같은 트랙 정의를 공유 → 열이 절대 어긋나지 않음 */ .dj-belt-table__row{ display:grid; grid-template-columns:1fr 300px; column-gap:0; } .dj-belt-table__row--head{ background:var(--dj-brand); color:#fff; font-weight:600; } .dj-belt-table__row--body{ border-top:1px solid var(--dj-line); color:var(--dj-text); } .dj-belt-table__cell{ padding:10px 14px; align-content:center; min-width:0; } .dj-belt-table__cell--name{ border-right:1px solid var(--dj-line); overflow-wrap:anywhere; } .dj-belt-table__row--head .dj-belt-table__cell--name{ border-right-color:rgba(255,255,255,.35); } .dj-belt-table__cell--action{ text-align:right; justify-items:end; } .dj-belt-table__actions{ display:grid; grid-auto-flow:column; column-gap:8px; } .dj-belt-table__empty{ padding:15px; color:var(--dj-text-2); font-style:italic; text-align:center; }