@syncfusion/ej2-ribbon 24.2.8 → 25.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/CHANGELOG.md +8 -4
  2. package/README.md +3 -0
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es2015.js +2164 -217
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +2293 -226
  8. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  9. package/dist/global/ej2-ribbon.min.js +2 -2
  10. package/dist/global/ej2-ribbon.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/global.js +1 -1
  14. package/src/ribbon/base/constant.d.ts +8 -0
  15. package/src/ribbon/base/constant.js +8 -0
  16. package/src/ribbon/base/interface.d.ts +114 -1
  17. package/src/ribbon/base/interface.js +4 -0
  18. package/src/ribbon/base/ribbon-model.d.ts +22 -1
  19. package/src/ribbon/base/ribbon.d.ts +70 -5
  20. package/src/ribbon/base/ribbon.js +571 -157
  21. package/src/ribbon/base/utils.d.ts +3 -2
  22. package/src/ribbon/base/utils.js +3 -2
  23. package/src/ribbon/items/index.d.ts +1 -0
  24. package/src/ribbon/items/index.js +1 -0
  25. package/src/ribbon/items/ribbon-colorpicker.js +6 -1
  26. package/src/ribbon/items/ribbon-gallery.d.ts +87 -0
  27. package/src/ribbon/items/ribbon-gallery.js +712 -0
  28. package/src/ribbon/items/ribbon-groupbutton.js +3 -0
  29. package/src/ribbon/models/index.d.ts +8 -0
  30. package/src/ribbon/models/index.js +4 -0
  31. package/src/ribbon/models/ribbon-back-stage-settings-model.d.ts +7 -0
  32. package/src/ribbon/models/ribbon-back-stage-settings.d.ts +6 -0
  33. package/src/ribbon/models/ribbon-back-stage-settings.js +3 -0
  34. package/src/ribbon/models/ribbon-backstage-item-model.d.ts +7 -0
  35. package/src/ribbon/models/ribbon-backstage-item.d.ts +6 -0
  36. package/src/ribbon/models/ribbon-backstage-item.js +3 -0
  37. package/src/ribbon/models/ribbon-contextual-tab-settings-model.d.ts +30 -0
  38. package/src/ribbon/models/ribbon-contextual-tab-settings.d.ts +33 -0
  39. package/src/ribbon/models/ribbon-contextual-tab-settings.js +50 -0
  40. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +7 -0
  41. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +6 -0
  42. package/src/ribbon/models/ribbon-file-menu-settings.js +3 -0
  43. package/src/ribbon/models/ribbon-gallery-group-model.d.ts +44 -0
  44. package/src/ribbon/models/ribbon-gallery-group.d.ts +38 -0
  45. package/src/ribbon/models/ribbon-gallery-group.js +47 -0
  46. package/src/ribbon/models/ribbon-gallery-item-model.d.ts +43 -0
  47. package/src/ribbon/models/ribbon-gallery-item.d.ts +38 -0
  48. package/src/ribbon/models/ribbon-gallery-item.js +46 -0
  49. package/src/ribbon/models/ribbon-gallery-settings-model.d.ts +108 -0
  50. package/src/ribbon/models/ribbon-gallery-settings.d.ts +95 -0
  51. package/src/ribbon/models/ribbon-gallery-settings.js +71 -0
  52. package/src/ribbon/models/ribbon-group-button-item-model.d.ts +7 -0
  53. package/src/ribbon/models/ribbon-group-button-item.d.ts +6 -0
  54. package/src/ribbon/models/ribbon-group-button-item.js +3 -0
  55. package/src/ribbon/models/ribbon-group-model.d.ts +14 -0
  56. package/src/ribbon/models/ribbon-group.d.ts +12 -0
  57. package/src/ribbon/models/ribbon-group.js +6 -0
  58. package/src/ribbon/models/ribbon-item-model.d.ts +15 -1
  59. package/src/ribbon/models/ribbon-item.d.ts +13 -0
  60. package/src/ribbon/models/ribbon-item.js +7 -0
  61. package/src/ribbon/models/ribbon-tab-model.d.ts +7 -0
  62. package/src/ribbon/models/ribbon-tab.d.ts +6 -0
  63. package/src/ribbon/models/ribbon-tab.js +3 -0
  64. package/src/ribbon/modules/index.d.ts +2 -0
  65. package/src/ribbon/modules/index.js +2 -0
  66. package/src/ribbon/modules/ribbon-backstage.d.ts +2 -0
  67. package/src/ribbon/modules/ribbon-backstage.js +37 -0
  68. package/src/ribbon/modules/ribbon-contextualtab.d.ts +27 -0
  69. package/src/ribbon/modules/ribbon-contextualtab.js +90 -0
  70. package/src/ribbon/modules/ribbon-filemenu.d.ts +2 -0
  71. package/src/ribbon/modules/ribbon-filemenu.js +19 -0
  72. package/src/ribbon/modules/ribbon-keytip.d.ts +54 -0
  73. package/src/ribbon/modules/ribbon-keytip.js +554 -0
  74. package/styles/bootstrap-dark.css +398 -24
  75. package/styles/bootstrap.css +389 -15
  76. package/styles/bootstrap4.css +398 -24
  77. package/styles/bootstrap5-dark.css +391 -17
  78. package/styles/bootstrap5.css +391 -17
  79. package/styles/fabric-dark.css +388 -14
  80. package/styles/fabric.css +387 -13
  81. package/styles/fluent-dark.css +389 -15
  82. package/styles/fluent.css +389 -15
  83. package/styles/highcontrast-light.css +381 -7
  84. package/styles/highcontrast.css +390 -16
  85. package/styles/material-dark.css +391 -17
  86. package/styles/material.css +391 -17
  87. package/styles/material3-dark.css +389 -15
  88. package/styles/material3.css +389 -15
  89. package/styles/ribbon/_bds-definition.scss +360 -0
  90. package/styles/ribbon/_bootstrap-dark-definition.scss +81 -6
  91. package/styles/ribbon/_bootstrap-definition.scss +81 -6
  92. package/styles/ribbon/_bootstrap4-definition.scss +82 -7
  93. package/styles/ribbon/_bootstrap5-definition.scss +81 -6
  94. package/styles/ribbon/_fabric-dark-definition.scss +78 -3
  95. package/styles/ribbon/_fabric-definition.scss +78 -3
  96. package/styles/ribbon/_fluent-definition.scss +80 -5
  97. package/styles/ribbon/_fusionnew-definition.scss +76 -1
  98. package/styles/ribbon/_highcontrast-definition.scss +80 -5
  99. package/styles/ribbon/_highcontrast-light-definition.scss +76 -1
  100. package/styles/ribbon/_layout.scss +344 -38
  101. package/styles/ribbon/_material-dark-definition.scss +80 -5
  102. package/styles/ribbon/_material-definition.scss +81 -6
  103. package/styles/ribbon/_material3-definition.scss +80 -5
  104. package/styles/ribbon/_tailwind-definition.scss +80 -5
  105. package/styles/ribbon/_theme.scss +71 -0
  106. package/styles/ribbon/bootstrap-dark.css +398 -24
  107. package/styles/ribbon/bootstrap.css +389 -15
  108. package/styles/ribbon/bootstrap4.css +398 -24
  109. package/styles/ribbon/bootstrap5-dark.css +391 -17
  110. package/styles/ribbon/bootstrap5.css +391 -17
  111. package/styles/ribbon/fabric-dark.css +388 -14
  112. package/styles/ribbon/fabric.css +387 -13
  113. package/styles/ribbon/fluent-dark.css +389 -15
  114. package/styles/ribbon/fluent.css +389 -15
  115. package/styles/ribbon/highcontrast-light.css +381 -7
  116. package/styles/ribbon/highcontrast.css +390 -16
  117. package/styles/ribbon/icons/_bds.scss +9 -0
  118. package/styles/ribbon/material-dark.css +391 -17
  119. package/styles/ribbon/material.css +391 -17
  120. package/styles/ribbon/material3-dark.css +389 -15
  121. package/styles/ribbon/material3.css +389 -15
  122. package/styles/ribbon/tailwind-dark.css +390 -16
  123. package/styles/ribbon/tailwind.css +390 -16
  124. package/styles/tailwind-dark.css +390 -16
  125. package/styles/tailwind.css +390 -16
