Skip to content

Commit 91c0072

Browse files
HofiOneHofiOne
committed
Tooltip and menu item colors are added to the base _variable.scss
- using white and black predefined color names instead of hex values - updated midnight and aqua skins according to the latest common changes Signed-off-by: Hofi <hofione@gmail.com>
1 parent 030f57e commit 91c0072

File tree

4 files changed

+62
-51
lines changed

4 files changed

+62
-51
lines changed

‎_sass/minimal-mistakes/minimal-mistakes/_navigation.scss

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -479,13 +479,13 @@
479479
}
480480

481481
&:hover {
482-
color: #fff;
482+
color: $menuitem-hovered-color;
483483
border-color: $gray;
484-
background-color: mix(white, #000, 20%);
484+
background-color: $menuitem-hovered-background-color;
485485

486486
&:before,
487487
&:after {
488-
background-color: #fff;
488+
background-color: $menuitem-background-color;
489489
}
490490
}
491491
}
@@ -526,6 +526,7 @@
526526
.nav__list .nav__items {
527527
/* Also could set the identation of the embedded menu items this way */
528528
margin-left: $sidebar-nav-item-left-margin;
529+
padding-left: 0.5em;
529530
font-size: $type-size-4;
530531

531532
/* Style for the top-level ul */
@@ -585,13 +586,13 @@
585586
margin-left: -0.5em;
586587
padding-left: 0.5em;
587588
padding-right: 0.5em;
588-
color: #fff;
589+
color: $menuitem-hovered-color;
589590
border-color: $gray;
590-
background-color: mix(white, #000, 20%);
591+
background-color: $menuitem-hovered-background-color;
591592

592593
&:before,
593594
&:after {
594-
background-color: #fff;
595+
background-color: $menuitem-background-color;
595596
}
596597
}
597598
}
@@ -625,17 +626,6 @@
625626
transform: rotate(0);
626627
}
627628

