angularjs - Angular UI Grid - 将它们变暗

Question

有没有人为 Angular ui 网格开发了一个深色主题？

哪一个会与 bootswatch 中的“Slate”主题搭配使用？

http://bootswatch.com/slate/

Answer 1

我为此构建了一些覆盖 CSS。如果站点有深色主题背景，请将“深色”类添加到正文中，否则它将是较浅的主题。

我用 rgba 颜色（黑色或白色）替换了任何十六进制颜色，因此表格在任何背景颜色下都看起来不错。还对菜单和按钮进行了一些改进。您应该将 sass 变量 $builder-highlight-color 设置为某个值，或者将其替换为您想要为行选择的任何颜色。

这是应该放在原始 ui-grid CSS 之后的覆盖 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;
  }