mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Theme: Updated font to Inter, updates typography, a start of moving legacy & global styles from sass to emotion (#32988)
* Testing inter font * new fonts and global styles * Added Typography component and storybook * Moving more global legacy types to emotion global styles * Updated snapshot * mapp bold to 500 * Updates * Fixes and moved html & body styles to emotion * moved helper function down * Updated snapshot * More tweaks * Updates * added internal tag * Updated snapshot
This commit is contained in:
Torkel Ödegaard
GitHub
@@ -101,7 +101,7 @@ $dashboard-bg: #0d0f16;
|
||||
$text-color-strong: #fff;
|
||||
$text-color: rgba(255, 255, 255, 0.77);
|
||||
$text-color-semi-weak: rgba(255, 255, 255, 0.55);
|
||||
$text-color-weak: rgba(255, 255, 255, 0.35);
|
||||
$text-color-weak: rgba(255, 255, 255, 0.55);
|
||||
$text-color-faint: rgba(255, 255, 255, 0.35);
|
||||
$text-color-emphasis: #fff;
|
||||
$text-blue: #33a2e5;
|
||||
@@ -145,7 +145,7 @@ $divider-border-color: $gray-1;
|
||||
|
||||
// Graphite Target Editor
|
||||
$tight-form-func-bg: #22252b;
|
||||
$tight-form-func-highlight-bg: #272a30;
|
||||
$tight-form-func-highlight-bg: rgb(40, 43, 49);
|
||||
|
||||
$modal-backdrop-bg: rgba(255, 255, 255, 0.08);
|
||||
$code-tag-bg: $dark-1;
|
||||
@@ -153,7 +153,7 @@ $code-tag-border: $dark-9;
|
||||
|
||||
// cards
|
||||
$card-background: #22252b;
|
||||
$card-background-hover: #22252b;
|
||||
$card-background-hover: rgb(40, 43, 49);
|
||||
$card-shadow: none;
|
||||
|
||||
// Lists
|
||||
|
||||
@@ -99,8 +99,8 @@ $height-lg: 48;
|
||||
// Typography
|
||||
// -------------------------
|
||||
|
||||
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
$font-family-sans-serif: 'Inter', 'Helvetica Neue', Arial, sans-serif;
|
||||
$font-family-monospace: 'Roboto Mono', monospace;
|
||||
|
||||
$font-size-base: 14px !default;
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ $white: #ffffff;
|
||||
|
||||
$layer0: #F4F5F5;
|
||||
$layer1: #fff;
|
||||
$layer2: #F7F7F8;
|
||||
$layer2: #F4F5F5;
|
||||
|
||||
$divider: rgba(0, 2, 78, 0.07);
|
||||
|
||||
@@ -96,7 +96,7 @@ $dashboard-bg: #F4F5F5;
|
||||
$text-color: rgba(0, 0, 0, 0.75);
|
||||
$text-color-strong: #000;
|
||||
$text-color-semi-weak: rgba(0, 0, 0, 0.60);
|
||||
$text-color-weak: rgba(0, 0, 0, 0.45);
|
||||
$text-color-weak: rgba(0, 0, 0, 0.60);
|
||||
$text-color-faint: rgba(0, 0, 0, 0.45);
|
||||
$text-color-emphasis: #000;
|
||||
$text-blue: #1F62E0;
|
||||
@@ -110,7 +110,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
// Links
|
||||
// -------------------------
|
||||
$link-color: rgba(0, 0, 0, 0.75);
|
||||
$link-color-disabled: rgba(0, 0, 0, 0.45);
|
||||
$link-color-disabled: rgba(0, 0, 0, 0.60);
|
||||
$link-hover-color: #000;
|
||||
$external-link-color: #33a2e5;
|
||||
|
||||
@@ -131,23 +131,23 @@ $panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,
|
||||
$panel-corner: $panel-bg;
|
||||
|
||||
// Page header
|
||||
$page-header-bg: #F7F7F8;
|
||||
$page-header-bg: #F4F5F5;
|
||||
$page-header-shadow: inset 0px -3px 10px $gray-6;
|
||||
$page-header-border-color: #fff;
|
||||
|
||||
$divider-border-color: $gray-2;
|
||||
|
||||
// Graphite Target Editor
|
||||
$tight-form-func-bg: #F7F7F8;
|
||||
$tight-form-func-highlight-bg: #f2f2f3;
|
||||
$tight-form-func-bg: #F4F5F5;
|
||||
$tight-form-func-highlight-bg: #eff0f0;
|
||||
|
||||
$modal-backdrop-bg: #fff;
|
||||
$code-tag-bg: $gray-6;
|
||||
$code-tag-border: $gray-4;
|
||||
|
||||
// cards
|
||||
$card-background: #F7F7F8;
|
||||
$card-background-hover: #F7F7F8;
|
||||
$card-background: #F4F5F5;
|
||||
$card-background-hover: #F4F5F5;
|
||||
$card-shadow: none;
|
||||
|
||||
// Lists
|
||||
@@ -164,7 +164,7 @@ $scrollbarBorder: $gray-7;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$table-bg-accent: #F7F7F8;
|
||||
$table-bg-accent: #F4F5F5;
|
||||
$table-border: rgba(0, 2, 78, 0.20);
|
||||
$table-bg-odd: rgb(249, 249, 249);
|
||||
$table-bg-hover: rgb(242, 242, 242);
|
||||
@@ -212,7 +212,7 @@ $input-box-shadow: none;
|
||||
$input-border-focus: #5794f2;
|
||||
$input-box-shadow-focus: #5794f2;
|
||||
$input-color-placeholder: rgba(0, 0, 0, 0.45);
|
||||
$input-label-bg: #F7F7F8;
|
||||
$input-label-bg: #F4F5F5;
|
||||
$input-color-select-arrow: #7b8087;
|
||||
|
||||
// search
|
||||
@@ -225,7 +225,7 @@ $typeahead-selected-color: $yellow;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: #F7F7F8;
|
||||
$dropdownBackground: #F4F5F5;
|
||||
$dropdownBorder: #fff;
|
||||
$dropdownDividerTop: rgba(0, 2, 78, 0.07);
|
||||
$dropdownDividerBottom: rgba(0, 2, 78, 0.07);
|
||||
@@ -258,7 +258,7 @@ $side-menu-header-color: #e9edf2;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: #F7F7F8;
|
||||
$menu-dropdown-bg: #F4F5F5;
|
||||
$menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
|
||||
$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1);
|
||||
|
||||
@@ -278,16 +278,16 @@ $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// Tooltips and popovers
|
||||
$tooltipBackground: #F7F7F8;
|
||||
$tooltipBackground: #F4F5F5;
|
||||
$tooltipColor: rgba(0, 0, 0, 0.75);
|
||||
$tooltipArrowColor: #F7F7F8;
|
||||
$tooltipArrowColor: #F4F5F5;
|
||||
$tooltipBackgroundError: #E0226E;
|
||||
$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1);
|
||||
|
||||
$popover-bg: #F7F7F8;
|
||||
$popover-bg: #F4F5F5;
|
||||
$popover-color: rgba(0, 0, 0, 0.75);
|
||||
$popover-border-color: rgba(0, 2, 78, 0.20);
|
||||
$popover-header-bg: #F7F7F8;
|
||||
$popover-header-bg: #F4F5F5;
|
||||
$popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1);
|
||||
|
||||
$graph-tooltip-bg: $gray-5;
|
||||
@@ -332,9 +332,9 @@ $diff-label-bg: rgba(0, 0, 0, 0.04);
|
||||
$diff-label-fg: $gray-2;
|
||||
|
||||
$diff-arrow-color: $dark-2;
|
||||
$diff-group-bg: #F7F7F8;
|
||||
$diff-group-bg: #F4F5F5;
|
||||
|
||||
$diff-json-bg: #F7F7F8;
|
||||
$diff-json-bg: #F4F5F5;
|
||||
$diff-json-fg: rgba(0, 0, 0, 0.75);
|
||||
|
||||
$diff-json-added: $blue-shade;
|
||||
|
||||
@@ -3,257 +3,153 @@
|
||||
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url(../fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url(../fonts/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url(../fonts/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+1f00-1fff;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
/* not available
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url(../fonts/roboto/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+0370-03ff;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
*/
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url(../fonts/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'),
|
||||
url(../fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
|
||||
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+1f00-1fff;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0370-03ff;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
|
||||
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||
url(../fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
|
||||
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
|
||||
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
|
||||
unicode-range: U+1f00-1fff;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
|
||||
unicode-range: U+0370-03ff;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
|
||||
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Italic'), local('Roboto-Italic'),
|
||||
url(../fonts/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
|
||||
}
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
|
||||
unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
|
||||
unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* greek-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
|
||||
unicode-range: U+1f00-1fff;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+1F00-1FFF;
|
||||
}
|
||||
/* greek */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
|
||||
unicode-range: U+0370-03ff;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0370-03FF;
|
||||
}
|
||||
/* vietnamese */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
|
||||
unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: italic;
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
|
||||
url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
|
||||
unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
|
||||
font-display: swap;
|
||||
src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
|
||||
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/robotomono/v13/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
|
||||
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/robotomono/v13/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
|
||||
format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
|
||||
U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
@@ -53,34 +53,6 @@ html {
|
||||
// Reset HTML, body, and more
|
||||
//
|
||||
|
||||
html {
|
||||
// Sets a specific default `font-size` for user with `rem` type scales.
|
||||
font-size: $font-size-base;
|
||||
// As a side-effect of setting the @viewport above,
|
||||
// IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
|
||||
// Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
|
||||
// thus making it hard to click on stuff near the right edge of the page.
|
||||
// So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar.
|
||||
// See https://github.com/twbs/bootstrap/issues/18543
|
||||
-ms-overflow-style: scrollbar;
|
||||
// Changes the default tap highlight to be completely transparent in iOS.
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
// Go easy on the eyes and use something other than `#000` for text
|
||||
color: $text-color;
|
||||
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||
background-color: $body-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
@@ -90,6 +62,24 @@ body {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
// This is specified in runtime Emotion GlobalStyles but we need them for the Grafana loading styles
|
||||
html {
|
||||
font-size: $font-size-base;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// This is specified in runtime Emotion GlobalStyles but we need them for the Grafana loading styles
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
color: $text-color;
|
||||
background-color: $body-bg;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
@@ -160,20 +150,6 @@ blockquote {
|
||||
// Links
|
||||
//
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
@include hover-focus {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@include no-focus();
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
@@ -2,148 +2,6 @@
|
||||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
// Body text
|
||||
// -------------------------
|
||||
|
||||
p {
|
||||
margin: 0 0 $line-height-base / 2;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: $line-height-base;
|
||||
font-size: $font-size-base * 1.5;
|
||||
font-weight: 200;
|
||||
line-height: $line-height-base * 1.5;
|
||||
}
|
||||
|
||||
// Emphasis & misc
|
||||
|
||||
// -------------------------
|
||||
|
||||
// Ex: 14px base font * 85% = about 12px
|
||||
small {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: $font-weight-semi-bold;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
.muted {
|
||||
color: $text-muted;
|
||||
}
|
||||
a.muted:hover,
|
||||
a.muted:focus {
|
||||
color: darken($text-muted, 10%);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: $warning-text-color;
|
||||
}
|
||||
a.text-warning:hover,
|
||||
a.text-warning:focus {
|
||||
color: darken($warning-text-color, 10%);
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: $error-text-color;
|
||||
}
|
||||
a.text-error:hover,
|
||||
a.text-error:focus {
|
||||
color: darken($error-text-color, 10%);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: $success-text-color;
|
||||
}
|
||||
a.text-success:hover,
|
||||
a.text-success:focus {
|
||||
color: darken($success-text-color, 10%);
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 0 none !important;
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
cursor: default;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
margin-bottom: $space-sm;
|
||||
font-weight: $font-weight-regular;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: $font-size-h3;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: $font-size-h4;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: $font-size-h5;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: $font-size-h6;
|
||||
}
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
@@ -72,6 +72,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__link {
|
||||
color: $text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-header__tabs {
|
||||
display: none;
|
||||
@include media-breakpoint-up(lg) {
|
||||
@@ -92,74 +97,3 @@
|
||||
border-radius: 5px;
|
||||
counter-reset: flag;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
|
||||
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
padding: 0 7px 0 37px;
|
||||
position: relative;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&:first-child::before {
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background: #333;
|
||||
background: linear-gradient(#333, #000);
|
||||
}
|
||||
|
||||
&.active::after,
|
||||
&:hover::after {
|
||||
background: #333;
|
||||
background: linear-gradient(135deg, #333, #000);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -14px; // half of square's length
|
||||
|
||||
// same dimension as the line-height of .breadcrumb-item
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
transform: scale(0.707) rotate(45deg);
|
||||
// we need to prevent the arrows from getting buried under the next link
|
||||
z-index: 1;
|
||||
|
||||
// background same as links but the gradient will be rotated to compensate with the transform applied
|
||||
background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl);
|
||||
|
||||
// stylish arrow design using box shadow
|
||||
box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
|
||||
|
||||
// 5px - for rounded arrows and
|
||||
// 50px - to prevent hover glitches on the border created using shadows*/
|
||||
border-radius: 0 5px 0 50px;
|
||||
}
|
||||
|
||||
// we dont need an arrow after the last link
|
||||
&:last-child::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.admin-settings-section {
|
||||
color: $variable;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
td.admin-settings-key {
|
||||
|
||||
Reference in New Issue
Block a user