@@ -364,6 +364,21 @@
364
364
  .e-ribbon.e-rbn.e-ribbon-minimize .e-ribbon-tab .e-content, .e-ribbon.e-rbn.e-ribbon-minimize .e-ribbon-collapse-btn, .e-ribbon.e-rbn.e-ribbon-minimize .e-ribbon-overall-of-btn {
365
365
  display: none;
366
366
  }
367
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper {
368
+ height: 34px;
369
+ }
370
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
371
+ padding: 5px 0;
372
+ width: 95px;
373
+ margin: 2px;
374
+ max-height: 30px;
375
+ }
376
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
377
+ pointer-events: none;
378
+ }
379
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text {
380
+ font-size: 12px;
381
+ }
367
382
  .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-tab .e-hscroll-bar {
368
383
  overflow-y: hidden;
369
384
  }
@@ -659,6 +674,28 @@
659
674
  padding: 1px;
660
675
  vertical-align: middle;
661
676
  }
677
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
678
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper,
679
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper,
680
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper {
681
+ height: 72px;
682
+ display: -ms-flexbox;
683
+ display: flex;
684
+ }
685
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
686
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
687
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item,
688
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-wrapper .e-ribbon-gallery-container .e-ribbon-gallery-item {
689
+ max-height: 72px;
690
+ }
691
+ .e-ribbon.e-rbn .e-ribbon-group-overflow .e-ribbon-gallery-button,
692
+ .e-ribbon.e-rbn .e-ribbon-item .e-ribbon-gallery-button,
693
+ .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow .e-ribbon-gallery-button,
694
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-ribbon-gallery-button {
695
+ padding: 0;
696
+ border-width: 0 0 0 1px;
697
+ border-radius: 0 4px 4px 0;
698
+ }
662
699
  .e-ribbon.e-rbn .e-ribbon-group-overflow.e-hidden,
