Skip to content

Instantly share code, notes, and snippets.

@pellaeon

pellaeon/user.css

Forked from bef/user.css
Last active September 7, 2024 11:35
Show Gist options
  • Save pellaeon/4672e9c1748355c7ea3c15796fea1443 to your computer and use it in GitHub Desktop.
Save pellaeon/4672e9c1748355c7ea3c15796fea1443 to your computer and use it in GitHub Desktop.
Download ZIP
darktable-theme
Raw
user.css
/* custom darktable theme on top of darktable-elegant-darker
created by BeF - 05/2024
see https://gist.github.com/bef/562f282d7157a7ef47b99dc91693fb5a
modified by pellaeon - 09/2024
*/
/* custom colors */
@define-color checked #3ea0d7;
@define-color visible-border @grey_60;
@define-color panel_bg @grey_05;
@define-color picture_bg @grey_05;
@define-color star-color #f2d12a;
/* darktable colors */
@define-color fg_color @grey_80;
@define-color plugin_label_color @fg_color;
@define-color plugin_bg_color @grey_20;
@define-color lighttable_bg_color @bg_color;
@define-color lighttable_preview_bg_color @bg_color;
@define-color darkroom_bg_color @picture_bg;
@define-color darkroom_preview_bg_color @picture_bg;
@define-color thumbnail_bg_color @picture_bg;
@define-color thumbnail_selected_bg_color @grey_25;
@define-color thumbnail_font_color @grey_75;
@define-color timeline_bg_color transparent;
@define-color timeline_fg_color @grey_40;
@define-color timeline_text_bg_color @grey_20;
@define-color timeline_text_fg_color @grey_80;
/* font */
.dt_plugin_ui,
.dt_bauhaus,
.dt_bauhaus_popup,
*,
combobox,
combobox *,
togglebutton,
togglebutton *,
notebook,
notebook *,
notebook tab,
notebook tab *,
table,
table *,
row,
row *,
frame,
frame *,
filechooser,
filechooser *,
filechooserdialog,
filechooserdialog *,
alignment,
entry,
entry *,
textview,
textview *,
dialog,
dialog *,
colorswatch,
colorswatch *,
stack,
stack *,
scrollbar,
scrollbar *,
scale,
scale *,
button,
button *,
treeview,
treeview *,
menu,
menu *,
separator,
eventbox,
eventbox *,
box,
box *,
button,
checkbutton check,
entry,
textview,
#non-flat,
#iop-panel-label,
#lib-panel-label,
#snapshot-button entry
{ font-family: "Ubuntu", sans-serif; }
/* header toolbar */
#header-toolbar {
padding: 0.9em 0.28em;
background-color: @panel_bg;
border-radius: 0.56em 0.56em 0 0;
}
#header-toolbar .dt_module_btn
{
margin-left: 0.35em;
margin-right: 0.35em;
}
#filter-colors-box .dt_module_btn
{
padding: 2px 0;
margin: 0;
}
/* top bar + view buttons */
#view-label,
#view-dropdown
{
font-size: 1.5em;//text: lighttable, darktable, other
border-radius: 0.14em;
color: @disabled_fg_color;
}
menuitem label,
#view-dropdown,
#view-dropdown menuitem,
#top-hinter widget > #view-label
{
padding: 0.07em 0.4em;
margin: 0.2em 0em;
}
#top-hinter > box:nth-child(1) {
opacity: 0.5;
padding: 0em;
}
/* left/right toolbar + modules */
#right, #left {
background-color: @panel_bg;
}
#module-header {
margin: 0.25em 0.1em 0 0.1em;
padding: 0.6em 0.4em;
background-color: @plugin_bg_color;
border-radius: 0.42em 0.42em 0 0;
}
revealer .dt_plugin_ui {
margin: 0 0.1em 0 0.1em;
border-radius: 0 0 0.42em 0.42em;
}
#right #module-header .dt_module_btn:nth-child(1):checked,
#right #basics-header-box .dt_module_btn:nth-child(1):checked {
background-color: @checked;
}
#basics-box-labels {
background-color: @panel_bg;
margin: 0.25em 0.1em 0 0.1em;
}
#basics-module-hbox {
background-color: @plugin_bg_color;
border-radius: 0 0 0.42em 0.42em;
margin: 0 0 0.25em 0;
}
#basics-header-box {
background-color: @plugin_bg_color;
}
#basics-module-hbox > box {
padding: 0 0.7em;
}
/* modules tabs */
#modules-tabs {
margin: 0.25em 0.1em 0.05em 0.1em;
background-color: @panel_bg;
}
#modules-tabs .dt_module_btn {
background-color: @button_bg;
border-radius: 0.42em 0.42em 0 0;
margin: 0.1em 0.1em 0 0.1em;
}
#modules-tabs .dt_module_btn:checked,
#modules-tabs .dt_module_btn:hover {
background-color: @button_hover_bg;
}
#right .search {
margin: 0.28em 0.1em 0em 0.1em;
}
/* thumbnails */
#thumb-back {
border: 0.1em solid @bg_color;
}
#thumb-main:selected #thumb-back,
#thumb-main:active #thumb-back {
border: 0.1em solid @visible-border;
}
#thumb-main:hover #thumb-back {
background-color: inherit;
border: 0.1em dashed @visible-border;
}
.dt_overlays_hover #thumb-main:hover .dt_thumb_btn,
.dt_overlays_hover #thumb-main:hover .dt_thumb_btn,
.dt_overlays_hover_extended #thumb-main:hover .dt_thumb_btn,
.dt_overlays_always #thumb-main:hover .dt_thumb_btn:active,
.dt_overlays_always #thumb-main:selected .dt_thumb_btn:active,
.dt_overlays_always_extended #thumb-main:hover .dt_thumb_btn:active,
.dt_overlays_always_extended #thumb-main:selected .dt_thumb_btn:active,
.dt_overlays_mixed #thumb-main:hover .dt_thumb_btn:active,
.dt_overlays_mixed #thumb-main:selected .dt_thumb_btn:active,
.dt_overlays_hover_block #thumb-image:hover .dt_thumb_btn:active,
.dt_overlays_hover #thumb-main:hover #thumb-star:active,
.dt_overlays_hover_extended #thumb-main:hover #thumb-star:active,
.dt_overlays_always #thumb-star:active,
.dt_overlays_always_extended #thumb-star:active,
.dt_overlays_mixed #thumb-star:active,
.dt_overlays_hover_block #thumb-image:hover #thumb-star:active
{
color: @star-color;
}
.dt_overlays_hover_extended #thumb-main:hover #thumb-bottom,
.dt_overlays_mixed #thumb-main:hover #thumb-bottom,
.dt_overlays_hover #thumb-main:hover #thumb-bottom
{
background-image: linear-gradient(rgba(30, 30, 30, 0.7) 0%, rgba(30, 30, 30, 0.7) 90%, rgba(30, 30, 30, 0) 100%);
}
.dt_overlays_hover_block #thumb-image:hover #thumb-bottom
{
background-image: none;
background-color: rgba(30, 30, 30, 0.8);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment