Browse Source

add open color css theme by lam

master
Alexandros Theodotou 7 months ago
parent
commit
4dbb381ae4
Signed by: alex GPG Key ID: 022EAE42313D70F3
  1. 5
      themes/css/lam-open-color1/README
  2. BIN
      themes/css/lam-open-color1/screenshot.png
  3. 597
      themes/css/lam-open-color1/theme.css

5
themes/css/lam-open-color1/README

@ -0,0 +1,5 @@
Theme by LAM based on Open Color palette:
https://yeun.github.io/open-color/ (https://web.archive.org/web/20210616060808/https://yeun.github.io/open-color/)
Screenshot by LAM
Screenshot license: CC-BY 4.0

BIN
themes/css/lam-open-color1/screenshot.png

After

Width: 1920  |  Height: 1062  |  Size: 272 KiB

597
themes/css/lam-open-color1/theme.css

@ -0,0 +1,597 @@
/*
* Copyright (C) 2018-2021 Alexandros Theodotou <alex at zrythm dot org>
* Copyright (C) 2021 LAM <matsynth at yahoo dot com>
*
* This file is part of Zrythm
*
* Zrythm is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Zrythm is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/*
* Define theme colors.
*
* These can be fetched with
* gtk_style_context_lookup_color().
*/
@define-color bg_color #212529;
@define-color bg_dark_variant1 #343a40;
@define-color bg_dark_variant2 #212529;
@define-color bg_darker_variant1 #343a40;
@define-color bg_darker_variant2 #212529;
@define-color bg_light_variant1 #212529;
@define-color bg_light_variant2 #495057;
@define-color bg_lighter_variant1 #495057;
@define-color bg_lighter_variant2 #343a40;
@define-color dark_variant1 #000000;
@define-color dark_variant2 #212529;
@define-color light_variant1 #495057;
@define-color light_variant2 #ced4da;
@define-color bright_green #66a80f;
@define-color darkish_green #66a80f;
@define-color dark_orange #fd7e14;
@define-color darker_orange #fd7e14;
@define-color z_yellow #fd7e14;
@define-color bright_orange #fd7e14;
@define-color z_purple #c2255c;
@define-color matcha #099268;
@define-color hover_color alpha (white, 0.1);
@define-color selection_color alpha (white, 0.07);
@define-color light_blueish #3b5bdb;
@define-color light_blueish alpha (#3b5bdb, 0.8);
@define-color prefader_send #c2255c;
@define-color postfader_send #099268;
@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 #c2255c;
@define-color highlight_chord_bg #c2255c;
@define-color highlight_bass_bg @light_blueish;
@define-color highlight_both_bg #e64980;
@define-color highlight_scale_fg #fd7e14;
@define-color highlight_chord_fg @highlight_scale_fg;
@define-color highlight_bass_fg white;
@define-color highlight_both_fg white;
/* 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,
list row: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,
list row: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,
list row,
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: #555555;
}
/* 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: #BBBBBB;
}
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;
}
Loading…
Cancel
Save