663
700
  .e-ribbon.e-rbn .e-ribbon-item.e-hidden,
664
701
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-hidden,
@@ -764,6 +801,13 @@
764
801
  min-height: 33%;
765
802
  padding: 2px;
766
803
  }
804
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
805
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
806
+ padding: 0;
807
+ border-style: solid;
808
+ border-width: 1px;
809
+ border-radius: 4px;
810
+ }
767
811
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group,
768
812
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-btn-group {
769
813
  box-shadow: none;
@@ -910,9 +954,36 @@
910
954
  padding: 0 0 0 2px;
911
955
  }
912
956
 
957
+ .e-ribbon-group-overflow-ddb.e-dropdown-popup:has(.e-ribbon-overflow-target) {
958
+ min-width: 190px;
959
+ }
913
960
  .e-ribbon-group-overflow-ddb .e-ribbon-of-tab:not(.e-ribbon-active) {
914
961
  display: none;
915
962
  }
963
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-ribbon-gallery-container) {
964
+ border: 0;
965
+ }
966
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-input-group) {
967
+ margin: 5px 0;
968
+ }
969
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn {
970
+ padding: 0;
971
+ display: -ms-flexbox;
972
+ display: flex;
973
+ -ms-flex-align: center;
974
+ align-items: center;
975
+ -ms-flex-pack: start;
976
+ justify-content: flex-start;
977
+ width: 100%;
978
+ }
979
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-dropdown.e-btn .e-btn-icon {
980
+ margin: 0;
981
+ }
982
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-wrapper.e-hidden,
983
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-container.e-hidden,
984
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-gallery-button.e-hidden {
985
+ display: none;
986
+ }
916
987
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hidden, .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target.e-hide-group {
917
988
  display: none;
918
989
  }
@@ -925,6 +996,12 @@
925
996
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-of-tab .e-ribbon-of-group-container.e-disabled {
926
997
  pointer-events: none;
927
998
  }
