PhaserEditor2D-v3/source/editor/plugins/colibri/styles/dark.css

/*

Rules to provide the dark colors

Important:   
    - No layout information should be provided.
    - To layout a control, see controls.css.
    - To layout a workbench UI, see workbench.css

*/

.dark body {
    background: #202020 !important;
    color: #e0e0e0;
}

/* a */

.dark a {
    color: white;
}

/* input */

.dark input,
.dark textarea {
    background: #2e2e2e;
    color: #f0f0f0;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff20;
}

.dark input[type="file"] {
    display: none;
}

.dark input:focus,
.dark textarea:focus {
    background: #2a2a2a;
    border-color: #f59c5c;
    outline-style: none;
}

.dark input:read-only,
.dark textarea:read-only {
    background: rgba(0, 0, 0, 0.05);
}

/* button */

.dark button,
.dark input[type="submit"]

/* , .dark .ToolbarItem */
    {
    background: #5f5f5f;
    border-color: #646464;
    color: #f0f0f0;
    text-shadow: 1px 1px #0e0e0e;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    padding: 5px;
}

.dark button[disabled] {
    color: rgba(0, 0, 0, 0.4);
    text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
}

.dark button:hover,
.dark .ToolbarItem:hover {
    background: #747474;
}

.dark button[disabled]:hover {
    background: #5f5f5f;
}

.dark button:active,
.dark .ToolbarItem.active {
    background: #4f4f4f;
}

.dark .ColorButton canvas {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Tooltip */

.dark .Tooltip {
    background: #151515;
    border-color: rgba(255, 255, 255, 0.5);
    border-radius: 3px;
}

/* TabPane */

.dark .TabPaneContentArea,
.dark .TabPaneLabel.selected {
    background: #343434;
}

.dark .TabPaneContentArea:empty {
    background: transparent !important;
}

.dark .TabPaneLabel.selected {
    text-shadow: 1px 1px #0e0e0e;
}

.dark .TabPaneLabelSection.selected {
    border-bottom-color: inherit;
    color: inherit;
}

.dark .TabPane.activePart .TabPaneLabelSection.selected {
    border-bottom-color: #f59c5c !important;
    color: #f59c5c;
}

/* Part */

.dark .TabPane.activePart .TabPaneLabel.selected {
    box-shadow: inset 0px 2px 0px #f0a050;
}

.dark .TabPane.activePart .TabPaneContentArea,
.dark .TabPane.activePart .TabPaneLabel.selected {
    background: #3f3f3f;
}

.dark .ViewerPart .FilteredViewer {
    background: transparent;
}

/* ViewerPart */

.dark .ViewerPart {
    display: grid;
    grid-template-columns: 2px 1fr 2px;
    grid-template-rows: 0px 1fr 0px;
}

/* Scroll Bar */

.dark {
    /* firefox */
    scrollbar-color: #858585 #4b4b4b;
}

.dark .ScrollBar,
.dark ::-webkit-scrollbar-track {
    /*background: #ffffff08;*/
}

.dark .ScrollHandler,
.dark ::-webkit-scrollbar-thumb {
    background: #606060;
}

.dark .ScrollHandler:hover,
.dark ::-webkit-scrollbar-thumb:hover {
    background: #656565;
}

.dark .ScrollHandler:active,
.dark ::-webkit-scrollbar-thumb:active {
    background: #767676;
}

/* Property Page */

.dark .PropertySectionPane {
    background: rgba(255, 255, 255, 0.05);
}

.dark .PropertyTitleArea {
    color: #b0b0b0;
}

.dark .PropertyTitleArea label,
.dark .PropertySubTitleLabel {
    /* text-shadow: 1px 1px #0e0e0e; */
}

/* Toolbar */

.dark .ToolbarItem {
    text-shadow: 1px 1px #0e0e0e;
    border-color: transparent;
}


.dark .ToolbarItem.ActionSelected {
    background: #3f3f3f;
    border-color: #858585;
}

/* Icon buttons */

.dark .IconButton:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

/* ProgressBar */

.dark .ProgressBar {
    background: #f0a050;
}

/* Dialog */

.dark .darkDialogContainer {
    background: #202020;
}

.dark .Dialog {
    background: #3f3f3f;
}

.dark .Dialog .DialogTitlePane {
    text-shadow: 1px 1px #0e0e0e;
}

/* Menu */

.dark .Menu {
    list-style-type: none;
    background: #525252;
    padding: 0px;
    margin: 0px;
    border-style: solid;
    border-width: 1px;
    border-color: #6f6f6f;
    padding: 1px;
}

.dark .MenuItemSeparator {
    background: rgba(255, 255, 255, 0.1);
}

.dark .MenuItem:hover,
.dark .MenuItemSelected {
    background: #f0a050;
    color: #0e0e0e;
}

.dark .MenuItemDisabled {
    color: rgba(255, 255, 255, 0.5);
}

.dark .MenuItemDisabled:hover {
    color: #3e3e3e;
}