From 0b2d1dbc6ec0aebe44a783acaf1f62d1d5e9749c Mon Sep 17 00:00:00 2001 From: mio Date: Wed, 6 Jun 2018 18:26:31 +0000 Subject: [PATCH] Various color edits - Dim body text, more heading emphasis - Replace state colors with variants closer to primary/gray tones - `pre` border color matches pre background - Buttons lighten instead of darken on hover (stronger effect on dark theme) - Replace table colors to more closely match pagination and tabs - Edit form legend and disabled input colors - Breadcrumb active item emphasis - Improve visibility of close button on alerts and modals --- less/hacker.less | 3 + less/hacker/_theme.less | 159 +++++++++++++++++++++++++++++ less/hacker/_variables.less | 197 ++++++++++++++++++++---------------- package-lock.json | 0 4 files changed, 270 insertions(+), 89 deletions(-) create mode 100644 less/hacker/_theme.less mode change 100755 => 100644 package-lock.json diff --git a/less/hacker.less b/less/hacker.less index 69b49fc..b30b6a9 100644 --- a/less/hacker.less +++ b/less/hacker.less @@ -4,3 +4,6 @@ // import custom variables @import "hacker/_variables.less"; + +// import custom theme changes +@import "hacker/_theme.less"; diff --git a/less/hacker/_theme.less b/less/hacker/_theme.less new file mode 100644 index 0000000..fbaade4 --- /dev/null +++ b/less/hacker/_theme.less @@ -0,0 +1,159 @@ +/*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * Forked by mio for tilde.team + */ + + +// Buttons +// Change default mixin to lighten on hover +.btn-styles(@btn-color: #CCCCCC) { + &:hover, + &:focus { + background-color: lighten(@btn-color, 10%); + } + + &:active, + &.active { + background-color: lighten(@btn-color, 10%); + border-color: lighten(@btn-color, 10%); + } +} + +.btn-default { .btn-styles(@btn-default-bg); } +.btn-primary { .btn-styles(@btn-primary-bg); } +.btn-success { .btn-styles(@btn-success-bg); } +.btn-info { .btn-styles(@btn-info-bg); } +.btn-warning { .btn-styles(@btn-warning-bg); } +.btn-danger { .btn-styles(@btn-danger-bg); } + + +// Forms +// Fade disabled input fields +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + color: darken(@hacker-bg, 10%); + opacity: 0.6; +} + +// Default button has colors matching input field +.input-group .btn-default { + border-color: @btn-default-border; + + &:active, + &.active { + color: @btn-default-color; + background: @btn-default-bg; + border-color: @hacker; + } +} + + +// Tables +// Heading color +thead { + color: @table-heading-color; + background: @table-heading-bg; +} + +// Default hover colors +.table-hover { + > tbody > tr:hover { + color: @table-hover-color; + background: @table-bg-hover; + } +} + +// Change default mixin to lighten on hover for states +// Extracted from mixins/table-row.less +.table-row-variant(@state; @background) { + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + } + } + + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td, + &:hover > .@{state}, + &.@{state}:hover > th { + background-color: lighten(@background, 5%); + } + } +} + +// Active color +tr.active { + color: @table-active-color; +} + +// Remove default active hover to match pagination/tabs behaviour +.table-hover > tbody > tr { + > td.active:hover, + > th.active:hover, + &.active:hover > td, + &:hover > .active, + &.active:hover > th { + background-color: @table-bg-active; + } +} + + +// Breadcrumbs +// Bold active item +.breadcrumb > .active { + font-weight: bold; +} + + +// Panels +// Bold headings +.panel-title { + font-weight: bold; +} + + +// Alerts +// Close button mixin applies color to match alert state +.close-styles(@close-style-color: #CCCCCC) { + color: @close-style-color; + opacity: 0.7; + + &:hover, + &:focus { + opacity: 1.0; + } +} + +.alert-success .close { .close-styles(@brand-success); } +.alert-info .close { .close-styles(@brand-info); } +.alert-warning .close { .close-styles(@brand-warning); } +.alert-danger .close { .close-styles(@brand-danger); } + + +// Modals +// Apply close button mixin +.modal-header .close { .close-styles(@close-color); } + + +// List groups +// Highlight active item +.list-group-item.active { + font-weight: bold; + border: 1px solid #222; + + &:hover, + &:focus { + background: #1a1a1a; + border: 1px solid #222; + } +} diff --git a/less/hacker/_variables.less b/less/hacker/_variables.less index ef988bb..7bff83e 100644 --- a/less/hacker/_variables.less +++ b/less/hacker/_variables.less @@ -5,37 +5,39 @@ forked by benharri for tilde.team Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw */ -@color-primary: #195C2B; /* Main Primary color */ -@color-primary-1: #1D4327; -@color-primary-2: #1C532A; -@color-primary-3: #21823B; -@color-primary-4: #2BB04E; // Hacker Colors -@hacker: @color-primary-4; -@hacker-bg: #000000; +@hacker-primary-darker: #1D4327; /* Primary 1 */ +@hacker-primary-dark: #1C532A; /* Primary 2 */ +@hacker-primary: #195C2B; /* Main primary */ +@hacker-primary-light: #21823B; /* Primary 3 */ +@hacker-primary-lighter: #2BB04E; /* Primary 4 */ + +@hacker: @hacker-primary-light; /* Body text */ +@hacker-bg: #000000; /* Body bg */ +@hacker-box-bg: lighten(@hacker-bg, 10%); /* Boxed elem bg */ +@hacker-box-border: lighten(@hacker-bg, 20%); /* Boxed elem border */ +@hacker-headings: @hacker-primary-lighter; /* Headings */ -// Grays -@gray-darker: #2F4F4F; -@gray-dark: #708090; -@gray: #696969; -@gray-light: #808080; -@gray-lighter: #A9A9A9; +// Bootstrap Colors +@gray-darker: #2F4F4F; +@gray-dark: #708090; +@gray: #696969; +@gray-light: #808080; +@gray-lighter: #A9A9A9; - -// Brand Colors -@brand-primary: @hacker; -@brand-success: @color-primary-1; -@brand-warning: @color-primary-2; -@brand-danger: @color-primary-3; -@brand-info: @color-primary-4; +@brand-primary: @hacker-primary; +@brand-success: #25B637; +@brand-warning: #C2BC1F; +@brand-danger: #AF2C2C; +@brand-info: #6793AC; // Scaffolding @body-bg: @hacker-bg; -@text-color: @color-primary-4; -@link-color: @color-primary-3; +@text-color: @hacker; +@link-color: @hacker-primary-lighter; @link-hover-color: lighten(@link-color, 10%); @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @@ -48,7 +50,7 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @border-radius-small: 0; @line-height-large: 1.33; @line-height-small: 1.5; -@component-active-bg: @brand-primary; +@component-active-bg: @hacker-primary; // Typography @@ -70,51 +72,52 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @headings-font-family: @font-family-base; @headings-font-weight: 500; @headings-line-height: 1.2; -@headings-color: inherit; +@headings-color: @hacker-primary-lighter; -// code -@code-color: @color-primary-4; +// Code +@code-color: @hacker-primary-lighter; @code-bg: @gray-darker; -@kbd-color: @color-primary-4; +@kbd-color: @hacker-primary-lighter; @kbd-bg: @gray-darker; -@pre-color: @color-primary-4; +@pre-color: @hacker-primary-lighter; @pre-bg: @gray-darker; +@pre-border-color: #437676; // Buttons @btn-font-weight: normal; -@btn-default-color: @hacker; -@btn-default-bg: lighten(@hacker-bg, 10%); -@btn-default-border: #000000; +@btn-default-color: @hacker-primary-lighter; +@btn-default-bg: darken(@hacker-primary-darker, 5%); +@btn-default-border: #444444; @btn-primary-color: @hacker-bg; -@btn-primary-bg: @brand-primary; -@btn-primary-border: @btn-default-border; +@btn-primary-bg: @hacker-primary-light; +@btn-primary-border: darken(@btn-primary-bg, 10%); @btn-success-color: @hacker-bg; @btn-success-bg: @brand-success; -@btn-success-border: @btn-default-border; +@btn-success-border: darken(@btn-success-bg, 10%); @btn-warning-color: @hacker-bg; @btn-warning-bg: @brand-warning; -@btn-warning-border: @btn-default-border; +@btn-warning-border: darken(@btn-warning-bg, 10%); @btn-danger-color: @hacker-bg; @btn-danger-bg: @brand-danger; -@btn-danger-border: @btn-default-border; +@btn-danger-border: darken(@btn-danger-bg, 10%); @btn-info-color: @hacker-bg; @btn-info-bg: @brand-info; -@btn-info-border: @btn-default-border; +@btn-info-border: darken(@btn-info-bg, 10%); @btn-link-disabled-color: @gray-light; // Well -@well-bg: lighten(@hacker-bg, 10%); -@well-border: darken(@well-bg, 7%); +@well-bg: @hacker-box-bg; +@well-border: @hacker-box-border; // Dropdowns -@dropdown-bg: lighten(@hacker-bg, 10%); -@dropdown-border: rgba(0,0,0,.15); +@dropdown-bg: @hacker-box-bg; +@dropdown-border: @hacker-box-border; @dropdown-divider-bg: #333333; @dropdown-link-active-color: @hacker-bg; @dropdown-link-active-bg: @component-active-bg; @@ -123,13 +126,13 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-disabled-color: @gray-light; @dropdown-header-color: lighten(@hacker-bg, 50%); -@dropdown-caret-color: #000; +@dropdown-caret-color: #000000; // Forms @input-bg: @hacker-bg; -@input-bg-disabled: @gray-lighter; -@input-color: @color-primary-4; +@input-bg-disabled: lighten(@hacker-bg, 20%); +@input-color: @hacker; @input-border: #444444; @input-border-focus: @hacker; @input-border-radius: @border-radius-base; @@ -137,8 +140,8 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); @input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); -@legend-color: @gray-dark; -@legend-border-color: #e5e5e5; +@legend-color: @hacker-headings; +@legend-border-color: @hacker-box-border; @input-group-addon-bg: @hacker-bg; @input-group-addon-border-color: @input-border; @@ -148,11 +151,16 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @table-condensed-cell-padding: 5px; @table-cell-padding: 8px; @table-condensed-cell-padding: 5px; -@table-bg: transparent; -@table-bg-accent: darken(@hacker-bg, 10%); -@table-bg-hover: @gray-darker; -@table-bg-active: @table-bg-hover; -@table-border-color: #444444; +@table-bg: @hacker-box-bg; +@table-bg-accent: lighten(@hacker-bg, 13%); +@table-bg-hover: darken(@gray-darker, 5%); /* Match active */ +@table-bg-active: @hacker-primary-darker; +@table-border-color: @hacker-box-border; +// Custom colors +@table-heading-color: @hacker-primary-lighter; +@table-heading-bg: darken(@hacker-box-bg, 5%); +@table-hover-color: @hacker-primary-lighter; +@table-active-color: @hacker-primary-lighter; // Navbar @@ -169,31 +177,31 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @navbar-default-link-hover-bg: @hacker-bg; @navbar-default-link-active-color: #999999; @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); -@navbar-default-link-disabled-color: #ccc; +@navbar-default-link-disabled-color: #CCCCCC; @navbar-default-link-disabled-bg: transparent; @navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); @navbar-default-brand-hover-bg: transparent; -@navbar-default-toggle-hover-bg: #ddd; -@navbar-default-toggle-icon-bar-bg: #888; -@navbar-default-toggle-border-color: #ddd; +@navbar-default-toggle-hover-bg: #DDDDDD; +@navbar-default-toggle-icon-bar-bg: #888888; +@navbar-default-toggle-border-color: #DDDDDD; // Navs Tabs @nav-link-padding: 10px 15px; -@nav-link-hover-bg: @gray-lighter; -@nav-disabled-link-color: @gray-light; +@nav-link-hover-bg: @gray-darker; +@nav-disabled-link-color: @hacker-primary-light; @nav-disabled-link-hover-color: @gray-light; @nav-tabs-border-color: #444444; @nav-tabs-link-hover-border-color: #444444; -@nav-tabs-active-link-hover-bg: #333333; -@nav-tabs-active-link-hover-color: @gray; +@nav-tabs-active-link-hover-bg: @hacker-primary-lighter; +@nav-tabs-active-link-hover-color: #000000; @nav-tabs-active-link-hover-border-color: #222222; -@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-link-border-color: #DDDDDD; @nav-tabs-justified-active-link-border-color: @body-bg; @nav-pills-border-radius: @border-radius-base; @nav-pills-active-link-hover-bg: @component-active-bg; -@nav-pills-active-link-hover-color: #fff; +@nav-pills-active-link-hover-color: #FFFFFF; // Panel @@ -203,16 +211,16 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @panel-footer-padding: @panel-heading-padding; @panel-border-radius: @border-radius-base; -@panel-inner-border: lighten(@hacker-bg, 10%); -@panel-footer-bg: darken(@hacker-bg, 10%); +@panel-inner-border: @hacker-box-bg; +@panel-footer-bg: @hacker-box-bg; @panel-default-text: @hacker-bg; -@panel-default-border: lighten(@hacker-bg, 10%); +@panel-default-border: @hacker-box-bg; @panel-default-heading-bg: darken(@hacker-bg, 10%); @panel-primary-text: @hacker-bg; -@panel-primary-border: @brand-primary; -@panel-primary-heading-bg: @brand-primary; +@panel-primary-border: @hacker-primary-lighter; +@panel-primary-heading-bg: @hacker-primary-lighter; @panel-success-text: @state-success-text; @panel-success-border: @state-success-border; @@ -235,20 +243,21 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @jumbotron-padding: 30px; @jumbotron-color: inherit; @jumbotron-bg: lighten(@hacker-bg, 10%); +@jumbotron-heading-color: @headings-color; @jumbotron-font-size: ceil((@font-size-base * 1.5)); // Pagination @pagination-bg: @hacker-bg; @pagination-border: #444444; -@pagination-hover-bg: @gray-lighter; +@pagination-hover-bg: @gray-darker; @pagination-hover-color: @link-hover-color; -@pagination-hover-border: #555555; -@pagination-active-bg: @hacker; +@pagination-hover-border: @pagination-border; +@pagination-active-bg: @hacker-primary-lighter; @pagination-active-color: @hacker-bg; -@pagination-active-border: @brand-primary; -@pagination-disabled-color: lighten(@hacker, 10%); -@pagination-disabled-bg: lighten(@hacker-bg, 10%); +@pagination-active-border: @pagination-border; +@pagination-disabled-color: @hacker-primary; +@pagination-disabled-bg: @pagination-bg; @pagination-disabled-border: @pagination-border; @pager-bg: @pagination-bg; @pager-border: @pagination-border; @@ -261,31 +270,31 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw // Form States -@state-warning-text: #f4ff00; +@state-warning-text: @brand-warning; @state-warning-bg: lighten(@hacker-bg, 10%); @state-warning-border: darken(spin(@state-warning-bg, -10), 3%); -@state-danger-text: #dd0000; +@state-danger-text: @brand-danger; @state-danger-bg: lighten(@hacker-bg, 10%); @state-danger-border: darken(spin(@state-danger-bg, -10), 3%); -@state-success-text: #00dd00; +@state-success-text: @brand-success; @state-success-bg: lighten(@hacker-bg, 10%); @state-success-border: darken(spin(@state-success-bg, -10), 5%); -@state-info-text: #7d8cff; +@state-info-text: @brand-info; @state-info-bg: lighten(@hacker-bg, 10%); @state-info-border: darken(spin(@state-info-bg, -10), 7%); // ToolTip @tooltip-max-width: 200px; -@tooltip-color: #fff; -@tooltip-bg: #000; +@tooltip-color: #FFFFFF; +@tooltip-bg: #000000; @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-bg; @tooltip-opacity: .9; // Popover -@popover-bg: lighten(@hacker-bg, 10%); +@popover-bg: @hacker-box-bg; @popover-max-width: 276px; @popover-border-color: rgba(0,0,0,.2); @popover-fallback-border-color: #333333; @@ -294,7 +303,7 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @popover-arrow-color: @popover-bg; @popover-arrow-outer-width: (@popover-arrow-width + 1); @popover-arrow-outer-color: rgba(0,0,0,.25); -@popover-arrow-outer-fallback-color: #999; +@popover-arrow-outer-fallback-color: #999999; // List Group @@ -302,7 +311,7 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @list-group-border: #222222; @list-group-border-radius: @border-radius-base; @list-group-hover-bg: lighten(@hacker-bg, 10%); -@list-group-active-color: @hacker-bg; +@list-group-active-color: @hacker-primary-lighter; @list-group-active-bg: lighten(@hacker-bg, 5%); @list-group-active-border: @list-group-active-bg; @list-group-active-text-color: @hacker-bg; @@ -311,9 +320,9 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw // Modal -@modal-content-bg: lighten(@hacker-bg, 10%); +@modal-content-bg: @hacker-box-bg; @modal-content-border-color: transparent; -@modal-content-fallback-border-color: #999; +@modal-content-fallback-border-color: #999999; @modal-backdrop-bg: @hacker-bg; @modal-backdrop-opacity: .5; @modal-header-border-color: lighten(@hacker-bg, 10%); @@ -325,18 +334,28 @@ Palette URL: http://paletton.com/#uid=12U0u0knnfti5bkladVnSlVo6tw @badge-bg: @hacker-bg; -// Progress -@progress-bg: lighten(@hacker-bg, 10%); +// Progress bars +@progress-bg: @hacker-box-bg; +@progress-bar-color: lighten(@hacker-primary-lighter, 10%); +@progress-bar-bg: @hacker-primary-lighter; +@progress-bar-success-bg: @hacker-primary-darker; +@progress-bar-warning-bg: @hacker-primary-dark; +@progress-bar-danger-bg: @hacker-primary-light; +@progress-bar-info-bg: @hacker-primary-lighter; // Breadcrumb -@breadcrumb-bg: lighten(@hacker-bg, 10%); -@breadcrumb-color: @hacker; -@breadcrumb-active-color: darken(@hacker, 20%); +@breadcrumb-bg: @hacker-box-bg; +@breadcrumb-color: @hacker-primary-light; +@breadcrumb-active-color: lighten(@hacker, 10%); + + +// Close +@close-color: @hacker-primary-light; +@close-text-shadow: none; // Labels @label-color: @hacker-bg; @hr-border: #000000; - diff --git a/package-lock.json b/package-lock.json old mode 100755 new mode 100644