999
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
1000
+ font-size: 12px;
1001
+ }
1002
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
1003
+ height: 32px;
1004
+ }
928
1005
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
929
1006
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
930
1007
  white-space: nowrap;
@@ -933,23 +1010,34 @@
933
1010
  -ms-flex-align: center;
934
1011
  align-items: center;
935
1012
  font-weight: 400;
936
- font-size: 12px;
1013
+ font-size: 14px;
1014
+ }
1015
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
1016
+ -ms-flex-align: center;
1017
+ align-items: center;
937
1018
  }
938
1019
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
939
1020
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template {
940
1021
  margin: 7px 8px;
941
1022
  }
1023
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1024
+ font-size: 14px;
1025
+ }
942
1026
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
943
- margin: 8px;
1027
+ margin: 10px 0 10px 12px;
944
1028
  padding: 0;
945
1029
  }
946
1030
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
947
1031
  padding: 0;
948
1032
  width: 100%;
1033
+ height: 32px;
1034
+ }
1035
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1036
+ margin: 0;
949
1037
  }
950
1038
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper .e-btn,
951
1039
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-btn {
952
- line-height: 22px;
1040
+ line-height: 12px;
953
1041
  overflow: hidden;
954
1042
  }
955
1043
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item > .e-split-btn-wrapper {
@@ -962,32 +1050,52 @@
962
1050
  justify-content: flex-start;
963
1051
  }
964
1052
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
965
- padding: 7px 8px;
966
- font-weight: 400;
967
- line-height: 22px;
1053
+ padding: 6px 0 6px 12px;
1054
+ font-size: 14px;
1055
+ font-weight: 500;
1056
+ line-height: 18px;
1057
+ height: 26px;
968
1058
  }
969
1059
 
970
1060
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
971
1061
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
972
1062
  margin-left: 34px;
973
1063
  }
1064
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1065
+ padding: 10px 8px 10px 12px;
1066
+ }
1067
+ .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1068
+ margin-left: 34px;
1069
+ }
974
1070
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
975
1071
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
976
1072
  transform: rotate(-90deg);
977
- padding: 8px;
1073
+ padding: 0 12px;
978
1074
  margin: 0 0 0 auto;
979
1075
  }
980
1076
 
1077
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1078
+ padding: 6px 12px 6px 0;
1079
+ }
981
1080
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
982
1081
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
983
1082
  margin-right: 34px;
984
1083
  }
1084
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1085
+ padding: 10px 12px 10px 8px;
1086
+ }
1087
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1088
+ margin-right: 34px;
1089
+ }
985
1090
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
986
1091
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
987
1092
  transform: rotate(90deg);
988
- padding: 8px;
1093
+ padding: 0 12px;
989
1094
  margin: 0 auto 0 0;
990
1095
  }
1096
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1097
+ margin: 10px 12px 10px 0;
1098
+ }
991
1099
 
992
1100
  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:not(.e-icon-btn) {
993
1101
  -ms-flex-direction: column;
@@ -1001,8 +1109,8 @@
1001
1109
  }
1002
1110
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-ribbon-groupbutton-header {
1003
1111
  padding-bottom: 7px;
1004
- font-weight: 400;
1005
- line-height: 22px;
1112
+ font-weight: 500;
1113
+ line-height: 18px;
1006
1114
  white-space: nowrap;
1007
1115
  }
1008
1116
  .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
@@ -1014,6 +1122,18 @@
1014
1122
  -ms-flex-pack: start;
1015
1123
  justify-content: flex-start;
1016
1124
  }
