diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 12:26:25 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 12:26:25 +0000 |
commit | a09983ae35713f5a2bbb100981116d31ce99826e (patch) | |
tree | 2ee2af7bd104d57086db360a7e6d8c9d5d43667a /app/assets/stylesheets | |
parent | 18c5ab32b738c0b6ecb4d0df3994000482f34bd8 (diff) | |
download | gitlab-ce-a09983ae35713f5a2bbb100981116d31ce99826e.tar.gz |
Add latest changes from gitlab-org/gitlab@13-2-stable-ee
Diffstat (limited to 'app/assets/stylesheets')
76 files changed, 2202 insertions, 551 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index cc4d13db150..41fb62c28e6 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,30 +11,30 @@ // like a table or typography then make changes in the framework/ directory. // If you need to add unique style that should affect only one page - use pages/ // directory. -@import "@gitlab/at.js/dist/css/jquery.atwho"; -@import "dropzone/dist/basic"; -@import "select2/select2"; +@import '@gitlab/at.js/dist/css/jquery.atwho'; +@import 'dropzone/dist/basic'; +@import 'select2/select2'; // GitLab UI framework -@import "framework"; +@import 'framework'; // Font icons -@import "font-awesome"; +@import 'font-awesome'; // Page specific styles (issues, projects etc): -@import "pages/**/*"; +@import 'pages/**/*'; // Component specific styles, will be moved to gitlab-ui -@import "components/**/*"; +@import 'components/**/*'; // Vendors specific styles -@import "vendors/**/*"; +@import 'vendors/**/*'; // Styles for JS behaviors. -@import "behaviors"; +@import 'behaviors'; // EE-only stylesheets -@import "application_ee"; +@import 'application_ee'; // CSS util classes /** @@ -42,7 +42,12 @@ Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss to see the available utility classes. **/ -@import "utilities"; +@import 'utilities'; // Gitlab UI util classes -@import "@gitlab/ui/src/scss/utilities"; +@import '@gitlab/ui/src/scss/utilities'; + +/* print styles */ +@media print { + @import 'print'; +} diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss index 72196d71969..e55141e15df 100644 --- a/app/assets/stylesheets/application_dark.scss +++ b/app/assets/stylesheets/application_dark.scss @@ -1,3 +1,3 @@ -@import "./themes/dark"; +@import './themes/dark'; -@import "./application"; +@import './application'; diff --git a/app/assets/stylesheets/behaviors.scss b/app/assets/stylesheets/behaviors.scss index e3ca7f6373a..120a139ff3d 100644 --- a/app/assets/stylesheets/behaviors.scss +++ b/app/assets/stylesheets/behaviors.scss @@ -16,6 +16,7 @@ .js-toggler-container { .turn-on { display: block; } .turn-off { display: none; } + &.on { .turn-on { display: none; } .turn-off { display: block; } @@ -23,6 +24,6 @@ } // Hide element if Vue is still working on rendering it fully. -[v-cloak="true"] { +[v-cloak='true'] { display: none !important; } diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index a6d56819140..aac32e7fb2d 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -6,7 +6,7 @@ $brand-info: $blue-500; $brand-warning: $orange-500; $brand-danger: $red-500; -$border-radius-base: 3px !default; +$border-radius-base: $gl-border-radius-base; $modal-body-bg: $white; $input-border: $border-color; @@ -23,7 +23,7 @@ body, // Override default font size used in non-csslab UI // Use rem to keep default font-size at 14px on body so 1rem still // fits 8px grid, but also allow users to change browser font size - font-size: .875rem; + font-size: 0.875rem; } legend { @@ -32,11 +32,12 @@ legend { } button, -html [type="button"], -[type="reset"], -[type="submit"], -[role="button"] { +html [type='button'], +[type='reset'], +[type='submit'], +[role='button'] { // Override bootstrap reboot + /* stylelint-disable-next-line property-no-vendor-prefix */ -webkit-appearance: inherit; cursor: pointer; } @@ -77,7 +78,7 @@ h5, font-size: $gl-font-size; } -input[type="file"] { +input[type='file'] { // Bootstrap 4 file input height is taller by default // which makes them look ugly line-height: 1; @@ -314,8 +315,8 @@ input[type=color].form-control { .toggle-sidebar-button { .collapse-text, - .icon-angle-double-left, - .icon-angle-double-right { + .icon-chevron-double-lg-left, + .icon-chevron-double-lg-right { color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 380b2280490..33f03fb5949 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -10,7 +10,7 @@ } .design-pin { - transition: opacity 0.5s ease; + transition: opacity $gl-transition-duration-medium $general-hover-transition-curve; &.inactive { @include gl-opacity-5; @@ -98,7 +98,7 @@ &::before { content: ''; - border-left: 1px solid $gray-200; + border-left: 1px solid $gray-100; position: absolute; left: 28px; top: -18px; @@ -108,6 +108,9 @@ .design-note { padding: $gl-padding; list-style: none; + transition: background $gl-transition-duration-medium $general-hover-transition-curve; + border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box + border-top-right-radius: $border-radius-default; a { color: inherit; @@ -146,11 +149,12 @@ } .design-dropzone-border { - border: 2px dashed $gray-200; + border: 2px dashed $gray-100; } .design-dropzone-card { - transition: border $general-hover-transition-duration $general-hover-transition-curve; + transition: border $gl-transition-duration-medium $general-hover-transition-curve; + color: $gl-text-color; &:focus, &:active { diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss index aacb1f91e59..b7f6b2026fe 100644 --- a/app/assets/stylesheets/components/design_management/design_list_item.scss +++ b/app/assets/stylesheets/components/design_management/design_list_item.scss @@ -17,3 +17,8 @@ height: 230px; } } + +// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197 +.design-list-item-new { + height: 210px; +} diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss index 1e78781f4b8..f870948cc4f 100644 --- a/app/assets/stylesheets/components/popover.scss +++ b/app/assets/stylesheets/components/popover.scss @@ -1,6 +1,6 @@ .popover { max-width: $popover-max-width; - border: 1px solid $gray-200; + border: 1px solid $gray-100; box-shadow: $popover-box-shadow; font-size: $gl-font-size-small; @@ -50,7 +50,7 @@ * due to the box-shadow include in our custom styles. */ > .arrow::before { - border-top-color: $gray-200; + border-top-color: $gray-100; bottom: 1px; } @@ -61,7 +61,7 @@ .bs-popover-bottom { > .arrow::before { - border-bottom-color: $gray-200; + border-bottom-color: $gray-100; } > .popover-header::before { @@ -70,11 +70,11 @@ } .bs-popover-right > .arrow::before { - border-right-color: $gray-200; + border-right-color: $gray-100; } .bs-popover-left > .arrow::before { - border-left-color: $gray-200; + border-left-color: $gray-100; } .popover-header { @@ -100,45 +100,6 @@ } } -.onboarding-popover { - box-shadow: 0 2px 4px $dropdown-shadow-color; - max-width: 280px; - - .popover-body { - font-size: $gl-font-size; - line-height: $gl-line-height; - padding: $gl-padding; - } - - .popover-header { - display: none; - } - - .accept-mr-label { - background-color: $accepting-mr-label-color; - color: $white; - } -} - -/** -* user_popover component -*/ -.user-popover { - padding: $gl-padding-8; - line-height: $gl-line-height; - - .category-icon { - color: $gray-600; - } -} - -.onboarding-welcome-page { - .popover { - min-width: auto; - max-width: 40%; - } -} - .suggest-gitlab-ci-yml { margin-top: -1em; diff --git a/app/assets/stylesheets/components/ref_selector.scss b/app/assets/stylesheets/components/ref_selector.scss new file mode 100644 index 00000000000..970a7b967ee --- /dev/null +++ b/app/assets/stylesheets/components/ref_selector.scss @@ -0,0 +1,17 @@ +.ref-selector { + & &-dropdown-content { + // Setting a max height is necessary to allow the dropdown's content + // to control where and how scrollbars appear. + // This content is limited to the max-height of the dropdown + // ($dropdown-max-height-lg) minus the additional padding + // on the top and bottom (2 * $gl-padding-8) + max-height: $dropdown-max-height-lg - 2 * $gl-padding-8; + } + + .dropdown-menu.show { + // Make the dropdown a little wider and longer than usual + // since it contains quite a bit of content. + width: 20rem; + max-height: $dropdown-max-height-lg; + } +} diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 956f34f7a8b..dd749b4df1a 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -59,10 +59,6 @@ $item-remove-button-space: 42px; flex-basis: 100%; font-size: $gl-font-size-small; - &.mr-title { - font-weight: $gl-font-weight-bold; - } - .sortable-link { color: $gray-900; } @@ -77,10 +73,6 @@ $item-remove-button-space: 42px; overflow: hidden; white-space: nowrap; } - - .health-label-short { - display: none; - } } .item-body, @@ -89,10 +81,6 @@ $item-remove-button-space: 42px; max-width: 0; } - .health-label-long { - display: none; - } - .status { &-at-risk { color: $red-500; @@ -158,19 +146,16 @@ $item-remove-button-space: 42px; max-width: $item-milestone-max-width; .ic-clock { - color: $gl-text-color-secondary; margin-right: $gl-padding-4; } } .item-weight { max-width: $item-weight-max-width; - - .ic-weight { - color: $gl-text-color-secondary; - } } + .item-milestone .ic-clock, + .item-weight .ic-weight, .item-due-date .ic-calendar { color: $gl-text-color-secondary; } @@ -314,10 +299,6 @@ $item-remove-button-space: 42px; max-width: 100px; } } - - .health-label-long { - display: none; - } } /* Large devices (large desktops, 1200px and up) */ @@ -331,10 +312,6 @@ $item-remove-button-space: 42px; } } - .health-label-long { - display: none; - } - .item-contents { overflow: hidden; } @@ -376,7 +353,7 @@ $item-remove-button-space: 42px; } .health-label-long { - display: initial; + display: block; } } } diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss index bedd06ec9a1..8d31b386d9e 100644 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -2,30 +2,45 @@ * Overrides styles from ToastUI editor */ -// Toolbar buttons -.tui-editor-defaultUI-toolbar .toolbar-button { - color: $gl-gray-600; - border: 0; - - &:hover, - &:active { - color: $blue-500; +.tui-editor-defaultUI { + + // Toolbar buttons + .tui-editor-defaultUI-toolbar .toolbar-button { + color: $gl-gray-600; border: 0; + + &:hover, + &:active { + color: $blue-500; + border: 0; + } } -} -// Contextual menu's & popups -.tui-editor-defaultUI .tui-popup-wrapper { - @include gl-overflow-hidden; - @include gl-rounded-base; - @include gl-border-gray-400; + // Contextual menu's & popups + .tui-popup-wrapper { + @include gl-overflow-hidden; + @include gl-rounded-base; + @include gl-border-gray-400; - hr { - @include gl-m-0; - @include gl-bg-gray-400; + hr { + @include gl-m-0; + @include gl-bg-gray-400; + } + + button { + @include gl-text-gray-800; + } } - button { - @include gl-text-gray-800; + /** + * Overrides styles from ToastUI's Code Mirror (markdown mode) editor. + * Toast UI internally overrides some of these using the `.tui-md-` prefix. + * https://codemirror.net/doc/manual.html#styling + */ + + .te-md-container .CodeMirror * { + @include gl-font-monospace; + @include gl-font-size-monospace; + @include gl-line-height-20; } } diff --git a/app/assets/stylesheets/disable_animations.scss b/app/assets/stylesheets/disable_animations.scss index e65b49c36f3..799c6e80ec9 100644 --- a/app/assets/stylesheets/disable_animations.scss +++ b/app/assets/stylesheets/disable_animations.scss @@ -1,4 +1,5 @@ * { + /* stylelint-disable property-no-vendor-prefix */ -o-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; @@ -9,6 +10,7 @@ -o-animation: none !important; -ms-animation: none !important; animation: none !important; + /* stylelint-enable property-no-vendor-prefix */ } // Disable sticky changes bar for tests diff --git a/app/assets/stylesheets/emoji_sprites.scss b/app/assets/stylesheets/emoji_sprites.scss index 8f6134c474b..01d13b30d2b 100644 --- a/app/assets/stylesheets/emoji_sprites.scss +++ b/app/assets/stylesheets/emoji_sprites.scss @@ -1,5384 +1,7176 @@ // Automatic Prettier Formatting for this big file -// scss-lint:disable EmptyLineBetweenBlocks .emoji-zzz { background-position: 0 0; } + .emoji-1234 { background-position: -20px 0; } + .emoji-1F627 { background-position: 0 -20px; } + .emoji-8ball { background-position: -20px -20px; } + .emoji-a { background-position: -40px 0; } + .emoji-ab { background-position: -40px -20px; } + .emoji-abc { background-position: 0 -40px; } + .emoji-abcd { background-position: -20px -40px; } + .emoji-accept { background-position: -40px -40px; } + .emoji-aerial_tramway { background-position: -60px 0; } + .emoji-airplane { background-position: -60px -20px; } + .emoji-airplane_arriving { background-position: -60px -40px; } + .emoji-airplane_departure { background-position: 0 -60px; } + .emoji-airplane_small { background-position: -20px -60px; } + .emoji-alarm_clock { background-position: -40px -60px; } + .emoji-alembic { background-position: -60px -60px; } + .emoji-alien { background-position: -80px 0; } + .emoji-ambulance { background-position: -80px -20px; } + .emoji-amphora { background-position: -80px -40px; } + .emoji-anchor { background-position: -80px -60px; } + .emoji-angel { background-position: 0 -80px; } + .emoji-angel_tone1 { background-position: -20px -80px; } + .emoji-angel_tone2 { background-position: -40px -80px; } + .emoji-angel_tone3 { background-position: -60px -80px; } + .emoji-angel_tone4 { background-position: -80px -80px; } + .emoji-angel_tone5 { background-position: -100px 0; } + .emoji-anger { background-position: -100px -20px; } + .emoji-anger_right { background-position: -100px -40px; } + .emoji-angry { background-position: -100px -60px; } + .emoji-ant { background-position: -100px -80px; } + .emoji-apple { background-position: 0 -100px; } + .emoji-aquarius { background-position: -20px -100px; } + .emoji-aries { background-position: -40px -100px; } + .emoji-arrow_backward { background-position: -60px -100px; } + .emoji-arrow_double_down { background-position: -80px -100px; } + .emoji-arrow_double_up { background-position: -100px -100px; } + .emoji-arrow_down { background-position: -120px 0; } + .emoji-arrow_down_small { background-position: -120px -20px; } + .emoji-arrow_forward { background-position: -120px -40px; } + .emoji-arrow_heading_down { background-position: -120px -60px; } + .emoji-arrow_heading_up { background-position: -120px -80px; } + .emoji-arrow_left { background-position: -120px -100px; } + .emoji-arrow_lower_left { background-position: 0 -120px; } + .emoji-arrow_lower_right { background-position: -20px -120px; } + .emoji-arrow_right { background-position: -40px -120px; } + .emoji-arrow_right_hook { background-position: -60px -120px; } + .emoji-arrow_up { background-position: -80px -120px; } + .emoji-arrow_up_down { background-position: -100px -120px; } + .emoji-arrow_up_small { background-position: -120px -120px; } + .emoji-arrow_upper_left { background-position: -140px 0; } + .emoji-arrow_upper_right { background-position: -140px -20px; } + .emoji-arrows_clockwise { background-position: -140px -40px; } + .emoji-arrows_counterclockwise { background-position: -140px -60px; } + .emoji-art { background-position: -140px -80px; } + .emoji-articulated_lorry { background-position: -140px -100px; } + .emoji-asterisk { background-position: -140px -120px; } + .emoji-astonished { background-position: 0 -140px; } + .emoji-athletic_shoe { background-position: -20px -140px; } + .emoji-atm { background-position: -40px -140px; } + .emoji-atom { background-position: -60px -140px; } + .emoji-avocado { background-position: -80px -140px; } + .emoji-b { background-position: -100px -140px; } + .emoji-baby { background-position: -120px -140px; } + .emoji-baby_bottle { background-position: -140px -140px; } + .emoji-baby_chick { background-position: -160px 0; } + .emoji-baby_symbol { background-position: -160px -20px; } + .emoji-baby_tone1 { background-position: -160px -40px; } + .emoji-baby_tone2 { background-position: -160px -60px; } + .emoji-baby_tone3 { background-position: -160px -80px; } + .emoji-baby_tone4 { background-position: -160px -100px; } + .emoji-baby_tone5 { background-position: -160px -120px; } + .emoji-back { background-position: -160px -140px; } + .emoji-bacon { background-position: 0 -160px; } + .emoji-badminton { background-position: -20px -160px; } + .emoji-baggage_claim { background-position: -40px -160px; } + .emoji-balloon { background-position: -60px -160px; } + .emoji-ballot_box { background-position: -80px -160px; } + .emoji-ballot_box_with_check { background-position: -100px -160px; } + .emoji-bamboo { background-position: -120px -160px; } + .emoji-banana { background-position: -140px -160px; } + .emoji-bangbang { background-position: -160px -160px; } + .emoji-bank { background-position: -180px 0; } + .emoji-bar_chart { background-position: -180px -20px; } + .emoji-barber { background-position: -180px -40px; } + .emoji-baseball { background-position: -180px -60px; } + .emoji-basketball { background-position: -180px -80px; } + .emoji-basketball_player { background-position: -180px -100px; } + .emoji-basketball_player_tone1 { background-position: -180px -120px; } + .emoji-basketball_player_tone2 { background-position: -180px -140px; } + .emoji-basketball_player_tone3 { background-position: -180px -160px; } + .emoji-basketball_player_tone4 { background-position: 0 -180px; } + .emoji-basketball_player_tone5 { background-position: -20px -180px; } + .emoji-bat { background-position: -40px -180px; } + .emoji-bath { background-position: -60px -180px; } + .emoji-bath_tone1 { background-position: -80px -180px; } + .emoji-bath_tone2 { background-position: -100px -180px; } + .emoji-bath_tone3 { background-position: -120px -180px; } + .emoji-bath_tone4 { background-position: -140px -180px; } + .emoji-bath_tone5 { background-position: -160px -180px; } + .emoji-bathtub { background-position: -180px -180px; } + .emoji-battery { background-position: -200px 0; } + .emoji-beach { background-position: -200px -20px; } + .emoji-beach_umbrella { background-position: -200px -40px; } + .emoji-bear { background-position: -200px -60px; } + .emoji-bed { background-position: -200px -80px; } + .emoji-bee { background-position: -200px -100px; } + .emoji-beer { background-position: -200px -120px; } + .emoji-beers { background-position: -200px -140px; } + .emoji-beetle { background-position: -200px -160px; } + .emoji-beginner { background-position: -200px -180px; } + .emoji-bell { background-position: 0 -200px; } + .emoji-bellhop { background-position: -20px -200px; } + .emoji-bento { background-position: -40px -200px; } + .emoji-bicyclist { background-position: -60px -200px; } + .emoji-bicyclist_tone1 { background-position: -80px -200px; } + .emoji-bicyclist_tone2 { background-position: -100px -200px; } + .emoji-bicyclist_tone3 { background-position: -120px -200px; } + .emoji-bicyclist_tone4 { background-position: -140px -200px; } + .emoji-bicyclist_tone5 { background-position: -160px -200px; } + .emoji-bike { background-position: -180px -200px; } + .emoji-bikini { background-position: -200px -200px; } + .emoji-biohazard { background-position: -220px 0; } + .emoji-bird { background-position: -220px -20px; } + .emoji-birthday { background-position: -220px -40px; } + .emoji-black_circle { background-position: -220px -60px; } + .emoji-black_heart { background-position: -220px -80px; } + .emoji-black_joker { background-position: -220px -100px; } + .emoji-black_large_square { background-position: -220px -120px; } + .emoji-black_medium_small_square { background-position: -220px -140px; } + .emoji-black_medium_square { background-position: -220px -160px; } + .emoji-black_nib { background-position: -220px -180px; } + .emoji-black_small_square { background-position: -220px -200px; } + .emoji-black_square_button { background-position: 0 -220px; } + .emoji-blossom { background-position: -20px -220px; } + .emoji-blowfish { background-position: -40px -220px; } + .emoji-blue_book { background-position: -60px -220px; } + .emoji-blue_car { background-position: -80px -220px; } + .emoji-blue_heart { background-position: -100px -220px; } + .emoji-blush { background-position: -120px -220px; } + .emoji-boar { background-position: -140px -220px; } + .emoji-bomb { background-position: -160px -220px; } + .emoji-book { background-position: -180px -220px; } + .emoji-bookmark { background-position: -200px -220px; } + .emoji-bookmark_tabs { background-position: -220px -220px; } + .emoji-books { background-position: -240px 0; } + .emoji-boom { background-position: -240px -20px; } + .emoji-boot { background-position: -240px -40px; } + .emoji-bouquet { background-position: -240px -60px; } + .emoji-bow { background-position: -240px -80px; } + .emoji-bow_and_arrow { background-position: -240px -100px; } + .emoji-bow_tone1 { background-position: -240px -120px; } + .emoji-bow_tone2 { background-position: -240px -140px; } + .emoji-bow_tone3 { background-position: -240px -160px; } + .emoji-bow_tone4 { background-position: -240px -180px; } + .emoji-bow_tone5 { background-position: -240px -200px; } + .emoji-bowling { background-position: -240px -220px; } + .emoji-boxing_glove { background-position: 0 -240px; } + .emoji-boy { background-position: -20px -240px; } + .emoji-boy_tone1 { background-position: -40px -240px; } + .emoji-boy_tone2 { background-position: -60px -240px; } + .emoji-boy_tone3 { background-position: -80px -240px; } + .emoji-boy_tone4 { background-position: -100px -240px; } + .emoji-boy_tone5 { background-position: -120px -240px; } + .emoji-bread { background-position: -140px -240px; } + .emoji-bride_with_veil { background-position: -160px -240px; } + .emoji-bride_with_veil_tone1 { background-position: -180px -240px; } + .emoji-bride_with_veil_tone2 { background-position: -200px -240px; } + .emoji-bride_with_veil_tone3 { background-position: -220px -240px; } + .emoji-bride_with_veil_tone4 { background-position: -240px -240px; } + .emoji-bride_with_veil_tone5 { background-position: -260px 0; } + .emoji-bridge_at_night { background-position: -260px -20px; } + .emoji-briefcase { background-position: -260px -40px; } + .emoji-broken_heart { background-position: -260px -60px; } + .emoji-bug { background-position: -260px -80px; } + .emoji-bulb { background-position: -260px -100px; } + .emoji-bullettrain_front { background-position: -260px -120px; } + .emoji-bullettrain_side { background-position: -260px -140px; } + .emoji-burrito { background-position: -260px -160px; } + .emoji-bus { background-position: -260px -180px; } + .emoji-busstop { background-position: -260px -200px; } + .emoji-bust_in_silhouette { background-position: -260px -220px; } + .emoji-busts_in_silhouette { background-position: -260px -240px; } + .emoji-butterfly { background-position: 0 -260px; } + .emoji-cactus { background-position: -20px -260px; } + .emoji-cake { background-position: -40px -260px; } + .emoji-calendar { background-position: -60px -260px; } + .emoji-calendar_spiral { background-position: -80px -260px; } + .emoji-call_me { background-position: -100px -260px; } + .emoji-call_me_tone1 { background-position: -120px -260px; } + .emoji-call_me_tone2 { background-position: -140px -260px; } + .emoji-call_me_tone3 { background-position: -160px -260px; } + .emoji-call_me_tone4 { background-position: -180px -260px; } + .emoji-call_me_tone5 { background-position: -200px -260px; } + .emoji-calling { background-position: -220px -260px; } + .emoji-camel { background-position: -240px -260px; } + .emoji-camera { background-position: -260px -260px; } + .emoji-camera_with_flash { background-position: -280px 0; } + .emoji-camping { background-position: -280px -20px; } + .emoji-cancer { background-position: -280px -40px; } + .emoji-candle { background-position: -280px -60px; } + .emoji-candy { background-position: -280px -80px; } + .emoji-canoe { background-position: -280px -100px; } + .emoji-capital_abcd { background-position: -280px -120px; } + .emoji-capricorn { background-position: -280px -140px; } + .emoji-card_box { background-position: -280px -160px; } + .emoji-card_index { background-position: -280px -180px; } + .emoji-carousel_horse { background-position: -280px -200px; } + .emoji-carrot { background-position: -280px -220px; } + .emoji-cartwheel { background-position: -280px -240px; } + .emoji-cartwheel_tone1 { background-position: -280px -260px; } + .emoji-cartwheel_tone2 { background-position: 0 -280px; } + .emoji-cartwheel_tone3 { background-position: -20px -280px; } + .emoji-cartwheel_tone4 { background-position: -40px -280px; } + .emoji-cartwheel_tone5 { background-position: -60px -280px; } + .emoji-cat { background-position: -80px -280px; } + .emoji-cat2 { background-position: -100px -280px; } + .emoji-cd { background-position: -120px -280px; } + .emoji-chains { background-position: -140px -280px; } + .emoji-champagne { background-position: -160px -280px; } + .emoji-champagne_glass { background-position: -180px -280px; } + .emoji-chart { background-position: -200px -280px; } + .emoji-chart_with_downwards_trend { background-position: -220px -280px; } + .emoji-chart_with_upwards_trend { background-position: -240px -280px; } + .emoji-checkered_flag { background-position: -260px -280px; } + .emoji-cheese { background-position: -280px -280px; } + .emoji-cherries { background-position: -300px 0; } + .emoji-cherry_blossom { background-position: -300px -20px; } + .emoji-chestnut { background-position: -300px -40px; } + .emoji-chicken { background-position: -300px -60px; } + .emoji-children_crossing { background-position: -300px -80px; } + .emoji-chipmunk { background-position: -300px -100px; } + .emoji-chocolate_bar { background-position: -300px -120px; } + .emoji-christmas_tree { background-position: -300px -140px; } + .emoji-church { background-position: -300px -160px; } + .emoji-cinema { background-position: -300px -180px; } + .emoji-circus_tent { background-position: -300px -200px; } + .emoji-city_dusk { background-position: -300px -220px; } + .emoji-city_sunset { background-position: -300px -240px; } + .emoji-cityscape { background-position: -300px -260px; } + .emoji-cl { background-position: -300px -280px; } + .emoji-clap { background-position: 0 -300px; } + .emoji-clap_tone1 { background-position: -20px -300px; } + .emoji-clap_tone2 { background-position: -40px -300px; } + .emoji-clap_tone3 { background-position: -60px -300px; } + .emoji-clap_tone4 { background-position: -80px -300px; } + .emoji-clap_tone5 { background-position: -100px -300px; } + .emoji-clapper { background-position: -120px -300px; } + .emoji-classical_building { background-position: -140px -300px; } + .emoji-clipboard { background-position: -160px -300px; } + .emoji-clock { background-position: -180px -300px; } + .emoji-clock1 { background-position: -200px -300px; } + .emoji-clock10 { background-position: -220px -300px; } + .emoji-clock1030 { background-position: -240px -300px; } + .emoji-clock11 { background-position: -260px -300px; } + .emoji-clock1130 { background-position: -280px -300px; } + .emoji-clock12 { background-position: -300px -300px; } + .emoji-clock1230 { background-position: -320px 0; } + .emoji-clock130 { background-position: -320px -20px; } + .emoji-clock2 { background-position: -320px -40px; } + .emoji-clock230 { background-position: -320px -60px; } + .emoji-clock3 { background-position: -320px -80px; } + .emoji-clock330 { background-position: -320px -100px; } + .emoji-clock4 { background-position: -320px -120px; } + .emoji-clock430 { background-position: -320px -140px; } + .emoji-clock5 { background-position: -320px -160px; } + .emoji-clock530 { background-position: -320px -180px; } + .emoji-clock6 { background-position: -320px -200px; } + .emoji-clock630 { background-position: -320px -220px; } + .emoji-clock7 { background-position: -320px -240px; } + .emoji-clock730 { background-position: -320px -260px; } + .emoji-clock8 { background-position: -320px -280px; } + .emoji-clock830 { background-position: -320px -300px; } + .emoji-clock9 { background-position: 0 -320px; } + .emoji-clock930 { background-position: -20px -320px; } + .emoji-closed_book { background-position: -40px -320px; } + .emoji-closed_lock_with_key { background-position: -60px -320px; } + .emoji-closed_umbrella { background-position: -80px -320px; } + .emoji-cloud { background-position: -100px -320px; } + .emoji-cloud_lightning { background-position: -120px -320px; } + .emoji-cloud_rain { background-position: -140px -320px; } + .emoji-cloud_snow { background-position: -160px -320px; } + .emoji-cloud_tornado { background-position: -180px -320px; } + .emoji-clown { background-position: -200px -320px; } + .emoji-clubs { background-position: -220px -320px; } + .emoji-cocktail { background-position: -240px -320px; } + .emoji-coffee { background-position: -260px -320px; } + .emoji-coffin { background-position: -280px -320px; } + .emoji-cold_sweat { background-position: -300px -320px; } + .emoji-comet { background-position: -320px -320px; } + .emoji-compression { background-position: -340px 0; } + .emoji-computer { background-position: -340px -20px; } + .emoji-confetti_ball { background-position: -340px -40px; } + .emoji-confounded { background-position: -340px -60px; } + .emoji-confused { background-position: -340px -80px; } + .emoji-congratulations { background-position: -340px -100px; } + .emoji-construction { background-position: -340px -120px; } + .emoji-construction_site { background-position: -340px -140px; } + .emoji-construction_worker { background-position: -340px -160px; } + .emoji-construction_worker_tone1 { background-position: -340px -180px; } + .emoji-construction_worker_tone2 { background-position: -340px -200px; } + .emoji-construction_worker_tone3 { background-position: -340px -220px; } + .emoji-construction_worker_tone4 { background-position: -340px -240px; } + .emoji-construction_worker_tone5 { background-position: -340px -260px; } + .emoji-control_knobs { background-position: -340px -280px; } + .emoji-convenience_store { background-position: -340px -300px; } + .emoji-cookie { background-position: -340px -320px; } + .emoji-cooking { background-position: 0 -340px; } + .emoji-cool { background-position: -20px -340px; } + .emoji-cop { background-position: -40px -340px; } + .emoji-cop_tone1 { background-position: -60px -340px; } + .emoji-cop_tone2 { background-position: -80px -340px; } + .emoji-cop_tone3 { background-position: -100px -340px; } + .emoji-cop_tone4 { background-position: -120px -340px; } + .emoji-cop_tone5 { background-position: -140px -340px; } + .emoji-copyright { background-position: -160px -340px; } + .emoji-corn { background-position: -180px -340px; } + .emoji-couch { background-position: -200px -340px; } + .emoji-couple { background-position: -220px -340px; } + .emoji-couple_mm { background-position: -240px -340px; } + .emoji-couple_with_heart { background-position: -260px -340px; } + .emoji-couple_ww { background-position: -280px -340px; } + .emoji-couplekiss { background-position: -300px -340px; } + .emoji-cow { background-position: -320px -340px; } + .emoji-cow2 { background-position: -340px -340px; } + .emoji-cowboy { background-position: -360px 0; } + .emoji-crab { background-position: -360px -20px; } + .emoji-crayon { background-position: -360px -40px; } + .emoji-credit_card { background-position: -360px -60px; } + .emoji-crescent_moon { background-position: -360px -80px; } + .emoji-cricket { background-position: -360px -100px; } + .emoji-crocodile { background-position: -360px -120px; } + .emoji-croissant { background-position: -360px -140px; } + .emoji-cross { background-position: -360px -160px; } + .emoji-crossed_flags { background-position: -360px -180px; } + .emoji-crossed_swords { background-position: -360px -200px; } + .emoji-crown { background-position: -360px -220px; } + .emoji-cruise_ship { background-position: -360px -240px; } + .emoji-cry { background-position: -360px -260px; } + .emoji-crying_cat_face { background-position: -360px -280px; } + .emoji-crystal_ball { background-position: -360px -300px; } + .emoji-cucumber { background-position: -360px -320px; } + .emoji-cupid { background-position: -360px -340px; } + .emoji-curly_loop { background-position: 0 -360px; } + .emoji-currency_exchange { background-position: -20px -360px; } + .emoji-curry { background-position: -40px -360px; } + .emoji-custard { background-position: -60px -360px; } + .emoji-customs { background-position: -80px -360px; } + .emoji-cyclone { background-position: -100px -360px; } + .emoji-dagger { background-position: -120px -360px; } + .emoji-dancer { background-position: -140px -360px; } + .emoji-dancer_tone1 { background-position: -160px -360px; } + .emoji-dancer_tone2 { background-position: -180px -360px; } + .emoji-dancer_tone3 { background-position: -200px -360px; } + .emoji-dancer_tone4 { background-position: -220px -360px; } + .emoji-dancer_tone5 { background-position: -240px -360px; } + .emoji-dancers { background-position: -260px -360px; } + .emoji-dango { background-position: -280px -360px; } + .emoji-dark_sunglasses { background-position: -300px -360px; } + .emoji-dart { background-position: -320px -360px; } + .emoji-dash { background-position: -340px -360px; } + .emoji-date { background-position: -360px -360px; } + .emoji-deciduous_tree { background-position: -380px 0; } + .emoji-deer { background-position: -380px -20px; } + .emoji-department_store { background-position: -380px -40px; } + .emoji-desert { background-position: -380px -60px; } + .emoji-desktop { background-position: -380px -80px; } + .emoji-diamond_shape_with_a_dot_inside { background-position: -380px -100px; } + .emoji-diamonds { background-position: -380px -120px; } + .emoji-disappointed { background-position: -380px -140px; } + .emoji-disappointed_relieved { background-position: -380px -160px; } + .emoji-dividers { background-position: -380px -180px; } + .emoji-dizzy { background-position: -380px -200px; } + .emoji-dizzy_face { background-position: -380px -220px; } + .emoji-do_not_litter { background-position: -380px -240px; } + .emoji-dog { background-position: -380px -260px; } + .emoji-dog2 { background-position: -380px -280px; } + .emoji-dollar { background-position: -380px -300px; } + .emoji-dolls { background-position: -380px -320px; } + .emoji-dolphin { background-position: -380px -340px; } + .emoji-door { background-position: -380px -360px; } + .emoji-doughnut { background-position: 0 -380px; } + .emoji-dove { background-position: -20px -380px; } + .emoji-dragon { background-position: -40px -380px; } + .emoji-dragon_face { background-position: -60px -380px; } + .emoji-dress { background-position: -80px -380px; } + .emoji-dromedary_camel { background-position: -100px -380px; } + .emoji-drooling_face { background-position: -120px -380px; } + .emoji-droplet { background-position: -140px -380px; } + .emoji-drum { background-position: -160px -380px; } + .emoji-duck { background-position: -180px -380px; } + .emoji-dvd { background-position: -200px -380px; } + .emoji-e-mail { background-position: -220px -380px; } + .emoji-eagle { background-position: -240px -380px; } + .emoji-ear { background-position: -260px -380px; } + .emoji-ear_of_rice { background-position: -280px -380px; } + .emoji-ear_tone1 { background-position: -300px -380px; } + .emoji-ear_tone2 { background-position: -320px -380px; } + .emoji-ear_tone3 { background-position: -340px -380px; } + .emoji-ear_tone4 { background-position: -360px -380px; } + .emoji-ear_tone5 { background-position: -380px -380px; } + .emoji-earth_africa { background-position: -400px 0; } + .emoji-earth_americas { background-position: -400px -20px; } + .emoji-earth_asia { background-position: -400px -40px; } + .emoji-egg { background-position: -400px -60px; } + .emoji-eggplant { background-position: -400px -80px; } + .emoji-eight { background-position: -400px -100px; } + .emoji-eight_pointed_black_star { background-position: -400px -120px; } + .emoji-eight_spoked_asterisk { background-position: -400px -140px; } + .emoji-eject { background-position: -400px -160px; } + .emoji-electric_plug { background-position: -400px -180px; } + .emoji-elephant { background-position: -400px -200px; } + .emoji-end { background-position: -400px -220px; } + .emoji-envelope { background-position: -400px -240px; } + .emoji-envelope_with_arrow { background-position: -400px -260px; } + .emoji-euro { background-position: -400px -280px; } + .emoji-european_castle { background-position: -400px -300px; } + .emoji-european_post_office { background-position: -400px -320px; } + .emoji-evergreen_tree { background-position: -400px -340px; } + .emoji-exclamation { background-position: -400px -360px; } + .emoji-expressionless { background-position: -400px -380px; } + .emoji-eye { background-position: 0 -400px; } + .emoji-eye_in_speech_bubble { background-position: -20px -400px; } + .emoji-eyeglasses { background-position: -40px -400px; } + .emoji-eyes { background-position: -60px -400px; } + .emoji-face_palm { background-position: -80px -400px; } + .emoji-face_palm_tone1 { background-position: -100px -400px; } + .emoji-face_palm_tone2 { background-position: -120px -400px; } + .emoji-face_palm_tone3 { background-position: -140px -400px; } + .emoji-face_palm_tone4 { background-position: -160px -400px; } + .emoji-face_palm_tone5 { background-position: -180px -400px; } + .emoji-factory { background-position: -200px -400px; } + .emoji-fallen_leaf { background-position: -220px -400px; } + .emoji-family { background-position: -240px -400px; } + .emoji-family_mmb { background-position: -260px -400px; } + .emoji-family_mmbb { background-position: -280px -400px; } + .emoji-family_mmg { background-position: -300px -400px; } + .emoji-family_mmgb { background-position: -320px -400px; } + .emoji-family_mmgg { background-position: -340px -400px; } + .emoji-family_mwbb { background-position: -360px -400px; } + .emoji-family_mwg { background-position: -380px -400px; } + .emoji-family_mwgb { background-position: -400px -400px; } + .emoji-family_mwgg { background-position: -420px 0; } + .emoji-family_wwb { background-position: -420px -20px; } + .emoji-family_wwbb { background-position: -420px -40px; } + .emoji-family_wwg { background-position: -420px -60px; } + .emoji-family_wwgb { background-position: -420px -80px; } + .emoji-family_wwgg { background-position: -420px -100px; } + .emoji-fast_forward { background-position: -420px -120px; } + .emoji-fax { background-position: -420px -140px; } + .emoji-fearful { background-position: -420px -160px; } + .emoji-feet { background-position: -420px -180px; } + .emoji-fencer { background-position: -420px -200px; } + .emoji-ferris_wheel { background-position: -420px -220px; } + .emoji-ferry { background-position: -420px -240px; } + .emoji-field_hockey { background-position: -420px -260px; } + .emoji-file_cabinet { background-position: -420px -280px; } + .emoji-file_folder { background-position: -420px -300px; } + .emoji-film_frames { background-position: -420px -320px; } + .emoji-fingers_crossed { background-position: -420px -340px; } + .emoji-fingers_crossed_tone1 { background-position: -420px -360px; } + .emoji-fingers_crossed_tone2 { background-position: -420px -380px; } + .emoji-fingers_crossed_tone3 { background-position: -420px -400px; } + .emoji-fingers_crossed_tone4 { background-position: 0 -420px; } + .emoji-fingers_crossed_tone5 { background-position: -20px -420px; } + .emoji-fire { background-position: -40px -420px; } + .emoji-fire_engine { background-position: -60px -420px; } + .emoji-fireworks { background-position: -80px -420px; } + .emoji-first_place { background-position: -100px -420px; } + .emoji-first_quarter_moon { background-position: -120px -420px; } + .emoji-first_quarter_moon_with_face { background-position: -140px -420px; } + .emoji-fish { background-position: -160px -420px; } + .emoji-fish_cake { background-position: -180px -420px; } + .emoji-fishing_pole_and_fish { background-position: -200px -420px; } + .emoji-fist { background-position: -220px -420px; } + .emoji-fist_tone1 { background-position: -240px -420px; } + .emoji-fist_tone2 { background-position: -260px -420px; } + .emoji-fist_tone3 { background-position: -280px -420px; } + .emoji-fist_tone4 { background-position: -300px -420px; } + .emoji-fist_tone5 { background-position: -320px -420px; } + .emoji-five { background-position: -340px -420px; } + .emoji-flag_ac { background-position: -360px -420px; } + .emoji-flag_ad { background-position: -380px -420px; } + .emoji-flag_ae { background-position: -400px -420px; } + .emoji-flag_af { background-position: -420px -420px; } + .emoji-flag_ag { background-position: -440px 0; } + .emoji-flag_ai { background-position: -440px -20px; } + .emoji-flag_al { background-position: -440px -40px; } + .emoji-flag_am { background-position: -440px -60px; } + .emoji-flag_ao { background-position: -440px -80px; } + .emoji-flag_aq { background-position: -440px -100px; } + .emoji-flag_ar { background-position: -440px -120px; } + .emoji-flag_as { background-position: -440px -140px; } + .emoji-flag_at { background-position: -440px -160px; } + .emoji-flag_au { background-position: -440px -180px; } + .emoji-flag_aw { background-position: -440px -200px; } + .emoji-flag_ax { background-position: -440px -220px; } + .emoji-flag_az { background-position: -440px -240px; } + .emoji-flag_ba { background-position: -440px -260px; } + .emoji-flag_bb { background-position: -440px -280px; } + .emoji-flag_bd { background-position: -440px -300px; } + .emoji-flag_be { background-position: -440px -320px; } + .emoji-flag_bf { background-position: -440px -340px; } + .emoji-flag_bg { background-position: -440px -360px; } + .emoji-flag_bh { background-position: -440px -380px; } + .emoji-flag_bi { background-position: -440px -400px; } + .emoji-flag_bj { background-position: -440px -420px; } + .emoji-flag_bl { background-position: 0 -440px; } + .emoji-flag_black { background-position: -20px -440px; } + .emoji-flag_bm { background-position: -40px -440px; } + .emoji-flag_bn { background-position: -60px -440px; } + .emoji-flag_bo { background-position: -80px -440px; } + .emoji-flag_bq { background-position: -100px -440px; } + .emoji-flag_br { background-position: -120px -440px; } + .emoji-flag_bs { background-position: -140px -440px; } + .emoji-flag_bt { background-position: -160px -440px; } + .emoji-flag_bv { background-position: -180px -440px; } + .emoji-flag_bw { background-position: -200px -440px; } + .emoji-flag_by { background-position: -220px -440px; } + .emoji-flag_bz { background-position: -240px -440px; } + .emoji-flag_ca { background-position: -260px -440px; } + .emoji-flag_cc { background-position: -280px -440px; } + .emoji-flag_cd { background-position: -300px -440px; } + .emoji-flag_cf { background-position: -320px -440px; } + .emoji-flag_cg { background-position: -340px -440px; } + .emoji-flag_ch { background-position: -360px -440px; } + .emoji-flag_ci { background-position: -380px -440px; } + .emoji-flag_ck { background-position: -400px -440px; } + .emoji-flag_cl { background-position: -420px -440px; } + .emoji-flag_cm { background-position: -440px -440px; } + .emoji-flag_cn { background-position: -460px 0; } + .emoji-flag_co { background-position: -460px -20px; } + .emoji-flag_cp { background-position: -460px -40px; } + .emoji-flag_cr { background-position: -460px -60px; } + .emoji-flag_cu { background-position: -460px -80px; } + .emoji-flag_cv { background-position: -460px -100px; } + .emoji-flag_cw { background-position: -460px -120px; } + .emoji-flag_cx { background-position: -460px -140px; } + .emoji-flag_cy { background-position: -460px -160px; } + .emoji-flag_cz { background-position: -460px -180px; } + .emoji-flag_de { background-position: -460px -200px; } + .emoji-flag_dg { background-position: -460px -220px; } + .emoji-flag_dj { background-position: -460px -240px; } + .emoji-flag_dk { background-position: -460px -260px; } + .emoji-flag_dm { background-position: -460px -280px; } + .emoji-flag_do { background-position: -460px -300px; } + .emoji-flag_dz { background-position: -460px -320px; } + .emoji-flag_ea { background-position: -460px -340px; } + .emoji-flag_ec { background-position: -460px -360px; } + .emoji-flag_ee { background-position: -460px -380px; } + .emoji-flag_eg { background-position: -460px -400px; } + .emoji-flag_eh { background-position: -460px -420px; } + .emoji-flag_er { background-position: -460px -440px; } + .emoji-flag_es { background-position: 0 -460px; } + .emoji-flag_et { background-position: -20px -460px; } + .emoji-flag_eu { background-position: -40px -460px; } + .emoji-flag_fi { background-position: -60px -460px; } + .emoji-flag_fj { background-position: -80px -460px; } + .emoji-flag_fk { background-position: -100px -460px; } + .emoji-flag_fm { background-position: -120px -460px; } + .emoji-flag_fo { background-position: -140px -460px; } + .emoji-flag_fr { background-position: -160px -460px; } + .emoji-flag_ga { background-position: -180px -460px; } + .emoji-flag_gb { background-position: -200px -460px; } + .emoji-flag_gd { background-position: -220px -460px; } + .emoji-flag_ge { background-position: -240px -460px; } + .emoji-flag_gf { background-position: -260px -460px; } + .emoji-flag_gg { background-position: -280px -460px; } + .emoji-flag_gh { background-position: -300px -460px; } + .emoji-flag_gi { background-position: -320px -460px; } + .emoji-flag_gl { background-position: -340px -460px; } + .emoji-flag_gm { background-position: -360px -460px; } + .emoji-flag_gn { background-position: -380px -460px; } + .emoji-flag_gp { background-position: -400px -460px; } + .emoji-flag_gq { background-position: -420px -460px; } + .emoji-flag_gr { background-position: -440px -460px; } + .emoji-flag_gs { background-position: -460px -460px; } + .emoji-flag_gt { background-position: -480px 0; } + .emoji-flag_gu { background-position: -480px -20px; } + .emoji-flag_gw { background-position: -480px -40px; } + .emoji-flag_gy { background-position: -480px -60px; } + .emoji-flag_hk { background-position: -480px -80px; } + .emoji-flag_hm { background-position: -480px -100px; } + .emoji-flag_hn { background-position: -480px -120px; } + .emoji-flag_hr { background-position: -480px -140px; } + .emoji-flag_ht { background-position: -480px -160px; } + .emoji-flag_hu { background-position: -480px -180px; } + .emoji-flag_ic { background-position: -480px -200px; } + .emoji-flag_id { background-position: -480px -220px; } + .emoji-flag_ie { background-position: -480px -240px; } + .emoji-flag_il { background-position: -480px -260px; } + .emoji-flag_im { background-position: -480px -280px; } + .emoji-flag_in { background-position: -480px -300px; } + .emoji-flag_io { background-position: -480px -320px; } + .emoji-flag_iq { background-position: -480px -340px; } + .emoji-flag_ir { background-position: -480px -360px; } + .emoji-flag_is { background-position: -480px -380px; } + .emoji-flag_it { background-position: -480px -400px; } + .emoji-flag_je { background-position: -480px -420px; } + .emoji-flag_jm { background-position: -480px -440px; } + .emoji-flag_jo { background-position: -480px -460px; } + .emoji-flag_jp { background-position: 0 -480px; } + .emoji-flag_ke { background-position: -20px -480px; } + .emoji-flag_kg { background-position: -40px -480px; } + .emoji-flag_kh { background-position: -60px -480px; } + .emoji-flag_ki { background-position: -80px -480px; } + .emoji-flag_km { background-position: -100px -480px; } + .emoji-flag_kn { background-position: -120px -480px; } + .emoji-flag_kp { background-position: -140px -480px; } + .emoji-flag_kr { background-position: -160px -480px; } + .emoji-flag_kw { background-position: -180px -480px; } + .emoji-flag_ky { background-position: -200px -480px; } + .emoji-flag_kz { background-position: -220px -480px; } + .emoji-flag_la { background-position: -240px -480px; } + .emoji-flag_lb { background-position: -260px -480px; } + .emoji-flag_lc { background-position: -280px -480px; } + .emoji-flag_li { background-position: -300px -480px; } + .emoji-flag_lk { background-position: -320px -480px; } + .emoji-flag_lr { background-position: -340px -480px; } + .emoji-flag_ls { background-position: -360px -480px; } + .emoji-flag_lt { background-position: -380px -480px; } + .emoji-flag_lu { background-position: -400px -480px; } + .emoji-flag_lv { background-position: -420px -480px; } + .emoji-flag_ly { background-position: -440px -480px; } + .emoji-flag_ma { background-position: -460px -480px; } + .emoji-flag_mc { background-position: -480px -480px; } + .emoji-flag_md { background-position: -500px 0; } + .emoji-flag_me { background-position: -500px -20px; } + .emoji-flag_mf { background-position: -500px -40px; } + .emoji-flag_mg { background-position: -500px -60px; } + .emoji-flag_mh { background-position: -500px -80px; } + .emoji-flag_mk { background-position: -500px -100px; } + .emoji-flag_ml { background-position: -500px -120px; } + .emoji-flag_mm { background-position: -500px -140px; } + .emoji-flag_mn { background-position: -500px -160px; } + .emoji-flag_mo { background-position: -500px -180px; } + .emoji-flag_mp { background-position: -500px -200px; } + .emoji-flag_mq { background-position: -500px -220px; } + .emoji-flag_mr { background-position: -500px -240px; } + .emoji-flag_ms { background-position: -500px -260px; } + .emoji-flag_mt { background-position: -500px -280px; } + .emoji-flag_mu { background-position: -500px -300px; } + .emoji-flag_mv { background-position: -500px -320px; } + .emoji-flag_mw { background-position: -500px -340px; } + .emoji-flag_mx { background-position: -500px -360px; } + .emoji-flag_my { background-position: -500px -380px; } + .emoji-flag_mz { background-position: -500px -400px; } + .emoji-flag_na { background-position: -500px -420px; } + .emoji-flag_nc { background-position: -500px -440px; } + .emoji-flag_ne { background-position: -500px -460px; } + .emoji-flag_nf { background-position: -500px -480px; } + .emoji-flag_ng { background-position: 0 -500px; } + .emoji-flag_ni { background-position: -20px -500px; } + .emoji-flag_nl { background-position: -40px -500px; } + .emoji-flag_no { background-position: -60px -500px; } + .emoji-flag_np { background-position: -80px -500px; } + .emoji-flag_nr { background-position: -100px -500px; } + .emoji-flag_nu { background-position: -120px -500px; } + .emoji-flag_nz { background-position: -140px -500px; } + .emoji-flag_om { background-position: -160px -500px; } + .emoji-flag_pa { background-position: -180px -500px; } + .emoji-flag_pe { background-position: -200px -500px; } + .emoji-flag_pf { background-position: -220px -500px; } + .emoji-flag_pg { background-position: -240px -500px; } + .emoji-flag_ph { background-position: -260px -500px; } + .emoji-flag_pk { background-position: -280px -500px; } + .emoji-flag_pl { background-position: -300px -500px; } + .emoji-flag_pm { background-position: -320px -500px; } + .emoji-flag_pn { background-position: -340px -500px; } + .emoji-flag_pr { background-position: -360px -500px; } + .emoji-flag_ps { background-position: -380px -500px; } + .emoji-flag_pt { background-position: -400px -500px; } + .emoji-flag_pw { background-position: -420px -500px; } + .emoji-flag_py { background-position: -440px -500px; } + .emoji-flag_qa { background-position: -460px -500px; } + .emoji-flag_re { background-position: -480px -500px; } + .emoji-flag_ro { background-position: -500px -500px; } + .emoji-flag_rs { background-position: -520px 0; } + .emoji-flag_ru { background-position: -520px -20px; } + .emoji-flag_rw { background-position: -520px -40px; } + .emoji-flag_sa { background-position: -520px -60px; } + .emoji-flag_sb { background-position: -520px -80px; } + .emoji-flag_sc { background-position: -520px -100px; } + .emoji-flag_sd { background-position: -520px -120px; } + .emoji-flag_se { background-position: -520px -140px; } + .emoji-flag_sg { background-position: -520px -160px; } + .emoji-flag_sh { background-position: -520px -180px; } + .emoji-flag_si { background-position: -520px -200px; } + .emoji-flag_sj { background-position: -520px -220px; } + .emoji-flag_sk { background-position: -520px -240px; } + .emoji-flag_sl { background-position: -520px -260px; } + .emoji-flag_sm { background-position: -520px -280px; } + .emoji-flag_sn { background-position: -520px -300px; } + .emoji-flag_so { background-position: -520px -320px; } + .emoji-flag_sr { background-position: -520px -340px; } + .emoji-flag_ss { background-position: -520px -360px; } + .emoji-flag_st { background-position: -520px -380px; } + .emoji-flag_sv { background-position: -520px -400px; } + .emoji-flag_sx { background-position: -520px -420px; } + .emoji-flag_sy { background-position: -520px -440px; } + .emoji-flag_sz { background-position: -520px -460px; } + .emoji-flag_ta { background-position: -520px -480px; } + .emoji-flag_tc { background-position: -520px -500px; } + .emoji-flag_td { background-position: 0 -520px; } + .emoji-flag_tf { background-position: -20px -520px; } + .emoji-flag_tg { background-position: -40px -520px; } + .emoji-flag_th { background-position: -60px -520px; } + .emoji-flag_tj { background-position: -80px -520px; } + .emoji-flag_tk { background-position: -100px -520px; } + .emoji-flag_tl { background-position: -120px -520px; } + .emoji-flag_tm { background-position: -140px -520px; } + .emoji-flag_tn { background-position: -160px -520px; } + .emoji-flag_to { background-position: -180px -520px; } + .emoji-flag_tr { background-position: -200px -520px; } + .emoji-flag_tt { background-position: -220px -520px; } + .emoji-flag_tv { background-position: -240px -520px; } + .emoji-flag_tw { background-position: -260px -520px; } + .emoji-flag_tz { background-position: -280px -520px; } + .emoji-flag_ua { background-position: -300px -520px; } + .emoji-flag_ug { background-position: -320px -520px; } + .emoji-flag_um { background-position: -340px -520px; } + .emoji-flag_us { background-position: -360px -520px; } + .emoji-flag_uy { background-position: -380px -520px; } + .emoji-flag_uz { background-position: -400px -520px; } + .emoji-flag_va { background-position: -420px -520px; } + .emoji-flag_vc { background-position: -440px -520px; } + .emoji-flag_ve { background-position: -460px -520px; } + .emoji-flag_vg { background-position: -480px -520px; } + .emoji-flag_vi { background-position: -500px -520px; } + .emoji-flag_vn { background-position: -520px -520px; } + .emoji-flag_vu { background-position: -540px 0; } + .emoji-flag_wf { background-position: -540px -20px; } + .emoji-flag_white { background-position: -540px -40px; } + .emoji-flag_ws { background-position: -540px -60px; } + .emoji-flag_xk { background-position: -540px -80px; } + .emoji-flag_ye { background-position: -540px -100px; } + .emoji-flag_yt { background-position: -540px -120px; } + .emoji-flag_za { background-position: -540px -140px; } + .emoji-flag_zm { background-position: -540px -160px; } + .emoji-flag_zw { background-position: -540px -180px; } + .emoji-flags { background-position: -540px -200px; } + .emoji-flashlight { background-position: -540px -220px; } + .emoji-fleur-de-lis { background-position: -540px -240px; } + .emoji-floppy_disk { background-position: -540px -260px; } + .emoji-flower_playing_cards { background-position: -540px -280px; } + .emoji-flushed { background-position: -540px -300px; } + .emoji-fog { background-position: -540px -320px; } + .emoji-foggy { background-position: -540px -340px; } + .emoji-football { background-position: -540px -360px; } + .emoji-footprints { background-position: -540px -380px; } + .emoji-fork_and_knife { background-position: -540px -400px; } + .emoji-fork_knife_plate { background-position: -540px -420px; } + .emoji-fountain { background-position: -540px -440px; } + .emoji-four { background-position: -540px -460px; } + .emoji-four_leaf_clover { background-position: -540px -480px; } + .emoji-fox { background-position: -540px -500px; } + .emoji-frame_photo { background-position: -540px -520px; } + .emoji-free { background-position: 0 -540px; } + .emoji-french_bread { background-position: -20px -540px; } + .emoji-fried_shrimp { background-position: -40px -540px; } + .emoji-fries { background-position: -60px -540px; } + .emoji-frog { background-position: -80px -540px; } + .emoji-frowning { background-position: -100px -540px; } + .emoji-frowning2 { background-position: -120px -540px; } + .emoji-fuelpump { background-position: -140px -540px; } + .emoji-full_moon { background-position: -160px -540px; } + .emoji-full_moon_with_face { background-position: -180px -540px; } + .emoji-game_die { background-position: -200px -540px; } + .emoji-gay_pride_flag { background-position: -220px -540px; } + .emoji-gear { background-position: -240px -540px; } + .emoji-gem { background-position: -260px -540px; } + .emoji-gemini { background-position: -280px -540px; } + .emoji-ghost { background-position: -300px -540px; } + .emoji-gift { background-position: -320px -540px; } + .emoji-gift_heart { background-position: -340px -540px; } + .emoji-girl { background-position: -360px -540px; } + .emoji-girl_tone1 { background-position: -380px -540px; } + .emoji-girl_tone2 { background-position: -400px -540px; } + .emoji-girl_tone3 { background-position: -420px -540px; } + .emoji-girl_tone4 { background-position: -440px -540px; } + .emoji-girl_tone5 { background-position: -460px -540px; } + .emoji-globe_with_meridians { background-position: -480px -540px; } + .emoji-goal { background-position: -500px -540px; } + .emoji-goat { background-position: -520px -540px; } + .emoji-golf { background-position: -540px -540px; } + .emoji-golfer { background-position: -560px 0; } + .emoji-gorilla { background-position: -560px -20px; } + .emoji-grapes { background-position: -560px -40px; } + .emoji-green_apple { background-position: -560px -60px; } + .emoji-green_book { background-position: -560px -80px; } + .emoji-green_heart { background-position: -560px -100px; } + .emoji-grey_exclamation { background-position: -560px -120px; } + .emoji-grey_question { background-position: -560px -140px; } + .emoji-grimacing { background-position: -560px -160px; } + .emoji-grin { background-position: -560px -180px; } + .emoji-grinning { background-position: -560px -200px; } + .emoji-guardsman { background-position: -560px -220px; } + .emoji-guardsman_tone1 { background-position: -560px -240px; } + .emoji-guardsman_tone2 { background-position: -560px -260px; } + .emoji-guardsman_tone3 { background-position: -560px -280px; } + .emoji-guardsman_tone4 { background-position: -560px -300px; } + .emoji-guardsman_tone5 { background-position: -560px -320px; } + .emoji-guitar { background-position: -560px -340px; } + .emoji-gun { background-position: -560px -360px; } + .emoji-haircut { background-position: -560px -380px; } + .emoji-haircut_tone1 { background-position: -560px -400px; } + .emoji-haircut_tone2 { background-position: -560px -420px; } + .emoji-haircut_tone3 { background-position: -560px -440px; } + .emoji-haircut_tone4 { background-position: -560px -460px; } + .emoji-haircut_tone5 { background-position: -560px -480px; } + .emoji-hamburger { background-position: -560px -500px; } + .emoji-hammer { background-position: -560px -520px; } + .emoji-hammer_pick { background-position: -560px -540px; } + .emoji-hamster { background-position: 0 -560px; } + .emoji-hand_splayed { background-position: -20px -560px; } + .emoji-hand_splayed_tone1 { background-position: -40px -560px; } + .emoji-hand_splayed_tone2 { background-position: -60px -560px; } + .emoji-hand_splayed_tone3 { background-position: -80px -560px; } + .emoji-hand_splayed_tone4 { background-position: -100px -560px; } + .emoji-hand_splayed_tone5 { background-position: -120px -560px; } + .emoji-handbag { background-position: -140px -560px; } + .emoji-handball { background-position: -160px -560px; } + .emoji-handball_tone1 { background-position: -180px -560px; } + .emoji-handball_tone2 { background-position: -200px -560px; } + .emoji-handball_tone3 { background-position: -220px -560px; } + .emoji-handball_tone4 { background-position: -240px -560px; } + .emoji-handball_tone5 { background-position: -260px -560px; } + .emoji-handshake { background-position: -280px -560px; } + .emoji-handshake_tone1 { background-position: -300px -560px; } + .emoji-handshake_tone2 { background-position: -320px -560px; } + .emoji-handshake_tone3 { background-position: -340px -560px; } + .emoji-handshake_tone4 { background-position: -360px -560px; } + .emoji-handshake_tone5 { background-position: -380px -560px; } + .emoji-hash { background-position: -400px -560px; } + .emoji-hatched_chick { background-position: -420px -560px; } + .emoji-hatching_chick { background-position: -440px -560px; } + .emoji-head_bandage { background-position: -460px -560px; } + .emoji-headphones { background-position: -480px -560px; } + .emoji-hear_no_evil { background-position: -500px -560px; } + .emoji-heart { background-position: -520px -560px; } + .emoji-heart_decoration { background-position: -540px -560px; } + .emoji-heart_exclamation { background-position: -560px -560px; } + .emoji-heart_eyes { background-position: -580px 0; } + .emoji-heart_eyes_cat { background-position: -580px -20px; } + .emoji-heartbeat { background-position: -580px -40px; } + .emoji-heartpulse { background-position: -580px -60px; } + .emoji-hearts { background-position: -580px -80px; } + .emoji-heavy_check_mark { background-position: -580px -100px; } + .emoji-heavy_division_sign { background-position: -580px -120px; } + .emoji-heavy_dollar_sign { background-position: -580px -140px; } + .emoji-heavy_minus_sign { background-position: -580px -160px; } + .emoji-heavy_multiplication_x { background-position: -580px -180px; } + .emoji-heavy_plus_sign { background-position: -580px -200px; } + .emoji-helicopter { background-position: -580px -220px; } + .emoji-helmet_with_cross { background-position: -580px -240px; } + .emoji-herb { background-position: -580px -260px; } + .emoji-hibiscus { background-position: -580px -280px; } + .emoji-high_brightness { background-position: -580px -300px; } + .emoji-high_heel { background-position: -580px -320px; } + .emoji-hockey { background-position: -580px -340px; } + .emoji-hole { background-position: -580px -360px; } + .emoji-homes { background-position: -580px -380px; } + .emoji-honey_pot { background-position: -580px -400px; } + .emoji-horse { background-position: -580px -420px; } + .emoji-horse_racing { background-position: -580px -440px; } + .emoji-horse_racing_tone1 { background-position: -580px -460px; } + .emoji-horse_racing_tone2 { background-position: -580px -480px; } + .emoji-horse_racing_tone3 { background-position: -580px -500px; } + .emoji-horse_racing_tone4 { background-position: -580px -520px; } + .emoji-horse_racing_tone5 { background-position: -580px -540px; } + .emoji-hospital { background-position: -580px -560px; } + .emoji-hot_pepper { background-position: 0 -580px; } + .emoji-hotdog { background-position: -20px -580px; } + .emoji-hotel { background-position: -40px -580px; } + .emoji-hotsprings { background-position: -60px -580px; } + .emoji-hourglass { background-position: -80px -580px; } + .emoji-hourglass_flowing_sand { background-position: -100px -580px; } + .emoji-house { background-position: -120px -580px; } + .emoji-house_abandoned { background-position: -140px -580px; } + .emoji-house_with_garden { background-position: -160px -580px; } + .emoji-hugging { background-position: -180px -580px; } + .emoji-hushed { background-position: -200px -580px; } + .emoji-ice_cream { background-position: -220px -580px; } + .emoji-ice_skate { background-position: -240px -580px; } + .emoji-icecream { background-position: -260px -580px; } + .emoji-id { background-position: -280px -580px; } + .emoji-ideograph_advantage { background-position: -300px -580px; } + .emoji-imp { background-position: -320px -580px; } + .emoji-inbox_tray { background-position: -340px -580px; } + .emoji-incoming_envelope { background-position: -360px -580px; } + .emoji-information_desk_person { background-position: -380px -580px; } + .emoji-information_desk_person_tone1 { background-position: -400px -580px; } + .emoji-information_desk_person_tone2 { background-position: -420px -580px; } + .emoji-information_desk_person_tone3 { background-position: -440px -580px; } + .emoji-information_desk_person_tone4 { background-position: -460px -580px; } + .emoji-information_desk_person_tone5 { background-position: -480px -580px; } + .emoji-information_source { background-position: -500px -580px; } + .emoji-innocent { background-position: -520px -580px; } + .emoji-interrobang { background-position: -540px -580px; } + .emoji-iphone { background-position: -560px -580px; } + .emoji-island { background-position: -580px -580px; } + .emoji-izakaya_lantern { background-position: -600px 0; } + .emoji-jack_o_lantern { background-position: -600px -20px; } + .emoji-japan { background-position: -600px -40px; } + .emoji-japanese_castle { background-position: -600px -60px; } + .emoji-japanese_goblin { background-position: -600px -80px; } + .emoji-japanese_ogre { background-position: -600px -100px; } + .emoji-jeans { background-position: -600px -120px; } + .emoji-joy { background-position: -600px -140px; } + .emoji-joy_cat { background-position: -600px -160px; } + .emoji-joystick { background-position: -600px -180px; } + .emoji-juggling { background-position: -600px -200px; } + .emoji-juggling_tone1 { background-position: -600px -220px; } + .emoji-juggling_tone2 { background-position: -600px -240px; } + .emoji-juggling_tone3 { background-position: -600px -260px; } + .emoji-juggling_tone4 { background-position: -600px -280px; } + .emoji-juggling_tone5 { background-position: -600px -300px; } + .emoji-kaaba { background-position: -600px -320px; } + .emoji-key { background-position: -600px -340px; } + .emoji-key2 { background-position: -600px -360px; } + .emoji-keyboard { background-position: -600px -380px; } + .emoji-kimono { background-position: -600px -400px; } + .emoji-kiss { background-position: -600px -420px; } + .emoji-kiss_mm { background-position: -600px -440px; } + .emoji-kiss_ww { background-position: -600px -460px; } + .emoji-kissing { background-position: -600px -480px; } + .emoji-kissing_cat { background-position: -600px -500px; } + .emoji-kissing_closed_eyes { background-position: -600px -520px; } + .emoji-kissing_heart { background-position: -600px -540px; } + .emoji-kissing_smiling_eyes { background-position: -600px -560px; } + .emoji-kiwi { background-position: -600px -580px; } + .emoji-knife { background-position: 0 -600px; } + .emoji-koala { background-position: -20px -600px; } + .emoji-koko { background-position: -40px -600px; } + .emoji-label { background-position: -60px -600px; } + .emoji-large_blue_circle { background-position: -80px -600px; } + .emoji-large_blue_diamond { background-position: -100px -600px; } + .emoji-large_orange_diamond { background-position: -120px -600px; } + .emoji-last_quarter_moon { background-position: -140px -600px; } + .emoji-last_quarter_moon_with_face { background-position: -160px -600px; } + .emoji-laughing { background-position: -180px -600px; } + .emoji-leaves { background-position: -200px -600px; } + .emoji-ledger { background-position: -220px -600px; } + .emoji-left_facing_fist { background-position: -240px -600px; } + .emoji-left_facing_fist_tone1 { background-position: -260px -600px; } + .emoji-left_facing_fist_tone2 { background-position: -280px -600px; } + .emoji-left_facing_fist_tone3 { background-position: -300px -600px; } + .emoji-left_facing_fist_tone4 { background-position: -320px -600px; } + .emoji-left_facing_fist_tone5 { background-position: -340px -600px; } + .emoji-left_luggage { background-position: -360px -600px; } + .emoji-left_right_arrow { background-position: -380px -600px; } + .emoji-leftwards_arrow_with_hook { background-position: -400px -600px; } + .emoji-lemon { background-position: -420px -600px; } + .emoji-leo { background-position: -440px -600px; } + .emoji-leopard { background-position: -460px -600px; } + .emoji-level_slider { background-position: -480px -600px; } + .emoji-levitate { background-position: -500px -600px; } + .emoji-libra { background-position: -520px -600px; } + .emoji-lifter { background-position: -540px -600px; } + .emoji-lifter_tone1 { background-position: -560px -600px; } + .emoji-lifter_tone2 { background-position: -580px -600px; } + .emoji-lifter_tone3 { background-position: -600px -600px; } + .emoji-lifter_tone4 { background-position: -620px 0; } + .emoji-lifter_tone5 { background-position: -620px -20px; } + .emoji-light_rail { background-position: -620px -40px; } + .emoji-link { background-position: -620px -60px; } + .emoji-lion_face { background-position: -620px -80px; } + .emoji-lips { background-position: -620px -100px; } + .emoji-lipstick { background-position: -620px -120px; } + .emoji-lizard { background-position: -620px -140px; } + .emoji-lock { background-position: -620px -160px; } + .emoji-lock_with_ink_pen { background-position: -620px -180px; } + .emoji-lollipop { background-position: -620px -200px; } + .emoji-loop { background-position: -620px -220px; } + .emoji-loud_sound { background-position: -620px -240px; } + .emoji-loudspeaker { background-position: -620px -260px; } + .emoji-love_hotel { background-position: -620px -280px; } + .emoji-love_letter { background-position: -620px -300px; } + .emoji-low_brightness { background-position: -620px -320px; } + .emoji-lying_face { background-position: -620px -340px; } + .emoji-m { background-position: -620px -360px; } + .emoji-mag { background-position: -620px -380px; } + .emoji-mag_right { background-position: -620px -400px; } + .emoji-mahjong { background-position: -620px -420px; } + .emoji-mailbox { background-position: -620px -440px; } + .emoji-mailbox_closed { background-position: -620px -460px; } + .emoji-mailbox_with_mail { background-position: -620px -480px; } + .emoji-mailbox_with_no_mail { background-position: -620px -500px; } + .emoji-man { background-position: -620px -520px; } + .emoji-man_dancing { background-position: -620px -540px; } + .emoji-man_dancing_tone1 { background-position: -620px -560px; } + .emoji-man_dancing_tone2 { background-position: -620px -580px; } + .emoji-man_dancing_tone3 { background-position: -620px -600px; } + .emoji-man_dancing_tone4 { background-position: 0 -620px; } + .emoji-man_dancing_tone5 { background-position: -20px -620px; } + .emoji-man_in_tuxedo { background-position: -40px -620px; } + .emoji-man_in_tuxedo_tone1 { background-position: -60px -620px; } + .emoji-man_in_tuxedo_tone2 { background-position: -80px -620px; } + .emoji-man_in_tuxedo_tone3 { background-position: -100px -620px; } + .emoji-man_in_tuxedo_tone4 { background-position: -120px -620px; } + .emoji-man_in_tuxedo_tone5 { background-position: -140px -620px; } + .emoji-man_tone1 { background-position: -160px -620px; } + .emoji-man_tone2 { background-position: -180px -620px; } + .emoji-man_tone3 { background-position: -200px -620px; } + .emoji-man_tone4 { background-position: -220px -620px; } + .emoji-man_tone5 { background-position: -240px -620px; } + .emoji-man_with_gua_pi_mao { background-position: -260px -620px; } + .emoji-man_with_gua_pi_mao_tone1 { background-position: -280px -620px; } + .emoji-man_with_gua_pi_mao_tone2 { background-position: -300px -620px; } + .emoji-man_with_gua_pi_mao_tone3 { background-position: -320px -620px; } + .emoji-man_with_gua_pi_mao_tone4 { background-position: -340px -620px; } + .emoji-man_with_gua_pi_mao_tone5 { background-position: -360px -620px; } + .emoji-man_with_turban { background-position: -380px -620px; } + .emoji-man_with_turban_tone1 { background-position: -400px -620px; } + .emoji-man_with_turban_tone2 { background-position: -420px -620px; } + .emoji-man_with_turban_tone3 { background-position: -440px -620px; } + .emoji-man_with_turban_tone4 { background-position: -460px -620px; } + .emoji-man_with_turban_tone5 { background-position: -480px -620px; } + .emoji-mans_shoe { background-position: -500px -620px; } + .emoji-map { background-position: -520px -620px; } + .emoji-maple_leaf { background-position: -540px -620px; } + .emoji-martial_arts_uniform { background-position: -560px -620px; } + .emoji-mask { background-position: -580px -620px; } + .emoji-massage { background-position: -600px -620px; } + .emoji-massage_tone1 { background-position: -620px -620px; } + .emoji-massage_tone2 { background-position: -640px 0; } + .emoji-massage_tone3 { background-position: -640px -20px; } + .emoji-massage_tone4 { background-position: -640px -40px; } + .emoji-massage_tone5 { background-position: -640px -60px; } + .emoji-meat_on_bone { background-position: -640px -80px; } + .emoji-medal { background-position: -640px -100px; } + .emoji-mega { background-position: -640px -120px; } + .emoji-melon { background-position: -640px -140px; } + .emoji-menorah { background-position: -640px -160px; } + .emoji-mens { background-position: -640px -180px; } + .emoji-metal { background-position: -640px -200px; } + .emoji-metal_tone1 { background-position: -640px -220px; } + .emoji-metal_tone2 { background-position: -640px -240px; } + .emoji-metal_tone3 { background-position: -640px -260px; } + .emoji-metal_tone4 { background-position: -640px -280px; } + .emoji-metal_tone5 { background-position: -640px -300px; } + .emoji-metro { background-position: -640px -320px; } + .emoji-microphone { background-position: -640px -340px; } + .emoji-microphone2 { background-position: -640px -360px; } + .emoji-microscope { background-position: -640px -380px; } + .emoji-middle_finger { background-position: -640px -400px; } + .emoji-middle_finger_tone1 { background-position: -640px -420px; } + .emoji-middle_finger_tone2 { background-position: -640px -440px; } + .emoji-middle_finger_tone3 { background-position: -640px -460px; } + .emoji-middle_finger_tone4 { background-position: -640px -480px; } + .emoji-middle_finger_tone5 { background-position: -640px -500px; } + .emoji-military_medal { background-position: -640px -520px; } + .emoji-milk { background-position: -640px -540px; } + .emoji-milky_way { background-position: -640px -560px; } + .emoji-minibus { background-position: -640px -580px; } + .emoji-minidisc { background-position: -640px -600px; } + .emoji-mobile_phone_off { background-position: -640px -620px; } + .emoji-money_mouth { background-position: 0 -640px; } + .emoji-money_with_wings { background-position: -20px -640px; } + .emoji-moneybag { background-position: -40px -640px; } + .emoji-monkey { background-position: -60px -640px; } + .emoji-monkey_face { background-position: -80px -640px; } + .emoji-monorail { background-position: -100px -640px; } + .emoji-mortar_board { background-position: -120px -640px; } + .emoji-mosque { background-position: -140px -640px; } + .emoji-motor_scooter { background-position: -160px -640px; } + .emoji-motorboat { background-position: -180px -640px; } + .emoji-motorcycle { background-position: -200px -640px; } + .emoji-motorway { background-position: -220px -640px; } + .emoji-mount_fuji { background-position: -240px -640px; } + .emoji-mountain { background-position: -260px -640px; } + .emoji-mountain_bicyclist { background-position: -280px -640px; } + .emoji-mountain_bicyclist_tone1 { background-position: -300px -640px; } + .emoji-mountain_bicyclist_tone2 { background-position: -320px -640px; } + .emoji-mountain_bicyclist_tone3 { background-position: -340px -640px; } + .emoji-mountain_bicyclist_tone4 { background-position: -360px -640px; } + .emoji-mountain_bicyclist_tone5 { background-position: -380px -640px; } + .emoji-mountain_cableway { background-position: -400px -640px; } + .emoji-mountain_railway { background-position: -420px -640px; } + .emoji-mountain_snow { background-position: -440px -640px; } + .emoji-mouse { background-position: -460px -640px; } + .emoji-mouse2 { background-position: -480px -640px; } + .emoji-mouse_three_button { background-position: -500px -640px; } + .emoji-movie_camera { background-position: -520px -640px; } + .emoji-moyai { background-position: -540px -640px; } + .emoji-mrs_claus { background-position: -560px -640px; } + .emoji-mrs_claus_tone1 { background-position: -580px -640px; } + .emoji-mrs_claus_tone2 { background-position: -600px -640px; } + .emoji-mrs_claus_tone3 { background-position: -620px -640px; } + .emoji-mrs_claus_tone4 { background-position: -640px -640px; } + .emoji-mrs_claus_tone5 { background-position: -660px 0; } + .emoji-muscle { background-position: -660px -20px; } + .emoji-muscle_tone1 { background-position: -660px -40px; } + .emoji-muscle_tone2 { background-position: -660px -60px; } + .emoji-muscle_tone3 { background-position: -660px -80px; } + .emoji-muscle_tone4 { background-position: -660px -100px; } + .emoji-muscle_tone5 { background-position: -660px -120px; } + .emoji-mushroom { background-position: -660px -140px; } + .emoji-musical_keyboard { background-position: -660px -160px; } + .emoji-musical_note { background-position: -660px -180px; } + .emoji-musical_score { background-position: -660px -200px; } + .emoji-mute { background-position: -660px -220px; } + .emoji-nail_care { background-position: -660px -240px; } + .emoji-nail_care_tone1 { background-position: -660px -260px; } + .emoji-nail_care_tone2 { background-position: -660px -280px; } + .emoji-nail_care_tone3 { background-position: -660px -300px; } + .emoji-nail_care_tone4 { background-position: -660px -320px; } + .emoji-nail_care_tone5 { background-position: -660px -340px; } + .emoji-name_badge { background-position: -660px -360px; } + .emoji-nauseated_face { background-position: -660px -380px; } + .emoji-necktie { background-position: -660px -400px; } + .emoji-negative_squared_cross_mark { background-position: -660px -420px; } + .emoji-nerd { background-position: -660px -440px; } + .emoji-neutral_face { background-position: -660px -460px; } + .emoji-new { background-position: -660px -480px; } + .emoji-new_moon { background-position: -660px -500px; } + .emoji-new_moon_with_face { background-position: -660px -520px; } + .emoji-newspaper { background-position: -660px -540px; } + .emoji-newspaper2 { background-position: -660px -560px; } + .emoji-ng { background-position: -660px -580px; } + .emoji-night_with_stars { background-position: -660px -600px; } + .emoji-nine { background-position: -660px -620px; } + .emoji-no_bell { background-position: -660px -640px; } + .emoji-no_bicycles { background-position: 0 -660px; } + .emoji-no_entry { background-position: -20px -660px; } + .emoji-no_entry_sign { background-position: -40px -660px; } + .emoji-no_good { background-position: -60px -660px; } + .emoji-no_good_tone1 { background-position: -80px -660px; } + .emoji-no_good_tone2 { background-position: -100px -660px; } + .emoji-no_good_tone3 { background-position: -120px -660px; } + .emoji-no_good_tone4 { background-position: -140px -660px; } + .emoji-no_good_tone5 { background-position: -160px -660px; } + .emoji-no_mobile_phones { background-position: -180px -660px; } + .emoji-no_mouth { background-position: -200px -660px; } + .emoji-no_pedestrians { background-position: -220px -660px; } + .emoji-no_smoking { background-position: -240px -660px; } + .emoji-non-potable_water { background-position: -260px -660px; } + .emoji-nose { background-position: -280px -660px; } + .emoji-nose_tone1 { background-position: -300px -660px; } + .emoji-nose_tone2 { background-position: -320px -660px; } + .emoji-nose_tone3 { background-position: -340px -660px; } + .emoji-nose_tone4 { background-position: -360px -660px; } + .emoji-nose_tone5 { background-position: -380px -660px; } + .emoji-notebook { background-position: -400px -660px; } + .emoji-notebook_with_decorative_cover { background-position: -420px -660px; } + .emoji-notepad_spiral { background-position: -440px -660px; } + .emoji-notes { background-position: -460px -660px; } + .emoji-nut_and_bolt { background-position: -480px -660px; } + .emoji-o { background-position: -500px -660px; } + .emoji-o2 { background-position: -520px -660px; } + .emoji-ocean { background-position: -540px -660px; } + .emoji-octagonal_sign { background-position: -560px -660px; } + .emoji-octopus { background-position: -580px -660px; } + .emoji-oden { background-position: -600px -660px; } + .emoji-office { background-position: -620px -660px; } + .emoji-oil { background-position: -640px -660px; } + .emoji-ok { background-position: -660px -660px; } + .emoji-ok_hand { background-position: -680px 0; } + .emoji-ok_hand_tone1 { background-position: -680px -20px; } + .emoji-ok_hand_tone2 { background-position: -680px -40px; } + .emoji-ok_hand_tone3 { background-position: -680px -60px; } + .emoji-ok_hand_tone4 { background-position: -680px -80px; } + .emoji-ok_hand_tone5 { background-position: -680px -100px; } + .emoji-ok_woman { background-position: -680px -120px; } + .emoji-ok_woman_tone1 { background-position: -680px -140px; } + .emoji-ok_woman_tone2 { background-position: -680px -160px; } + .emoji-ok_woman_tone3 { background-position: -680px -180px; } + .emoji-ok_woman_tone4 { background-position: -680px -200px; } + .emoji-ok_woman_tone5 { background-position: -680px -220px; } + .emoji-older_man { background-position: -680px -240px; } + .emoji-older_man_tone1 { background-position: -680px -260px; } + .emoji-older_man_tone2 { background-position: -680px -280px; } + .emoji-older_man_tone3 { background-position: -680px -300px; } + .emoji-older_man_tone4 { background-position: -680px -320px; } + .emoji-older_man_tone5 { background-position: -680px -340px; } + .emoji-older_woman { background-position: -680px -360px; } + .emoji-older_woman_tone1 { background-position: -680px -380px; } + .emoji-older_woman_tone2 { background-position: -680px -400px; } + .emoji-older_woman_tone3 { background-position: -680px -420px; } + .emoji-older_woman_tone4 { background-position: -680px -440px; } + .emoji-older_woman_tone5 { background-position: -680px -460px; } + .emoji-om_symbol { background-position: -680px -480px; } + .emoji-on { background-position: -680px -500px; } + .emoji-oncoming_automobile { background-position: -680px -520px; } + .emoji-oncoming_bus { background-position: -680px -540px; } + .emoji-oncoming_police_car { background-position: -680px -560px; } + .emoji-oncoming_taxi { background-position: -680px -580px; } + .emoji-one { background-position: -680px -600px; } + .emoji-open_file_folder { background-position: -680px -620px; } + .emoji-open_hands { background-position: -680px -640px; } + .emoji-open_hands_tone1 { background-position: -680px -660px; } + .emoji-open_hands_tone2 { background-position: 0 -680px; } + .emoji-open_hands_tone3 { background-position: -20px -680px; } + .emoji-open_hands_tone4 { background-position: -40px -680px; } + .emoji-open_hands_tone5 { background-position: -60px -680px; } + .emoji-open_mouth { background-position: -80px -680px; } + .emoji-ophiuchus { background-position: -100px -680px; } + .emoji-orange_book { background-position: -120px -680px; } + .emoji-orthodox_cross { background-position: -140px -680px; } + .emoji-outbox_tray { background-position: -160px -680px; } + .emoji-owl { background-position: -180px -680px; } + .emoji-ox { background-position: -200px -680px; } + .emoji-package { background-position: -220px -680px; } + .emoji-page_facing_up { background-position: -240px -680px; } + .emoji-page_with_curl { background-position: -260px -680px; } + .emoji-pager { background-position: -280px -680px; } + .emoji-paintbrush { background-position: -300px -680px; } + .emoji-palm_tree { background-position: -320px -680px; } + .emoji-pancakes { background-position: -340px -680px; } + .emoji-panda_face { background-position: -360px -680px; } + .emoji-paperclip { background-position: -380px -680px; } + .emoji-paperclips { background-position: -400px -680px; } + .emoji-park { background-position: -420px -680px; } + .emoji-parking { background-position: -440px -680px; } + .emoji-part_alternation_mark { background-position: -460px -680px; } + .emoji-partly_sunny { background-position: -480px -680px; } + .emoji-passport_control { background-position: -500px -680px; } + .emoji-pause_button { background-position: -520px -680px; } + .emoji-peace { background-position: -540px -680px; } + .emoji-peach { background-position: -560px -680px; } + .emoji-peanuts { background-position: -580px -680px; } + .emoji-pear { background-position: -600px -680px; } + .emoji-pen_ballpoint { background-position: -620px -680px; } + .emoji-pen_fountain { background-position: -640px -680px; } + .emoji-pencil { background-position: -660px -680px; } + .emoji-pencil2 { background-position: -680px -680px; } + .emoji-penguin { background-position: -700px 0; } + .emoji-pensive { background-position: -700px -20px; } + .emoji-performing_arts { background-position: -700px -40px; } + .emoji-persevere { background-position: -700px -60px; } + .emoji-person_frowning { background-position: -700px -80px; } + .emoji-person_frowning_tone1 { background-position: -700px -100px; } + .emoji-person_frowning_tone2 { background-position: -700px -120px; } + .emoji-person_frowning_tone3 { background-position: -700px -140px; } + .emoji-person_frowning_tone4 { background-position: -700px -160px; } + .emoji-person_frowning_tone5 { background-position: -700px -180px; } + .emoji-person_with_blond_hair { background-position: -700px -200px; } + .emoji-person_with_blond_hair_tone1 { background-position: -700px -220px; } + .emoji-person_with_blond_hair_tone2 { background-position: -700px -240px; } + .emoji-person_with_blond_hair_tone3 { background-position: -700px -260px; } + .emoji-person_with_blond_hair_tone4 { background-position: -700px -280px; } + .emoji-person_with_blond_hair_tone5 { background-position: -700px -300px; } + .emoji-person_with_pouting_face { background-position: -700px -320px; } + .emoji-person_with_pouting_face_tone1 { background-position: -700px -340px; } + .emoji-person_with_pouting_face_tone2 { background-position: -700px -360px; } + .emoji-person_with_pouting_face_tone3 { background-position: -700px -380px; } + .emoji-person_with_pouting_face_tone4 { background-position: -700px -400px; } + .emoji-person_with_pouting_face_tone5 { background-position: -700px -420px; } + .emoji-pick { background-position: -700px -440px; } + .emoji-pig { background-position: -700px -460px; } + .emoji-pig2 { background-position: -700px -480px; } + .emoji-pig_nose { background-position: -700px -500px; } + .emoji-pill { background-position: -700px -520px; } + .emoji-pineapple { background-position: -700px -540px; } + .emoji-ping_pong { background-position: -700px -560px; } + .emoji-pisces { background-position: -700px -580px; } + .emoji-pizza { background-position: -700px -600px; } + .emoji-place_of_worship { background-position: -700px -620px; } + .emoji-play_pause { background-position: -700px -640px; } + .emoji-point_down { background-position: -700px -660px; } + .emoji-point_down_tone1 { background-position: -700px -680px; } + .emoji-point_down_tone2 { background-position: 0 -700px; } + .emoji-point_down_tone3 { background-position: -20px -700px; } + .emoji-point_down_tone4 { background-position: -40px -700px; } + .emoji-point_down_tone5 { background-position: -60px -700px; } + .emoji-point_left { background-position: -80px -700px; } + .emoji-point_left_tone1 { background-position: -100px -700px; } + .emoji-point_left_tone2 { background-position: -120px -700px; } + .emoji-point_left_tone3 { background-position: -140px -700px; } + .emoji-point_left_tone4 { background-position: -160px -700px; } + .emoji-point_left_tone5 { background-position: -180px -700px; } + .emoji-point_right { background-position: -200px -700px; } + .emoji-point_right_tone1 { background-position: -220px -700px; } + .emoji-point_right_tone2 { background-position: -240px -700px; } + .emoji-point_right_tone3 { background-position: -260px -700px; } + .emoji-point_right_tone4 { background-position: -280px -700px; } + .emoji-point_right_tone5 { background-position: -300px -700px; } + .emoji-point_up { background-position: -320px -700px; } + .emoji-point_up_2 { background-position: -340px -700px; } + .emoji-point_up_2_tone1 { background-position: -360px -700px; } + .emoji-point_up_2_tone2 { background-position: -380px -700px; } + .emoji-point_up_2_tone3 { background-position: -400px -700px; } + .emoji-point_up_2_tone4 { background-position: -420px -700px; } + .emoji-point_up_2_tone5 { background-position: -440px -700px; } + .emoji-point_up_tone1 { background-position: -460px -700px; } + .emoji-point_up_tone2 { background-position: -480px -700px; } + .emoji-point_up_tone3 { background-position: -500px -700px; } + .emoji-point_up_tone4 { background-position: -520px -700px; } + .emoji-point_up_tone5 { background-position: -540px -700px; } + .emoji-police_car { background-position: -560px -700px; } + .emoji-poodle { background-position: -580px -700px; } + .emoji-poop { background-position: -600px -700px; } + .emoji-popcorn { background-position: -620px -700px; } + .emoji-post_office { background-position: -640px -700px; } + .emoji-postal_horn { background-position: -660px -700px; } + .emoji-postbox { background-position: -680px -700px; } + .emoji-potable_water { background-position: -700px -700px; } + .emoji-potato { background-position: -720px 0; } + .emoji-pouch { background-position: -720px -20px; } + .emoji-poultry_leg { background-position: -720px -40px; } + .emoji-pound { background-position: -720px -60px; } + .emoji-pouting_cat { background-position: -720px -80px; } + .emoji-pray { background-position: -720px -100px; } + .emoji-pray_tone1 { background-position: -720px -120px; } + .emoji-pray_tone2 { background-position: -720px -140px; } + .emoji-pray_tone3 { background-position: -720px -160px; } + .emoji-pray_tone4 { background-position: -720px -180px; } + .emoji-pray_tone5 { background-position: -720px -200px; } + .emoji-prayer_beads { background-position: -720px -220px; } + .emoji-pregnant_woman { background-position: -720px -240px; } + .emoji-pregnant_woman_tone1 { background-position: -720px -260px; } + .emoji-pregnant_woman_tone2 { background-position: -720px -280px; } + .emoji-pregnant_woman_tone3 { background-position: -720px -300px; } + .emoji-pregnant_woman_tone4 { background-position: -720px -320px; } + .emoji-pregnant_woman_tone5 { background-position: -720px -340px; } + .emoji-prince { background-position: -720px -360px; } + .emoji-prince_tone1 { background-position: -720px -380px; } + .emoji-prince_tone2 { background-position: -720px -400px; } + .emoji-prince_tone3 { background-position: -720px -420px; } + .emoji-prince_tone4 { background-position: -720px -440px; } + .emoji-prince_tone5 { background-position: -720px -460px; } + .emoji-princess { background-position: -720px -480px; } + .emoji-princess_tone1 { background-position: -720px -500px; } + .emoji-princess_tone2 { background-position: -720px -520px; } + .emoji-princess_tone3 { background-position: -720px -540px; } + .emoji-princess_tone4 { background-position: -720px -560px; } + .emoji-princess_tone5 { background-position: -720px -580px; } + .emoji-printer { background-position: -720px -600px; } + .emoji-projector { background-position: -720px -620px; } + .emoji-punch { background-position: -720px -640px; } + .emoji-punch_tone1 { background-position: -720px -660px; } + .emoji-punch_tone2 { background-position: -720px -680px; } + .emoji-punch_tone3 { background-position: -720px -700px; } + .emoji-punch_tone4 { background-position: 0 -720px; } + .emoji-punch_tone5 { background-position: -20px -720px; } + .emoji-purple_heart { background-position: -40px -720px; } + .emoji-purse { background-position: -60px -720px; } + .emoji-pushpin { background-position: -80px -720px; } + .emoji-put_litter_in_its_place { background-position: -100px -720px; } + .emoji-question { background-position: -120px -720px; } + .emoji-rabbit { background-position: -140px -720px; } + .emoji-rabbit2 { background-position: -160px -720px; } + .emoji-race_car { background-position: -180px -720px; } + .emoji-racehorse { background-position: -200px -720px; } + .emoji-radio { background-position: -220px -720px; } + .emoji-radio_button { background-position: -240px -720px; } + .emoji-radioactive { background-position: -260px -720px; } + .emoji-rage { background-position: -280px -720px; } + .emoji-railway_car { background-position: -300px -720px; } + .emoji-railway_track { background-position: -320px -720px; } + .emoji-rainbow { background-position: -340px -720px; } + .emoji-raised_back_of_hand { background-position: -360px -720px; } + .emoji-raised_back_of_hand_tone1 { background-position: -380px -720px; } + .emoji-raised_back_of_hand_tone2 { background-position: -400px -720px; } + .emoji-raised_back_of_hand_tone3 { background-position: -420px -720px; } + .emoji-raised_back_of_hand_tone4 { background-position: -440px -720px; } + .emoji-raised_back_of_hand_tone5 { background-position: -460px -720px; } + .emoji-raised_hand { background-position: -480px -720px; } + .emoji-raised_hand_tone1 { background-position: -500px -720px; } + .emoji-raised_hand_tone2 { background-position: -520px -720px; } + .emoji-raised_hand_tone3 { background-position: -540px -720px; } + .emoji-raised_hand_tone4 { background-position: -560px -720px; } + .emoji-raised_hand_tone5 { background-position: -580px -720px; } + .emoji-raised_hands { background-position: -600px -720px; } + .emoji-raised_hands_tone1 { background-position: -620px -720px; } + .emoji-raised_hands_tone2 { background-position: -640px -720px; } + .emoji-raised_hands_tone3 { background-position: -660px -720px; } + .emoji-raised_hands_tone4 { background-position: -680px -720px; } + .emoji-raised_hands_tone5 { background-position: -700px -720px; } + .emoji-raising_hand { background-position: -720px -720px; } + .emoji-raising_hand_tone1 { background-position: -740px 0; } + .emoji-raising_hand_tone2 { background-position: -740px -20px; } + .emoji-raising_hand_tone3 { background-position: -740px -40px; } + .emoji-raising_hand_tone4 { background-position: -740px -60px; } + .emoji-raising_hand_tone5 { background-position: -740px -80px; } + .emoji-ram { background-position: -740px -100px; } + .emoji-ramen { background-position: -740px -120px; } + .emoji-rat { background-position: -740px -140px; } + .emoji-record_button { background-position: -740px -160px; } + .emoji-recycle { background-position: -740px -180px; } + .emoji-red_car { background-position: -740px -200px; } + .emoji-red_circle { background-position: -740px -220px; } + .emoji-registered { background-position: -740px -240px; } + .emoji-relaxed { background-position: -740px -260px; } + .emoji-relieved { background-position: -740px -280px; } + .emoji-reminder_ribbon { background-position: -740px -300px; } + .emoji-repeat { background-position: -740px -320px; } + .emoji-repeat_one { background-position: -740px -340px; } + .emoji-restroom { background-position: -740px -360px; } + .emoji-revolving_hearts { background-position: -740px -380px; } + .emoji-rewind { background-position: -740px -400px; } + .emoji-rhino { background-position: -740px -420px; } + .emoji-ribbon { background-position: -740px -440px; } + .emoji-rice { background-position: -740px -460px; } + .emoji-rice_ball { background-position: -740px -480px; } + .emoji-rice_cracker { background-position: -740px -500px; } + .emoji-rice_scene { background-position: -740px -520px; } + .emoji-right_facing_fist { background-position: -740px -540px; } + .emoji-right_facing_fist_tone1 { background-position: -740px -560px; } + .emoji-right_facing_fist_tone2 { background-position: -740px -580px; } + .emoji-right_facing_fist_tone3 { background-position: -740px -600px; } + .emoji-right_facing_fist_tone4 { background-position: -740px -620px; } + .emoji-right_facing_fist_tone5 { background-position: -740px -640px; } + .emoji-ring { background-position: -740px -660px; } + .emoji-robot { background-position: -740px -680px; } + .emoji-rocket { background-position: -740px -700px; } + .emoji-rofl { background-position: -740px -720px; } + .emoji-roller_coaster { background-position: 0 -740px; } + .emoji-rolling_eyes { background-position: -20px -740px; } + .emoji-rooster { background-position: -40px -740px; } + .emoji-rose { background-position: -60px -740px; } + .emoji-rosette { background-position: -80px -740px; } + .emoji-rotating_light { background-position: -100px -740px; } + .emoji-round_pushpin { background-position: -120px -740px; } + .emoji-rowboat { background-position: -140px -740px; } + .emoji-rowboat_tone1 { background-position: -160px -740px; } + .emoji-rowboat_tone2 { background-position: -180px -740px; } + .emoji-rowboat_tone3 { background-position: -200px -740px; } + .emoji-rowboat_tone4 { background-position: -220px -740px; } + .emoji-rowboat_tone5 { background-position: -240px -740px; } + .emoji-rugby_football { background-position: -260px -740px; } + .emoji-runner { background-position: -280px -740px; } + .emoji-runner_tone1 { background-position: -300px -740px; } + .emoji-runner_tone2 { background-position: -320px -740px; } + .emoji-runner_tone3 { background-position: -340px -740px; } + .emoji-runner_tone4 { background-position: -360px -740px; } + .emoji-runner_tone5 { background-position: -380px -740px; } + .emoji-running_shirt_with_sash { background-position: -400px -740px; } + .emoji-sa { background-position: -420px -740px; } + .emoji-sagittarius { background-position: -440px -740px; } + .emoji-sailboat { background-position: -460px -740px; } + .emoji-sake { background-position: -480px -740px; } + .emoji-salad { background-position: -500px -740px; } + .emoji-sandal { background-position: -520px -740px; } + .emoji-santa { background-position: -540px -740px; } + .emoji-santa_tone1 { background-position: -560px -740px; } + .emoji-santa_tone2 { background-position: -580px -740px; } + .emoji-santa_tone3 { background-position: -600px -740px; } + .emoji-santa_tone4 { background-position: -620px -740px; } + .emoji-santa_tone5 { background-position: -640px -740px; } + .emoji-satellite { background-position: -660px -740px; } + .emoji-satellite_orbital { background-position: -680px -740px; } + .emoji-saxophone { background-position: -700px -740px; } + .emoji-scales { background-position: -720px -740px; } + .emoji-school { background-position: -740px -740px; } + .emoji-school_satchel { background-position: -760px 0; } + .emoji-scissors { background-position: -760px -20px; } + .emoji-scooter { background-position: -760px -40px; } + .emoji-scorpion { background-position: -760px -60px; } + .emoji-scorpius { background-position: -760px -80px; } + .emoji-scream { background-position: -760px -100px; } + .emoji-scream_cat { background-position: -760px -120px; } + .emoji-scroll { background-position: -760px -140px; } + .emoji-seat { background-position: -760px -160px; } + .emoji-second_place { background-position: -760px -180px; } + .emoji-secret { background-position: -760px -200px; } + .emoji-see_no_evil { background-position: -760px -220px; } + .emoji-seedling { background-position: -760px -240px; } + .emoji-selfie { background-position: -760px -260px; } + .emoji-selfie_tone1 { background-position: -760px -280px; } + .emoji-selfie_tone2 { background-position: -760px -300px; } + .emoji-selfie_tone3 { background-position: -760px -320px; } + .emoji-selfie_tone4 { background-position: -760px -340px; } + .emoji-selfie_tone5 { background-position: -760px -360px; } + .emoji-seven { background-position: -760px -380px; } + .emoji-shallow_pan_of_food { background-position: -760px -400px; } + .emoji-shamrock { background-position: -760px -420px; } + .emoji-shark { background-position: -760px -440px; } + .emoji-shaved_ice { background-position: -760px -460px; } + .emoji-sheep { background-position: -760px -480px; } + .emoji-shell { background-position: -760px -500px; } + .emoji-shield { background-position: -760px -520px; } + .emoji-shinto_shrine { background-position: -760px -540px; } + .emoji-ship { background-position: -760px -560px; } + .emoji-shirt { background-position: -760px -580px; } + .emoji-shopping_bags { background-position: -760px -600px; } + .emoji-shopping_cart { background-position: -760px -620px; } + .emoji-shower { background-position: -760px -640px; } + .emoji-shrimp { background-position: -760px -660px; } + .emoji-shrug { background-position: -760px -680px; } + .emoji-shrug_tone1 { background-position: -760px -700px; } + .emoji-shrug_tone2 { background-position: -760px -720px; } + .emoji-shrug_tone3 { background-position: -760px -740px; } + .emoji-shrug_tone4 { background-position: 0 -760px; } + .emoji-shrug_tone5 { background-position: -20px -760px; } + .emoji-signal_strength { background-position: -40px -760px; } + .emoji-six { background-position: -60px -760px; } + .emoji-six_pointed_star { background-position: -80px -760px; } + .emoji-ski { background-position: -100px -760px; } + .emoji-skier { background-position: -120px -760px; } + .emoji-skull { background-position: -140px -760px; } + .emoji-skull_crossbones { background-position: -160px -760px; } + .emoji-sleeping { background-position: -180px -760px; } + .emoji-sleeping_accommodation { background-position: -200px -760px; } + .emoji-sleepy { background-position: -220px -760px; } + .emoji-slight_frown { background-position: -240px -760px; } + .emoji-slight_smile { background-position: -260px -760px; } + .emoji-slot_machine { background-position: -280px -760px; } + .emoji-small_blue_diamond { background-position: -300px -760px; } + .emoji-small_orange_diamond { background-position: -320px -760px; } + .emoji-small_red_triangle { background-position: -340px -760px; } + .emoji-small_red_triangle_down { background-position: -360px -760px; } + .emoji-smile { background-position: -380px -760px; } + .emoji-smile_cat { background-position: -400px -760px; } + .emoji-smiley { background-position: -420px -760px; } + .emoji-smiley_cat { background-position: -440px -760px; } + .emoji-smiling_imp { background-position: -460px -760px; } + .emoji-smirk { background-position: -480px -760px; } + .emoji-smirk_cat { background-position: -500px -760px; } + .emoji-smoking { background-position: -520px -760px; } + .emoji-snail { background-position: -540px -760px; } + .emoji-snake { background-position: -560px -760px; } + .emoji-sneezing_face { background-position: -580px -760px; } + .emoji-snowboarder { background-position: -600px -760px; } + .emoji-snowflake { background-position: -620px -760px; } + .emoji-snowman { background-position: -640px -760px; } + .emoji-snowman2 { background-position: -660px -760px; } + .emoji-sob { background-position: -680px -760px; } + .emoji-soccer { background-position: -700px -760px; } + .emoji-soon { background-position: -720px -760px; } + .emoji-sos { background-position: -740px -760px; } + .emoji-sound { background-position: -760px -760px; } + .emoji-space_invader { background-position: -780px 0; } + .emoji-spades { background-position: -780px -20px; } + .emoji-spaghetti { background-position: -780px -40px; } + .emoji-sparkle { background-position: -780px -60px; } + .emoji-sparkler { background-position: -780px -80px; } + .emoji-sparkles { background-position: -780px -100px; } + .emoji-sparkling_heart { background-position: -780px -120px; } + .emoji-speak_no_evil { background-position: -780px -140px; } + .emoji-speaker { background-position: -780px -160px; } + .emoji-speaking_head { background-position: -780px -180px; } + .emoji-speech_balloon { background-position: -780px -200px; } + .emoji-speech_left { background-position: -780px -220px; } + .emoji-speedboat { background-position: -780px -240px; } + .emoji-spider { background-position: -780px -260px; } + .emoji-spider_web { background-position: -780px -280px; } + .emoji-spoon { background-position: -780px -300px; } + .emoji-spy { background-position: -780px -320px; } + .emoji-spy_tone1 { background-position: -780px -340px; } + .emoji-spy_tone2 { background-position: -780px -360px; } + .emoji-spy_tone3 { background-position: -780px -380px; } + .emoji-spy_tone4 { background-position: -780px -400px; } + .emoji-spy_tone5 { background-position: -780px -420px; } + .emoji-squid { background-position: -780px -440px; } + .emoji-stadium { background-position: -780px -460px; } + .emoji-star { background-position: -780px -480px; } + .emoji-star2 { background-position: -780px -500px; } + .emoji-star_and_crescent { background-position: -780px -520px; } + .emoji-star_of_david { background-position: -780px -540px; } + .emoji-stars { background-position: -780px -560px; } + .emoji-station { background-position: -780px -580px; } + .emoji-statue_of_liberty { background-position: -780px -600px; } + .emoji-steam_locomotive { background-position: -780px -620px; } + .emoji-stew { background-position: -780px -640px; } + .emoji-stop_button { background-position: -780px -660px; } + .emoji-stopwatch { background-position: -780px -680px; } + .emoji-straight_ruler { background-position: -780px -700px; } + .emoji-strawberry { background-position: -780px -720px; } + .emoji-stuck_out_tongue { background-position: -780px -740px; } + .emoji-stuck_out_tongue_closed_eyes { background-position: -780px -760px; } + .emoji-stuck_out_tongue_winking_eye { background-position: 0 -780px; } + .emoji-stuffed_flatbread { background-position: -20px -780px; } + .emoji-sun_with_face { background-position: -40px -780px; } + .emoji-sunflower { background-position: -60px -780px; } + .emoji-sunglasses { background-position: -80px -780px; } + .emoji-sunny { background-position: -100px -780px; } + .emoji-sunrise { background-position: -120px -780px; } + .emoji-sunrise_over_mountains { background-position: -140px -780px; } + .emoji-surfer { background-position: -160px -780px; } + .emoji-surfer_tone1 { background-position: -180px -780px; } + .emoji-surfer_tone2 { background-position: -200px -780px; } + .emoji-surfer_tone3 { background-position: -220px -780px; } + .emoji-surfer_tone4 { background-position: -240px -780px; } + .emoji-surfer_tone5 { background-position: -260px -780px; } + .emoji-sushi { background-position: -280px -780px; } + .emoji-suspension_railway { background-position: -300px -780px; } + .emoji-sweat { background-position: -320px -780px; } + .emoji-sweat_drops { background-position: -340px -780px; } + .emoji-sweat_smile { background-position: -360px -780px; } + .emoji-sweet_potato { background-position: -380px -780px; } + .emoji-swimmer { background-position: -400px -780px; } + .emoji-swimmer_tone1 { background-position: -420px -780px; } + .emoji-swimmer_tone2 { background-position: -440px -780px; } + .emoji-swimmer_tone3 { background-position: -460px -780px; } + .emoji-swimmer_tone4 { background-position: -480px -780px; } + .emoji-swimmer_tone5 { background-position: -500px -780px; } + .emoji-symbols { background-position: -520px -780px; } + .emoji-synagogue { background-position: -540px -780px; } + .emoji-syringe { background-position: -560px -780px; } + .emoji-taco { background-position: -580px -780px; } + .emoji-tada { background-position: -600px -780px; } + .emoji-tanabata_tree { background-position: -620px -780px; } + .emoji-tangerine { background-position: -640px -780px; } + .emoji-taurus { background-position: -660px -780px; } + .emoji-taxi { background-position: -680px -780px; } + .emoji-tea { background-position: -700px -780px; } + .emoji-telephone { background-position: -720px -780px; } + .emoji-telephone_receiver { background-position: -740px -780px; } + .emoji-telescope { background-position: -760px -780px; } + .emoji-ten { background-position: -780px -780px; } + .emoji-tennis { background-position: -800px 0; } + .emoji-tent { background-position: -800px -20px; } + .emoji-thermometer { background-position: -800px -40px; } + .emoji-thermometer_face { background-position: -800px -60px; } + .emoji-thinking { background-position: -800px -80px; } + .emoji-third_place { background-position: -800px -100px; } + .emoji-thought_balloon { background-position: -800px -120px; } + .emoji-three { background-position: -800px -140px; } + .emoji-thumbsdown { background-position: -800px -160px; } + .emoji-thumbsdown_tone1 { background-position: -800px -180px; } + .emoji-thumbsdown_tone2 { background-position: -800px -200px; } + .emoji-thumbsdown_tone3 { background-position: -800px -220px; } + .emoji-thumbsdown_tone4 { background-position: -800px -240px; } + .emoji-thumbsdown_tone5 { background-position: -800px -260px; } + .emoji-thumbsup { background-position: -800px -280px; } + .emoji-thumbsup_tone1 { background-position: -800px -300px; } + .emoji-thumbsup_tone2 { background-position: -800px -320px; } + .emoji-thumbsup_tone3 { background-position: -800px -340px; } + .emoji-thumbsup_tone4 { background-position: -800px -360px; } + .emoji-thumbsup_tone5 { background-position: -800px -380px; } + .emoji-thunder_cloud_rain { background-position: -800px -400px; } + .emoji-ticket { background-position: -800px -420px; } + .emoji-tickets { background-position: -800px -440px; } + .emoji-tiger { background-position: -800px -460px; } + .emoji-tiger2 { background-position: -800px -480px; } + .emoji-timer { background-position: -800px -500px; } + .emoji-tired_face { background-position: -800px -520px; } + .emoji-tm { background-position: -800px -540px; } + .emoji-toilet { background-position: -800px -560px; } + .emoji-tokyo_tower { background-position: -800px -580px; } + .emoji-tomato { background-position: -800px -600px; } + .emoji-tone1 { background-position: -800px -620px; } + .emoji-tone2 { background-position: -800px -640px; } + .emoji-tone3 { background-position: -800px -660px; } + .emoji-tone4 { background-position: -800px -680px; } + .emoji-tone5 { background-position: -800px -700px; } + .emoji-tongue { background-position: -800px -720px; } + .emoji-tools { background-position: -800px -740px; } + .emoji-top { background-position: -800px -760px; } + .emoji-tophat { background-position: -800px -780px; } + .emoji-track_next { background-position: 0 -800px; } + .emoji-track_previous { background-position: -20px -800px; } + .emoji-trackball { background-position: -40px -800px; } + .emoji-tractor { background-position: -60px -800px; } + .emoji-traffic_light { background-position: -80px -800px; } + .emoji-train { background-position: -100px -800px; } + .emoji-train2 { background-position: -120px -800px; } + .emoji-tram { background-position: -140px -800px; } + .emoji-triangular_flag_on_post { background-position: -160px -800px; } + .emoji-triangular_ruler { background-position: -180px -800px; } + .emoji-trident { background-position: -200px -800px; } + .emoji-triumph { background-position: -220px -800px; } + .emoji-trolleybus { background-position: -240px -800px; } + .emoji-trophy { background-position: -260px -800px; } + .emoji-tropical_drink { background-position: -280px -800px; } + .emoji-tropical_fish { background-position: -300px -800px; } + .emoji-truck { background-position: -320px -800px; } + .emoji-trumpet { background-position: -340px -800px; } + .emoji-tulip { background-position: -360px -800px; } + .emoji-tumbler_glass { background-position: -380px -800px; } + .emoji-turkey { background-position: -400px -800px; } + .emoji-turtle { background-position: -420px -800px; } + .emoji-tv { background-position: -440px -800px; } + .emoji-twisted_rightwards_arrows { background-position: -460px -800px; } + .emoji-two { background-position: -480px -800px; } + .emoji-two_hearts { background-position: -500px -800px; } + .emoji-two_men_holding_hands { background-position: -520px -800px; } + .emoji-two_women_holding_hands { background-position: -540px -800px; } + .emoji-u5272 { background-position: -560px -800px; } + .emoji-u5408 { background-position: -580px -800px; } + .emoji-u55b6 { background-position: -600px -800px; } + .emoji-u6307 { background-position: -620px -800px; } + .emoji-u6708 { background-position: -640px -800px; } + .emoji-u6709 { background-position: -660px -800px; } + .emoji-u6e80 { background-position: -680px -800px; } + .emoji-u7121 { background-position: -700px -800px; } + .emoji-u7533 { background-position: -720px -800px; } + .emoji-u7981 { background-position: -740px -800px; } + .emoji-u7a7a { background-position: -760px -800px; } + .emoji-umbrella { background-position: -780px -800px; } + .emoji-umbrella2 { background-position: -800px -800px; } + .emoji-unamused { background-position: -820px 0; } + .emoji-underage { background-position: -820px -20px; } + .emoji-unicorn { background-position: -820px -40px; } + .emoji-unlock { background-position: -820px -60px; } + .emoji-up { background-position: -820px -80px; } + .emoji-upside_down { background-position: -820px -100px; } + .emoji-urn { background-position: -820px -120px; } + .emoji-v { background-position: -820px -140px; } + .emoji-v_tone1 { background-position: -820px -160px; } + .emoji-v_tone2 { background-position: -820px -180px; } + .emoji-v_tone3 { background-position: -820px -200px; } + .emoji-v_tone4 { background-position: -820px -220px; } + .emoji-v_tone5 { background-position: -820px -240px; } + .emoji-vertical_traffic_light { background-position: -820px -260px; } + .emoji-vhs { background-position: -820px -280px; } + .emoji-vibration_mode { background-position: -820px -300px; } + .emoji-video_camera { background-position: -820px -320px; } + .emoji-video_game { background-position: -820px -340px; } + .emoji-violin { background-position: -820px -360px; } + .emoji-virgo { background-position: -820px -380px; } + .emoji-volcano { background-position: -820px -400px; } + .emoji-volleyball { background-position: -820px -420px; } + .emoji-vs { background-position: -820px -440px; } + .emoji-vulcan { background-position: -820px -460px; } + .emoji-vulcan_tone1 { background-position: -820px -480px; } + .emoji-vulcan_tone2 { background-position: -820px -500px; } + .emoji-vulcan_tone3 { background-position: -820px -520px; } + .emoji-vulcan_tone4 { background-position: -820px -540px; } + .emoji-vulcan_tone5 { background-position: -820px -560px; } + .emoji-walking { background-position: -820px -580px; } + .emoji-walking_tone1 { background-position: -820px -600px; } + .emoji-walking_tone2 { background-position: -820px -620px; } + .emoji-walking_tone3 { background-position: -820px -640px; } + .emoji-walking_tone4 { background-position: -820px -660px; } + .emoji-walking_tone5 { background-position: -820px -680px; } + .emoji-waning_crescent_moon { background-position: -820px -700px; } + .emoji-waning_gibbous_moon { background-position: -820px -720px; } + .emoji-warning { background-position: -820px -740px; } + .emoji-wastebasket { background-position: -820px -760px; } + .emoji-watch { background-position: -820px -780px; } + .emoji-water_buffalo { background-position: -820px -800px; } + .emoji-water_polo { background-position: 0 -820px; } + .emoji-water_polo_tone1 { background-position: -20px -820px; } + .emoji-water_polo_tone2 { background-position: -40px -820px; } + .emoji-water_polo_tone3 { background-position: -60px -820px; } + .emoji-water_polo_tone4 { background-position: -80px -820px; } + .emoji-water_polo_tone5 { background-position: -100px -820px; } + .emoji-watermelon { background-position: -120px -820px; } + .emoji-wave { background-position: -140px -820px; } + .emoji-wave_tone1 { background-position: -160px -820px; } + .emoji-wave_tone2 { background-position: -180px -820px; } + .emoji-wave_tone3 { background-position: -200px -820px; } + .emoji-wave_tone4 { background-position: -220px -820px; } + .emoji-wave_tone5 { background-position: -240px -820px; } + .emoji-wavy_dash { background-position: -260px -820px; } + .emoji-waxing_crescent_moon { background-position: -280px -820px; } + .emoji-waxing_gibbous_moon { background-position: -300px -820px; } + .emoji-wc { background-position: -320px -820px; } + .emoji-weary { background-position: -340px -820px; } + .emoji-wedding { background-position: -360px -820px; } + .emoji-whale { background-position: -380px -820px; } + .emoji-whale2 { background-position: -400px -820px; } + .emoji-wheel_of_dharma { background-position: -420px -820px; } + .emoji-wheelchair { background-position: -440px -820px; } + .emoji-white_check_mark { background-position: -460px -820px; } + .emoji-white_circle { background-position: -480px -820px; } + .emoji-white_flower { background-position: -500px -820px; } + .emoji-white_large_square { background-position: -520px -820px; } + .emoji-white_medium_small_square { background-position: -540px -820px; } + .emoji-white_medium_square { background-position: -560px -820px; } + .emoji-white_small_square { background-position: -580px -820px; } + .emoji-white_square_button { background-position: -600px -820px; } + .emoji-white_sun_cloud { background-position: -620px -820px; } + .emoji-white_sun_rain_cloud { background-position: -640px -820px; } + .emoji-white_sun_small_cloud { background-position: -660px -820px; } + .emoji-wilted_rose { background-position: -680px -820px; } + .emoji-wind_blowing_face { background-position: -700px -820px; } + .emoji-wind_chime { background-position: -720px -820px; } + .emoji-wine_glass { background-position: -740px -820px; } + .emoji-wink { background-position: -760px -820px; } + .emoji-wolf { background-position: -780px -820px; } + .emoji-woman { background-position: -800px -820px; } + .emoji-woman_tone1 { background-position: -820px -820px; } + .emoji-woman_tone2 { background-position: -840px 0; } + .emoji-woman_tone3 { background-position: -840px -20px; } + .emoji-woman_tone4 { background-position: -840px -40px; } + .emoji-woman_tone5 { background-position: -840px -60px; } + .emoji-womans_clothes { background-position: -840px -80px; } + .emoji-womans_hat { background-position: -840px -100px; } + .emoji-womens { background-position: -840px -120px; } + .emoji-worried { background-position: -840px -140px; } + .emoji-wrench { background-position: -840px -160px; } + .emoji-wrestlers { background-position: -840px -180px; } + .emoji-wrestlers_tone1 { background-position: -840px -200px; } + .emoji-wrestlers_tone2 { background-position: -840px -220px; } + .emoji-wrestlers_tone3 { background-position: -840px -240px; } + .emoji-wrestlers_tone4 { background-position: -840px -260px; } + .emoji-wrestlers_tone5 { background-position: -840px -280px; } + .emoji-writing_hand { background-position: -840px -300px; } + .emoji-writing_hand_tone1 { background-position: -840px -320px; } + .emoji-writing_hand_tone2 { background-position: -840px -340px; } + .emoji-writing_hand_tone3 { background-position: -840px -360px; } + .emoji-writing_hand_tone4 { background-position: -840px -380px; } + .emoji-writing_hand_tone5 { background-position: -840px -400px; } + .emoji-x { background-position: -840px -420px; } + .emoji-yellow_heart { background-position: -840px -440px; } + .emoji-yen { background-position: -840px -460px; } + .emoji-yin_yang { background-position: -840px -480px; } + .emoji-yum { background-position: -840px -500px; } + .emoji-zap { background-position: -840px -520px; } + .emoji-zero { background-position: -840px -540px; } + .emoji-zipper_mouth { background-position: -840px -560px; } + .emoji-100 { background-position: -840px -580px; } @@ -5391,6 +7183,7 @@ height: 20px; width: 20px; + /* stylelint-disable media-feature-name-no-vendor-prefix */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), @@ -5400,4 +7193,5 @@ background-image: image-url('emoji@2x.png'); background-size: 860px 840px; } + /* stylelint-enable media-feature-name-no-vendor-prefix */ } diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss index 89029a58d1e..f4519841ce3 100644 --- a/app/assets/stylesheets/errors.scss +++ b/app/assets/stylesheets/errors.scss @@ -15,9 +15,9 @@ $header-color: #456; body { color: $body-color; text-align: center; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: auto; - font-size: .875rem; + font-size: 0.875rem; } h1 { @@ -105,7 +105,6 @@ a { } @include media-breakpoint-up(sm) { - li { display: inline-block; padding-bottom: 0; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 338a8c5497c..413e0dde535 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -68,6 +68,6 @@ @import 'framework/read_more'; @import 'framework/flex_grid'; @import 'framework/system_messages'; -@import "framework/spinner"; +@import 'framework/spinner'; @import 'framework/card'; @import 'framework/editor-lite'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 0eab86ff7ea..86e701604b5 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -179,7 +179,7 @@ &.user-authored { cursor: default; background-color: $gray-light; - border-color: $gray-200; + border-color: $gray-100; color: $gl-text-color-disabled; gl-emoji { diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index 534ada08b85..f7836213e5c 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -28,7 +28,7 @@ max-width: 300px; width: auto; background: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; box-shadow: 0 1px 2px 0 rgba($black, 0.1); border-radius: $border-radius-default; z-index: 999; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index f47d0cab31f..fd5b3f74c4a 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -171,7 +171,7 @@ @include btn-green; } - &.btn-inverted { + &.btn-inverted:not(.disabled):not(:disabled) { &.btn-success { @include btn-outline($white, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800); } @@ -501,18 +501,19 @@ // All disabled buttons, regardless of color, type, etc %disabled { - background-color: $gray-light !important; - border-color: $gray-200 !important; - color: $gl-text-color-disabled !important; - opacity: 1 !important; - cursor: default !important; + background-color: $gray-light; + border-color: $gray-100; + color: $gl-text-color-disabled; + opacity: 1; + text-decoration: none; + cursor: default; &.cursor-not-allowed { - cursor: not-allowed !important; + cursor: not-allowed; } i { - color: $gl-text-color-disabled !important; + color: $gl-text-color-disabled; } } @@ -526,6 +527,10 @@ fieldset[disabled] .btn, &:hover { @extend %disabled; } + + &.btn-link { + background-color: transparent; + } } [readonly] { diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 849ca4a79f8..1abb7a9c06f 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -396,35 +396,16 @@ img.emoji { 🚨 Do not use these classes — they are deprecated and being removed. 🚨 See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details. **/ -.prepend-top-5 { margin-top: 5px; } .prepend-top-10 { margin-top: 10px; } .prepend-top-15 { margin-top: 15px; } -.prepend-top-default { margin-top: $gl-padding !important; } -.prepend-top-16 { margin-top: 16px; } .prepend-top-20 { margin-top: 20px; } -.prepend-left-5 { margin-left: 5px; } -.prepend-left-10 { margin-left: 10px; } .prepend-left-15 { margin-left: 15px; } -.prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } -.prepend-left-32 { margin-left: 32px; } .prepend-left-64 { margin-left: 64px; } -.append-right-2 { margin-right: 2px; } -.append-right-4 { margin-right: 4px; } -.append-right-5 { margin-right: 5px; } -.append-right-10 { margin-right: 10px; } .append-right-15 { margin-right: 15px; } -.append-right-default { margin-right: $gl-padding; } .append-right-20 { margin-right: 20px; } -.append-right-32 { margin-right: 32px; } -.append-right-48 { margin-right: 48px; } -.prepend-right-32 { margin-right: 32px; } -.append-bottom-5 { margin-bottom: 5px; } .append-bottom-10 { margin-bottom: 10px; } -.append-bottom-15 { margin-bottom: 15px; } .append-bottom-20 { margin-bottom: 20px; } -.append-bottom-default { margin-bottom: $gl-padding; } -.prepend-bottom-32 { margin-bottom: 32px; } .ml-10 { margin-left: 4.5rem; } .inline { display: inline-block; } .center { text-align: center; } @@ -560,41 +541,6 @@ img.emoji { } } -.onboarding-helper-container { - bottom: 40px; - right: 40px; - font-size: $gl-font-size-small; - background: $gray-50; - width: 200px; - border-radius: 24px; - box-shadow: 0 2px 4px $issue-boards-card-shadow; - z-index: 10000; - - .collapsible { - max-height: 0; - transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); - } - - &.expanded { - border-bottom-right-radius: $border-radius-default; - border-bottom-left-radius: $border-radius-default; - - .collapsible { - max-height: 1000px; - transition: max-height 1s ease-in-out; - } - } - - .avatar { - border-color: darken($gray-normal, 10%); - - img { - width: 32px; - height: 32px; - } - } -} - .gl-font-sm { font-size: $gl-font-size-small; } .gl-font-lg { font-size: $gl-font-size-large; } .gl-font-base { font-size: $gl-font-size-14; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index e4bee01f61f..7004bcc121d 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -98,11 +98,11 @@ width: $contextual-sidebar-collapsed-width - 1px; .collapse-text, - .icon-angle-double-left { + .icon-chevron-double-lg-left { display: none; } - .icon-angle-double-right { + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -381,7 +381,7 @@ margin-right: 8px; } - .icon-angle-double-right { + .icon-chevron-double-lg-right { display: none; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 485a4879c43..32c276ea6d2 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -639,9 +639,12 @@ display: none; cursor: pointer; pointer-events: all; - right: 22px; - top: 9px; + top: $gl-padding-8; font-size: 14px; + + &:not(.gl-icon) { + right: 22px; + } } &.has-value { @@ -1084,8 +1087,20 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { .color-input-container { .dropdown-label-color-preview { - border: 1px solid $gray-200; + border: 1px solid $gray-100; border-right: 0; + + &[style] { + border-color: transparent; + } + } + } +} + +.bulk-update { + .dropdown-toggle-text { + &.is-default { + color: $gl-text-color; } } } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index eef6d9031f8..8fd507a45bb 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -500,16 +500,27 @@ span.idiff { border: transparent; } -.code-navigation { - border-bottom: 1px $gray-darkest dashed; +.code-navigation-line:hover { + .code-navigation { + border-bottom: 1px $gray-darkest dashed; - &:hover { - border-bottom-color: $almost-black; + &:hover { + border-bottom-color: $almost-black; + } } } -.code-navigation-popover { - max-width: 450px; +.code-navigation-popover.popover { + max-width: calc(min(#{px-to-rem(560px)}, calc(100vw - #{$gl-padding-32}))); +} + +.code-navigation-popover-container { + max-height: px-to-rem(320px); +} + +.code-navigation-popover .code { + padding-left: $grid-size * 3; + text-indent: -$grid-size * 2; } .tree-item-link { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 9bba5c0614a..8f209d2d99a 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -26,6 +26,12 @@ margin-right: 6px; } + .bulk-update { + .filter-item { + margin-right: 0; + } + } + .sort-filter { display: inline-block; float: right; @@ -152,7 +158,7 @@ .filtered-search-token .selected, .filtered-search-term .selected { .name { - background-color: $gray-200; + background-color: $gray-100; } .operator { diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 44c8ace9040..ec8d5806345 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -4,6 +4,8 @@ textarea { input { border-radius: $border-radius-base; + color: $gl-text-color; + background-color: $input-bg; } input[type='text'].danger { @@ -126,10 +128,6 @@ label { display: inline; } -.wiki-content { - margin-top: 35px; -} - .form-control::placeholder { color: $gl-text-color-tertiary; } diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss index 8d5afe1d312..288849ba438 100644 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ b/app/assets/stylesheets/framework/gitlab_theme.scss @@ -74,19 +74,6 @@ } } - &:focus:hover, - &:focus { - &.header-user-dropdown-toggle .header-user-notification-dot { - border-color: $white; - } - } - - &:hover { - &.header-user-dropdown-toggle .header-user-notification-dot { - border-color: $nav-svg-color + 33; - } - } - &:hover, &:focus { @include media-breakpoint-up(sm) { @@ -96,6 +83,10 @@ svg { fill: currentColor; } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $nav-svg-color + 33; + } } } @@ -109,6 +100,10 @@ fill: $nav-svg-color; } } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $white; + } } .impersonated-user, @@ -171,7 +166,7 @@ color: $sidebar-text; } - svg { + .nav-icon-container svg { fill: $sidebar-text; } } @@ -347,7 +342,7 @@ body { .navbar-toggler, .navbar-toggler:hover { color: $gray-700; - border-left: 1px solid $gray-200; + border-left: 1px solid $gray-100; } } } @@ -365,7 +360,7 @@ body { .search-input-wrap { .search-icon { - fill: $gray-200; + fill: $gray-100; } .search-input { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 2c7e9428ef1..50628c7de82 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -570,9 +570,9 @@ } .header-user-notification-dot { - background-color: $orange-500; - height: 10px; - width: 10px; + background-color: $orange-300; + height: 12px; + width: 12px; right: 8px; top: -8px; } diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 2c9397d363c..0fae1c7d235 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -20,7 +20,7 @@ width: 100%; } - $image-widths: 80 130 150 250 306 394 430; + $image-widths: 80 130 150 225 250 306 394 430; @each $width in $image-widths { &.svg-#{$width} { img, diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 385b29f8bbe..4d5032ac674 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -30,6 +30,7 @@ } &.status-box-issue-closed, + &.status-box-alert-resolved, &.status-box-mr-merged { background-color: $blue-500; } diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss index 1a26c0283e5..2448be1bca3 100644 --- a/app/assets/stylesheets/framework/job_log.scss +++ b/app/assets/stylesheets/framework/job_log.scss @@ -5,7 +5,7 @@ font-size: 13px; word-break: break-all; word-wrap: break-word; - color: $gl-text-color-inverted; + color: color-yiq($builds-trace-bg); border-radius: $border-radius-small; min-height: 42px; background-color: $builds-trace-bg; diff --git a/app/assets/stylesheets/framework/memory_graph.scss b/app/assets/stylesheets/framework/memory_graph.scss index b0bfc4f47ff..510969e149a 100644 --- a/app/assets/stylesheets/framework/memory_graph.scss +++ b/app/assets/stylesheets/framework/memory_graph.scss @@ -1,4 +1,4 @@ .memory-graph-container { background: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 52da1b9abfc..918ca448c21 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -137,7 +137,8 @@ transition-duration: 0.3s; } - .fa { + .fa, + svg { position: relative; top: 5px; font-size: 18px; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index bd262b65dc3..f85efc63645 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -313,7 +313,7 @@ right: 0; text-align: right; - .fa { + svg { right: 5px; } } @@ -323,7 +323,7 @@ left: 0; text-align: left; - .fa { + svg { left: 5px; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 1131248dd3f..9b33ed1b630 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -214,7 +214,7 @@ .health-status { .dropdown-body { .health-divider { - border-top-color: $gray-200; + border-top-color: $gray-100; } .dropdown-item:not(.health-dropdown-item) { diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss index 0a57a74eafc..2d16fdf4ee7 100644 --- a/app/assets/stylesheets/framework/stacked_progress_bar.scss +++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss @@ -36,7 +36,7 @@ } .status-neutral { - background-color: $gray-200; + background-color: $gray-100; color: $gl-gray-dark; &:hover { diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 4f66d6bf354..10796f319bf 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -94,7 +94,8 @@ margin-bottom: 16px; } - .boards-list { + .boards-list, + .board-swimlanes { height: calc(100vh - #{$header-height + $breadcrumb-min-height + $performance-bar-height + $system-footer-height + $gl-padding-32}); } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index ff6ac87db76..1504f3ee50f 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -27,7 +27,13 @@ .timeline-entry { color: $gl-text-color; - background-color: $white; + + // [dark-theme]: only give background color to actual notes + // in the timeline, the note form textarea has a background + // of it's own + &:not(.note-form) { + background-color: $white; + } .timeline-entry-inner { position: relative; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 6e07a2b5de1..b5b86b807a6 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -89,7 +89,7 @@ background-color: $gray-10; border-width: 1px; border-style: solid; - border-color: $gray-200 $gray-200 $gray-400; + border-color: $gray-100 $gray-100 $gray-400; border-image: none; border-radius: 3px; box-shadow: 0 -1px 0 $gray-400 inset; @@ -181,7 +181,7 @@ background-color: $white; td { - border-color: $gray-200; + border-color: $gray-100; } } @@ -611,7 +611,7 @@ pre { word-wrap: break-word; color: $gl-text-color; background-color: $gray-light; - border: 1px solid $gray-200; + border: 1px solid $gray-100; border-radius: $border-radius-small; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 1536c5c3022..265dceb3c61 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -113,29 +113,29 @@ $gl-gray-600: #666 !default; $gl-gray-700: #555 !default; $gl-gray-800: #333 !default; -$green-50: #f1fdf6 !default; -$green-100: #dcf5e7 !default; -$green-200: #263a2e !default; -$green-300: #75d09b !default; -$green-400: #37b96d !default; -$green-500: #1aaa55 !default; -$green-600: #168f48 !default; -$green-700: #12753a !default; -$green-800: #0e5a2d !default; +$green-50: #ecf4ee !default; +$green-100: #c3e6cd !default; +$green-200: #91d4a8 !default; +$green-300: #52b87a !default; +$green-400: #2da160 !default; +$green-500: #108548 !default; +$green-600: #217645 !default; +$green-700: #24663b !default; +$green-800: #0d532a !default; $green-900: #0a4020 !default; $green-950: #072b15 !default; -$blue-50: #f6fafe !default; -$blue-100: #e4f0fb !default; -$blue-200: #b8d6f4 !default; -$blue-300: #73afea !default; -$blue-400: #418cd8 !default; -$blue-500: #1f78d1 !default; -$blue-600: #1b69b6 !default; -$blue-700: #17599c !default; -$blue-800: #134a81 !default; -$blue-900: #0f3b66 !default; -$blue-950: #0a2744 !default; +$blue-50: #e9f3fc !default; +$blue-100: #cbe2f9 !default; +$blue-200: #9dc7f1 !default; +$blue-300: #63a6e9 !default; +$blue-400: #428fdc !default; +$blue-500: #1f75cb !default; +$blue-600: #1068bf !default; +$blue-700: #0b5cad !default; +$blue-800: #064787 !default; +$blue-900: #033464 !default; +$blue-950: #002850 !default; $orange-50: #fffaf4 !default; $orange-100: #fff1de !default; @@ -164,14 +164,14 @@ $red-950: #4d0a00 !default; $gray-10: #fafafa !default; $gray-50: #f0f0f0 !default; $gray-100: #dbdbdb !default; -$gray-200: #dfdfdf !default; +$gray-200: #bfbfbf !default; $gray-300: #ccc !default; $gray-400: #bababa !default; $gray-500: #a7a7a7 !default; $gray-600: #919191 !default; $gray-700: #707070 !default; $gray-800: #4f4f4f !default; -$gray-900: #2e2e2e !default; +$gray-900: #303030 !default; $gray-950: #1f1f1f !default; $greens: ( @@ -333,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ -$border-color: $gray-200; +$border-color: $gray-100; $shadow-color: $t-gray-a-08; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; @@ -479,9 +479,9 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background; $added: #63c363; $deleted: #f77; $line-added: #ecfdf0; -$line-added-dark: #c7f0d2; +$line-added-dark: #c7f0d2 !default; $line-removed: #fbe9eb; -$line-removed-dark: #fac5cd; +$line-removed-dark: #fac5cd !default; $line-number-old: #f9d7dc; $line-number-new: #ddfbe6; $line-number-select: #fbf2da; @@ -711,7 +711,6 @@ $input-lg-width: 320px; */ $document-index-color: #888; $help-shortcut-header-color: #333; -$accepting-mr-label-color: #69d100; /* * Issues @@ -868,7 +867,7 @@ $priority-label-empty-state-width: 114px; Popovers */ $popover-max-width: 384px; -$popover-box-shadow: 0 2px 3px 1px $gray-200; +$popover-box-shadow: 0 2px 3px 1px $gray-100; /* Issues Analytics diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index c7a50bdb5a3..acfda718e77 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -5,23 +5,23 @@ $secondary: $gray-light; $input-disabled-bg: $gray-light; -$input-border-color: $gray-200; +$input-border-color: $gray-100; $input-color: $gl-text-color; $input-font-size: $gl-font-size; $font-family-sans-serif: $regular-font; $font-family-monospace: $monospace-font; $btn-line-height: 20px; $table-accent-bg: $gray-light; -$table-border-color: $gray-200; +$table-border-color: $gray-100; $card-border-color: $border-color; -$card-cap-bg: $gray-light; +$card-cap-bg: $gray-light !default; $success: $green-500; $info: $blue-500; $warning: $orange-500; $danger: $red-500; $zindex-modal-backdrop: 1040; $nav-divider-margin-y: ($grid-size / 2); -$dropdown-divider-bg: $gray-200; +$dropdown-divider-bg: $gray-100; $dropdown-item-padding-y: 8px; $dropdown-item-padding-x: 12px; $popover-max-width: 300px; diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 5ab762a5104..8d965ea4309 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -1,6 +1,6 @@ /* https://github.com/MozMorris/tomorrow-pygments */ -@import "../common"; +@import '../common'; /* * Dark syntax colors @@ -223,11 +223,20 @@ $dark-il: #de935f; .cs { color: $dark-cs; } /* Comment.Special */ .gd { color: $dark-gd; } /* Generic.Deleted */ .ge { font-style: italic; } /* Generic.Emph */ - .gh { color: $dark-gh; font-weight: $gl-font-weight-bold; } /* Generic.Heading */ + .gh { /* Generic.Heading */ + color: $dark-gh; + font-weight: $gl-font-weight-bold; + } .gi { color: $dark-gi; } /* Generic.Inserted */ - .gp { color: $dark-gp; font-weight: $gl-font-weight-bold; } /* Generic.Prompt */ + .gp { /* Generic.Prompt */ + color: $dark-gp; + font-weight: $gl-font-weight-bold; + } .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */ - .gu { color: $dark-gu; font-weight: $gl-font-weight-bold; } /* Generic.Subheading */ + .gu { /* Generic.Subheading */ + color: $dark-gu; + font-weight: $gl-font-weight-bold; + } .kc { color: $dark-kc; } /* Keyword.Constant */ .kd { color: $dark-kd; } /* Keyword.Declaration */ .kn { color: $dark-kn; } /* Keyword.Namespace */ diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 348ef69cc4f..5ef2b9dcc36 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -1,6 +1,6 @@ /* https://github.com/richleland/pygments-css/blob/master/monokai.css */ -@import "../common"; +@import '../common'; /* * Monokai Colors @@ -211,7 +211,10 @@ $monokai-gi: #a6e22e; .hll { background-color: $monokai-hll; } .c { color: $monokai-c; } /* Comment */ - .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */ + .err { /* Error */ + color: $monokai-err-color; + background-color: $monokai-err-bg; + } .k { color: $monokai-k; } /* Keyword */ .l { color: $monokai-l; } /* Literal */ .n { color: $monokai-n; } /* Name */ diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 2fc5d7f7a85..fb548a00526 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -2,7 +2,7 @@ * None Syntax Colors */ -@import "../common"; +@import '../common'; @mixin match-line { color: $black-transparent; @@ -10,7 +10,7 @@ } .code.none { - // Line numbers + // Line numbers .line-numbers, .diff-line-num { background-color: $gray-light; @@ -44,7 +44,6 @@ $none-expanded-bg: #e0e0e0; .line_holder { - &.match .line_content, .new-nonewline.line_content, .old-nonewline.line_content { @@ -149,12 +148,12 @@ background-color: $white-normal; } - // Search result highlight + // Search result highlight span.highlight_word { background-color: $white-normal; } - // Links to URLs, emails, or dependencies + // Links to URLs, emails, or dependencies .line a { color: $gl-text-color; text-decoration: underline; diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index f5b36480f18..190a6e6156a 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -1,6 +1,6 @@ /* https://gist.github.com/qguv/7936275 */ -@import "../common"; +@import '../common'; /* * Solarized dark colors @@ -244,13 +244,19 @@ $solarized-dark-il: #2aa198; .c1 { color: $solarized-dark-c1; } /* Comment.Single */ .cs { color: $solarized-dark-cs; } /* Comment.Special */ .gd { color: $solarized-dark-gd; } /* Generic.Deleted */ - .ge { color: $solarized-dark-ge; font-style: italic; } /* Generic.Emph */ + .ge { /* Generic.Emph */ + color: $solarized-dark-ge; + font-style: italic; + } .gr { color: $solarized-dark-gr; } /* Generic.Error */ .gh { color: $solarized-dark-gh; } /* Generic.Heading */ .gi { color: $solarized-dark-gi; } /* Generic.Inserted */ .go { color: $solarized-dark-go; } /* Generic.Output */ .gp { color: $solarized-dark-gp; } /* Generic.Prompt */ - .gs { color: $solarized-dark-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */ + .gs { /* Generic.Strong */ + color: $solarized-dark-gs; + font-weight: $gl-font-weight-bold; + } .gu { color: $solarized-dark-gu; } /* Generic.Subheading */ .gt { color: $solarized-dark-gt; } /* Generic.Traceback */ .kc { color: $solarized-dark-kc; } /* Keyword.Constant */ diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 993370642c3..71d8dd06834 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -1,6 +1,6 @@ /* https://gist.github.com/qguv/7936275 */ -@import "../common"; +@import '../common'; /* * Solarized light syntax colors @@ -252,13 +252,19 @@ $solarized-light-il: #2aa198; .c1 { color: $solarized-light-c1; } /* Comment.Single */ .cs { color: $solarized-light-cs; } /* Comment.Special */ .gd { color: $solarized-light-gd; } /* Generic.Deleted */ - .ge { color: $solarized-light-ge; font-style: italic; } /* Generic.Emph */ + .ge { /* Generic.Emph */ + color: $solarized-light-ge; + font-style: italic; + } .gr { color: $solarized-light-gr; } /* Generic.Error */ .gh { color: $solarized-light-gh; } /* Generic.Heading */ .gi { color: $solarized-light-gi; } /* Generic.Inserted */ .go { color: $solarized-light-go; } /* Generic.Output */ .gp { color: $solarized-light-gp; } /* Generic.Prompt */ - .gs { color: $solarized-light-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */ + .gs { /* Generic.Strong */ + color: $solarized-light-gs; + font-weight: $gl-font-weight-bold; + } .gu { color: $solarized-light-gu; } /* Generic.Subheading */ .gt { color: $solarized-light-gt; } /* Generic.Traceback */ .kc { color: $solarized-light-kc; } /* Keyword.Constant */ diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss index 7239086f649..6362dd734f6 100644 --- a/app/assets/stylesheets/highlight/themes/white.scss +++ b/app/assets/stylesheets/highlight/themes/white.scss @@ -1,3 +1,3 @@ .code.white { - @import "../white_base"; + @import '../white_base'; } diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index f7d93870a25..f188b29a113 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -6,12 +6,12 @@ // stylelint-disable color-hex-length $mailer-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; -$mailer-text-color: #333333; +$mailer-text-color: #333; $mailer-bg-color: #fafafa; $mailer-link-color: #3777b0; -$mailer-link-muted-color: #333333; +$mailer-link-muted-color: #333; $mailer-line-cell-bg-color: #6b4fbb; -$mailer-wrapper-cell-bg-color: #ffffff; +$mailer-wrapper-cell-bg-color: #fff; $mailer-wrapper-cell-border-color: #ededed; $mailer-header-footer-text-color: #5c5c5c; diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 2b82b2226c6..a8d10ea1a29 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -146,7 +146,7 @@ } pre { - border-color: var(--ide-border-color-alt, $gray-200); + border-color: var(--ide-border-color-alt, $gray-100); code { background-color: var(--ide-border-color, inherit); @@ -216,7 +216,7 @@ color: var(--ide-text-color, $gl-text-color); &:hover { - background-color: var(--ide-input-border, $gray-200); + background-color: var(--ide-input-border, $gray-100); } } @@ -300,8 +300,8 @@ } .divider { - background-color: var(--ide-dropdown-hover-background, $gray-200); - border-color: var(--ide-dropdown-hover-background, $gray-200); + background-color: var(--ide-dropdown-hover-background, $gray-100); + border-color: var(--ide-dropdown-hover-background, $gray-100); } li > a:not(.disable-hover):hover, @@ -316,7 +316,7 @@ .dropdown-title, .dropdown-input { - border-color: var(--ide-dropdown-hover-background, $gray-200) !important; + border-color: var(--ide-dropdown-hover-background, $gray-100) !important; } .btn-primary, @@ -356,7 +356,7 @@ .btn[disabled] { background-color: var(--ide-btn-default-background, $gray-light) !important; - border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important; + border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important; color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important; } diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 9c92f891834..a07755724dd 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -145,7 +145,7 @@ $ide-commit-header-height: 48px; } &:not([disabled]):hover { - background-color: var(--ide-input-border, $gray-200); + background-color: var(--ide-input-border, $gray-100); } &:not([disabled]):focus { @@ -251,10 +251,6 @@ $ide-commit-header-height: 48px; padding-left: $gl-padding; } } - -.ide-status-file { - text-align: right; -} // Not great, but this is to deal with our current output .multi-file-preview-holder { height: 100%; @@ -400,7 +396,7 @@ $ide-commit-header-height: 48px; } &:active { - background: var(--ide-background, $gray-200); + background: var(--ide-background, $gray-100); } &.is-active { @@ -571,7 +567,7 @@ $ide-commit-header-height: 48px; &:focus { color: var(--ide-text-color, $gl-text-color); - background-color: var(--ide-background-hover, $gray-200); + background-color: var(--ide-background-hover, $gray-100); } &.active { @@ -1050,7 +1046,7 @@ $ide-commit-header-height: 48px; background-color: var(--ide-background, $gray-50); &:hover { - background-color: var(--ide-file-row-btn-hover-background, $gray-200); + background-color: var(--ide-file-row-btn-hover-background, $gray-100); } &:active, @@ -1101,7 +1097,7 @@ $ide-commit-header-height: 48px; &:focus { outline: 0; box-shadow: none; - border-color: var(--ide-border-color, $gray-200); + border-color: var(--ide-border-color, $gray-100); } } @@ -1144,7 +1140,7 @@ $ide-commit-header-height: 48px; } .file-row:active { - background: var(--ide-background, $gray-200); + background: var(--ide-background, $gray-100); } .file-row.is-active { diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss index a58a0ed9475..0ef0834d8db 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss @@ -47,4 +47,4 @@ --ide-animation-gradient-1: var(--ide-file-row-btn-hover-background); --ide-animation-gradient-2: var(--ide-dropdown-hover-background); - } +} diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss index 591a26e5941..73a4af00c5a 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -61,13 +61,13 @@ &.is-active { &:last-child { - border-bottom: 1px solid $gray-200; + border-bottom: 1px solid $gray-100; } } } } .note-header-info { - margin-top: 1px; + @include gl-mt-1; } } diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss index c1ea9b7604a..e420209b1fc 100644 --- a/app/assets/stylesheets/pages/alert_management/list.scss +++ b/app/assets/stylesheets/pages/alert_management/list.scss @@ -1,4 +1,8 @@ .alert-management-list { + .new-alert { + background-color: $issues-today-bg; + } + // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui table { color: $gray-700; @@ -8,14 +12,9 @@ outline: none; } - > :not([aria-sort='none']).b-table-sort-icon-left:hover::before { - content: '' !important; - } - td, th { - // TODO: There is no gl-pl-9 utlity for this padding, to be done and then removed. - padding-left: 1.25rem; + @include gl-pl-9; @include gl-py-5; @include gl-outline-none; @include gl-relative; @@ -26,24 +25,8 @@ font-weight: $gl-font-weight-bold; color: $gl-gray-600; - &:hover::before { - left: 3%; - top: 34%; - @include gl-absolute; - content: url("data:image/svg+xml,%3Csvg \ - xmlns='http://www.w3.org/2000/svg' \ - width='14' height='14' viewBox='0 0 16 \ - 16'%3E%3Cpath fill='%23BABABA' fill-rule='evenodd' \ - d='M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 \ - C3.902375,11.3166 3.902375,10.6834 \ - 4.292875,10.2929 C4.683375,9.90237 \ - 5.316575,9.90237 5.707075,10.2929 \ - L6.999975,11.5858 L6.999975,2 C6.999975,1.44771 \ - 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \ - 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 \ - C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929 \ - C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 \ - Z'/%3E%3C/svg%3E%0A"); + &[aria-sort='none']:hover { + background-image: url('data:image/svg+xml, %3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, 10.6834 4.292875,10.2929 C4.683375,9.90237 5.316575,9.90237 5.707075,10.2929 L6.999975, 11.5858 L6.999975,2 C6.999975,1.44771 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395 ,9.90237 11.316555,9.90237 11.707085,10.2929 C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e %3c/svg%3e'); } } } @@ -74,7 +57,7 @@ content: none !important; } - div { + div:not(.dropdown-title) { width: 100% !important; padding: 0 !important; } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 3e680c59910..049660220df 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -45,7 +45,8 @@ } } -.boards-list { +.boards-list, +.board-swimlanes { height: calc(100vh - #{$issue-board-list-difference-xs}); overflow-x: scroll; min-height: 200px; @@ -82,7 +83,6 @@ } .board-title-caret { - cursor: pointer; border-radius: $border-radius-default; line-height: $gl-spacing-scale-5; height: $gl-spacing-scale-5; @@ -109,7 +109,6 @@ .board-title { flex-direction: column; height: 100%; - padding: $gl-padding-8 0; } .board-title-caret { @@ -203,8 +202,7 @@ flex-grow: 1; } -.board-delete { - color: $gray-darkest; +.board-delete.gl-button { background-color: transparent; outline: 0; @@ -579,7 +577,10 @@ } } -.board-epics-swimlanes { +.board-swimlanes { overflow-x: auto; - min-height: 600px; +} + +.board-header-collapsed-info-icon:hover { + color: $gray-900; } diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index e1715b8e1bf..3c49cc54ac4 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -23,7 +23,7 @@ .bar { height: 4px; - background-color: $gl-gray-200; + background-color: $gl-gray-100; } .count { @@ -34,7 +34,7 @@ .graph-separator { width: $graph-separator-width; height: 18px; - background-color: $gl-gray-200; + background-color: $gl-gray-100; } } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f50d4bc736e..02c42d5b779 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -236,7 +236,7 @@ .trigger-variables-table-cell { font-size: $gl-font-size-small; line-height: $gl-line-height; - border: 1px solid $gray-200; + border: 1px solid $gray-100; padding: $gl-padding-4 6px; width: 50%; vertical-align: top; diff --git a/app/assets/stylesheets/pages/container_registry.scss b/app/assets/stylesheets/pages/container_registry.scss deleted file mode 100644 index b88bd78cf3d..00000000000 --- a/app/assets/stylesheets/pages/container_registry.scss +++ /dev/null @@ -1,47 +0,0 @@ -/** - * Container Registry - */ - -.container-message { - span .btn { - margin: 0; - } -} - -.container-image { - border-bottom: 1px solid $white-normal; -} - -.container-image-head { - padding: 0 16px; - line-height: 4em; - - .btn-link { - padding: 0; - - &:focus { - outline: none; - } - } -} - -.table.tags { - margin-bottom: 0; - - .registry-image-row { - .check { - padding-right: $gl-padding; - width: 5%; - } - - .action-buttons { - opacity: 0; - } - - &:hover { - .action-buttons { - opacity: 1; - } - } - } -} diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 98d74a9aaa2..fd5b3ff1dd8 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -935,11 +935,10 @@ table.code { } } -.files:not([data-can-create-note='true']) .frame { +.files:not([data-can-create-note]) .frame { cursor: auto; } -.frame, .frame.click-to-comment, .btn-transparent.image-diff-overlay-add-comment { position: relative; diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index eb9684c7b3c..fd11d0e3a69 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -45,6 +45,7 @@ display: block; float: left; margin-right: 10px; + max-width: 250px; } .new-file-name, @@ -139,10 +140,6 @@ clear: both; } } - - .editor-ref { - max-width: 250px; - } } } diff --git a/app/assets/stylesheets/pages/environment_logs.scss b/app/assets/stylesheets/pages/environment_logs.scss index 81cec14062f..03993e5321d 100644 --- a/app/assets/stylesheets/pages/environment_logs.scss +++ b/app/assets/stylesheets/pages/environment_logs.scss @@ -31,10 +31,6 @@ width: 160px; } } - - .controllers { - @include build-controllers(16px, flex-end, false, 2, inline); - } } .log-lines, diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b1e849143b0..a7d0d4259ea 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -115,20 +115,6 @@ font-size: 0; margin-bottom: -5px; } - - .scoped-label-wrapper { - > a { - max-width: 100%; - } - - .color-label { - padding-right: $gl-padding-24; - } - - .scoped-label { - right: 12px; - } - } } .assignee { @@ -396,7 +382,7 @@ overflow: hidden; &:hover { - background-color: $gray-200; + background-color: $gray-100; } &.issuable-sidebar-header { @@ -983,10 +969,6 @@ vertical-align: sub; } -.suggestion-item a { - color: initial; -} - .suggestion-confidential { color: $orange-600; } diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss index 569f323abd8..f2283e02ad2 100644 --- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss +++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss @@ -1,7 +1,5 @@ .issue-count-badge, .mr-count-badge { - display: inline-flex; - border-radius: $border-radius-base; padding: 5px $gl-padding-8; } diff --git a/app/assets/stylesheets/pages/issues/issues_list.scss b/app/assets/stylesheets/pages/issues/issues_list.scss new file mode 100644 index 00000000000..c0af7a6af6d --- /dev/null +++ b/app/assets/stylesheets/pages/issues/issues_list.scss @@ -0,0 +1,5 @@ +.svg-container.jira-logo-container { + svg { + vertical-align: text-bottom; + } +} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index c3bac053a0a..73d2c3ca2f8 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -134,6 +134,11 @@ } } +.label-description-wrapper { + margin-right: 8px; + margin-left: 8px; +} + .prioritized-labels { margin-bottom: 30px; @@ -310,7 +315,6 @@ width: 200px; flex-shrink: 0; - .scoped-label-wrapper, .gl-label { line-height: $gl-line-height; } @@ -386,7 +390,7 @@ order: 3; width: 100%; - > .append-right-default.prepend-left-default { + > .label-description-wrapper { margin-left: 0; margin-right: 0; } @@ -415,40 +419,6 @@ color: $indigo-300; } -.scoped-label-wrapper { - max-width: 100%; - vertical-align: top; - - .badge { - text-overflow: ellipsis; - overflow-x: hidden; - } - - &.label-link .color-label a { - color: inherit; - } - - .color-label { - padding-right: $gl-padding-24; - max-width: 100%; - } - - .scoped-label { - position: absolute; - top: 4px; - right: 8px; - padding: 0; - margin: 0; - line-height: $gl-line-height; - } - - &.board-label { - .scoped-label { - top: 1px; - } - } -} - .gl-label-scoped { box-shadow: 0 0 0 2px currentColor inset; @@ -456,29 +426,3 @@ box-shadow: 0 0 0 1px inset; } } - -// Label inside title of Delete Label Modal -.modal-header .page-title { - .scoped-label-wrapper { - .scoped-label { - line-height: 20px; - } - - span.color-label { - padding-right: $gl-padding-24; - } - } -} - -// Don't hide the overflow in system messages -.system-note-message, -.issuable-details, -.md-preview-holder, -.referenced-commands, -.note-body { - .scoped-label-wrapper { - .badge { - overflow: initial; - } - } -} diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 1e5e6da4e6c..5cf2d847405 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -64,7 +64,7 @@ $mr-widget-min-height: 69px; background-color: $gray-light; &.clickable:hover { - background-color: $gl-gray-200; + background-color: $gl-gray-100; cursor: pointer; } } @@ -75,7 +75,7 @@ $mr-widget-min-height: 69px; &::before { content: ''; - border-left: 1px solid $gray-200; + border-left: 1px solid $gray-100; position: absolute; left: 28px; top: -17px; @@ -162,10 +162,6 @@ $mr-widget-min-height: 69px; .btn { font-size: $gl-font-size; - &[disabled] { - opacity: 0.3; - } - &.dropdown-toggle { .fa { color: inherit; @@ -401,6 +397,16 @@ $mr-widget-min-height: 69px; } } } + + &.mr-pipeline-suggest { + border-radius: $border-radius-default; + line-height: 20px; + border: 1px solid $border-color; + + .circle-icon-container { + color: $gl-text-color-quaternary; + } + } } .mr-widget-help { @@ -600,26 +606,6 @@ $mr-widget-min-height: 69px; } } -.mr-pipeline-suggest { - flex-wrap: wrap; - border-radius: $border-radius-default; - padding: $gl-padding; - border: 1px solid $border-color; - min-height: $mr-widget-min-height; - - @include media-breakpoint-up(md) { - align-items: center; - } - - .circle-icon-container { - color: $gl-text-color-quaternary; - } - - .popover { - z-index: 240; - } -} - .card-new-merge-request { .card-header { padding: 5px 10px; @@ -1050,3 +1036,7 @@ $mr-widget-min-height: 69px; } } } + +.diff-file-row.is-active { + background-color: $gray-50; +} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index c3f3dbc223b..3a210d66420 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -62,7 +62,8 @@ background-color: $white; &.is-focused { - @extend .form-control:focus; + border-color: $input-focus-border-color; + box-shadow: $input-focus-box-shadow; .comment-toolbar, .nav-links { @@ -359,14 +360,6 @@ table { } } -.toolbar-button-icon { - position: relative; - top: 1px; - margin-right: $gl-padding-4; - color: inherit; - font-size: 16px; -} - .toolbar-text { font-size: 14px; line-height: 16px; @@ -489,6 +482,7 @@ table { border: 0; font-size: 14px; line-height: 16px; + vertical-align: initial; &:hover, &:focus { @@ -498,6 +492,10 @@ table { text-decoration: underline; } } + + .gl-icon:not(:last-child) { + margin-right: 0; + } } .markdown-selector { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index e8cdfd717c0..40f0104a2bf 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -10,6 +10,7 @@ $note-form-margin-left: 72px; top: 0; bottom: 0; left: $left; + height: calc(100% - 20px); } } @@ -185,8 +186,8 @@ $note-form-margin-left: 72px; padding: $gl-padding; .dummy-avatar { - background-color: $gl-gray-200; - border: 1px solid darken($gl-gray-200, 25%); + background-color: $gl-gray-100; + border: 1px solid darken($gl-gray-100, 25%); } .note-headline-light, @@ -254,10 +255,6 @@ $note-form-margin-left: 72px; } &.is-loading { - .fa-smile-o { - display: none; - } - .fa-spinner { display: inline-block; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 43d766db9e0..57ad9abef4b 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -253,13 +253,6 @@ } .stage-cell { - &.table-section { - @include media-breakpoint-up(md) { - min-width: 160px; /* Hack alert: Without this the mini graph pipeline won't work properly*/ - margin-right: -4px; - } - } - .mini-pipeline-graph-dropdown-toggle { svg { height: $ci-action-icon-size; @@ -816,7 +809,7 @@ &.ci-status-icon-created, &.ci-status-icon-skipped { - @include mini-pipeline-graph-color($white, $gray-200, $gray-300, $gray-500, $gray-600, $gray-700); + @include mini-pipeline-graph-color($white, $gray-100, $gray-300, $gray-500, $gray-600, $gray-700); } } @@ -1108,7 +1101,3 @@ button.mini-pipeline-graph-dropdown-toggle { .progress-bar.bg-primary { background-color: $blue-500 !important; } - -.parent-child-label-container { - padding-top: $gl-padding-4; -} diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index 3bab84af492..12386fa66ec 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -19,11 +19,6 @@ $ui-light-bg: #dfdfdf; $ui-dark-mode-bg: #1f1f1f; - label { - margin: 0 $gl-padding-32 $gl-padding 0; - text-align: center; - } - .preview { font-size: 0; height: 48px; diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss index 26db1fb9f58..6461d09bb47 100644 --- a/app/assets/stylesheets/pages/prometheus.scss +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -34,7 +34,7 @@ .draggable { &.draggable-enabled { .draggable-panel { - border: $gray-200 1px solid; + border: $gray-100 1px solid; border-radius: $border-radius-default; margin: -1px; cursor: grab; diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss index dc3811bab65..66d2f76c558 100644 --- a/app/assets/stylesheets/pages/runners.scss +++ b/app/assets/stylesheets/pages/runners.scss @@ -45,8 +45,7 @@ color: $gl-text-color-secondary; } - .fa-pause, - .fa-play { + .fa-pause { font-size: 11px; } } diff --git a/app/assets/stylesheets/pages/service_desk.scss b/app/assets/stylesheets/pages/service_desk.scss new file mode 100644 index 00000000000..34ab5eb1b74 --- /dev/null +++ b/app/assets/stylesheets/pages/service_desk.scss @@ -0,0 +1,7 @@ +.service-desk-issues { + .non-empty-state { + text-align: left; + padding-bottom: $gl-padding-top; + border-bottom: 1px solid $border-color; + } +} diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index d26c07ce51b..f1df9099d82 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -347,7 +347,7 @@ .btn-clipboard { background-color: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; } .deploy-token-help-block { diff --git a/app/assets/stylesheets/pages/sherlock.scss b/app/assets/stylesheets/pages/sherlock.scss index 2bf0bedb1f5..55b0b5295af 100644 --- a/app/assets/stylesheets/pages/sherlock.scss +++ b/app/assets/stylesheets/pages/sherlock.scss @@ -13,10 +13,8 @@ table .sherlock-code { } .sherlock-line-samples-table { - margin-bottom: 0 !important; - - thead tr th, - tbody tr td { + thead th, + tbody td { font-size: 13px !important; text-align: right; padding: 0 10px !important; diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index 640968ff678..8c4bfdf68cc 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -147,3 +147,7 @@ ul.wiki-pages-list.content-list { } } } + +.empty-state-wiki .text-content { + max-width: 490px; // Widen to allow for the Confluence button +} diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index 4eef4d361a1..daeab80d373 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -61,7 +61,7 @@ padding: 4px 6px; font-family: Consolas, 'Liberation Mono', Courier, monospace; line-height: 1; - color: $gl-gray-200; + color: $gl-gray-100; border-radius: 3px; box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, inset 0 1px 2px $perf-bar-bucket-box-shadow-to; diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index d410a16a1d9..e5d5ed0d48f 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -1,8 +1,8 @@ -@import "framework/variables"; +@import 'framework/variables'; .gitlab-embed-snippets { - @import "highlight/embedded"; - @import "framework/images"; + @import 'highlight/embedded'; + @import 'framework/images'; $border-style: 1px solid $border-color; @@ -15,6 +15,7 @@ .gl-snippet-icon { display: inline-block; + /* stylelint-disable-next-line function-url-quotes */ background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat; overflow: hidden; text-align: left; diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 1f2a7645495..e2b4d6b8e7a 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -103,6 +103,8 @@ $input-focus-bg: $gray-100; $input-color: $gray-900; $input-group-addon-bg: $gray-900; +$card-cap-bg: $gray-50; + $tooltip-bg: $gray-800; $tooltip-color: $gray-10; @@ -115,6 +117,14 @@ $secondary: $gray-600; $issues-today-bg: #333838; $issues-today-border: #333a40; +$yiq-text-dark: $gray-50; +$yiq-text-light: $gray-950; + +// Commit Diff Colors +$line-added-dark: $green-200; +$line-removed-dark: $red-200; + +// Misc component overrides that should live elsewhere .gl-label { filter: brightness(0.9) contrast(1.1); } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 176d64272c2..38842ec167e 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -43,6 +43,7 @@ @for $i from 1 through 12 { #{'.tab-width-#{$i}'} { + /* stylelint-disable-next-line property-no-vendor-prefix */ -moz-tab-size: $i; tab-size: $i; } @@ -100,3 +101,23 @@ .gl-pl-7 { padding-left: $gl-spacing-scale-7; } + +.gl-transition-property-stroke-opacity { + transition-property: stroke-opacity; +} + +.gl-transition-property-stroke { + transition-property: stroke; +} + +.gl-top-66vh { + top: 66vh; +} + +// Remove when https://gitlab.com/gitlab-org/gitlab-ui/-/issues/871 +// gets fixed on GitLab UI +.gl-sm-w-auto\! { + @media (min-width: $breakpoint-sm) { + width: auto !important; + } +} |