Блог

кто-нибудь разработал темную тему для Angular ui grid?

Тот, который будет сочетаться с темой «Slate» в bootswatch?

http://bootswatch.com/slate/

Для этого я создал несколько переопределенных CSS. Если у сайта темный фон темы, добавьте класс ‘dark’ в тело, иначе это будет более светлая тема.

Я заменил все шестнадцатеричные цвета цветами rgba (черным или белым), чтобы таблица выглядела красиво с любым цветом фона. Также некоторые улучшения в меню и кнопках. Вы должны либо установить переменную sass $builder-highlight-color на что-то, либо заменить ее любым выбранным цветом, который вы хотите для строк.

Вот переопределенный CSS, который должен быть размещен после исходного ui-grid CSS. Примечание

 .ui-grid-header {border-bottom: none}
.ui-grid-top-panel {background: rgba(0,0,0,0.1)}
.dark .ui-grid-top-panel {background: rgba(255,255,255,0.1)}

.ui-grid-row:nth-child(odd) .ui-grid-cell {background-color: transparent}
.ui-grid-row:nth-child(odd):hover .ui-grid-cell {background-color: rgba(0,0,0,0.03)} 
.dark .ui-grid-row:nth-child(odd):hover .ui-grid-cell {background-color: rgba(255,255,255,0.03)} 

.ui-grid-row:nth-child(even) .ui-grid-cell {background-color: rgba(0,0,0,0.07)}
.dark .ui-grid-row:nth-child(even) .ui-grid-cell {background-color: rgba(255,255,255,0.07)}
.dark .ui-grid-row:nth-child(even):hover .ui-grid-cell {background-color: rgba(255,255,255,0.1)} 

.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {border-right-color: rgba(0,0,0,0.2)}
.dark .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {border-right-color: rgba(255,255,255,0.2)}

.ui-grid-cell {border-color: rgba(0,0,0,0.2)}
.dark .ui-grid-cell {border-color: rgba(255,255,255,0.2)}

.ui-grid-header-cell {border-color: rgba(0,0,0,0.2)}
.dark .ui-grid-header-cell {border-color: rgba(255,255,255,0.2)}

.ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child {border-right-color: rgba(0,0,0,0.2)}
.dark .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child {border-right-color: rgba(255,255,255,0.2)}

.ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {border-bottom-color: rgba(0,0,0,0.2)}
.dark .ui-grid-row .ui-grid-cell.ui-grid-row-header-cell {border-bottom-color: rgba(255,255,255,0.2)}

input[type="text"].ui-grid-filter-input {border-color: rgba(0,0,0,0.2); border-radius: 3px;}
.dark input[type="text"].ui-grid-filter-input {border-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9)}

.dark input[type="text"].ui-grid-filter-input::placeholder {color: rgba(255,255,255,0.35)}

.ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid,
.ui-grid-menu .ui-grid-menu-inner {border: none; padding-bottom: 10px;}
.ui-grid-menu .ui-grid-menu-inner ul li:not(:last-child)>button {border-bottom: none}

.ui-grid-menu-button:hover {border-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.07);}
.dark .ui-grid-menu-button:hover {border-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.07);}

.ui-grid-menu .ui-grid-menu-inner {background: rgb(255,255,255)}
.dark .ui-grid-menu .ui-grid-menu-inner {background: rgb(0,0,0)}


.ui-grid-grid-footer {padding: 5px; background-color: rgba(0,0,0,0.08); border-top: solid 1px rgba(0,0,0,0.2);}
.ui-grid-footer-info {height: auto !important; color: rgba(0,0,0,0.5)}

.dark .ui-grid-grid-footer {background-color: rgba(255,255,255,0.4); border-top: solid 1px rgba(255,255,255,0.7)}
.dark .ui-grid-footer-info {color: rgba(255,255,255,0.5)}

[data-table-responsive] > .grid {
  height: auto !important
}
.grid {min-height: 0px; color: rgba(0,0,0,0.85)}
.dark .grid {color: rgba(255,255,255,0.85)}

.ui-grid-render-container-body,
.ui-grid-render-container {background-color: transparent}




.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
  color: #fff;
  background-color: $builder-highlight-color;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
  outline: 0;
  background-color: $builder-highlight-color;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
  color: #fff;
  background-color: $builder-highlight-color !important;
}

  .ui-grid {
    position: absolute;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .noHide .ui-grid-icon-angle-down {display: none}
  .ui-grid-filter-container {padding: 4px 5px;}


  input[type="text"].ui-grid-filter-input {
    padding: 3px 0 3px 3px;
    font-weight: normal;
  }

  .ui-grid {border: none;}

  .ui-grid-row {cursor: pointer}
  .ui-grid-row:nth-child(odd):hover .ui-grid-cell {background-color: #f2f9ff; cursor: pointer}
  .ui-grid-row:nth-child(even):hover .ui-grid-cell {background-color: #f2f9ff; cursor: pointer}

  .ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
    pointer-events: auto;
  }

  .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid {
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
    max-height: 1000px;
  }

  .ui-grid-menu-button .ui-grid-icon-cancel {opacity: 0.3;}

  .ui-grid-menu-button .ui-grid-icon-ok {color: green;}

  .ui-grid-menu-button .ui-grid-menu .ui-grid-menu-mid li button {
    font-size: 11px;
    padding: 5px 10px;
  }


  .ui-grid-menu-button {
    border-radius: 2px;
    border-color: transparent;
    background-color: transparent;
  }

  .ui-grid-menu-button .ui-grid-icon-container {
    margin-top: 0;
  }

  .ui-grid-menu-close-button {display: none !important}

  [class^="ui-grid-icon"]:before, [class*=" ui-grid-icon"]:before {
    margin-right: 0;
  }

  .ui-grid-menu-button > div {
    padding: 5px 3px 5px 5px;
  }