1125
+ .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button:first-of-type {
1126
+ border-top-right-radius: 4px;
1127
+ border-top-left-radius: 4px;
1128
+ border-bottom-right-radius: 0;
1129
+ border-bottom-left-radius: 0;
1130
+ }
1131
+ .e-dropdown-popup.e-ribbon-dropdown-group-button.e-ribbon-group-button-overflow-popup .e-btn-group:has(.e-ribbon-group-button-content) .e-btn.e-ribbon-group-button:last-of-type {
1132
+ border-top-right-radius: 0;
1133
+ border-top-left-radius: 0;
1134
+ border-bottom-right-radius: 4px;
1135
+ border-bottom-left-radius: 4px;
1136
+ }
1017
1137
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group {
1018
1138
  box-shadow: none;
1019
1139
  border-radius: unset;
@@ -1032,7 +1152,7 @@
1032
1152
  padding: 0;
1033
1153
  font-weight: 400;
1034
1154
  font-size: 12px;
1035
- border: none;
1155
+ border: 1px solid #616161;
1036
1156
  text-transform: none;
1037
1157
  }
1038
1158
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn.e-ribbon-group-button:not(.e-icon-btn) {
@@ -1043,6 +1163,119 @@
1043
1163
  box-shadow: none !important; /* stylelint-disable-line declaration-no-important */
1044
1164
  }
1045
1165
 
1166
+ .e-ribbon-gallery-popup.e-popup,
1167
+ .e-ribbon-gallery-dropdown.e-popup {
1168
+ border-radius: 4px;
1169
+ padding: 0 12px 12px;
1170
+ overflow: auto;
1171
+ }
1172
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1173
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1174
+ padding: 8px 0 4px;
1175
+ font-size: 12px;
1176
+ font-weight: 500;
1177
+ line-height: 18px;
1178
+ }
1179
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1180
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item {
1181
+ margin: 4px;
1182
+ height: 54px;
1183
+ width: 73px;
1184
+ }
1185
+
1186
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1187
+ width: 95px;
1188
+ }
1189
+
1190
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container,
1191
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container,
1192
+ .e-ribbon-group-overflow .e-ribbon-gallery-container,
1193
+ .e-ribbon-item .e-ribbon-gallery-container {
1194
+ padding: 0;
1195
+ margin: 0;
1196
+ display: -ms-flexbox;
1197
+ display: flex;
1198
+ -ms-flex-line-pack: distribute;
1199
+ align-content: space-around;
1200
+ }
1201
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1202
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item,
1203
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item,
1204
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item {
1205
+ display: inherit;
1206
+ -ms-flex-align: center;
1207
+ align-items: center;
1208
+ -ms-flex-pack: center;
1209
+ justify-content: center;
1210
+ text-align: center;
1211
+ list-style-type: none;
1212
+ padding: 5px 0;
1213
+ -ms-flex-direction: column;
1214
+ flex-direction: column;
1215
+ cursor: pointer;
1216
+ border-width: 2px;
1217
+ border-style: solid;
1218
+ border-radius: 4px;
1219
+ }
1220
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1221
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1222
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled,
1223
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-disabled {
1224
+ pointer-events: none;
1225
+ }
1226
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1227
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1228
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden,
1229
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-hidden {
1230
+ display: none;
1231
+ }
1232
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1233
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1234
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text,
1235
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-text {
1236
+ font-size: 14px;
1237
+ font-weight: 400;
1238
+ line-height: 22px;
1239
+ width: inherit;
1240
+ overflow: hidden;
1241
+ white-space: nowrap;
1242
+ text-overflow: ellipsis;
1243
+ }
1244
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1245
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1246
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons,
1247
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item .e-ribbon-gallery-icons {
1248
+ font-size: 20px;
1249
+ font-weight: 400;
1250
+ line-height: 20px;
1251
+ padding: 3px;
1252
+ background-size: cover;
1253
+ }
1254
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover, .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1255
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1256
+ .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1257
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1258
+ .e-ribbon-group-overflow .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1259
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
1260
+ .e-ribbon-item .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected {
1261
+ border-radius: 4px;
1262
+ }
1263
+
1264
+ .e-ribbon-keytip {
1265
+ min-width: 20px;
1266
+ height: 20px;
1267
+ line-height: 18px;
1268
+ font-size: 14px;
1269
+ }
1270
+ .e-ribbon-keytip.e-popup-open {
1271
+ display: -ms-flexbox;
1272
+ display: flex;
1273
+ -ms-flex-pack: center;
1274
+ justify-content: center;
1275
+ -ms-flex-align: center;
1276
+ align-items: center;
1277
+ }
1278
+
1046
1279
  .e-ribbon-menu {
1047
1280
  display: block;
1048
1281
  }
