// SPDX-FileCopyrightText: © 2018-2021 Alexandros Theodotou <alex@zrythm.org>
// SPDX-FileCopyrightText: © 2021 Bastien Vergand
// SPDX-License-Identifier: LicenseRef-ZrythmLicense

/*
 * Define theme colors.
 *
 * These can be fetched with
 * gtk_style_context_lookup_color().
 */
@define-color bg_color #50595e;
@define-color bg_dark_variant1 #242c31;
@define-color bg_dark_variant2 #434c51;
@define-color bg_darker_variant1 #2b3337;
@define-color bg_darker_variant2 #3e464b;
@define-color bg_light_variant1 #50595e;
@define-color bg_light_variant2 #596267;
@define-color bg_lighter_variant1 #5f686d;
@define-color bg_lighter_variant2 #7a8186;
@define-color dark_variant1 #000000;
@define-color dark_variant2 #030202;
@define-color light_variant1 #656464;
@define-color light_variant2 #989797;
@define-color bright_green #1DD169;
@define-color darkish_green #19664c;
@define-color dark_orange #D68A0C;
@define-color darker_orange #D8690B;
@define-color z_yellow #F9CA1B;
@define-color bright_orange #F79616;
@define-color z_purple #9D3955;
@define-color matcha #2eb398;
@define-color hover_color alpha (white, 0.1);
@define-color selection_color alpha (white, 0.07);
@define-color light_blueish alpha (#1aa3ff, 0.8);
@define-color prefader_send #D21E6D;
@define-color postfader_send #901ed2;
@define-color solo_checked @darkish_green;
@define-color solo_active @matcha;
@define-color fader_fill_start @dark_orange;
@define-color fader_fill_end @z_yellow;
@define-color highlight_scale_bg #662266;
@define-color highlight_chord_bg #BB22BB;
@define-color highlight_both_bg #FF22FF;
@define-color highlight_scale_fg #F79616;
@define-color highlight_chord_fg #F79616;
@define-color highlight_both_fg #F79616;
/* see https://coolors.co/ to generate more or use
 * GPick */

window
{
  -GtkWidget-window-dragging: true;
}

/*paned separator {*/
  /*background-color: alpha(white, 0.80);*/
/*}*/

paned > separator {
  min-height: 4px;
}

/*paned separator:hover {*/
  /*background-color: alpha (white, 0.40);*/
/*}*/

/*paned#gpaned-instruments separator {*/
  /*background-color: alpha(white, 0.22);*/
/*}*/

/*#gpaned-instruments separator:hover {*/
  /*background-color: alpha (white, 0.40);*/
/*}*/

browser separator:hover
{
  background-color: @hover_color;
}

browser separator
{
  min-height: 6px;
}

entry:focus
{
  border-color: @bright_orange;
}

spinbutton button:focus
{
  border-left-color: @bright_orange;
}

entry selection
{
  background-color: @z_yellow;
}

treeview.view:hover,
scrollbar,
box.sidebar,
filechooser list
{
  background-color: @bg_light_variant1;
}

/* for editing notebook tab line */
/*notebook > header.top > tabs > tab:hover {*/
  /*box-shadow: inset 0 -2px alpha(#2eb398,0.6), 0 1px alpha(#2eb398,0.6);*/
/*}*/

/*notebook > header.top > tabs > tab:checked {*/
  /*box-shadow: inset 0 -2px #2eb398, 0 1px #2eb398;*/
/*}*/

/*notebook > header.right > tabs > tab:hover {*/
  /*box-shadow: inset 2px 0 alpha(#2eb398,0.6), -1px 0 alpha(#2eb398,0.6);*/
/*}*/

/*notebook > header.right > tabs > tab:checked {*/
  /*box-shadow: inset 2px 0 #2eb398, -1px 0 #2eb398;*/
/*}*/

/*notebook > header.left > tabs > tab:hover {*/
  /*box-shadow: inset -2px 0 alpha(#2eb398,0.6), 1px 0 alpha(#2eb398,0.6);*/
/*}*/

/*notebook > header.left > tabs > tab:checked {*/
  /*box-shadow: inset -2px 0 #2eb398, 1px 0 #2eb398;*/
/*}*/

.header button.toggle:not(:checked)
{
  background-color: @bg_darker_variant1;
}

treeview.view:selected
{
  background-color: @z_purple;
}

/* notebook page background */
notebook stack
{
  background-color: @bg_color;
}

tracklist,
ruler,
piano-roll-labels,
window,
filechooser #pathbarbox,
paned
{
background-color: @bg_dark_variant1;
}

left-dock-edge notebook header,
right-dock-edge notebook header,
bot-dock-edge notebook header,
notebook header,
center-dock-bot-box,
center-dock-bot-box toolbar,
tracklist-header,
top-dock-edge,
top-dock-edge toolbar,
top-bar,
top-bar toolbar,
bot-bar,
bot-bar toolbar,
assistant,
buttonbox,
timeline-selection-info,
.timeline-toolbar,
piano-roll-selection-info,
piano-roll-toolbar,
browser toolbar,
dialog
{
background-color: @bg_dark_variant2;
}

browser toolbar
{
  padding: 0px;
}

.header tabs,
.header header,
.header toolbar,
.header > box,
home-toolbar,
project-toolbar,
view-toolbar,
help-toolbar,
menubar
{
  background-color: @bg_darker_variant2;
}

home-toolbar separator,
project-toolbar separator,
view-toolbar separator,
help-toolbar separator
{
  background-color: grey;
  margin: 4px;
}

.arranger-toolbar separator
{
  background-color: alpha (grey, 0.6);
  margin: 4px;
}

/*piano-roll-label.highlight_scale*/
/*{*/
  /*background-color: alpha (#662266, 0.2);*/
/*}*/

/*piano-roll-label.highlight_chord*/
/*{*/
  /*background-color: alpha (#BB22BB, 0.2);*/
/*}*/

/*piano-roll-label.highlight_both*/
/*{*/
  /*background-color: alpha (#FF22FF, 0.2);*/
/*}*/

/* override button size from theme */
button
{
  min-width: 4px;
  min-height: 4px;
}

button.toggle,
button.popup,
button:not(.flat),
entry
{
  background-color: @bg_light_variant2;
}

button.toggle:hover,
button.popup:hover,
button:hover,
button.flat:hover,
button.text-button:hover,
tooltip.background
{
  background-color: @bg_lighter_variant1;
}

entry selection
{
  color: @bg_lighter_variant1;
}

menu,
popover
{
  background-color: @bg_lighter_variant2;
}

button:not(.record-button):not(.solo-button).toggle:checked,
stackswitcher button:checked,
menuitem:hover
{
  background-color: @dark_orange;
}

button:not(.record-button).toggle:active,
.header button.toggle:active
{
  background-color: @bright_orange;
}

button.toggle.record-button:checked
{
  background-color: #ED2939;
}

button.toggle.solo-button:checked
{
  background-color: @darkish_green;
}

button.toggle.record-button:active
{
  background-color: #FF2400;
}

button.donate-button
{
  border-radius: 8px;
}

button.toggle.solo-button:active
{
  background-color: @matcha;
}

button:not(.toggle):active,
button.flat:not(.toggle):active,
button.text-button:active
{
  background-color: @bright_orange;
}

bot-dock-edge toolbar
{
  background-color: @bg_dark_variant2;
}

arranger-bg,
treeview.view,
timeline-minimap-bg
{
  background-color: @bg_darker_variant1;
}

track-grid:selected,
channel:selected,
region:selected,
chord:selected,
marker:selected,
scale-object:selected,
midi-note:selected
velocity:selected,
automation-point:selected
{
  background-color: @selection_color;
}

channel-slot:selected,
channel-send:selected
{
  background-color: @light_blueish;
}

filechooser button:checked,
filechooser button:active
{
  border-color: @selection_color;
}

track-grid:hover,
region:hover,
chord:hover,
scale-object:hover,
marker:hover,
fader:hover,
channel-slot:hover:not(:selected),
channel-send:hover:not(:selected),
balance-control:hover,
ruler-playhead:hover,
arranger-playhed:hover,
automation-point:hover
{
  background-color: @hover_color;
}

.inspector expander-box,
.inspector two-col-expander-box,
modulator-view two-col-expander-box
{
  margin: 4px;
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
  /* FIXME use predefined colors */
  border-color: #2d363b;
}

/* curve the bottom edges of the fader section
 * in the inspector */
.inspector .fader-controls-expander buttonbox
{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* make mono switch smaller */
.track-input-expander button.toggle
{
  padding-left: 4px;
  padding-right: 4px;
}

.inspector expander-box >button,
.inspector two-col-expander-box>button
{
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

channel expander-box>button
{
  /*border-top-left-radius: 6px;*/
  /*border-top-right-radius: 6px;*/
}

channel expander-box
{
  /*margin: 5px;*/
  border-style: none;
  border-width: 2px;
  border-radius: 8px;
  /* FIXME use predefined colors */
  border-color: #69bcea;
}

channel button.flat
{
  padding-left: 3px;
  padding-right: 3px;
}

.piano_roll_key_box,
.chord_key
{
  border-style: solid;
  border-bottom-width: 1px;
  border-color: alpha (grey, 0.3);
}

/* blend with header box on the right */
.header notebook {
  border-right: 0px;
}

/* make the header box on the right match the
 * style of the notebook */
.header > box {
  border-top: 1px;
  border-bottom: 1px;
  border-right: 1px;
  border-style: solid;
  /* from matcha theme */
  border-color: rgba (0, 0, 0, 0.2);
}
.header > box > box {
  border-top: 1px;
  border-style: solid;
  border-color: #1b1b1b;
}

.header label,
.splash label,
statusbar {
  font-size: 10.5pt;
}

center-dock > paned > paned > paned > separator {
  background-color: alpha (white, 0.08);
}
center-dock > paned > paned > paned > separator:hover {
  background-color: alpha (white, 0.12);
}

.thick-separator
{
  min-height: 2px;
  min-width: 2px;
}

track-lane,
automation-lane
{
  border-style: solid;
  border-top-width: 2px;
  border-color: alpha (grey, 0.3);
}

.section_heading
{
  font-weight: bold;
  font-size: small;
}

.channel_label
{
  font-size: small;
}

.channel_label_smaller
{
  font-size: smaller;
}

.route_target_selector
{
  padding-left: 1px;
  padding-right: 1px;
}

/* statckswitcher in the inspector */
stackswitcher button image
{
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 3px;
  padding-right: 3px;
}

textview {
  font-family: Monospace;
  font-size: 11pt;
}

/* button without padding */
.mini-button
{
  padding: 0px;
}

.small-button
{
  padding: 3px;
}

.left-of-ruler-box button
{
  min-width: 24px;
}

.inspector_label
{
  font-size: small;
}

/* arrow button */
.button-with-menu button
{
  padding: 0;
  border-width: 0;
  min-height: 24px;
}

/* make dock tab height */
left-dock-edge notebook tab,
right-dock-edge notebook tab
{
  min-height: 24px;
}

/*.button-with-menu separator*/
/*{*/
  /*background-color: alpha (grey, 0.6);*/
  /*margin-top: 2px;*/
  /*margin-bottom: 2px;*/
  /*margin-left: 0px;*/
  /*margin-right: 0px;*/
  /*min-height: 24px;*/
/*}*/

/* make snap grid popover buttons small */
popover.snap-grid-popover button.note-type {
  padding: 0px 4px 0px 4px;
}

/* to be used on currently selected part of the UI
 * (e.g., timeline, tracklist, etc.) */
.selected-element {
  border: 2px solid alpha (#ccc, 0.4);
  padding: 1px;
  border-radius: 3px;
}

.selectable-element {
  padding: 3px;
}
