templates/bundles/EasyAdminBundle/css/easyadmin.css.twig line 1

Open in your IDE?
  1. {#  ========================================================================
  2.     EasyAdmin Default Theme | (c) 2015 Javier Eguiluz | MIT License
  3.     ======================================================================== #}
  5. {% set color_schemes = {
  6.     'dark': {
  7.         info: '#39A0ED',
  8.         warning: '#F0AD4E',
  9.         danger: '#D42124',
  10.         success: '#006B2E',
  11.         text: '#222222',
  12.         text_muted: '#737373',
  13.         link: '#205081',
  14.         black: '#111111',
  15.         white: '#FFFFFF',
  16.         gray_darker: '#252525',
  17.         gray_dark: '#444',
  18.         gray: '#AAA',
  19.         gray_light: '#CCC',
  20.         gray_lighter: '#F5F5F5',
  21.         page_background: '#F5F5F5',
  22.         table_header: '#EEE',
  23.         table_border: '#CCC',
  24.         table_row_border: '#DDD',
  25.     },
  26.     'light': {
  27.         info: '#39A0ED',
  28.         warning: '#F0AD4E',
  29.         danger: '#D42124',
  30.         success: '#006B2E',
  31.         text: '#444444',
  32.         text_muted: '#737373',
  33.         link: '#205081',
  34.         black: '#333333',
  35.         white: '#FFFFFF',
  36.         gray_darker: '#444',
  37.         gray_dark: '#AAA',
  38.         gray: '#CCC',
  39.         gray_light: '#ffffff',
  40.         gray_lighter: '#FAFAFA',
  41.         page_background: '#f3f4f9',
  42.         table_header: '#FAFAFA',
  43.         table_border: '#FFFFFF',
  44.         table_row_border: '#E5E5E5',
  45.     }
  46. } %}
  48. {% set colors = color_schemes[color_scheme] %}
  50. {% autoescape false %}
  51. {# -------------------------------------------------------------------------
  52.    RESET STYLES
  53.    ------------------------------------------------------------------------- #}
  54. {# make the Symfony Web Toolbar look nice by neutralizing the aliasing applied
  55.    globally by the AdminLTE template styles #}
  56. .sf-toolbarreset {
  57.     -webkit-font-smoothing: subpixel-antialiased;
  58.     -moz-osx-font-smoothing: auto;
  59. }
  61. {# -------------------------------------------------------------------------
  62.    BASIC STYLES
  63.    ------------------------------------------------------------------------- #}
  64. body {
  65.     font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  66.     -webkit-font-smoothing: antialiased;
  67. }
  69. h1, h2, h3, h4, h5, h6 {
  70.     font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  71. }
  73. {# Links
  74.    ------------------------------------------------------------------------- #}
  75. a        { color: {{ colors.link }}; }
  76. a:hover  { opacity: 0.9; }
  77. a:active { outline: 0; }
  79. #main a:active {
  80.     position: relative;
  81.     top: 1px;
  82. }
  84. a.text-primary,
  85. a.text-primary:focus {
  86.     color: {{ colors.link }};
  87. }
  88. a.text-danger,
  89. a.text-danger:focus {
  90.     color: {{ colors.danger }};
  91. }
  92. a.text-primary:hover,
  93. a.text-danger:hover {
  94.     opacity: 0.9;
  95. }
  97. {# Lists
  98.    ------------------------------------------------------------------------- #}
  99. ul, ol {
  100.     margin: 1em 0 1em 1em;
  101.     padding: 0;
  102. }
  103. li {
  104.     margin-bottom: 1em;
  105. }
  107. ul.inline {
  108.     list-style: none;
  109.     margin: 0;
  110. }
  111. ul.inline li {
  112.     margin: 0;
  113. }
  115. {# Flash messages
  116.    ------------------------------------------------------------------------- #}
  117. div.flash {
  118.     padding: .5em;
  119. }
  120. div.flash-success {
  121.     background: {{ colors.success }};
  122.     color: {{ colors.white }};
  123. }
  124. div.flash-error {
  125.     background: {{ colors.danger }};
  126.     color: {{ colors.white }};
  127. }
  128. div.flash-error strong {
  129.     padding-right: .5em;
  130. }
  132. {# Labels
  133.    ------------------------------------------------------------------------- #}
  134. {# this prevents overriding default styles for labels (label-info, label-primary, etc.) #}
  135. .label:not([class*=label-]) {
  136.     background: {{ colors.gray_darker }};
  137. }
  138. .label {
  139.     color: {{ colors.white }};
  140.     display: inline-block;
  141.     font-size: 11px;
  142.     padding: 4px;
  143.     text-transform: uppercase;
  144. }
  146. .label-success {
  147.     {# !important is required to override AdminLTE styles #}
  148.     background: {{ colors.success }} !important;
  149. }
  150. .label-danger {
  151.     {# !important is required to override AdminLTE styles #}
  152.     background: {{ colors.danger }} !important;
  153. }
  154. .label-empty {
  155.     background: transparent;
  156.     border: 2px dotted;
  157.     border-radius: 4px;
  158.     color: {{ colors.gray_light }};
  159.     padding: 4px 8px;
  160. }
  162. {# this makes boolean labels to be of the same width for most languages #}
  163. .boolean .label,
  164. .toggle .label {
  165.     min-width: 33px;
  166. }
  168. {# Switches / toggles
  169.    ------------------------------------------------------------------------- #}
  170. {# needed to neutralize the default .toggle styles applied by Bootstrap Toggle
  171.    which collide with the .toggle class applied to <th> too #}
  172. .toggle { position: initial; }
  173. .toggle:not(th) { position: relative; }
  175. .toggle.btn-xs {
  176.  width: 44px;
  177. }
  178. .toggle-group .btn,
  179. .toggle-group .btn:hover {
  180.    border-radius: 3px;
  181.    font-size: 10px;
  182.    font-weight: bold;
  183.    text-transform: uppercase;
  184. }
  185. .toggle-group .btn {
  186.    padding: 4px 6px;
  187. }
  188. .toggle-group .btn:hover {
  189.     border: 0;
  190. }
  191. .toggle-group .btn + .btn {
  192.     margin-left: 0;
  193. }
  194. .toggle-group .toggle-on,
  195. .toggle-group .toggle-on.btn-xs,
  196. .toggle-group .toggle-on:hover,
  197. .toggle-group .toggle-on:active,
  198. .toggle-group .toggle-on:active:hover {
  199.     padding: 4px 5px 4px 0;
  200.     border: 0;
  201. }
  202. .toggle-group .toggle-off,
  203. .toggle-group .toggle-off.btn-xs,
  204. .toggle-group .toggle-off:hover,
  205. .toggle-group .toggle-off:active,
  206. .toggle-group .toggle-off:active:hover {
  207.     padding: 4px 0 4px 5px;
  208.     border: 0;
  209. }
  210. .toggle-group .toggle-handle,
  211. .toggle-group .toggle-handle:hover,
  212. .toggle-group .toggle-handle:active,
  213. .toggle-group .toggle-handle:active:hover {
  214.     background: {{ colors.gray_lighter }};
  215.     border: 0;
  216.     border-radius: 2px;
  217.     height: 19px;
  218.     margin-top: 2px;
  219.     padding: 5px;
  220. }
  221. .toggle .btn-success .toggle-handle {
  222.     box-shadow: -2px 0 1px rgba(0, 0, 0, .2);
  223. }
  224. .toggle .btn-danger .toggle-handle {
  225.     box-shadow: 2px 0 1px rgba(0, 0, 0, .2);
  226. }
  228. {# Badges
  229.    ------------------------------------------------------------------------- #}
  230. span.badge {
  231.     background-color: {{ brand_color }};
  232. }
  234. {# Buttons
  235.    ------------------------------------------------------------------------- #}
  236. .btn:focus {
  237.     outline: none;
  238. }
  239. .btn + .btn {
  240.     margin-left: 5px;
  241. }
  243. button.btn:active {
  244.     position: relative;
  245.     top: 1px;
  246. }
  248. .btn,
  249. .btn:hover,
  250. .btn:active,
  251. .btn:focus,
  252. .btn:active:hover  {
  253. {% if 'dark' == color_scheme %}
  254.     background: {{ colors.gray_light }};
  255. {% elseif 'light' == color_scheme %}
  256.     background: {{ colors.gray }};
  257. {% endif %}
  258.     border: 1px solid transparent;
  259.     border-radius: 4px;
  260.     box-shadow: none;
  261.     color: {{ colors.text }};
  262.     display: inline-block;
  263.     line-height: 1.42857143;
  264.     opacity: 1;
  265.     outline: none;
  266.     padding: 6px 12px;
  267.     text-align: center;
  268. }
  269. .btn-xs,
  270. .btn-xs:hover,
  271. .btn-xs:active,
  272. .btn-xs:focus,
  273. .btn-xs:active:hover {
  274.     padding: 1px 5px;
  275. }
  277. .btn-default,
  278. .btn-default:hover,
  279. .btn-default:active,
  280. .btn-default:focus,
  281. .btn-default:active:hover {
  282.     border-color: transparent;
  283. }
  284. .btn-primary,
  285. .btn-primary:hover,
  286. .btn-primary:active,
  287. .btn-primary:focus,
  288. .btn-primary:active:hover {
  289.     background-color: {{ brand_color }};
  290.     border-color: transparent;
  291.     color: {{ colors.white }};
  292. }
  293. .btn-info,
  294. .btn-info:hover,
  295. .btn-info:active,
  296. .btn-info:focus,
  297. .btn-info:active:hover {
  298.     background-color: {{ colors.info }};
  299.     border-color: transparent;
  300.     color: {{ colors.white }};
  301. }
  302. .btn-warning,
  303. .btn-warning:hover,
  304. .btn-warning:active,
  305. .btn-warning:focus,
  306. .btn-warning:active:hover {
  307.     background-color: {{ colors.warning }};
  308.     border-color: transparent;
  309.     color: {{ colors.white }};
  310. }
  311. .btn-danger,
  312. .btn-danger:hover,
  313. .btn-danger:active,
  314. .btn-danger:focus,
  315. .btn-danger:active:hover {
  316.     background-color: {{ colors.danger }};
  317.     border-color: transparent;
  318.     color: {{ colors.white }};
  319. }
  320. .btn-success,
  321. .btn-success:hover,
  322. .btn-success:active,
  323. .btn-success:focus,
  324. .btn-success:active:hover {
  325.     background-color: {{ colors.success }};
  326.     border-color: transparent;
  327.     color: {{ colors.white }};
  328. }
  330. {# .bnt-secondary is for 'buttons' displayed as text links #}
  331. .btn-secondary,
  332. .btn-secondary:hover,
  333. .btn-secondary:active,
  334. .btn-secondary:focus,
  335. .btn-secondary:active:hover {
  336.     background: transparent;
  337.     color: {{ brand_color }};
  338.     text-decoration: underline;
  339. }
  340. .btn-secondary:hover {
  341.     text-decoration: none;
  342. }
  344. .btn-primary,
  345. .btn-warning,
  346. .btn-danger,
  347. .btn-success,
  348. .btn-info {
  349.     font-weight: bold;
  350. }
  352. .btn i {
  353.     font-size: 16px;
  354.     margin-right: 2px;
  355. }
  357. .btn-flat,
  358. .btn-flat:hover,
  359. .btn-flat:active,
  360. .btn-flat:focus,
  361. .btn-flat:active:hover {
  362.     border-radius: 0;
  363. }
  365. {# Forms
  366.    ------------------------------------------------------------------------- #}
  367. .form-inline .form-control {
  368.     margin-bottom: 5px;
  369. }
  370. .form-control,
  371. .form-inline .form-control {
  372.     border: 1px solid {{ colors.gray }};
  373.     border-radius: 0;
  374. {% if 'dark' == color_scheme %}
  375.     box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  376. {% endif %}
  377.     color: {{ colors.text }};
  378.     -webkit-transition: none;
  379.     transition: none;
  380. }
  381. .form-control:focus {
  382. {% if 'dark' == color_scheme %}
  383.     border-color: {{ colors.gray_dark }};
  384.     box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  385. {% elseif 'light' == color_scheme %}
  386.     border-color: {{ colors.gray_darker }};
  387. {% endif %}
  388. }
  390. .has-error .error-block {
  391.     color: {{ colors.danger }};
  392.     font-weight: bold;
  393.     padding-top: 5px;
  394. }
  395. .has-error .error-block .label-danger {
  396.     margin-right: 3px;
  397. }
  398. .has-error .error-block ul {
  399.     margin: .5em 0 .5em 1.5em;
  400. }
  401. .has-error .error-block ul li {
  402.     margin-bottom: .5em;
  403. }
  405. .help-block,
  406. .has-error .help-block {
  407.     color: {{ colors.text_muted }};
  408.     font-size: 13px;
  409. }
  410. .nullable-control {
  411.    padding-top: 5px;
  412. }
  414. .form-actions.stuck {
  415.     bottom: 0;
  416.     position: fixed;
  417. {% if 'dark' == color_scheme %}
  418.     background-color: {{ colors.gray_lighter }};
  419.     box-shadow: 0 -1px 4px {{ colors.gray_light }};
  420. {% elseif 'light' == color_scheme %}
  421.     background-color: {{ colors.gray_light }};
  422.     box-shadow: 0 -1px 4px {{ colors.gray }};
  423. {% endif %}
  424.     height: 52px;
  425.     padding-top: 10px;
  426. {% if kernel_debug|default(false) %}
  427.     height: 85px;
  428.     padding-bottom: 45px;
  429. {% endif %}
  430.     z-index: 9999;
  431. }
  433. .field-group .box-header a i {
  434.     font-size: 21px;
  435. }
  437. .field-group .box-header a[aria-expanded=true] .fa-plus-square-o {
  438.    display: none;
  439. }
  440. .field-group .box-header a[aria-expanded=false] .fa-minus-square-o {
  441.    display: none;
  442. }
  444. {# Field: collection
  445.    ------------------------------------------------------------------------- #}
  446. .field-collection .collection-empty {
  447.     margin: .5em 0;
  448. }
  450. {# Field: special Form Fields (dividers, groups, sections)
  451.    ------------------------------------------------------------------------- #}
  452. .field-divider hr {
  453.     margin-top: 15px;
  454.     margin-bottom: 26px;
  455.     border: 0;
  456.     border-top: 1px solid;
  457. {% if 'dark' == color_scheme %}
  458.     border-top-color: #DDD;
  459. {% elseif 'light' == color_scheme %}
  460.     border-top-color: {{ colors.gray_lighter }};
  461. {% endif %}
  462. }
  463. .field-group .field-divider hr {
  464. {% if 'dark' == color_scheme %}
  465.     border-top-color: #DDD;
  466. {% elseif 'light' == color_scheme %}
  467.     border-top-color: #EEE;
  468. {% endif %}
  469. }
  471. .field-section {
  472.     margin: 16px 0 15px;
  473. }
  474. .field-section h2 {
  475. {% if 'dark' == color_scheme %}
  476.     border-bottom: 1px solid {{ colors.gray_light }};
  477.     color: {{ colors.gray_dark }};
  478. {% elseif 'light' == color_scheme %}
  479.     border-bottom: 1px solid #EEE;
  480.     color: {{ colors.gray_darker }};
  481. {% endif %}
  482.     font-size: 16px;
  483.     padding-bottom: 6px;
  484. }
  485. .field-section h2 i {
  486. {% if 'dark' == color_scheme %}
  487.     color: #555;
  488. {% elseif 'light' == color_scheme %}
  489.     color: #777;
  490. {% endif %}
  491.     margin-right: 2px;
  492. }
  493. .field-section p.help-block {
  494.     margin: 8px 0 0;
  495. }
  497. .field-group .box {
  498. {% if 'dark' == color_scheme %}
  499.     border: 1px solid #DDD;
  500. {% elseif 'light' == color_scheme %}
  501.     border: 1px solid #EEE;
  502. {% endif %}
  503.     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
  504. }
  505. .field-group .box-header i {
  506. {% if 'dark' == color_scheme %}
  507.     color: #555;
  508. {% elseif 'light' == color_scheme %}
  509.     color: #777;
  510. {% endif %}
  511.     margin-right: 2px;
  512. }
  513. .field-group .box-header.with-border {
  514. {% if 'dark' == color_scheme %}
  515.     background: #F0F0F0;
  516.     border-bottom-color: #DDD;
  517. {% elseif 'light' == color_scheme %}
  518.     background: {{ colors.gray_light }};
  519.     border-bottom-color: #EEE;
  520.     color: {{ colors.gray_darker }};
  521. {% endif %}
  522.     padding: 11px 10px 9px;
  523. }
  524. {% if 'light' == color_scheme %}
  525. .field-group .box-header .box-title {
  526.     color: #777;
  527. }
  528. {% endif %}
  529. .field-group .box-body {
  530.     padding: 15px 15px 5px;
  531. }
  532. .field-group .box-body > .help-block {
  533.     margin-top: 0;
  534. }
  536. {# Select2 widget
  537.    ------------------------------------------------------------------------- #}
  538. {# these styles must be applied after loading the default select2 styles #}
  539. .select2-container {
  540.     width: 100% !important;
  541. }
  542. .select2-container--bootstrap .select2-selection {
  543.     border: 1px solid {{ colors.gray }};
  544.     border-radius: 0;
  545.     box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  546.     color: {{ colors.text }};
  547.     -webkit-transition: none;
  548.     transition: none;
  549. }
  550. .select2-container--bootstrap .select2-selection .select2-search--inline {
  551.     margin: 0;
  552. }
  553. .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
  554.     color: {{ colors.text }};
  555.     padding-top: 4px;
  556. }
  557. .select2-container--bootstrap .select2-results__option {
  558.     margin-bottom: 0;
  559. }
  560. .select2-container--bootstrap .select2-results__option[aria-selected=true] {
  561.     background-color: {{ colors.gray_light }};
  562.     font-weight: bold;
  563. }
  564. .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
  565.     background-color: {{ brand_color }};
  566. }
  567. .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
  568.     color: {{ colors.text }};
  569. }
  570. .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
  571.     color: {{ colors.danger }};
  572.     font-weight: bold;
  573.     position: relative;
  574.     top: -1px;
  575. }
  576. .select2-container--bootstrap .select2-search--dropdown .select2-search__field {
  577.     border: 1px solid {{ colors.gray_dark }};
  578.     border-radius: 0;
  579.     margin: 5px 10px;
  580.     padding: 6px;
  581.     width: 96%;
  582. }
  583. .select2-search--inline .select2-search__field:focus {
  584.     outline: 0;
  585.     border: 0;
  586. }
  588. {# VichUploaderBundle files and images
  589.    ------------------------------------------------------------------------- #}
  590. .easyadmin-vich-image img {
  591.     border: 3px solid {{ colors.white }};
  592.     box-shadow: 0 0 3px {{ colors.gray }};
  593.     max-height: 300px;
  594.     max-width: 400px;
  595. }
  596. .easyadmin-vich-image input[type="file"],
  597. .easyadmin-vich-file input[type="file"] {
  598.     padding-top: 7px;
  599. }
  600. .easyadmin-vich-file a {
  601.     display: inline-block;
  602.     padding-top: 7px;
  603. }
  604. {# the checkbox to delete the image/file #}
  605. .easyadmin-vich-file .field-checkbox {
  606.     margin-bottom: 0;
  607. }
  608. .easyadmin-vich-file .field-checkbox .col-sm-2,
  609. .easyadmin-vich-image .field-checkbox .col-sm-2 {
  610.     display: none;
  611. }
  613. {# Thumbnails and image lightbox
  614.    ------------------------------------------------------------------------- #}
  615. .easyadmin-thumbnail img {
  616.     border: 3px solid {{ colors.white }};
  617.     box-shadow: 0 0 3px {{ colors.gray }};
  618.     max-height: 100px;
  619.     max-width: 100%;
  620. }
  621. .easyadmin-thumbnail img:hover {
  622.     cursor: zoom-in;
  623. }
  624. .featherlight .easyadmin-lightbox:hover {
  625.     cursor: zoom-out;
  626. }
  627. .easyadmin-lightbox {
  628.     display: none;
  629. }
  630. .featherlight .easyadmin-lightbox {
  631.     display: block;
  632. }
  633. .easyadmin-lightbox img {
  634.     width: 100%;
  635.     max-width: 100%;
  636. }
  638. {# Modal windows
  639.    ------------------------------------------------------------------------- #}
  640. .modal-dialog .modal-content {
  641.     border-radius: 0;
  642. }
  643. .modal-dialog .modal-content .modal-body h4 {
  644.     font-size: 21px;
  645.     margin: .5em 0;
  646. }
  647. .modal-dialog .modal-footer {
  648.     background: {{ colors.gray_lighter }};
  649.     border-top: 1px solid {{ colors.gray_light }};
  650.     margin-top: 1.5em;
  651. }
  653. {# Utils
  654.    ------------------------------------------------------------------------- #}
  655. .newrow, .new-row {
  656.     clear: both;
  657.     display: block;
  658. }
  660. {# -------------------------------------------------------------------------
  661.    LAYOUT
  662.    ------------------------------------------------------------------------- #}
  664. {# Wrapper
  665.    ------------------------------------------------------------------------- #}
  666. .content-wrapper {
  667.     background: {{ colors.page_background }};
  668. }
  669. .fixed .content-wrapper {
  670.     padding-top: 50px;
  671. }
  673. {# Header
  674.    ------------------------------------------------------------------------- #}
  675. .main-header {
  676.     background: {{ brand_color }};
  677.     position: relative;
  678. }
  679. .main-header .logo {
  680.     color: {{ colors.white }};
  681.     font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; {# needed to override AdminLTE styles #}
  682.     font-size: 18px;
  683.     font-weight: bold;
  684.     height: 45px;
  685.     line-height: 45px;
  686.     padding: 0;
  687. }
  688. .main-header .logo-long .logo-lg {
  689.     font-size: 16px;
  690. }
  691. .main-header .logo-lg {
  692.     overflow: hidden;
  693.     text-overflow: ellipsis;
  694.     white-space: nowrap;
  695. }
  696. .main-header #header-logo {
  697. }
  698. .main-header img {
  699.     margin-top: -2px;
  700.     max-height: 36px;
  701. }
  702. .main-header li {
  703.     margin-bottom: 0;
  704. }
  706. .main-header > .navbar {
  707.     background-color: {{ brand_color }};
  708.     color: rgba(255, 255, 255, 0.9);
  709.     margin-left: 0;
  710.     min-height: 40px;
  711. }
  713. .main-header .navbar .sidebar-toggle {
  714.     color: rgba(255, 255, 255, 0.8);
  715.     display: inline-block;
  716.     font-size: 16px;
  717.     height: 35px;
  718.     left: 0;
  719.     line-height: 35px;
  720.     padding: 0 15px;
  721.     position: absolute;
  722.     text-align: center;
  723.     top: 45px;
  724. }
  725. .sidebar-mini.sidebar-collapse .sidebar-toggle {
  726.     color: {{ colors.white }};
  727. }
  729. .navbar-custom-menu,
  730. .navbar-custom-menu ul.navbar-nav,
  731. .navbar-custom-menu ul.navbar-nav .user-menu {
  732.     float: none;
  733. }
  734. .navbar-custom-menu {
  735.     background: rgba(255, 255, 255, 0.1);
  736.     color: rgba(255, 255, 255, 0.8);
  737.     font-size: 13px;
  738.     font-weight: bold;
  739.     height: 35px;
  740.     line-height: 35px;
  741.     padding: 0 15px;
  742.     text-align: right;
  743.     width: 100%;
  744. }
  746. .main-header .navbar .user-menu .btn {
  747.     background: rgba(255, 255, 255, 0.05);
  748.     border-color: transparent;
  749.     color: #fff;
  750. }
  751. .main-header .navbar .user-menu .btn:active {
  752.     top: 0;
  753. }
  754. .main-header .navbar .user-menu .btn.dropdown-toggle {
  755.     padding: 6px 8px;
  756. }
  757. .main-header .navbar .user-menu .btn-group:hover .btn {
  758.     background: rgba(255, 255, 255, 0.1);
  759. }
  760. .main-header .navbar .user-menu .btn-group {
  761.     height: 35px;
  762. }
  763. .main-header .navbar .user-menu .btn-group .btn {
  764.     border-radius: 0;
  765. }
  766. .main-header .navbar .user-menu .dropdown-menu {
  767.     background: #fff;
  768.     box-shadow: 1px 1px 3px #ccc;
  769.     border-radius: 2px;
  770.     position: absolute;
  771.     left: auto;
  772.     right: 0;
  773. }
  774. .main-header .navbar .user-menu .dropdown-menu i {
  775.     margin: 0;
  776. }
  777. .main-header .navbar .user-menu .dropdown-menu a {
  778.     color: #777;
  779. }
  781. {# Main body
  782.    ------------------------------------------------------------------------- #}
  783. #content #main {
  784.     padding-bottom: 3em;
  785. }
  786. .content {
  787.     padding-top: 10px;
  788. }
  789. .content-header {
  790.     padding: 12px 15px 0 15px;
  791. }
  792. .content-header h1 {
  793.     margin: 0;
  794.     font-size: 24px;
  795. }
  797. {# Sidebar
  798.    ------------------------------------------------------------------------- #}
  799. .main-sidebar,
  800. .wrapper {
  801. {% if 'dark' == color_scheme %}
  802.     background-color: #333;
  803. {% elseif 'light' == color_scheme %}
  804.     background-color: {{ colors.gray_light }};
  805. {% endif %}
  806. }
  807. .main-sidebar {
  808.     padding-top: 80px;
  809. }
  811. .sidebar-menu li.header {
  812. {% if 'dark' == color_scheme %}
  813.     color: #777;
  814. {% elseif 'light' == color_scheme %}
  815.     color: {{ colors.gray_dark }};
  816. {% endif %}
  817.     font-size: 12px;
  818.     font-weight: bold;
  819.     text-transform: uppercase;
  820. }
  821. .treeview-menu > li.header {
  822. {% if 'dark' == color_scheme %}
  823.     background: #404040;
  824. {% elseif 'light' == color_scheme %}
  825.     background-color: {{ colors.gray_lighter }};
  826. {% endif %}
  827.     padding-left: 28px;
  828. }
  830. .sidebar-menu li a,
  831. .sidebar-menu li a span,
  832. .sidebar-menu li.header,
  833. .sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu a {
  834.     overflow: hidden;
  835.     text-overflow: ellipsis;
  836.     white-space: nowrap;
  837. }
  838. .sidebar-mini.sidebar-collapse .sidebar-menu li a {
  839.     overflow: visible;
  840. }
  842. .sidebar-menu > li > a,
  843. .sidebar-menu .treeview-menu > li > a {
  844. {% if 'dark' == color_scheme %}
  845.     background: #333;
  846.     color: #CCC;
  847. {% elseif 'light' == color_scheme %}
  848.     color: {{ colors.gray_darker }};
  849. {% endif %}
  850.     border-left: 3px solid transparent;
  851.     display: block;
  852.     font-weight: bold;
  853.     opacity: 1;
  854. }
  855. .sidebar-menu .treeview-menu > li > a {
  856. {% if 'dark' == color_scheme %}
  857.     background: #404040;
  858. {% elseif 'light' == color_scheme %}
  859.     background-color: {{ colors.gray_lighter }};
  860. {% endif %}
  861.     font-size: 13px;
  862.     padding: 8px 5px 8px 25px;
  863. }
  864. .sidebar-menu > li:hover > a,
  865. .sidebar-menu .treeview-menu > li:hover > a,
  866. .sidebar-menu > li.active > a,
  867. .sidebar-menu .treeview-menu > li.active > a,
  868. .sidebar-collapse .sidebar-menu > li.active.submenu-active > a,
  869. .sidebar-collapse .sidebar-menu > li:hover .treeview-menu > li.active > a {
  870. {% if 'dark' == color_scheme %}
  871.     color: {{ colors.white }};
  872.     background: #4D4D4D;
  873.     border-left-color: #BBB;
  874. {% elseif 'light' == color_scheme %}
  875.     background: #c8a2c7;
  876.     border-left-color: #69106a;
  877. {% endif %}
  878. }
  879. .sidebar-menu > li > a > .fa {
  880.     width: 22px;
  881. }
  882. .sidebar-menu .treeview-menu {
  883.     padding: 0;
  884. }
  886. {# when the sidebar is collapsed #}
  887. .sidebar-collapse .sidebar-menu > li > a {
  888.     padding: 12px 5px 12px 12px;
  889. }
  890. .sidebar-collapse .sidebar-menu > li .treeview-menu > li > a {
  891.     padding-left: 12px;
  892. }
  893. .sidebar-collapse .sidebar-menu > li > a > i.fa {
  894.     font-size: 18px;
  895. }
  896. .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
  897.     padding: 0;
  898. }
  899. .sidebar-collapse .sidebar-menu > li:hover > a,
  900. .sidebar-collapse .sidebar-menu .treeview-menu > li:hover > a,
  901. .sidebar-menu > li.active.submenu-active > a,
  902. .sidebar-collapse .sidebar-menu > li.active.submenu-active:hover > a {
  903.     border-left-color: transparent;
  904. {% if 'dark' == color_scheme %}
  905.     background: #333;
  906. {% elseif 'light' == color_scheme %}
  907.     background: #c8a2c7;
  908. {% endif %}
  909. }
  911. {# when collapsed, menu dividers are displayed as a straight line #}
  912. .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
  913. {% if 'dark' == color_scheme %}
  914.     border-bottom: 1px solid #777;
  915. {% elseif 'light' == color_scheme %}
  916.     border-bottom: 1px solid #BBB;
  917. {% endif %}
  918.     display: block !important;
  919.     font-size: 0;
  920.     height: 1px;
  921.     margin: 0;
  922.     padding: 0;
  923. }
  925. {# -------------------------------------------------------------------------
  926.    COMMON ADMIN PAGES
  927.    ------------------------------------------------------------------------- #}
  928. body.easyadmin h1.title {
  929.     margin-bottom: 10px;
  930. }
  932. .help-entity {
  933. {% if 'dark' == color_scheme %}
  934.     color: {{ colors.gray_dark }};
  935. {% elseif 'light' == color_scheme %}
  936.     border: 1px solid #EEE;
  937.     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
  938.     color: {{ colors.text_muted }};
  939. {% endif %}
  940.     margin: 10px 0 5px;
  941. }
  943. {# -------------------------------------------------------------------------
  944.    LIST PAGE
  945.    ------------------------------------------------------------------------- #}
  947. body.list .global-actions {
  948.     display: table;
  949.     width: 100%;
  950. }
  951. body.list .global-actions .button-action {
  952.     display: table-cell;
  953.     padding-left: 10px;
  954.     vertical-align: middle;
  955.     width: 120px;
  956. }
  957. body.list .global-actions .button-action a {
  958.     float: right;
  959. }
  960. body.list .global-actions .form-action {
  961.     display: table-cell;
  962.     width: 100%;
  963. }
  964. body.list .global-actions .form-action .input-group {
  965.     width: 100%;
  966. }
  968. body.list .global-actions .form-control {
  969.     box-shadow: none;
  970. }
  971. body.list .global-actions .input-group-btn > button.btn:not(:last-child) {
  972.     border-bottom-right-radius: 3px;
  973.     border-top-right-radius: 3px;
  974. }
  975. body.list .global-actions .input-group-btn a.btn {
  976.     border-radius: 3px;
  977.     margin-left: 10px;
  978. }
  980. {# Responsive tables
  981.    ------------------------------------------------------------------------- #}
  982. body.list .table-responsive,
  983. body.list table {
  984.     background: transparent;
  985.     border: 0;
  986. }
  987. body.list table thead {
  988.     display: none;
  989. }
  990. body.list .table tbody {
  991.     background: transparent;
  992.     border: 0;
  993. }
  994. body.list table tbody tr {
  995.     background: {{ colors.white }};
  996. {% if 'dark' == color_scheme %}
  997.     border: 1px solid {{ colors.gray_light }};
  998. {% elseif 'light' == color_scheme %}
  999.     border: 1px solid {{ colors.gray }};
  1000. {% endif %}
  1001.     display: block;
  1002.     margin-bottom: 1em;
  1003. }
  1004. body.list table tbody td {
  1005.     border-bottom: 1px solid {{ colors.table_row_border }};
  1006.     border-top: 0;
  1007.     display: block;
  1008.     vertical-align: middle;
  1009. }
  1010. body.list table tbody td:last-child {
  1011.     border-bottom: 0;
  1012. }
  1013. table td:before {
  1014.     content: attr(data-label);
  1015.     float: left;
  1016.     font-weight: bold;
  1017. }
  1018. table td:after {
  1019.     clear: both;
  1020.     content: "";
  1021.     display: block;
  1022. }
  1023. /* needed because the responsive tables require contents aligned to the right */
  1024. body.list table td,
  1025. body.list table .text-center,
  1026. body.list table .text-left,
  1027. body.list table .text-right {
  1028.     text-align: right;
  1029. }
  1031. body.list table tbody td.image .easyadmin-thumbnail img {
  1032.     border-width: 2px;
  1033.     max-height: 50px;
  1034.     max-width: 150px;
  1035. }
  1036. body.list table tbody td.association .badge {
  1037.     font-size: 13px;
  1038. }
  1039. body.list table tbody td.actions a {
  1040.     font-weight: bold;
  1041.     margin-left: 10px;
  1042. }
  1044. {# Search results
  1045.    ------------------------------------------------------------------------- #}
  1046. body.list .table tbody span.highlight {
  1047.     background: #FF9;
  1048.     border-radius: 2px;
  1049.     padding: 1px;
  1050. }
  1051. body.list .table tbody .no-results span.highlight,
  1052. body.list .table tbody .actions span.highlight {
  1053.     background: 0;
  1054.     border-radius: 0;
  1055. }
  1057. {# Pagination
  1058.    ------------------------------------------------------------------------- #}
  1059. body.list .pagination {
  1060.     float: right;
  1061.     margin: 0;
  1062. }
  1063. body.list .pagination > .disabled > span {
  1064.     background: transparent;
  1065.     border: 1px solid transparent;
  1066. {% if 'dark' == color_scheme %}
  1067.     color: {{ colors.text_muted }};
  1068. {% elseif 'light' == color_scheme %}
  1069.     color: {{ colors.gray }};
  1070. {% endif %}
  1071. }
  1072. body.list .pagination > li > a {
  1073.     background: {{ colors.white }};
  1074.     border-color: {{ colors.gray_light }};
  1075.     border-radius: 0;
  1076.     color: {{ colors.text }};
  1077. }
  1078. body.list .pagination > li > a:hover {
  1079.     background: {{ brand_color }};
  1080.     color: {{ colors.white }};
  1081. }
  1082. .pagination > li > a,
  1083. .pagination > li > span {
  1084.     padding: 6px 8px;
  1085. }
  1086. body.list .pagination > li i {
  1087.     padding: 0 3px;
  1088. }
  1089. {# this hack is needed to avoid the last pagination page from showing wrong
  1090.    borders for the second pagination element (we need to put this element above
  1091.    the third element) #}
  1092. body.list .pagination.last-page li:nth-child(2) {
  1093.     position: relative;
  1094.     z-index: 1;
  1095. }
  1097. {# -------------------------------------------------------------------------
  1098.    FORM PAGE
  1099.    ------------------------------------------------------------------------- #}
  1100. form label.control-label.required:after {
  1101.     content: "\00a0*";
  1102.     color: {{ colors.danger }};
  1103.     font-size: 16px;
  1104. }
  1106. {# -------------------------------------------------------------------------
  1107.    NEW PAGE
  1108.    ------------------------------------------------------------------------- #}
  1109. body.new textarea {
  1110.     min-height: 250px;
  1111. }
  1112. body.new .field-collection-action {
  1113.     margin: -15px 0 10px;
  1114. }
  1115. body.new .field-collection-item-action {
  1116.     margin: 5px 0 0;
  1117. }
  1119. body.new #form-actions-row button,
  1120. body.new #form-actions-row a.btn {
  1121.     margin-bottom: 10px;
  1122. }
  1123. body.new .form-horizontal #form-actions-row {
  1124.     padding-left: 15px;
  1125.     padding-right: 15px;
  1126. }
  1128. {# -------------------------------------------------------------------------
  1129.    EDIT PAGE
  1130.    ------------------------------------------------------------------------- #}
  1131. body.edit textarea {
  1132.     min-height: 250px;
  1133. }
  1134. body.edit .field-collection-action {
  1135.     margin: -15px 0 10px;
  1136. }
  1137. body.edit .field-collection-item-action {
  1138.     margin: 5px 0 0;
  1139. }
  1141. body.edit #form-actions-row button,
  1142. body.edit #form-actions-row a.btn {
  1143.     margin-bottom: 10px;
  1144. }
  1145. body.edit .form-horizontal #form-actions-row {
  1146.     padding-left: 15px;
  1147.     padding-right: 15px;
  1148. }
  1150. {# -------------------------------------------------------------------------
  1151.    SHOW PAGE
  1152.    ------------------------------------------------------------------------- #}
  1153. body.show .form-control {
  1154. {% if 'dark' == color_scheme %}
  1155.     background: {{ colors.white }};
  1156. {% elseif 'light' == color_scheme %}
  1157.     background: {{ colors.gray_lighter }};
  1158. {% endif %}
  1159.     border: 0;
  1160.     border-radius: 0;
  1161.     box-shadow: none;
  1162.     height: auto;
  1163. }
  1164. body.show .form-control.text {
  1165.     min-height: 34px;
  1166.     max-height: 250px;
  1167.     overflow-y: auto;
  1168. }
  1170. {# -------------------------------------------------------------------------
  1171.    ERROR PAGES
  1172.    ------------------------------------------------------------------------- #}
  1173. body.error .content-wrapper {
  1174.     align-items: center;
  1175.     display: flex;
  1176. }
  1177. body.error .error-description {
  1178.     background: {{ colors.white }};
  1179.     border: 1px solid {{ colors.gray_lighter }};
  1180.     box-shadow: 0 0 3px {{ colors.gray_light }};
  1181.     max-width: 96%;
  1182.     padding: 0;
  1183. }
  1184. body.error .error-description h1 {
  1185.     background: {{ colors.danger }};
  1186.     color: {{ colors.white }};
  1187.     font-size: 18px;
  1188.     font-weight: bold;
  1189.     margin: 0;
  1190.     padding: 10px;
  1191.     text-transform: uppercase;
  1192. }
  1193. body.error .error-message {
  1194.     font-size: 16px;
  1195.     padding: 45px 30px;
  1196.     text-align: center;
  1197. }
  1199. {# =========================================================================
  1200.    RESPONSIVE
  1201.    ========================================================================= #}
  1203. {# -------------------------------------------------------------------------
  1204.    VERTICAL TABLETS and LANDSCAPE SMARTPHONES
  1205.    ------------------------------------------------------------------------- #}
  1206. @media (min-width: 768px) {
  1207.     ul, ol {
  1208.         margin-left: 2em;
  1209.     }
  1211.     .main-header > .navbar {
  1212.       height: 80px;
  1213.     }
  1214.     .sidebar-mini.sidebar-collapse .main-header .navbar {
  1215.         margin-left: 0;
  1216.     }
  1217.     .main-header #header-logo {
  1218.         float: left;
  1219.     }
  1220.     .main-header .logo {
  1221.         font-size: 21px;
  1222.         height: 50px;
  1223.         line-height: 50px;
  1224.         text-align: left;
  1225.         transition: padding-left .3s linear;
  1226.     }
  1227.     .sidebar-mini.sidebar-collapse .main-header .logo {
  1228.         padding-left: 15px;
  1229.         width: auto; {# neutralizes AdminLTE styles #}
  1230.         transition: padding-left .3s linear;
  1231.     }
  1233.     .main-header .navbar .sidebar-toggle {
  1234.         height: 80px;
  1235.         line-height: 80px;
  1236.         position: static;
  1237.         padding: 0 12px 0 18px;
  1238.     }
  1239.     .sidebar-mini.sidebar-collapse .sidebar-toggle {
  1240.         background: rgba(0, 0, 0, 0.15);
  1241.         font-size: 18px;
  1242.         padding-left: 12px;
  1243.         width: 50px;
  1244.     }
  1246.     .navbar-custom-menu,
  1247.     .navbar-custom-menu ul.navbar-nav,
  1248.     .navbar-custom-menu ul.navbar-nav .user-menu {
  1249.         float: right;
  1250.     }
  1251.     .navbar-custom-menu {
  1252.         background: inherit;
  1253.         height: 50px;
  1254.         line-height: 50px;
  1255.         width: auto;
  1256.     }
  1257.     .navbar-custom-menu .user-menu i {
  1258.         padding-right: 4px;
  1259.     }
  1261.     .main-header .navbar .user-menu .btn {
  1262.         background: rgba(255, 255, 255, 0.1);
  1263.     }
  1264.     .main-header .navbar .user-menu .btn-group:hover .btn {
  1265.         background: rgba(255, 255, 255, 0.2);
  1266.     }
  1268.     .main-sidebar {
  1269.         padding-top: 80px;
  1270.     }
  1272.     .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
  1273.         padding-left: 5px;
  1274.     }
  1276.     {# these table styles are needed to override the "responsive tables" styles #}
  1277.     body.list table {
  1278.         background: {{ colors.white }};
  1279.         border: 1px solid {{ colors.table_border }};
  1280.     }
  1281.     body.list table thead {
  1282.         display: table-header-group;
  1283.     }
  1284.     body.list table thead th {
  1285.         background: {{ colors.table_header }};
  1286.         padding: 0;
  1287.     }
  1288.     body.list table thead th i {
  1289.         color: {{ colors.gray }};
  1290.         padding: 0 3px;
  1291.     }
  1292.     body.list table thead th a,
  1293.     body.list table thead th span {
  1294.         color: {{ colors.text }};
  1295.         display: block;
  1296.         padding: 10px 6px;
  1297.         white-space: nowrap;
  1298.     }
  1299.     body.list table thead th a:hover {
  1300.         background: {{ colors.gray_light }};
  1301.         text-decoration: none;
  1302.     }
  1303.     body.list table thead th.sorted,
  1304.     body.list table thead th.sorted a {
  1305. {% if 'dark' == color_scheme %}
  1306.         background: {{ brand_color }};
  1307.         color: {{ colors.white }};
  1308. {% endif %}
  1309.     }
  1310.     body.list table thead th.sorted a:hover i,
  1311.     body.list table thead th.sorted i {
  1312. {% if 'dark' == color_scheme %}
  1313.         color: {{ colors.white }};
  1314. {% elseif 'light' == color_scheme %}
  1315.         color: {{ brand_color }};
  1316. {% endif %}
  1317.     }
  1318.     body.list th.boolean, body.list td.boolean,
  1319.     body.list th.toggle, body.list td.toggle,
  1320.     body.list td.image {
  1321.         text-align: center;
  1322.     }
  1324.     body.list .table thead tr th {
  1325.         border-bottom: 2px solid {{ colors.gray_light }};
  1326.     }
  1327.     body.list .table thead tr th.sorted {
  1328.         border-bottom: 2px outset {{ brand_color }};
  1329.     }
  1330.     {# these styles are needed to fix some visual glitches when the sort field is the first column #}
  1331.     body.list .table thead tr th:first-child.sorted {
  1332. {% if 'dark' == color_scheme %}
  1333.         border-left: 1px solid {{ brand_color }};
  1334.         border-top: 1px solid {{ brand_color }};
  1335. {% endif %}
  1336.     }
  1337.     body.list .table tbody {
  1338.         border-bottom: 2px double {{ colors.gray_light }};
  1339.     }
  1340.     body.list table tbody tr {
  1341.         border: 0;
  1342.         display: table-row;
  1343.         margin-bottom: 0;
  1344.     }
  1345.     body.list table tbody td {
  1346.         border-bottom: 0;
  1347.         border-top: 1px solid {{ colors.table_row_border }};
  1348.         display: table-cell;
  1349.     }
  1350.     body.list table tbody td:last-child {
  1351.         white-space: nowrap;
  1352.         width: 1%;
  1353.     }
  1354.     table td:before {
  1355.         content: none;
  1356.         float: none;
  1357.     }
  1358.     body.list table tbody td.sorted {
  1359.         background: {{ colors.gray_lighter }};
  1360.         border-color: {{ colors.table_row_border }};
  1361.     }
  1362.     body.list .table tbody tr:hover td {
  1363.         background: {{ colors.gray_lighter }};
  1364.     }
  1365.     body.list table tbody td.actions a {
  1366.         margin-left: 0;
  1367.         margin-right: 10px;
  1368.     }
  1369.     body.list table td { text-align: left; }
  1370.     body.list table .text-center { text-align: center; }
  1371.     body.list table .text-left   { text-align: left; }
  1372.     body.list table .text-right  { text-align: right; }
  1374.     .field-date select + select,
  1375.     .field-time select + select,
  1376.     .field-datetime select + select {
  1377.         margin-left: 2px;
  1378.     }
  1380.     body.error .error-description {
  1381.         max-width: 550px;
  1382.     }
  1384.     .pagination > li > a,
  1385.     .pagination > li > span {
  1386.         padding: 6px 12px;
  1387.     }
  1389.     .form-inline .form-control {
  1390.         margin-bottom: 0;
  1391.     }
  1393.     body.new .form-horizontal #form-actions-row {
  1394.         margin-left: 16.66666667%;
  1395.     }
  1397.     body.edit .form-horizontal #form-actions-row {
  1398.         margin-left: 16.66666667%;
  1399.     }
  1401.     {# Field: checkbox
  1402.        ------------------------------------------------------------------------- #}
  1403.     .form-vertical .field-checkbox label {
  1404.         padding-top: 23px;
  1405.     }
  1406.     .form-vertical .field-group .field-checkbox label {
  1407.         padding-top: 0;
  1408.     }
  1409. }
  1410. {% endautoescape %}