Dave Jarvis' Repositories

git clone https://repo.autonoma.ca/repo/keenwrite.git
keenwrite / Commits / 190cf66

Add dark styles

AuthorDaveJarvis <email>
Date2021-01-05 19:03:15 GMT-0800
Commit190cf665234273bd784b307c61d9be87e8b3e3e3
Parenta582d94
Delta675 lines added, 0 lines removed, 675-line increase
src/main/resources/styles/dark/charcoal.css
+.root {
+ -fx-accent: #1e74c6;
+ -fx-focus-color: -fx-accent;
+ -fx-base: #373e43;
+ -fx-control-inner-background: derive(-fx-base, 35%);
+ -fx-control-inner-background-alt: -fx-control-inner-background ;
+}
+
+.label{
+ -fx-text-fill: lightgray;
+}
+
+.text-field {
+ -fx-prompt-text-fill: gray;
+}
+
+.titulo{
+ -fx-font-weight: bold;
+ -fx-font-size: 18px;
+}
+
+.button{
+ -fx-focus-traversable: false;
+}
+
+.button:hover{
+ -fx-text-fill: white;
+}
+
+.separator *.line {
+ -fx-background-color: #3C3C3C;
+ -fx-border-style: solid;
+ -fx-border-width: 1px;
+}
+
+.scroll-bar{
+ -fx-background-color: derive(-fx-base,45%)
+}
+
+.button:default {
+ -fx-base: -fx-accent ;
+}
+
+.table-view{
+ /*-fx-background-color: derive(-fx-base, 10%);*/
+ -fx-selection-bar-non-focused: derive(-fx-base, 50%);
+}
+
+.table-view .column-header .label{
+ -fx-alignment: CENTER_LEFT;
+ -fx-font-weight: none;
+}
+
+.list-cell:even,
+.list-cell:odd,
+.table-row-cell:even,
+.table-row-cell:odd{
+ -fx-control-inner-background: derive(-fx-base, 15%);
+}
+
+.list-cell:empty,
+.table-row-cell:empty {
+ -fx-background-color: transparent;
+}
+
+.list-cell,
+.table-row-cell{
+ -fx-border-color: transparent;
+ -fx-table-cell-border-color:transparent;
+}
+
src/main/resources/styles/dark/modena.css
+/*
+ * This is an adjustment of the original modena.css for a consistent dark theme.
+ * Original modena.css here: https://gist.github.com/maxd/63691840fc372f22f470.
+ */
+
+/* Redefine base colors */
+.root {
+ -fx-base: rgb(50, 50, 50);
+ -fx-background: rgb(50, 50, 50);
+
+ /* make controls (buttons, thumb, etc.) slightly lighter */
+ -fx-color: derive(-fx-base, 10%);
+
+ /* text fields and table rows background */
+ -fx-control-inner-background: rgb(20, 20, 20);
+ /* version of -fx-control-inner-background for alternative rows */
+ -fx-control-inner-background-alt: derive(-fx-control-inner-background, 2.5%);
+
+ /* text colors depending on background's brightness */
+ -fx-light-text-color: rgb(220, 220, 220);
+ -fx-mid-text-color: rgb(100, 100, 100);
+ -fx-dark-text-color: rgb(20, 20, 20);
+
+ /* A bright blue for highlighting/accenting objects. For example: selected
+ * text; selected items in menus, lists, trees, and tables; progress bars */
+ -fx-accent: rgb(0, 80, 100);
+
+ /* color of non-focused yet selected elements */
+ -fx-selection-bar-non-focused: rgb(50, 50, 50);
+}
+
+/* Fix derived prompt color for text fields */
+.text-input {
+ -fx-prompt-text-fill: derive(-fx-control-inner-background, +50%);
+}
+
+/* Keep prompt invisible when focused (above color fix overrides it) */
+.text-input:focused {
+ -fx-prompt-text-fill: transparent;
+}
+
+/* Fix scroll bar buttons arrows colors */
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb(220, 220, 220);
+}
+
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb(240, 240, 240);
+}
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+ -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
src/main/resources/styles/dark/recaf.css
+/* =========================
+ * == JFX Controls ==
+ * =========================
+ */
+.root {
+ -fx-base: rgb(45, 45, 46);
+ -fx-background: rgb(45, 45, 46);
+ /* Brighten controls */
+ -fx-color: derive(-fx-base, -40%);
+ /* Control background */
+ -fx-control-inner-background: rgb(46, 46, 47);
+ /* Alternative control background (rows) */
+ -fx-control-inner-background-alt: derive(-fx-control-inner-background, 2.5%);
+ /* Text colors */
+ -fx-light-text-color: rgb(220, 220, 220);
+ -fx-mid-text-color: rgb(100, 100, 100);
+ -fx-dark-text-color: rgb(20, 20, 20);
+ /* Accent colors */
+ -fx-accent: rgb(51, 51, 52);
+ -fx-focus-color: rgb(51, 51, 52);
+ /* Non-focused-selected elements */
+ -fx-selection-bar-non-focused: rgb(45, 45, 46);
+}
+* {
+ -fx-highlight-fill: rgba(0, 180, 255, 0.4);
+}
+/* Scroll */
+.scroll-bar {
+ -fx-background-color: rgb(61,61,62);
+}
+.scroll-bar .thumb {
+ -fx-background-color: rgb(91,91,92);
+ -fx-background-radius: 0;
+}
+.scroll-bar .thumb:hover,
+.scroll-bar .thumb:pressed {
+ -fx-background-color: rgb(141,141,142);
+}
+.scroll-bar .increment-button .increment-arrow,
+.scroll-bar .decrement-button .decrement-arrow {
+ -fx-background-color: rgb(200,200,200);
+}
+.corner {
+ -fx-background-color: rgb(61,61,62);
+}
+/* Menu */
+.menu-bar {
+ -fx-background-color: rgb(45, 45, 48);
+}
+.menu {
+ -fx-padding: 6 14 6 14;
+ -fx-background-insets: -1;
+}
+.menu-item {
+ -fx-padding: 5 11 5 11;
+ -fx-background-insets: -1;
+}
+.menu:hover {
+ -fx-background-color: rgb(61, 61, 62);
+}
+.context-menu,
+.menu:showing {
+ -fx-background-color: rgb(27, 27, 28);
+ -fx-border-insets: -1;
+ -fx-border-width: 1;
+ -fx-border-color: black;
+}
+.context-menu {
+ -fx-min-width: 80px;
+ -fx-background-insets: -1;
+ -fx-border-insets: -1;
+ -fx-border-width: 1;
+ -fx-border-color: black;
+}
+.context-menu .menu-item:focused {
+ -fx-background-color: rgb(61, 61, 62);
+}
+.context-menu-header {
+ /* TODO: Find a way to disable hover coloring on the menu header */
+ -fx-opacity: 1.0;
+ -fx-background-color: rgb(24, 50, 95);
+}
+.context-menu-header .label {
+ -fx-opacity: 1.0;
+}
+
+/* Tabs */
+.tab-pane {
+ -fx-tab-min-width: 100px;
+}
+.tab-pane *.tab-header-background {
+ -fx-background-color: rgb(29, 29, 31);
+ -fx-border-width: 0 0 1 0;
+ -fx-border-color: black;
+}
+.headers-region {
+ -fx-background-color: rgb(75, 75, 76);
+}
+.tab {
+ -fx-background-color: rgb(36,36,37);
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-background-radius: 0;
+ -fx-padding: 2 2 1 2;
+ -fx-border-insets: 0;
+ -fx-border-width: 1 1 1 1;
+ -fx-border-color: black;
+}
+.tab:selected {
+ -fx-background-color: rgb(45, 45, 46);
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-padding: 2;
+ -fx-border-insets: 0;
+ -fx-border-width: 1 1 0 1;
+ -fx-border-color: black;
+}
+.tab:selected .focus-indicator {
+ -fx-border-color: transparent;
+}
+/* Table */
+.table-view {
+ -fx-selection-bar: rgb(50, 71, 77);
+ -fx-selection-bar-non-focused: rgb(46, 56, 59);
+ -fx-background-color: rgb(36,36,37);
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-background-radius: 0;
+ -fx-padding: -1;
+ -fx-border-width: 0 1 1 1;
+ -fx-border-color: rgb(22, 22, 23);
+}
+.table-view .filler,
+.table-view .show-hide-columns-button,
+.column-overlay {
+ -fx-background-color: transparent;
+}
+.column-header-background {
+ -fx-background-color: rgb(36,36,37);
+ -fx-background-insets: 2 -1 -1 -1;
+ -fx-padding: -1;
+ -fx-border-insets: 0;
+ -fx-border-width: 0 1 0 1;
+ -fx-border-color: rgb(22, 22, 23);
+}
+.column-header {
+ -fx-background-color: rgb(45, 45, 46);
+ -fx-background-insets: -1 -0 -1 0;
+ -fx-padding: 2;
+ -fx-border-insets: 1 -1 1 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(22, 22, 23);
+}
+/* Splitpane */
+.split-pane-divider {
+ -fx-background-color: black;
+ -fx-padding: 0;
+ -fx-background-insets: -5;
+}
+/* Tree */
+.tree-table-view,
+.tree-view {
+ -fx-background-color: rgb(29, 29, 31);
+ -fx-background-insets: 0;
+ -fx-border-width: 0 1 0 0;
+ -fx-border-color: black;
+}
+.tree-table-cell,
+.tree-cell {
+ -fx-background-color: rgb(29, 29, 31);
+}
+.tree-cell:selected {
+ -fx-background-color: rgb(44, 48, 55);
+}
+/* Buttons */
+.box,
+.button,
+.combo-box,
+.slider .thumb {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(63, 63, 70);
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(85, 85, 85);
+}
+.check-box:hover .box,
+.button:hover,
+.combo-box:hover,
+.slider .thumb:hover {
+ -fx-background-color: rgb(80, 80, 85);
+ -fx-border-color: rgb(0, 122, 205);
+}
+.check-box:pressed .box,
+.button:pressed,
+.combo-box:pressed,
+.slider .thumb:pressed {
+ -fx-background-color: rgb(0, 122, 205);
+ -fx-border-color: rgb(0, 162, 245);
+}
+.combo-box:showing {
+ -fx-background-color: rgb(27, 27, 28);
+ -fx-border-width: 1 1 0 1;
+ -fx-border-color: black;
+}
+.combo-box .combo-box-popup .list-cell {
+ -fx-background-color: rgb(27, 27, 28);
+}
+.combo-box .combo-box-popup .list-cell:hover {
+ -fx-background-color: rgb(61, 61, 62);
+}
+.combo-box .combo-box-popup .list-view {
+ -fx-background-color: rgb(27, 27, 28);
+ -fx-border-width: 0 1 1 1;
+ -fx-border-color: black;
+}
+.hyperlink {
+ -fx-text-fill: rgb(30, 132, 250);
+}
+hyperlink:visited {
+ -fx-text-fill: rgb(98, 59, 217);
+}
+/* slider */
+.slider .track {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(29, 29, 31);
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(65, 65, 65);
+}
+.slider .thumb {
+/*
+ -fx-background-insets: 3;
+ -fx-border-insets: 3;
+ */
+ -fx-padding: 5;
+}
+.axis-tick-mark {
+ -fx-stroke: rgb(100, 100, 100);
+}
+/* Text */
+.text-area .content,
+.text-field {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(63, 63, 70);
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(85, 85, 85);
+}
+.text-area {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(63, 63, 70);
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(85, 85, 85);
+}
+.text-area .content {
+ -fx-border-width: 0;
+}
+/* Popup */
+.tooltip {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(40, 40, 42);
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(70, 70, 72);
+}
+/* =========================
+ * == Attach Elements ==
+ * =========================
+ */
+.vm-view {
+ -fx-border-width: 0 0 0 1;
+ -fx-border-color: black;
+}
+.vm-buttons {
+ -fx-padding: 1 0 1 0;
+}
+.vm-buttons .button {
+ -fx-min-width: 140px;
+ -fx-min-height: 48px;
+}
+.vm-icon {
+ -fx-padding: 2 15 2 2;
+}
+/* =========================
+ * == History Elements ==
+ * =========================
+ */
+.hist-view {
+ -fx-border-width: 0 0 0 1;
+ -fx-border-color: black;
+}
+.hist-buttons {
+ -fx-padding: 1 0 1 0;
+}
+.hist-buttons .button {
+ -fx-min-width: 140px;
+ -fx-min-height: 48px;
+}
+.hist-icon {
+ -fx-padding: 2 13 2 2;
+}
+/* =========================
+ * == Other Elements ==
+ * =========================
+ */
+.faint {
+ -fx-text-fill: rgb(134, 134, 135);
+}
+.search-button {
+ -fx-background-image: url('../icons/find-light.png');
+}
+.search-field {
+ -fx-prompt-text-fill: rgb(134, 134, 135);
+ -fx-background-image: url('../icons/find-light.png');
+ -fx-background-color: rgb(39, 39, 41);
+ -fx-border-width: 1;
+ -fx-border-insets: 0 0 -1 -1;
+ -fx-border-color: black;
+}
+.resource-selector {
+ -fx-prompt-text-fill: rgb(134, 134, 135);
+ -fx-background-color: rgb(39, 39, 41);
+ -fx-border-color: rgb(39, 39, 41) black black rgb(39, 39, 41);
+ -fx-border-insets: 0 0 0 -1;
+}
+.resource-selector:hover {
+ -fx-border-width: 1;
+ -fx-border-insets: 0;
+ -fx-padding: 0 0 0 -1;
+}
+.resource-selector:showing {
+ -fx-border-color: black;
+ -fx-border-insets: 0;
+ -fx-border-width: 1 1 0 1;
+ -fx-padding: 0 0 1 -1;
+}
+ /* Javadoc popup */
+.drag-popup-wrapper {
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(40, 40, 42);
+ -fx-background-insets: 0;
+ -fx-border-width: 1;
+ -fx-border-color: rgb(95, 95, 95)
+}
+.drag-popup-wrapper .scroll-pane {
+ -fx-background-insets: 0;
+ -fx-border-width: 0;
+ -fx-padding: 15;
+}
+.drag-popup-header {
+ -fx-padding: 5;
+ -fx-background-radius: 0;
+ -fx-background-color: rgb(63, 63, 70);
+ -fx-background-insets: 0;
+ -fx-border-width: 0 0 1 0;
+ -fx-border-color: rgb(95, 95, 95);
+}
+.update-header {
+ -fx-padding: 5;
+ -fx-background-color: rgb(32, 33, 35);
+ -fx-border-width: 0 0 1 0;
+ -fx-border-color: rgb(95, 95, 95);
+}
+.update-notes * {
+ -fx-fill: rgb(220, 220, 220);
+}
src/main/resources/styles/dark/sakura-solarized.css
+/* $color-text: #dedce5; */
+/* Sakura.css v1.3.1
+ * ================
+ * Minimal css theme.
+ * Project: https://github.com/oxalorg/sakura/
+ */
+/* Body */
+html {
+ font-size: 62.5%;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; }
+
+body {
+ font-size: 1.8rem;
+ line-height: 1.618;
+ max-width: 38em;
+ margin: auto;
+ color: #839496;
+ background-color: #002b36;
+ padding: 13px; }
+
+@media (max-width: 684px) {
+ body {
+ font-size: 1.53rem; } }
+
+@media (max-width: 382px) {
+ body {
+ font-size: 1.35rem; } }
+
+h1, h2, h3, h4, h5, h6 {
+ line-height: 1.1;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+ font-weight: 700;
+ margin-top: 3rem;
+ margin-bottom: 1.5rem;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ word-break: break-word; }
+
+h1 {
+ font-size: 2.35em; }
+
+h2 {
+ font-size: 2.00em; }
+
+h3 {
+ font-size: 1.75em; }
+
+h4 {
+ font-size: 1.5em; }
+
+h5 {
+ font-size: 1.25em; }
+
+h6 {
+ font-size: 1em; }
+
+p {
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+small, sub, sup {
+ font-size: 75%; }
+
+hr {
+ border-color: #2aa198; }
+
+a {
+ text-decoration: none;
+ color: #2aa198; }
+ a:hover {
+ color: #657b83;
+ border-bottom: 2px solid #839496; }
+ a:visited {
+ color: #1f7972; }
+
+ul {
+ padding-left: 1.4em;
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+li {
+ margin-bottom: 0.4em; }
+
+blockquote {
+ margin-left: 0px;
+ margin-right: 0px;
+ padding-left: 1em;
+ padding-top: 0.8em;
+ padding-bottom: 0.8em;
+ padding-right: 0.8em;
+ border-left: 5px solid #2aa198;
+ margin-bottom: 2.5rem;
+ background-color: #073642; }
+
+blockquote p {
+ margin-bottom: 0; }
+
+img, video {
+ height: auto;
+ max-width: 100%;
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+/* Pre and Code */
+pre {
+ background-color: #073642;
+ display: block;
+ padding: 1em;
+ overflow-x: auto;
+ margin-top: 0px;
+ margin-bottom: 2.5rem; }
+
+code {
+ font-size: 0.9em;
+ padding: 0 0.5em;
+ background-color: #073642;
+ white-space: pre-wrap; }
+
+pre > code {
+ padding: 0;
+ background-color: transparent;
+ white-space: pre; }
+
+/* Tables */
+table {
+ text-align: justify;
+ width: 100%;
+ border-collapse: collapse; }
+
+td, th {
+ padding: 0.5em;
+ border-bottom: 1px solid #073642; }
+
+/* Buttons, forms and input */
+input, textarea {
+ border: 1px solid #839496; }
+ input:focus, textarea:focus {
+ border: 1px solid #2aa198; }
+
+textarea {
+ width: 100%; }
+
+.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+ display: inline-block;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ white-space: nowrap;
+ background-color: #2aa198;
+ color: #002b36;
+ border-radius: 1px;
+ border: 1px solid #2aa198;
+ cursor: pointer;
+ box-sizing: border-box; }
+ .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
+ cursor: default;
+ opacity: .5; }
+ .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled {
+ background-color: #657b83;
+ border-color: #657b83;
+ color: #002b36;
+ outline: 0; }
+
+textarea, select, input {
+ color: #839496;
+ padding: 6px 10px;
+ /* The 6px vertically centers text on FF, ignored by Webkit */
+ margin-bottom: 10px;
+ background-color: #073642;
+ border: 1px solid #073642;
+ border-radius: 4px;
+ box-shadow: none;
+ box-sizing: border-box; }
+ textarea:focus, select:focus, input:focus {
+ border: 1px solid #2aa198;
+ outline: 0; }
+
+input[type="checkbox"]:focus {
+ outline: 1px dotted #2aa198; }
+
+label, legend, fieldset {
+ display: block;
+ margin-bottom: .5rem;
+ font-weight: 600; }