/* gruvbox dark for TimeTagger's HTML layer (dialogs, menus, tooltips).
   Injected after app.css by nginx (see nginx-gruvbox.conf). The canvas colors are
   rewritten in front.js by the same nginx snippet. Palette: https://github.com/morhetz/gruvbox */
:root {
  --gb-bg0h: #1d2021; --gb-bg0: #282828; --gb-bg1: #3c3836; --gb-bg2: #504945; --gb-bg3: #665c54;
  --gb-fg0: #fbf1c7; --gb-fg1: #ebdbb2; --gb-fg2: #d5c4a1; --gb-fg4: #a89984; --gb-gray: #928374;
  --gb-yellow: #fabd2f; --gb-red: #fb4934; --gb-blue: #83a598; --gb-aqua: #8ec07c;
}
body.darkmode { background: var(--gb-bg0); color: var(--gb-fg1); }
body.darkmode #canvas { background: var(--gb-bg0h); }

/* popup menu */
body.darkmode .dialog.verticalmenu { background: var(--gb-bg1); }
body.darkmode .verticalmenu a, body.darkmode .dialog.verticalmenu .loggedinas,
body.darkmode .dialog.verticalmenu .divider { color: var(--gb-fg1); }
body.darkmode .dialog.verticalmenu .divider { border-top-color: var(--gb-bg3); }
body.darkmode .dialog.verticalmenu .loggedinas { color: var(--gb-fg4); }
body.darkmode .verticalmenu a:hover, body.darkmode .verticalmenu a.fas { background: var(--gb-bg2); }
body.darkmode span.keyhint { color: var(--gb-fg4); border-color: var(--gb-bg3); }
body.darkmode .verticalmenu .notification-dot { background: var(--gb-red); }

/* tooltip */
body.darkmode .tooltipdiv { background: var(--gb-bg2); color: var(--gb-fg1); border-color: var(--gb-bg0h); }

/* dialogs */
body.darkmode .dialog { background: var(--gb-bg1); color: var(--gb-fg1); border-color: var(--gb-bg0h); outline-color: var(--gb-bg3); }
body.darkmode .dialog h1 { background: var(--gb-bg0h); border-color: var(--gb-bg0h); color: var(--gb-fg1); }
body.darkmode .dialog h1 > i.fas, body.darkmode .dialog h1 button { color: var(--gb-fg2); border-color: var(--gb-bg3); }
body.darkmode .dialog h1 button:hover { background: var(--gb-bg2); }
body.darkmode .dialog h1 button:disabled { color: var(--gb-bg3); }
body.darkmode .dialog h2 { color: var(--gb-fg2); }
body.darkmode .dialog a { color: var(--gb-blue); }
body.darkmode .dialog input[type=text], body.darkmode .dialog input[type=date], body.darkmode .dialog input[type=time],
body.darkmode .dialog input[type=number], body.darkmode .dialog textarea, body.darkmode .dialog select {
  background: var(--gb-bg0); color: var(--gb-fg1); border-color: var(--gb-bg3);
}
body.darkmode .dialog input:focus { box-shadow: 0 0 4px var(--gb-yellow); }
body.darkmode .dialog button.actionbutton { background: var(--gb-bg2); color: var(--gb-fg1); box-shadow: 0 2px 2px rgba(0,0,0,.5); }
body.darkmode .dialog button.actionbutton.submit { background: var(--gb-yellow); color: var(--gb-bg0h); }
body.darkmode .dialog button.actionbutton.submit:disabled { color: var(--gb-bg3); background: var(--gb-bg2); }
body.darkmode .dialog table th { background-color: var(--gb-bg3); color: var(--gb-fg0); }
body.darkmode .dialog table tr { background-color: var(--gb-bg1); }
body.darkmode .dialog table tr:nth-child(even) { background-color: var(--gb-bg2); }
body.darkmode .dialog table tr.blank_row { background-color: initial; }
body.darkmode ::selection { background: var(--gb-yellow); color: var(--gb-bg0h); }