@@ -1444,11 +1677,42 @@
1444
1677
  border-radius: unset;
1445
1678
  }
1446
1679
 
1680
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header,
1681
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-overflow-header {
1682
+ line-height: 22px;
1683
+ height: 36px;
1684
+ font-size: 16px;
1685
+ }
1686
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret,
1687
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-dropdown-btn .e-caret {
1688
+ font-size: 12px;
1689
+ }
1690
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group,
1691
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-input-group {
1692
+ height: 40px;
1693
+ }
1694
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item,
1695
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item {
1696
+ height: 40px;
1697
+ }
1698
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon,
1699
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1700
+ font-size: 16px;
1701
+ }
1702
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1703
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1704
+ margin: 0;
1705
+ }
1706
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper),
1707
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:has(.e-colorpicker-wrapper) {
1708
+ -ms-flex-align: center;
1709
+ align-items: center;
1710
+ }
1447
1711
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1448
1712
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1449
1713
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1450
1714
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1451
- font-size: 14px;
1715
+ font-size: 16px;
1452
1716
  }
1453
1717
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-input-group,
1454
1718
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-template,
@@ -1458,32 +1722,60 @@
1458
1722
  }
1459
1723
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1460
1724
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1461
- margin: 8px;
1725
+ margin: 12px 0 12px 16px;
1462
1726
  padding: 0;
1463
1727
  }
1728
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header,
1729
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-overflow-header {
1730
+ padding: 10px 0 8px 16px;
1731
+ }
1464
1732
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1465
1733
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1466
1734
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1467
1735
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1468
- margin-left: 38px;
1736
+ margin-left: 44px;
1737
+ }
1738
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left,
1739
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1740
+ padding: 12px 12px 12px 16px;
1741
+ }
1742
+ .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
1743
+ .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1744
+ margin-left: 44px;
1469
1745
  }
1470
1746
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1471
1747
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1472
1748
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1473
1749
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1474
- padding: 8px;
1750
+ padding: 0 12px;
1751
+ }
1752
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header,
1753
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-overflow-header {
1754
+ padding: 10px 16px 8px 0;
1475
1755
  }
1476
1756
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1477
1757
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label,
1478
1758
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-combobox-label,
1479
1759
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item .e-ribbon-colorpicker-label {
1480
- margin-right: 38px;
1760
+ margin-right: 44px;
1761
+ }
1762
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left,
1763
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1764
+ padding: 12px 16px 12px 12px;
1765
+ }
1766
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper,
1767
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper {
1768
+ margin-right: 44px;
1481
1769
  }
1482
1770
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1483
1771
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret,
1484
1772
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
1485
1773
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-dropdown-btn .e-icons.e-caret {
1486
- padding: 8px;
1774
+ padding: 0 12px;
1775
+ }
1776
+ .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper,
1777
+ .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item > .e-checkbox-wrapper {
1778
+ margin: 12px 16px 12px 0;
1487
1779
  }
1488
1780
 
1489
1781
  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item {
@@ -1556,9 +1848,30 @@
1556
1848
  padding: 0 8px 0 0;
1557
1849
  }
1558
1850
 
1851
+ .e-bigger.e-ribbon-gallery-popup.e-popup,
1852
+ .e-bigger .e-ribbon-gallery-popup.e-popup,
1853
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup,
1854
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup {
1855
+ padding: 0 16px 16px;
1856
+ }
1857
+ .e-bigger.e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1858
+ .e-bigger .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
1859
+ .e-bigger.e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header,
1860
+ .e-bigger .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-header {
1861
+ padding-bottom: 12px 0 8px;
1862
+ font-size: 14px;
1863
+ line-height: 22px;
1864
+ }
1865
+
1559
1866
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1560
1867
  border-color: #757575;
1561
1868
  }
