gwt.material.design.themes.dark.css.materialize.dark.css Maven / Gradle / Ivy

Go to download
/**
 * Global
 */
body {
  background-color: #292929;
  color: #ffffff; }

a {
  color: #bb86fc; }

/**
* NavBar
**/
nav .brand-logo,
nav a.button-collapse,
nav a.button-collapse i,
nav ul a,
nav .nav-wrapper i,
nav .nav-wrapper ul li i {
  color: #ffffff !important; }

nav, nav .nav-wrapper {
  background-color: #272727 !important; }

nav .nav-wrapper ul li:hover i {
  background-color: #1e1e1e !important; }

/**
* Side Nav
**/
ul.side-nav.fixed,
ul.side-nav.card,
ul.side-nav.drawer-with-header,
ul.side-nav.push-with-header,
ul.side-nav.mini,
ul.side-nav {
  background-color: #2e2e2e; }

ul.side-nav i,
ul.side-nav li a span {
  color: rgba(255, 255, 255, 0.9); }

ul.side-nav li.active i,
ul.side-nav li:hover i,
ul.side-nav li.active a span,
ul.side-nav li:hover a span {
  color: #bb86fc; }

ul.side-nav li.active,
ul.side-nav li:hover {
  background-color: rgba(187, 134, 252, 0.1); }

.side-nav li a.focus-visible {
  background: #272727; }

/**
 * Badge
 */
span.badge {
  background-color: #bb86fc;
  color: #000000 !important; }

/**
 * Scroll bar
 **/
::-webkit-scrollbar {
  background-color: #1e1e1e !important;
  height: 2px !important;
  width: 8px !important; }

::-webkit-scrollbar-thumb {
  background-color: #464646 !important;
  border-radius: 4px !important; }

::-webkit-scrollbar-track {
  background-color: #2e2e2e !important; }

/**
 * Card
 **/
.card span.secondary-label,
span.secondary-label {
  color: rgba(255, 255, 255, 0.6); }

.card .card-content .card-title i,
.card .card-reveal i {
  color: #ffffff; }

.card .card-reveal {
  background-color: #1e1e1e; }

.card {
  background-color: #1e1e1e;
  color: #ffffff; }

.card span {
  color: #ffffff; }

.card .card-action i,
.card .card-action span {
  color: #bb86fc; }

.card .collection {
  border: none; }

.card .collection .collection-item {
  background-color: #2b2b2b; }

.card .collection .collection-item span {
  color: #ffffff; }

/**
 * Button
 **/
.btn, .btn-large,
.btn-large:hover,
.btn:hover, button:focus {
  background-color: #bb86fc;
  color: #000000; }

button.btn-outlined,
button.btn-outlined:active,
button.btn-outlined:focus,
button.btn-outlined:hover {
  background-color: transparent;
  border: #bb86fc;
  color: #bb86fc; }

button.btn.btn-outlined.disabled {
  color: rgba(187, 134, 252, 0.4) !important; }

.btn-floating.disabled,
.btn-floating:disabled,
.btn-large.disabled,
.btn-large:disabled,
.btn.disabled,
.btn:disabled,
.disabled.btn-large {
  background-color: #bb86fc !important;
  color: rgba(0, 0, 0, 0.7) !important;
  opacity: 0.4; }

.btn-floating.disabled i {
  color: rgba(0, 0, 0, 0.7) !important; }

.btn-flat {
  color: #bb86fc; }

.btn-flat.disabled {
  background-color: transparent !important;
  color: rgba(187, 134, 252, 0.3) !important; }

/**
 * Checkbox
 **/
[type=checkbox].filled-in:checked + label:after {
  border: 2px solid #bb86fc;
  background-color: #bb86fc; }

[type=checkbox].filled-in:checked + label:before {
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000; }

[type=checkbox]:checked + label:before {
  border-right: 2px solid #bb86fc;
  border-bottom: 2px solid #bb86fc; }

[type=checkbox]:indeterminate + label:before {
  border-right: 2px solid #bb86fc; }

/**
 * CheckBox Focusable
 **/
.checkbox.gwt-CheckBox:after {
  background: rgba(255, 255, 255, 0.1); }

/**
 * Chip
 **/
.chip {
  background-color: #2f2f2f;
  color: #fff; }

.chip.focus-visible {
  background-color: #232323;
  color: #ffffff; }

.chip.active {
  background-color: rgba(187, 134, 252, 0.25);
  color: #bb86fc; }

.chip .letter {
  background-color: #424242; }

.chip.outlined,
.chip.outlined:active,
.chip.outlined:focus,
.chip.outlined:hover {
  background-color: transparent;
  border: 1px solid #4c4c4ce9; }

/**
 * Collapsible
 **/
.collapsible {
  border-top: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
  border-left: 1px solid #2f2f2f; }

.collapsible-header {
  background-color: #2f2f2f;
  border-bottom: 1px solid #2f2f2f; }

.collapsible-header a {
  color: #ffffff !important; }

.collapsible-body {
  background-color: #353535;
  border-bottom: 1px solid #2f2f2f; }

/**
 * Collapsible Focusable
 **/
.collapsible-header:hover,
.collapsible-header.focus-visible {
  background-color: #353535; }

/**
 * Collection
 **/
.collection .collection-item,
.collection.with-header .collection-header {
  background-color: #2f2f2f;
  border-bottom: 1px solid #353535; }

.collection {
  border: 1px solid #2f2f2f; }

.collection .collection-item a {
  color: #ffffff !important; }

.collection .collection-item.active {
  background-color: rgba(187, 134, 252, 0.1);
  color: #bb86fc; }

/**
 * Collection Focusable
 **/
/**
 * Date Picker
 **/
.picker__weekday-display {
  background-color: #141414; }

.picker__box {
  background-color: #2e3033;
  border: 1px solid #1e1f22;
  border-top-color: #141414; }

.picker__date-display {
  background-color: #1e1f22; }

.picker__header {
  color: rgba(255, 255, 255, 0.6); }

.picker--focused .picker__day--selected,
.picker--focused .picker__day--selected.picker__day--outfocus,
.picker__day--selected,
.picker__day--selected.picker__day--outfocus,
.picker__day--selected:hover,
.picker__day--selected:hover.picker__day--outfocus,
.picker__day.picker__day--today.picker__day--selected {
  background-color: #bb86fc;
  color: #000; }

.picker__day--infocus:hover:not(.picker__day--selected) {
  color: rgba(187, 134, 252, 0.5); }

.picker__day.picker__day--today {
  color: #bb86fc; }

.picker__nav--next:hover,
.picker__nav--prev:hover {
  background-color: #2e3033; }

.picker__select--year.browser-default {
  background: #2e3033;
  border: 1px solid #4f4f4f; }

.picker__day--infocus {
  color: #fff; }

.picker__table .picker__day--outfocus {
  color: #848484; }

.picker--focused .picker__day--disabled,
.picker__day--disabled,
.picker__day--disabled:hover {
  background: #434549;
  color: #303030 !important;
  cursor: default;
  font-weight: 400;
  border: 1px solid transparent; }

/**
 * Modal Dialog
 **/
.modal,
.modal .modal-footer {
  background-color: #383838; }

/**
 * Dropdown
 **/
.dropdown-content {
  background-color: #2f2f2f; }

.dropdown-content a,
.dropdown-content i,
.dropdown-content span {
  color: #ffffff !important; }

.dropdown-content li.active,
.dropdown-content li.selected,
.dropdown-content li:hover {
  background-color: #353535; }

.separator {
  border-color: #292929 !important; }

.dropdown-content li.active.selected {
  background-color: #1e1e1e; }

/**
 * Footer
 **/
footer.page-footer {
  background-color: #2f2f2f; }

footer.page-footer .footer-copyright {
  background-color: #2f2f2f; }

/**
 * Selectbox
 **/
select {
  background-color: #292929; }

.select-wrapper input.select-dropdown:disabled {
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  color: #fff; }

/**
 * Loader
 **/
.loader-wrapper {
  background-color: rgba(0, 0, 0, 0.701961); }

.spinner-layer {
  border-color: #bb86fc !important; }

/**
 * Media Slider
 **/
.slider .indicators .indicator-item.active {
  background-color: #bb86fc; }

.slider .indicators .indicator-item {
  background-color: #4e4e4e; }

/**
 * Progress
 **/
.progress {
  background-color: rgba(187, 134, 252, 0.3); }

.progress .determinate,
.progress .indeterminate {
  background-color: #bb86fc; }

/**
 * Radio
 **/
[type=checkbox] + label,
[type=radio]:checked + label,
[type=radio]:not(:checked) + label {
  color: rgba(255, 255, 255, 0.87) !important; }

[type=radio].with-gap:checked + label:after,
[type=radio]:checked + label:after {
  border: 2px solid #bb86fc;
  background-color: #bb86fc; }

[type=radio].with-gap:checked + label:before {
  border: 2px solid #bb86fc; }

[type=radio]:disabled + label {
  color: rgba(179, 179, 179, 0.26) !important; }

[type=radio]:disabled:not(:checked) + label:before {
  border-color: rgba(150, 150, 150, 0.26); }

/**
 * Radio Focusable
 **/
.gwt-RadioButton:not(.gwt-RadioButton-disabled).focus-visible label:before,
.gwt-RadioButton:not(.gwt-RadioButton-disabled):hover label:before {
  -webkit-box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1); }

/**
 * Search
 **/
.input-field input[type=search],
.light.input-field.inline-search {
  background-color: #2f2f2f; }

.input-field input[type=search]:focus,
.light.input-field.inline-search input[type=search]:focus {
  background-color: #484848; }

.input-field input[type=search],
.input-field input[type=search]:focus,
.input-field.inline-search input,
.search-result a span {
  color: #ffffff; }

.search-result a.higlighted,
.search-result a:hover {
  background-color: #353535; }

.search-result {
  border-top: none;
  background-color: #2f2f2f; }

.search-result a {
  border-bottom: 1px solid #373737; }

/**
 * Range
 **/
input[type=range] {
  border: none; }

input[type=range]::-webkit-slider-thumb {
  background-color: #bb86fc; }

input[type=range]::-webkit-slider-runnable-track,
input[type=range].focus-visible::-webkit-slider-runnable-track {
  background-color: rgba(187, 134, 252, 0.35); }

input[type=range] + .thumb {
  background-color: #bb86fc; }

input[type=range] + .thumb .value {
  color: #000000 !important; }

.range-field .progress {
  background-color: #bb86fc !important; }

input[type=range]:hover::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 8px rgba(187, 134, 252, 0.16) !important;
  -moz-box-shadow: 0 0 0 8px rgba(187, 134, 252, 0.16) !important;
  box-shadow: 0 0 0 8px rgba(187, 134, 252, 0.16) !important; }

input[type=range].focus-visible::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 12px rgba(187, 134, 252, 0.16) !important;
  -moz-box-shadow: 0 0 0 12px rgba(187, 134, 252, 0.16) !important;
  box-shadow: 0 0 0 12px rgba(187, 134, 252, 0.16) !important; }

/**
 * Switch
 **/
.switch label input[type=checkbox]:checked + .lever {
  background-color: rgba(187, 134, 252, 0.35); }

input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(187, 134, 252, 0.1); }

.switch label input[type=checkbox]:checked + .lever:after {
  background-color: #bb86fc; }

.switch.disabled {
  opacity: 0.4; }

/**
 * Switch Focusable
 **/
.switch.focus-visible input[type=checkbox]:checked:not(:disabled) ~ .lever:after,
.switch:hover input[type=checkbox]:checked:not(:disabled) ~ .lever:after {
  box-shadow: 0 1px 3px 1px rgba(255, 255, 255, 0.4), 0 0 0 15px rgba(187, 134, 252, 0.1); }

.switch.focus-visible input[type=checkbox]:not(:disabled) ~ .lever:after {
  box-shadow: 0 1px 3px 1px rgba(255, 255, 255, 0.4), 0 0 0 15px rgba(255, 255, 255, 0.08); }

/**
 * Tabs
 **/
.tabs {
  background-color: #272727; }

.tabs .tab a {
  color: #bb86fc; }

.tabs .indicator {
  background-color: #bb86fc; }

/**
 * Toast
 **/
.toast {
  background-color: #e4e4e4;
  color: #000000; }

.toast a {
  color: #bb86fc; }

/**
 * Tooltip
 **/
.material-tooltip {
  background-color: #aaaaaa !important;
  color: #212121; }

.material-tooltip .backdrop {
  background-color: #aaaaaa; }

/**
 * Table of Contents
 **/
.table-of-contents a.active {
  border-left: 2px solid #bb86fc !important; }

.table-of-contents a:hover {
  border-left: 1px solid #bb86fc !important; }

.table-of-contents a {
  color: rgba(255, 255, 255, 0.6); }

.table-of-contents a:hover {
  color: #fff; }

/**
 * Input Fields (Global)
 **/
.picker__input.picker__input--active, input:not([type]):focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=search]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=url]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #bb86fc;
  box-shadow: 0 1px 0 0 #bb86fc; }

input:not([type]):focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=email]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=text]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #bb86fc; }

.input-field .prefix {
  color: #000 !important; }

input:not([type]):disabled, input:not([type])[readonly=readonly], input[type=date]:disabled, input[type=date][readonly=readonly], input[type=datetime-local]:disabled, input[type=datetime-local][readonly=readonly], input[type=email]:disabled, input[type=email][readonly=readonly], input[type=number]:disabled, input[type=number][readonly=readonly], input[type=password]:disabled, input[type=password][readonly=readonly], input[type=search]:disabled, input[type=search][readonly=readonly], input[type=tel]:disabled, input[type=tel][readonly=readonly], input[type=text]:disabled, input[type=text][readonly=readonly], input[type=time]:disabled, input[type=time][readonly=readonly], input[type=url]:disabled, input[type=url][readonly=readonly], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly=readonly] {
  color: #fff;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.26); }

.input-field.outlined input, .input-field.outlined input.select-dropdown, .input-field.outlined input.valid, .input-field.outlined textarea {
  border: 1px solid #7b7b7b; }

.input-field.outlined input.picker__input--active, .input-field.outlined input:focus, .input-field.outlined textarea:focus {
  border: 2px solid #bb86fc;
  box-shadow: none; }

.input-field.outlined .select-wrapper + label, .input-field.outlined input:-webkit-autofill + label, .input-field.outlined label.active {
  background-color: #292929; }

input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover, select:-webkit-autofill, select:-webkit-autofill:focus, select:-webkit-autofill:hover, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff; }

.read-only input, .read-only textarea {
  color: #fff !important; }

.input-field.disabled label {
  color: #9e9e9e !important; }

.input-field.outlined input.valid, .input-field.outlined input.valid.picker__input--active, .input-field.outlined input.valid:focus, .input-field.outlined textarea.valid, .input-field.outlined textarea.valid:focus, .input-field.outlined.field-success input.select-dropdown {
  border: 2px solid #4caf50;
  box-shadow: none; }

.input-field.filled input, .input-field.filled textarea {
  background-color: #2f2f2f; }

.input-field.filled input:focus, .input-field.filled textarea:focus {
  background-color: #484848; }

.input-field.aligned-label label, .input-field.aligned-label label.active {
  color: #9e9e9e; }

blockquote {
  border-left: 5px solid #bb86fc !important; }

pre {
  background: #323232 !important; }

/**
 * Autocomplete
 **/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #2f2f2f inset !important;
  transition: background-color 5000s ease-in-out 0s; }

.search-result a.focus-visible {
  background-color: #353535; }

/**
 * Pre
 **/
pre.hljs {
  border: 1px solid #1e1e1e !important;
  background-color: #1e1e1e !important; }

pre.java:before,
pre.xml:before {
  background-color: #2d2d2d !important; }