src/ApplicationBundle/Resources/views/framework/_cp_shell_css.html.twig line 1

Open in your IDE?
  1. {#
  2.   framework/_cp_shell_css.html.twig
  3.   Shell LAYOUT css (sidebar/topbar/content) + a legacy-class OVERLAY so pages built on
  4.   the old Material classes (.card/.table/.btn/.form-control) pick up the cp look when
  5.   rendered inside a `.cp-scope` shell — without editing their markup.
  6.   Shared by cp_module_layout (extends) and _cp_list_shell_open (include). Colours/fonts
  7.   come from _cp_tokens; this file is structure + legacy bridging only.
  8. #}
  9. <style>
  10. :root{ --cp-sidebar-w:210px; }
  11. .cp-shell{ display:flex; height:100vh; overflow:hidden; background:var(--cp-surface); font-family:var(--cp-font-body); color:var(--cp-text); }
  12. .cp-rail{ width:60px; flex-shrink:0; background:var(--cp-surface-low); border-right:1px solid var(--cp-outline); display:flex; flex-direction:column; align-items:center; padding:10px 0; gap:3px; overflow-y:auto; }
  13. .cp-rail-item{ width:46px; padding:8px 0 6px; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--cp-text-faint); text-decoration:none; transition:background .12s,color .12s; }
  14. .cp-rail-item:hover{ background:var(--cp-surface-white); color:var(--cp-text); text-decoration:none; }
  15. .cp-rail-item.active{ background:var(--cp-accent-dim); color:var(--cp-accent); }
  16. .cp-rail-item .material-icons{ font-size:var(--cp-fs-xl, 20px); }
  17. .cp-rail-lbl{ font-size:var(--cp-fs-micro, 10px); font-weight:600; text-align:center; line-height:1.05; }
  18. .cp-sidebar{ width:var(--cp-sidebar-w); min-width:var(--cp-sidebar-w); background:var(--cp-surface-white); border-right:1px solid var(--cp-outline); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
  19. .cp-sidebar-brand{ padding:16px 14px 12px; border-bottom:1px solid var(--cp-outline); }
  20. .cp-brand-icon{ font-size:var(--cp-fs-xl, 20px); color:var(--cp-accent); margin-bottom:6px; line-height:1; }
  21. .cp-brand-name{ font-family:var(--cp-font-head); font-size:14px; font-weight:800; color:var(--cp-text); letter-spacing:-.01em; }
  22. .cp-brand-context{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--cp-text-faint); margin-top:2px; }
  23. .cp-sidebar-nav{ padding:10px 8px; flex:1 1 auto; }
  24. .cp-sidebar-nav .cp-nav-sec{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--cp-text-faint); padding:12px 10px 4px; }
  25. .cp-nav-link{ display:flex; align-items:center; gap:10px; padding:8px 11px; margin:1px 0; border-radius:var(--cp-radius); font-size:var(--cp-fs-sm, 12.5px); font-weight:500; color:var(--cp-text-muted); text-decoration:none; transition:background .12s,color .12s; white-space:nowrap; min-width:0; }
  26. .cp-nav-link .cp-nav-icon{ flex-shrink:0; }
  27. .cp-nav-link > span:not(.cp-nav-icon){ overflow:hidden; text-overflow:ellipsis; }
  28. .cp-nav-link:hover{ background:var(--cp-surface-low); color:var(--cp-text); text-decoration:none; }
  29. .cp-nav-link.active{ background:var(--cp-accent-dim); color:var(--cp-accent); font-weight:600; }
  30. .cp-nav-icon{ font-size:var(--cp-fs-md, 15px); width:18px; text-align:center; flex-shrink:0; }
  31. .cp-sidebar-footer{ margin-top:auto; border-top:1px solid var(--cp-outline); padding:8px; }
  32. .cp-main{ flex:1 1 0; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
  33. .cp-topbar{ padding:18px 26px 14px; background:var(--cp-surface-white); border-bottom:1px solid var(--cp-outline); display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-shrink:0; }
  34. .cp-eyebrow{ font-family:var(--cp-font-mono); font-size:var(--cp-fs-xs, 11.5px); font-weight:600; color:var(--cp-text-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px; }
  35. .cp-title{ font-family:var(--cp-font-head); font-size:var(--cp-fs-xl, 20px); font-weight:700; letter-spacing:-.02em; margin:0; color:var(--cp-text); }
  36. .cp-topbar-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  37. .cp-content{ flex:1 1 0; overflow-y:auto; padding:20px 26px 44px; }
  38. @media(max-width:820px){ .cp-sidebar{ width:64px; min-width:64px; } .cp-brand-name,.cp-brand-context,.cp-nav-link span:not(.cp-nav-icon),.cp-nav-sec{ display:none; } }
  40. /* ── app column: global top strip + shell ── */
  41. .cp-app{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
  42. .cp-app .cp-shell{ height:auto; flex:1 1 0; min-height:0; }
  43. .cp-topstrip{ flex-shrink:0; height:46px; display:flex; align-items:center; gap:14px; padding:0 16px; background:var(--cp-surface-white); border-bottom:1px solid var(--cp-outline); font-family:var(--cp-font-body); }
  44. .cp-ts-search{ display:flex; align-items:center; gap:9px; flex:1; max-width:420px; padding:6px 12px; background:var(--cp-surface-low); border:1px solid var(--cp-outline); border-radius:var(--cp-radius-pill); color:var(--cp-text-faint); font-size:var(--cp-fs-sm, 12.5px); cursor:pointer; }
  45. .cp-ts-search i{ font-size:12px; }
  46. .cp-ts-search span{ flex:1; }
  47. .cp-ts-search kbd{ font-size:var(--cp-fs-xs, 11.5px); color:var(--cp-text-faint); border:1px solid var(--cp-outline); border-radius:4px; padding:1px 6px; background:var(--cp-surface-white); }
  48. .cp-ts-right{ margin-left:auto; display:flex; align-items:center; gap:6px; }
  49. .cp-ts-btn,.cp-ts-profile{ display:flex; align-items:center; gap:6px; padding:5px 9px; border-radius:var(--cp-radius); color:var(--cp-text-muted); font-size:var(--cp-fs-sm, 12.5px); font-weight:500; text-decoration:none; cursor:pointer; }
  50. .cp-ts-btn:hover,.cp-ts-profile:hover{ background:var(--cp-surface-low); color:var(--cp-text); text-decoration:none; }
  51. .cp-ts-btn .material-icons,.cp-ts-ico .material-icons{ font-size:18px; }
  52. .cp-ts-lbl{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  53. .cp-ts-caret{ font-size:var(--cp-fs-lg, 16px) !important; color:var(--cp-text-faint); }
  54. .cp-ts-ico{ position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--cp-text-muted); text-decoration:none; }
  55. .cp-ts-ico:hover{ background:var(--cp-surface-low); color:var(--cp-text); }
  56. .cp-ts-badge{ position:absolute; top:4px; right:5px; min-width:15px; height:15px; padding:0 4px; border-radius:99px; background:var(--cp-error); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  57. .cp-ts-badge:empty{ display:none; }
  58. .cp-ts-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
  59. .cp-ts-avatar-i{ display:flex; align-items:center; justify-content:center; background:var(--cp-accent); color:var(--cp-on-accent); font-size:12px; font-weight:700; }
  60. .cp-ts-name{ font-weight:600; color:var(--cp-text); }
  61. .cp-ts-menu{ font-size:var(--cp-fs-sm, 12.5px); border:1px solid var(--cp-outline); border-radius:var(--cp-radius); box-shadow:var(--cp-shadow-pop); padding:5px; min-width:190px; }
  62. .cp-ts-menu-h{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-faint); padding:6px 10px 4px; }
  63. .cp-ts-menu li > a{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--cp-radius); color:var(--cp-text-muted); text-decoration:none; }
  64. .cp-ts-menu li > a:hover{ background:var(--cp-surface-low); color:var(--cp-text); }
  65. .cp-ts-menu li > a .material-icons{ font-size:var(--cp-fs-lg, 16px); color:var(--cp-text-faint); }
  66. .cp-ts-menu li > a.cp-ts-active{ color:var(--cp-accent); font-weight:600; }
  67. .cp-ts-menu .divider{ height:1px; background:var(--cp-outline); margin:4px 0; }
  68. @media(max-width:640px){ .cp-ts-search span,.cp-ts-search kbd,.cp-ts-lbl,.cp-ts-name{ display:none; } }
  70. /* ── legacy-class overlay (Material → cp) inside a cp shell ── */
  71. .cp-scope .card, .cp-scope .card-bordered{ background:var(--cp-surface-white); border:1px solid var(--cp-outline) !important; border-radius:var(--cp-radius-lg); box-shadow:var(--cp-shadow-card); }
  72. .cp-scope .card > .body, .cp-scope .card .card-body{ padding:16px 18px; }
  73. .cp-scope .card > .header{ padding:14px 18px 4px; }
  75. /* Legacy adminlte page scaffolding (#base/#content/section/.section-body) carries its own
  76.    padding + margins that stack on top of .cp-content, reading as excess whitespace on the
  77.    list/view pages. Flatten it so the first card sits in the cp-content gutter exactly like
  78.    the native dashboards — one consistent rhythm across dashboard, list and view. Also drop
  79.    the Bootstrap `.container` fixed max-width some form pages wrap #base in, so the card
  80.    spans the full cp-content width instead of leaving dead space on the right. */
  81. .cp-content #base, .cp-content #content, .cp-content #content > section,
  82. .cp-content section > .section-body, .cp-content > #base, .cp-content .content-wrapper{
  83.   margin:0 !important; padding:0 !important; background:transparent !important; min-height:0 !important;
  84.   width:auto !important; max-width:none !important; }
  85. .cp-content .section-body > .row{ margin-top:0; }
  86. .cp-content .card, .cp-content .card-bordered{ margin-bottom:16px; }
  87. .cp-content .card:last-child{ margin-bottom:0; }
  88. .cp-scope h1,.cp-scope h2,.cp-scope h3,.cp-scope h4{ font-family:var(--cp-font-head); color:var(--cp-text); letter-spacing:-.01em; }
  89. .cp-scope table.table{ font-size:var(--cp-fs-sm, 12.5px); color:var(--cp-text-muted); }
  90. .cp-scope table.table > thead > tr > th{ font-family:var(--cp-font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--cp-text-faint); background:var(--cp-surface-low); border-bottom:1px solid var(--cp-outline); padding:9px 10px; }
  91. .cp-scope table.table > tbody > tr > td{ border-top:1px solid var(--cp-surface-container); padding:9px 10px; vertical-align:middle; }
  92. .cp-scope table.table > tbody > tr:hover > td{ background:var(--cp-accent-dim); }
  93. .cp-scope .btn-primary{ background:var(--cp-accent) !important; border-color:var(--cp-accent) !important; color:var(--cp-on-accent) !important; }
  94. .cp-scope .btn-primary:hover{ background:var(--cp-accent-hover) !important; border-color:var(--cp-accent-hover) !important; }
  95. .cp-scope .form-control{ border-radius:var(--cp-radius); border:1px solid var(--cp-outline); }
  96. .cp-scope .dt-gen-button.btn{ border-radius:var(--cp-radius) !important; }
  97. </style>