1869
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab {
1870
+ background: #212121;
1871
+ }
1872
+ .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item.e-ribbon-contextual-tab .e-tab-wrap .e-tab-text {
1873
+ color: #00b0ff;
1874
+ }
1562
1875
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header .e-toolbar-item .e-tab-wrap .e-tab-text {
1563
1876
  color: #fff;
1564
1877
  }
@@ -1741,6 +2054,10 @@
1741
2054
  .e-ribbon-group-overflow-ddb .e-ribbon-item .e-split-btn-wrapper.e-vertical:hover .e-split-btn:disabled {
1742
2055
  border-color: transparent;
1743
2056
  }
2057
+ .e-ribbon.e-rbn .e-ribbon-item:has(.e-ribbon-gallery-container),
2058
+ .e-ribbon-group-overflow-ddb .e-ribbon-item:has(.e-ribbon-gallery-container) {
2059
+ border-color: #616161;
2060
+ }
1744
2061
  .e-ribbon.e-rbn .e-ribbon-item .e-btn:not(.e-ribbon-file-menu),
1745
2062
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button,
1746
2063
  .e-ribbon.e-rbn .e-ribbon-item .e-btn-group .e-btn.e-ribbon-group-button:not(:first-of-type):not(:last-of-type),
@@ -2146,6 +2463,58 @@
2146
2463
  background: transparent;
2147
2464
  }
2148
2465
 
2466
+ .e-ribbon-gallery-item {
2467
+ background: #424242;
2468
+ border-color: transparent;
2469
+ }
2470
+ .e-ribbon-gallery-item:hover {
2471
+ background: #616161;
2472
+ }
2473
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected {
2474
+ background: #757575;
2475
+ }
2476
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-text {
2477
+ color: #fff;
2478
+ }
2479
+ .e-ribbon-gallery-item.e-ribbon-gallery-selected .e-ribbon-gallery-icons {
2480
+ color: #fff;
2481
+ }
2482
+ .e-ribbon-gallery-item.e-disabled {
2483
+ background: #424242;
2484
+ }
2485
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-text {
2486
+ color: rgba(255, 255, 255, 0.38);
2487
+ }
2488
+ .e-ribbon-gallery-item.e-disabled .e-ribbon-gallery-icons {
2489
+ color: rgba(255, 255, 255, 0.38);
2490
+ }
2491
+ .e-ribbon-gallery-item:focus, .e-ribbon-gallery-item:focus-visible {
2492
+ border-color: #616161;
2493
+ }
2494
+ .e-ribbon-gallery-item .e-ribbon-gallery-text {
2495
+ color: #fff;
2496
+ }
2497
+ .e-ribbon-gallery-item .e-ribbon-gallery-icons {
2498
+ color: rgba(255, 255, 255, 0.6);
2499
+ }
2500
+
2501
+ .e-ribbon-gallery-button {
2502
+ border-color: #616161;
2503
+ }
2504
+ .e-ribbon-gallery-button.e-gallery-button-active {
2505
+ background: #757575;
2506
+ }
2507
+
2508
+ .e-ribbon-gallery-popup.e-popup,
2509
+ .e-dropdown-popup.e-ribbon-gallery-dropdown {
2510
+ background: #424242;
2511
+ box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.26);
2512
+ }
2513
+ .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-header,
2514
+ .e-dropdown-popup.e-ribbon-gallery-dropdown .e-ribbon-gallery-header {
2515
+ color: rgba(255, 255, 255, 0.6);
2516
+ }
2517
+
2149
2518
  .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-icon {
2150
2519
  color: #fff;
2151
2520
  }
@@ -2190,6 +2559,11 @@
2190
2559
  color: #616161;
2191
2560
  }
2192
2561
 
2562
+ .e-ribbon-keytip {
2563
+ background-color: #fff;
2564
+ color: #000;
2565
+ }
2566
+
2193
2567
  .e-ribbon-menu.e-menu-wrapper:not(.e-menu-popup), .e-ribbon-menu.e-menu-container:not(.e-menu-popup) {
2194
2568
  background: #424242;
2195
2569
  }