hyperblast / beefweb

Web interface plugin for DeaDBeeF and foobar2000 players
MIT License
247 stars 30 forks source link

Dark UI theme #92

Closed hyperblast closed 1 year ago

liquiddandruff commented 3 years ago

image

Got a quick dark theme going.

For those interested, paste to end of %APPDATA%\foobar2000\user-components\foo_beefweb\beefweb.root\bundle.css to try it out.

Done on foo_beefweb v0.4

:root {
    --txt: #b9b9b9;
}

html {
    background: #2b2b2b;
    color: var(--txt);
}

.header-tab {
    background: #212121;
}
.panel, .panel-header {
    background: #212121;
    border: #5f5f5f;
}
.header-tab-active>a {
    color: var(--txt);
}

.dtable-column-header-link:visited {
    color: var(--txt);
}
.dtable-body {
    margin-right: -0.5rem;
}

.dtable-cell, .dtable-cell:visited {
    color: var(--txt);
}
.dtable-row:hover {
    background: #181818;
}
.dtable-column-header-text {
    font-weight: unset;
}

.icon>use {
    fill: #4e4e4e !important; /*#e0e0e0;*/
}

.button-bar {
    background: #212121;
}

.button:hover, .button.active {
    background: #cc8400; /*#444444;*/
}

.progress-bar {
    background: #181818;
    border: none;
    color: var(--txt);
    /*
    font-weight: bold;
    color: #4e4e4e;
    */
}
.progress-bar-gauge {
    background: #cc8400;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track {
  background: #212121; /*#2b2b2b;*/
}
*::-webkit-scrollbar-thumb {
  background-color: #cc8400;
}

input[type='range'] {
    -webkit-appearance: none !important;
    background: #181818;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: #cc8400;;
    height: 10px;
    width: 10px;
}

/* fixes */
.volume-control-panel {
    display: flex;
    align-items: center;
}
Levian commented 2 years ago

Hello. I took the liberty of modifying your version of css.

2022-06-18 16 39 01

bundle 2.zip