mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-16 18:31:54 +02:00
Updated flavor colors
Code, button and certain other elements have been updated so that they look better on a larger variety of screen types.
This commit is contained in:
Angelos Chalaris
parent
f8d2364f8d
commit
4495021488
24
dist/mini-default.css
vendored
24
dist/mini-default.css
vendored
@ -148,14 +148,14 @@ code, kbd, pre, samp {
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
border-left: 4px solid #1565c0;
|
||||
@ -831,7 +831,7 @@ button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.button, label.button, .button,
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: rgba(208, 208, 208, 0.75);
|
||||
background: rgba(220, 220, 220, 0.75);
|
||||
color: #212121;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
@ -847,7 +847,7 @@ a.button:hover,
|
||||
a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
|
||||
background: #d0d0d0;
|
||||
background: gainsboro;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -1258,7 +1258,7 @@ table thead th {
|
||||
}
|
||||
|
||||
table th {
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
table th:first-child, table td:first-child {
|
||||
@ -1589,13 +1589,13 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
height: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
border: 1px solid #bdbdbd;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.tabs > label:hover, .tabs > label:focus {
|
||||
background: rgba(224, 224, 224, 0.8);
|
||||
background: rgba(230, 230, 230, 0.8);
|
||||
}
|
||||
|
||||
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
|
||||
@ -1992,7 +1992,7 @@ ul.breadcrumbs li {
|
||||
flex-basis: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
height: 2rem;
|
||||
line-height: 2rem;
|
||||
margin-right: 1.125rem;
|
||||
@ -2004,7 +2004,7 @@ ul.breadcrumbs li:before, ul.breadcrumbs li:after {
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 0 solid #e0e0e0;
|
||||
border: 0 solid #e6e6e6;
|
||||
border-width: 1rem 1rem;
|
||||
}
|
||||
|
||||
@ -2016,7 +2016,7 @@ ul.breadcrumbs li:before {
|
||||
ul.breadcrumbs li:after {
|
||||
left: 100%;
|
||||
border-color: transparent;
|
||||
border-left-color: #e0e0e0;
|
||||
border-left-color: #e6e6e6;
|
||||
}
|
||||
|
||||
ul.breadcrumbs li:first-child:before {
|
||||
@ -2039,14 +2039,14 @@ ul.breadcrumbs li:last-child:after {
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
border-radius: 2rem;
|
||||
background: rgba(224, 224, 224, 0);
|
||||
background: rgba(230, 230, 230, 0);
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
.close:before {
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
10
dist/mini-lite.css
vendored
10
dist/mini-lite.css
vendored
@ -147,14 +147,14 @@ code, kbd, pre, samp {
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
@ -799,7 +799,7 @@ button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.button, label.button, .button,
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: rgba(208, 208, 208, 0.75);
|
||||
background: rgba(220, 220, 220, 0.75);
|
||||
color: #212121;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
@ -815,7 +815,7 @@ a.button:hover,
|
||||
a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
|
||||
background: #d0d0d0;
|
||||
background: gainsboro;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -1062,7 +1062,7 @@ table thead th {
|
||||
}
|
||||
|
||||
table th {
|
||||
background: #e0e0e0;
|
||||
background: #e6e6e6;
|
||||
}
|
||||
|
||||
table th:first-child, table td:first-child {
|
||||
|
||||
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1196,3 +1196,4 @@
|
||||
- http://www.flaticon.com/free-icon/wings_262678 (Feather)
|
||||
- http://www.flaticon.com/free-icon/bacteria_191004 (Bacteria)
|
||||
- http://www.flaticon.com/free-icon/meteor_433944 (Meteor)
|
||||
- Updated colors for `<pre>` and `<code>`, along with `<button>` and some other elements to better contrast colors on older and less bright displays. Updated both `mini-default` and `mini-lite` to fix issues with those colors.
|
||||
|
||||
@ -57,7 +57,7 @@ $use-default-code-fonts: true; // Should default font choice (monospace
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
$code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e0e0e0; // Background color for <code>
|
||||
$code-element-back-color: #e6e6e6; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
@ -180,7 +180,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
|
||||
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$button-back-color: #d0d0d0; // Back color for button elements
|
||||
$button-back-color: #dcdcdc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
@ -319,7 +319,7 @@ $table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #e0e0e0; // Background color for <th>
|
||||
$table-head-back-color: #e6e6e6; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$table-body-back-color: #fafafa; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
@ -383,7 +383,7 @@ $card-section-padding1-padding: 0.75rem; // Padding for card section paddin
|
||||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: none; // Box shadow for the tabs' container
|
||||
$tab-label-back-color: #e0e0e0; // Background color for tabs' labels
|
||||
$tab-label-back-color: #e6e6e6; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #eeeeee; // Background color for open tab's label
|
||||
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
|
||||
@ -486,7 +486,7 @@ $spinner-donut-style1-border-thickness: 0.375rem; // Border thickness for donut
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$breadcrumbs-back-color: #e0e0e0; // Background color for breadcrumbs
|
||||
$breadcrumbs-back-color: #e6e6e6; // Background color for breadcrumbs
|
||||
$breadcrumbs-margin: 0.5rem; // Margin for breadcrumbs
|
||||
$breadcrumbs-height: 2rem; // Height of the breadcrumbs
|
||||
$breadcrumbs-separator-width: 0.125rem; // Width of the breadcrumbs' separator
|
||||
@ -495,7 +495,7 @@ $breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-back-color: #e0e0e0; // Background color for the close icon
|
||||
$close-icon-back-color: #e6e6e6; // Background color for the close icon
|
||||
$close-icon-fore-color: #212121; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
|
||||
@ -57,7 +57,7 @@ $blockquote-box-shadow: none; // Box shadow for <blockquote>
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be used for code elements? (`true`/`false`) [6]
|
||||
$code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e0e0e0; // Background color for <code>
|
||||
$code-element-back-color: #e6e6e6; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
@ -169,7 +169,7 @@ $input-disabled-opacity: 0.75; // Opacity for disabled input
|
||||
$input-readonly-back-color: #e5e5e5; // Background color for readonly input
|
||||
$input-readonly-border-color: #c9c9c9; // Border color for readonly input
|
||||
$input-placeholder-fore-color:#616161; // Text color for input placeholder
|
||||
$button-back-color: #d0d0d0; // Back color for button elements
|
||||
$button-back-color: #dcdcdc; // Back color for button elements
|
||||
$button-back-opacity: 0.75; // Background opacity for button elements
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
@ -271,7 +271,7 @@ $table-caption-font-size: 1.5rem; // Font size for <caption>
|
||||
$table-caption-margin: 0.5rem; // Margin for <caption>
|
||||
$table-row-padding: 0.5rem; // Padding for <tr> - both views
|
||||
$table-column-padding: 0.625rem; // Padding for <td> and <th> - desktop view
|
||||
$table-head-back-color: #e0e0e0; // Background color for <th>
|
||||
$table-head-back-color: #e6e6e6; // Background color for <th>
|
||||
$table-head-fore-color: $fore-color; // Tex color for <th>
|
||||
$table-body-back-color: #fafafa; // Background color for <td>
|
||||
$table-body-fore-color: $fore-color; // Text color for <td>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user