628-
// un-folded - background
629-
// input:checked + label {
630-
// color: white;
631-
// background-color: mix(white, #000, 20%);
632-
//
633-
// &:before,
634-
// &:after {
635-
// background-color: #fff;
636-
// }
637-
// }
638-
639629
a {
640630
&:not(.nav__sub-title), &:not(.nav__sub-title) {
641631
margin-right: 3em;
@@ -752,11 +742,11 @@
752742
z-index: 99; /* Higher than anything else */
753743
opacity: 0;
754744

755-
color: #c0c0c0;
745+
color: $tooltip-color; // #c0c0c0;
756746
font-size: $type-size-7;
757747
text-align: left;
758-
text-shadow: 1px 1px 2px #111;
759-
background: rgba(51, 51, 51, 0.9);
748+
//text-shadow: 1px 1px 2px $tooltip-text-shadow-color; // #111
749+
background: $tooltip-background-color; // rgba(51, 51, 51, 0.9);
760750

761751
// FIXME: Get rid of the dependency on size of the container
762752
width: 500%;
@@ -785,8 +775,9 @@
785775
padding-right: 15px;
786776

787777
border-radius: 5px;
788-
border: 1px solid rgba(34, 34, 34, 0.9);
789-
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
778+
box-shadow: 0 0 3px $tooltip-box-shadow-color; // rgba(0, 0, 0, 0.5);
779+
-webkit-box-shadow: 0 0 3px $tooltip-box-shadow-color;
780+
//border: 1px solid $tooltip-border-color; // rgba(34, 34, 34, 0.9);
790781

791782
-webkit-transition: all .2s ease-in-out;
792783
-moz-transition: all .2s ease-in-out;
@@ -811,7 +802,7 @@
811802
top: var(--tooltip-arrow-top, -10px);
812803
left: var(--tooltip-arrow-left, 0px);
813804

814-
border-bottom: var(--tooltip-arrow-border-bottom, 10px) solid rgba(51, 51, 51, 0.9);
805+
border-bottom: var(--tooltip-arrow-border-bottom, 10px) solid $tooltip-arrow-background-color; // rgba(51, 51, 51, 0.9);
815806
border-left: var(--tooltip-arrow-border-left, 10px) solid transparent;
816807
border-right: var(--tooltip-arrow-border-right, 10px) solid transparent;
817808
}
@@ -842,7 +833,7 @@
842833
box-shadow: $box-shadow;
843834

844835
.nav__title {
845-
color: #fff;
836+
color: $menuitem-hovered-color;
846837
font-size: $type-size-6;
847838
background: $primary-color;
848839
border: 0px;

‎_sass/minimal-mistakes/minimal-mistakes/_variables.scss

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,16 @@ $h-size-6: 1em !default; // ~16px
5656
========================================================================== */
5757

5858
$gray: #7a8288 !default;
59-
$dark-gray: mix(#000, $gray, 50%) !default;
60-
$darker-gray: mix(#000, $gray, 60%) !default;
61-
$light-gray: mix(#fff, $gray, 50%) !default;
62-
$lighter-gray: mix(#fff, $gray, 90%) !default;
59+
$dark-gray: mix(black, $gray, 50%) !default;
60+
$darker-gray: mix(black, $gray, 60%) !default;
61+
$light-gray: mix(white, $gray, 50%) !default;
62+
$lighter-gray: mix(white, $gray, 90%) !default;
6363

64-
$background-color: #fff !default;
64+
$background-color: white !default;
6565
$text-color: $dark-gray !default;
66-
$muted-text-color: mix(#fff, $text-color, 20%) !default;
67-
$selection-color: #fff !default;
68-
$selection-background-color: #000 !default;
66+
$muted-text-color: mix(white, $text-color, 20%) !default;
67+
$selection-color: white !default;
68+
$selection-background-color: black !default;
6969
$form-background-color: $lighter-gray !default;
7070
$footer-background-color: $lighter-gray !default;
7171
$code-background-color: #fafafa !default;
@@ -78,11 +78,25 @@ $warning-color: #d67f05 !default;
7878
$danger-color: #ee5f5b !default;
7979
$info-color: #3b9cba !default;
8080
$focus-color: $primary-color !default;
81-
$active-color: mix(#fff, $primary-color, 80%) !default;
81+
$active-color: mix(white, $primary-color, 80%) !default;
82+
83+
$menuitem-background-color: $background-color !default;
84+
$menuitem-hovered-background-color: $primary-color !default; // mix($active-color, $gray) !default;
85+
$menuitem-hovered-color: $lighter-gray !default;
86+
87+
$border-color: $lighter-gray !default;
88+
$box-shadow-color: rgba(mix(black, $background-color), 0.5) !default; //rgba(0, 0, 0, 0.125) !default;
89+
90+
$tooltip-background-color: rgba(mix(white, $background-color, 7%), 0.925) !default;
91+
$tooltip-arrow-background-color: $tooltip-background-color !default;
92+
$tooltip-color: mix($gray, $text-color, 50%) !default;
93+
//$tooltip-text-shadow-color: #111 !default;
94+
$tooltip-box-shadow-color: $box-shadow-color !default; // rgba(mix(black, $background-color, 70%), 0.5) !default;
95+
//$tooltip-border-color: $border-color !default; // rgba(mix(black, $background-color, 80%), 0.9) !default;
8296

8397
/* YIQ color contrast */
8498
$yiq-contrasted-dark-default: $dark-gray !default;
85-
$yiq-contrasted-light-default: #fff !default;
99+
$yiq-contrasted-light-default: white !default;
86100
$yiq-contrasted-threshold: 175 !default;
87101
$yiq-debug: false !default;
88102

@@ -113,13 +127,13 @@ $youtube-color: #bb0000 !default;
113127
$xing-color: #006567 !default;
114128

115129
/* links */
116-
$link-color: mix(#000, $info-color, 20%) !default;
117-
$link-color-hover: mix(#000, $link-color, 25%) !default;
118-
$link-color-visited: mix(#fff, $link-color, 15%) !default;
130+
$link-color: mix(black, $info-color, 20%) !default;
131+
$link-color-hover: mix(black, $link-color, 25%) !default;
132+
$link-color-visited: mix(white, $link-color, 15%) !default;
119133
$link-color-selected: $selection-color !default;
120134
$masthead-link-color: $primary-color !default;
121-
$masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
122-
$navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
135+
$masthead-link-color-hover: mix(black, $primary-color, 25%) !default;
136+
$navicon-link-color-hover: mix(white, $primary-color, 75%) !default;
123137

124138
/* notices */
125139
$notice-background-mix: 80% !default;
@@ -171,7 +185,7 @@ $left-sidebar-width-wide: 500px !default;
171185
========================================================================== */
172186

173187
$border-radius: 4px !default;
174-
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
188+
$box-shadow: 0 1px 1px $box-shadow-color !default;
175189
$nav-height: 2em !default;
176190
$nav-toggle-height: 2rem !default;
177191
$navicon-width: 1.5rem !default;

‎_sass/minimal-mistakes/minimal-mistakes/skins/_aqua.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ $code-background-color-dark : $light-gray !default;
1616
$text-color : $dark-gray !default;
1717
$border-color : $lighter-gray !default;
1818

19+
$tooltip-color : mix($gray, $text-color, 50%) !default;
20+
$tooltip-background-color : rgba(mix($light-gray, $background-color, 7%), 0.925) !default;
21+
$tooltip-arrow-background-color : rgba(mix($tooltip-background-color, $tooltip-color, 90%), 0.925) !default;
22+
1923
$primary-color : $gray !default;
2024
$success-color : #27ae60 !default;
2125
$warning-color : #e67e22 !default;
@@ -30,5 +34,5 @@ $masthead-link-color : $primary-color !default;
3034
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
3135

3236
/* notices */
33-
$notice-background-mix: 90% !default;
34-
$code-notice-background-mix: 95% !default;
37+
$notice-background-mix : 90% !default;
38+
$code-notice-background-mix : 95% !default;

‎_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,20 @@ $text-color: #f0e7d5 !default;
88
$selection-color: mix($text-color, $background-color, 20%) !default;
99
$selection-background-color: mix($text-color, $background-color, 80%) !default;
1010
$primary-color: #e8ba00 !default;
11-
$border-color: mix(#fff, $background-color, 20%) !default;
11+
$border-color: mix(white, $background-color, 20%) !default;
1212
$code-background-color: #1e1e1e !default;
13-
$code-background-color-dark: mix(#000, $code-background-color, 25%) !default;
14-
$form-background-color: mix(#000, $background-color, 15%) !default;
15-
$footer-background-color: mix(#000, $background-color, 30%) !default;
13+
$code-background-color-dark: mix(black, $code-background-color, 25%) !default;
14+
$form-background-color: mix(black, $background-color, 15%) !default;
15+
$footer-background-color: mix(black, $background-color, 30%) !default;
16+
1617
$link-color: $primary-color !default;
17-
$link-color-visited: mix(#fff, $link-color, 40%) !default;
18-
$link-color-hover: mix(#fff, $link-color, 60%) !default;
18+
$link-color-visited: mix(white, $link-color, 40%) !default;
19+
$link-color-hover: mix(white, $link-color, 60%) !default;
1920
$link-color-selected: $selection-color !default;
21+
2022
$masthead-link-color: $text-color !default;
21-
$masthead-link-color-hover: mix(#000, $text-color, 20%) !default;
22-
$navicon-link-color-hover: mix(#000, $background-color, 30%) !default;
23+
$masthead-link-color-hover: mix(black, $text-color, 20%) !default;
24+
$navicon-link-color-hover: mix(black, $background-color, 30%) !default;
2325

2426
/* sunrise syntax highlighting (base16) */
2527
$base00: $code-background-color !default;
@@ -29,7 +31,7 @@ $base03: #969896 !default;
2931
$base04: #888 !default;
3032
$base05: #d0d0d0 !default;
3133
$base06: #e0e0e0 !default;
32-
$base07: #ffffff !default;
34+
$base07: white !default;
3335
$base08: #ac4142 !default;
3436
$base09: #90a959 !default;
3537
$base0a: #f0c674 !default;

0 commit comments

Comments
 (0)