css.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806
  1. /**
  2. * @license
  3. * Visual Blocks Editor
  4. *
  5. * Copyright 2013 Google Inc.
  6. * https://developers.google.com/blockly/
  7. *
  8. * Licensed under the Apache License, Version 2.0 (the "License");
  9. * you may not use this file except in compliance with the License.
  10. * You may obtain a copy of the License at
  11. *
  12. * http://www.apache.org/licenses/LICENSE-2.0
  13. *
  14. * Unless required by applicable law or agreed to in writing, software
  15. * distributed under the License is distributed on an "AS IS" BASIS,
  16. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17. * See the License for the specific language governing permissions and
  18. * limitations under the License.
  19. */
  20. /**
  21. * @fileoverview Inject Blockly's CSS synchronously.
  22. * @author fraser@google.com (Neil Fraser)
  23. */
  24. 'use strict';
  25. goog.provide('Blockly.Css');
  26. /**
  27. * List of cursors.
  28. * @enum {string}
  29. */
  30. Blockly.Css.Cursor = {
  31. OPEN: 'handopen',
  32. CLOSED: 'handclosed',
  33. DELETE: 'handdelete'
  34. };
  35. /**
  36. * Current cursor (cached value).
  37. * @type {string}
  38. * @private
  39. */
  40. Blockly.Css.currentCursor_ = '';
  41. /**
  42. * Large stylesheet added by Blockly.Css.inject.
  43. * @type {Element}
  44. * @private
  45. */
  46. Blockly.Css.styleSheet_ = null;
  47. /**
  48. * Path to media directory, with any trailing slash removed.
  49. * @type {string}
  50. * @private
  51. */
  52. Blockly.Css.mediaPath_ = '';
  53. /**
  54. * Inject the CSS into the DOM. This is preferable over using a regular CSS
  55. * file since:
  56. * a) It loads synchronously and doesn't force a redraw later.
  57. * b) It speeds up loading by not blocking on a separate HTTP transfer.
  58. * c) The CSS content may be made dynamic depending on init options.
  59. * @param {boolean} hasCss If false, don't inject CSS
  60. * (providing CSS becomes the document's responsibility).
  61. * @param {string} pathToMedia Path from page to the Blockly media directory.
  62. */
  63. Blockly.Css.inject = function(hasCss, pathToMedia) {
  64. // Only inject the CSS once.
  65. if (Blockly.Css.styleSheet_) {
  66. return;
  67. }
  68. // Placeholder for cursor rule. Must be first rule (index 0).
  69. var text = '.blocklyDraggable {}\n';
  70. if (hasCss) {
  71. text += Blockly.Css.CONTENT.join('\n');
  72. if (Blockly.FieldDate) {
  73. text += Blockly.FieldDate.CSS.join('\n');
  74. }
  75. }
  76. // Strip off any trailing slash (either Unix or Windows).
  77. Blockly.Css.mediaPath_ = pathToMedia.replace(/[\\\/]$/, '');
  78. text = text.replace(/<<<PATH>>>/g, Blockly.Css.mediaPath_);
  79. // Inject CSS tag at start of head.
  80. var cssNode = document.createElement('style');
  81. document.head.insertBefore(cssNode, document.head.firstChild);
  82. var cssTextNode = document.createTextNode(text);
  83. cssNode.appendChild(cssTextNode);
  84. Blockly.Css.styleSheet_ = cssNode.sheet;
  85. Blockly.Css.setCursor(Blockly.Css.Cursor.OPEN);
  86. };
  87. /**
  88. * Set the cursor to be displayed when over something draggable.
  89. * @param {Blockly.Css.Cursor} cursor Enum.
  90. */
  91. Blockly.Css.setCursor = function(cursor) {
  92. if (Blockly.Css.currentCursor_ == cursor) {
  93. return;
  94. }
  95. Blockly.Css.currentCursor_ = cursor;
  96. var url = 'url(' + Blockly.Css.mediaPath_ + '/' + cursor + '.cur), auto';
  97. // There are potentially hundreds of draggable objects. Changing their style
  98. // properties individually is too slow, so change the CSS rule instead.
  99. var rule = '.blocklyDraggable {\n cursor: ' + url + ';\n}\n';
  100. Blockly.Css.styleSheet_.deleteRule(0);
  101. Blockly.Css.styleSheet_.insertRule(rule, 0);
  102. // There is probably only one toolbox, so just change its style property.
  103. var toolboxen = document.getElementsByClassName('blocklyToolboxDiv');
  104. for (var i = 0, toolbox; toolbox = toolboxen[i]; i++) {
  105. if (cursor == Blockly.Css.Cursor.DELETE) {
  106. toolbox.style.cursor = url;
  107. } else {
  108. toolbox.style.cursor = '';
  109. }
  110. }
  111. // Set cursor on the whole document, so that rapid movements
  112. // don't result in cursor changing to an arrow momentarily.
  113. var html = document.body.parentNode;
  114. if (cursor == Blockly.Css.Cursor.OPEN) {
  115. html.style.cursor = '';
  116. } else {
  117. html.style.cursor = url;
  118. }
  119. };
  120. /**
  121. * Array making up the CSS content for Blockly.
  122. */
  123. Blockly.Css.CONTENT = [
  124. '.blocklySvg {',
  125. 'background-color: #fff;',
  126. 'outline: none;',
  127. 'overflow: hidden;', /* IE overflows by default. */
  128. 'display: block;',
  129. '}',
  130. '.blocklyWidgetDiv {',
  131. 'display: none;',
  132. 'position: absolute;',
  133. 'z-index: 99999;', /* big value for bootstrap3 compatibility */
  134. '}',
  135. '.injectionDiv {',
  136. 'height: 100%;',
  137. 'position: relative;',
  138. '}',
  139. '.blocklyNonSelectable {',
  140. 'user-select: none;',
  141. '-moz-user-select: none;',
  142. '-webkit-user-select: none;',
  143. '-ms-user-select: none;',
  144. '}',
  145. '.blocklyTooltipDiv {',
  146. 'background-color: #ffffc7;',
  147. 'border: 1px solid #ddc;',
  148. 'box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);',
  149. 'color: #000;',
  150. 'display: none;',
  151. 'font-family: sans-serif;',
  152. 'font-size: 9pt;',
  153. 'opacity: 0.9;',
  154. 'padding: 2px;',
  155. 'position: absolute;',
  156. 'z-index: 100000;', /* big value for bootstrap3 compatibility */
  157. '}',
  158. '.blocklyResizeSE {',
  159. 'cursor: se-resize;',
  160. 'fill: #aaa;',
  161. '}',
  162. '.blocklyResizeSW {',
  163. 'cursor: sw-resize;',
  164. 'fill: #aaa;',
  165. '}',
  166. '.blocklyResizeLine {',
  167. 'stroke: #888;',
  168. 'stroke-width: 1;',
  169. '}',
  170. '.blocklyHighlightedConnectionPath {',
  171. 'fill: none;',
  172. 'stroke: #fc3;',
  173. 'stroke-width: 4px;',
  174. '}',
  175. '.blocklyPathLight {',
  176. 'fill: none;',
  177. 'stroke-linecap: round;',
  178. 'stroke-width: 1;',
  179. '}',
  180. '.blocklySelected>.blocklyPath {',
  181. 'stroke: #fc3;',
  182. 'stroke-width: 3px;',
  183. '}',
  184. '.blocklySelected>.blocklyPathLight {',
  185. 'display: none;',
  186. '}',
  187. '.blocklyDragging>.blocklyPath,',
  188. '.blocklyDragging>.blocklyPathLight {',
  189. 'fill-opacity: .8;',
  190. 'stroke-opacity: .8;',
  191. '}',
  192. '.blocklyDragging>.blocklyPathDark {',
  193. 'display: none;',
  194. '}',
  195. '.blocklyDisabled>.blocklyPath {',
  196. 'fill-opacity: .5;',
  197. 'stroke-opacity: .5;',
  198. '}',
  199. '.blocklyDisabled>.blocklyPathLight,',
  200. '.blocklyDisabled>.blocklyPathDark {',
  201. 'display: none;',
  202. '}',
  203. '.blocklyText {',
  204. 'cursor: default;',
  205. 'fill: #fff;',
  206. 'font-family: sans-serif;',
  207. 'font-size: 11pt;',
  208. '}',
  209. '.blocklyTextCode {',
  210. ' font-family: monospace;',
  211. '}',
  212. '.blocklyNonEditableText>text {',
  213. 'pointer-events: none;',
  214. '}',
  215. '.blocklyNonEditableText>rect,',
  216. '.blocklyEditableText>rect {',
  217. 'fill: #fff;',
  218. 'fill-opacity: .6;',
  219. '}',
  220. '.blocklyNonEditableText>text,',
  221. '.blocklyEditableText>text {',
  222. 'fill: #000;',
  223. '}',
  224. '.blocklyEditableText:hover>rect {',
  225. 'stroke: #fff;',
  226. 'stroke-width: 2;',
  227. '}',
  228. '.blocklyBubbleText {',
  229. 'fill: #000;',
  230. '}',
  231. '.blocklyFlyoutButton {',
  232. 'fill: #888;',
  233. 'cursor: default;',
  234. '}',
  235. '.blocklyFlyoutButtonShadow {',
  236. 'fill: #666;',
  237. '}',
  238. '.blocklyFlyoutButton:hover {',
  239. 'fill: #aaa;',
  240. '}',
  241. '.blocklyFlyoutLabel {',
  242. 'cursor: default;',
  243. '}',
  244. '.blocklyFlyoutLabelBackground {',
  245. 'opacity: 0;',
  246. '}',
  247. '.blocklyFlyoutLabelText {',
  248. 'fill: #000;',
  249. '}',
  250. '.blocklyFlyoutLabelText:hover {',
  251. 'fill: #aaa;',
  252. '}',
  253. /*
  254. Don't allow users to select text. It gets annoying when trying to
  255. drag a block and selected text moves instead.
  256. */
  257. '.blocklySvg text {',
  258. 'user-select: none;',
  259. '-moz-user-select: none;',
  260. '-webkit-user-select: none;',
  261. 'cursor: inherit;',
  262. '}',
  263. '.blocklyHidden {',
  264. 'display: none;',
  265. '}',
  266. '.blocklyFieldDropdown:not(.blocklyHidden) {',
  267. 'display: block;',
  268. '}',
  269. '.blocklyIconGroup {',
  270. 'cursor: default;',
  271. '}',
  272. '.blocklyIconGroup:not(:hover),',
  273. '.blocklyIconGroupReadonly {',
  274. 'opacity: .6;',
  275. '}',
  276. '.blocklyIconShape {',
  277. 'fill: #00f;',
  278. 'stroke: #fff;',
  279. 'stroke-width: 1px;',
  280. '}',
  281. '.blocklyIconSymbol {',
  282. 'fill: #fff;',
  283. '}',
  284. '.blocklyMinimalBody {',
  285. 'margin: 0;',
  286. 'padding: 0;',
  287. '}',
  288. '.blocklyCommentTextarea {',
  289. 'background-color: #ffc;',
  290. 'border: 0;',
  291. 'margin: 0;',
  292. 'padding: 2px;',
  293. 'resize: none;',
  294. '}',
  295. '.blocklyHtmlInput {',
  296. 'border: none;',
  297. 'border-radius: 4px;',
  298. 'font-family: sans-serif;',
  299. 'height: 100%;',
  300. 'margin: 0;',
  301. 'outline: none;',
  302. 'padding: 0 1px;',
  303. 'width: 100%',
  304. '}',
  305. '.blocklyMainBackground {',
  306. 'stroke-width: 1;',
  307. 'stroke: #c6c6c6;', /* Equates to #ddd due to border being off-pixel. */
  308. '}',
  309. '.blocklyMutatorBackground {',
  310. 'fill: #fff;',
  311. 'stroke: #ddd;',
  312. 'stroke-width: 1;',
  313. '}',
  314. '.blocklyFlyoutBackground {',
  315. 'fill: #ddd;',
  316. 'fill-opacity: .8;',
  317. '}',
  318. '.blocklyScrollbarBackground {',
  319. 'opacity: 0;',
  320. '}',
  321. '.blocklyScrollbarHandle {',
  322. 'fill: #ccc;',
  323. '}',
  324. '.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,',
  325. '.blocklyScrollbarHandle:hover {',
  326. 'fill: #bbb;',
  327. '}',
  328. '.blocklyZoom>image {',
  329. 'opacity: .4;',
  330. '}',
  331. '.blocklyZoom>image:hover {',
  332. 'opacity: .6;',
  333. '}',
  334. '.blocklyZoom>image:active {',
  335. 'opacity: .8;',
  336. '}',
  337. /* Darken flyout scrollbars due to being on a grey background. */
  338. /* By contrast, workspace scrollbars are on a white background. */
  339. '.blocklyFlyout .blocklyScrollbarHandle {',
  340. 'fill: #bbb;',
  341. '}',
  342. '.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,',
  343. '.blocklyFlyout .blocklyScrollbarHandle:hover {',
  344. 'fill: #aaa;',
  345. '}',
  346. '.blocklyInvalidInput {',
  347. 'background: #faa;',
  348. '}',
  349. '.blocklyAngleCircle {',
  350. 'stroke: #444;',
  351. 'stroke-width: 1;',
  352. 'fill: #ddd;',
  353. 'fill-opacity: .8;',
  354. '}',
  355. '.blocklyAngleMarks {',
  356. 'stroke: #444;',
  357. 'stroke-width: 1;',
  358. '}',
  359. '.blocklyAngleGauge {',
  360. 'fill: #f88;',
  361. 'fill-opacity: .8;',
  362. '}',
  363. '.blocklyAngleLine {',
  364. 'stroke: #f00;',
  365. 'stroke-width: 2;',
  366. 'stroke-linecap: round;',
  367. '}',
  368. '.blocklyContextMenu {',
  369. 'border-radius: 4px;',
  370. '}',
  371. '.blocklyDropdownMenu {',
  372. 'padding: 0 !important;',
  373. '}',
  374. /* Override the default Closure URL. */
  375. '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,',
  376. '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {',
  377. 'background: url(<<<PATH>>>/sprites.png) no-repeat -48px -16px !important;',
  378. '}',
  379. /* Category tree in Toolbox. */
  380. '.blocklyToolboxDiv {',
  381. 'background-color: #ddd;',
  382. 'overflow-x: visible;',
  383. 'overflow-y: auto;',
  384. 'position: absolute;',
  385. '}',
  386. '.blocklyTreeRoot {',
  387. 'padding: 4px 0;',
  388. '}',
  389. '.blocklyTreeRoot:focus {',
  390. 'outline: none;',
  391. '}',
  392. '.blocklyTreeRow {',
  393. 'height: 22px;',
  394. 'line-height: 22px;',
  395. 'margin-bottom: 3px;',
  396. 'padding-right: 8px;',
  397. 'white-space: nowrap;',
  398. '}',
  399. '.blocklyHorizontalTree {',
  400. 'float: left;',
  401. 'margin: 1px 5px 8px 0;',
  402. '}',
  403. '.blocklyHorizontalTreeRtl {',
  404. 'float: right;',
  405. 'margin: 1px 0 8px 5px;',
  406. '}',
  407. '.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {',
  408. 'margin-left: 8px;',
  409. '}',
  410. '.blocklyTreeRow:not(.blocklyTreeSelected):hover {',
  411. 'background-color: #e4e4e4;',
  412. '}',
  413. '.blocklyTreeSeparator {',
  414. 'border-bottom: solid #e5e5e5 1px;',
  415. 'height: 0;',
  416. 'margin: 5px 0;',
  417. '}',
  418. '.blocklyTreeSeparatorHorizontal {',
  419. 'border-right: solid #e5e5e5 1px;',
  420. 'width: 0;',
  421. 'padding: 5px 0;',
  422. 'margin: 0 5px;',
  423. '}',
  424. '.blocklyTreeIcon {',
  425. 'background-image: url(<<<PATH>>>/sprites.png);',
  426. 'height: 16px;',
  427. 'vertical-align: middle;',
  428. 'width: 16px;',
  429. '}',
  430. '.blocklyTreeIconClosedLtr {',
  431. 'background-position: -32px -1px;',
  432. '}',
  433. '.blocklyTreeIconClosedRtl {',
  434. 'background-position: 0px -1px;',
  435. '}',
  436. '.blocklyTreeIconOpen {',
  437. 'background-position: -16px -1px;',
  438. '}',
  439. '.blocklyTreeSelected>.blocklyTreeIconClosedLtr {',
  440. 'background-position: -32px -17px;',
  441. '}',
  442. '.blocklyTreeSelected>.blocklyTreeIconClosedRtl {',
  443. 'background-position: 0px -17px;',
  444. '}',
  445. '.blocklyTreeSelected>.blocklyTreeIconOpen {',
  446. 'background-position: -16px -17px;',
  447. '}',
  448. '.blocklyTreeIconNone,',
  449. '.blocklyTreeSelected>.blocklyTreeIconNone {',
  450. 'background-position: -48px -1px;',
  451. '}',
  452. '.blocklyTreeLabel {',
  453. 'cursor: default;',
  454. 'font-family: sans-serif;',
  455. 'font-size: 16px;',
  456. 'padding: 0 3px;',
  457. 'vertical-align: middle;',
  458. '}',
  459. '.blocklyTreeSelected .blocklyTreeLabel {',
  460. '}',
  461. /* Copied from: goog/css/colorpicker-simplegrid.css */
  462. /*
  463. * Copyright 2007 The Closure Library Authors. All Rights Reserved.
  464. *
  465. * Use of this source code is governed by the Apache License, Version 2.0.
  466. * See the COPYING file for details.
  467. */
  468. /* Author: pupius@google.com (Daniel Pupius) */
  469. /*
  470. Styles to make the colorpicker look like the old gmail color picker
  471. NOTE: without CSS scoping this will override styles defined in palette.css
  472. */
  473. '.blocklyWidgetDiv .goog-palette {',
  474. 'outline: none;',
  475. 'cursor: default;',
  476. '}',
  477. '.blocklyWidgetDiv .goog-palette-table {',
  478. 'border: 4px solid #666;',
  479. 'border-collapse: collapse;',
  480. '}',
  481. '.blocklyWidgetDiv .goog-palette-cell {',
  482. 'height: 13px;',
  483. 'width: 15px;',
  484. 'margin: 0;',
  485. 'border: 0;',
  486. 'text-align: center;',
  487. 'vertical-align: middle;',
  488. 'border-right: 1px solid #666;',
  489. 'font-size: 1px;',
  490. '}',
  491. '.blocklyWidgetDiv .goog-palette-colorswatch {',
  492. 'position: relative;',
  493. 'height: 13px;',
  494. 'width: 15px;',
  495. 'border: 1px solid #666;',
  496. '}',
  497. '.blocklyWidgetDiv .goog-palette-cell-hover .goog-palette-colorswatch {',
  498. 'border: 1px solid #FFF;',
  499. '}',
  500. '.blocklyWidgetDiv .goog-palette-cell-selected .goog-palette-colorswatch {',
  501. 'border: 1px solid #000;',
  502. 'color: #fff;',
  503. '}',
  504. /* Copied from: goog/css/menu.css */
  505. /*
  506. * Copyright 2009 The Closure Library Authors. All Rights Reserved.
  507. *
  508. * Use of this source code is governed by the Apache License, Version 2.0.
  509. * See the COPYING file for details.
  510. */
  511. /**
  512. * Standard styling for menus created by goog.ui.MenuRenderer.
  513. *
  514. * @author attila@google.com (Attila Bodis)
  515. */
  516. '.blocklyWidgetDiv .goog-menu {',
  517. 'background: #fff;',
  518. 'border-color: #ccc #666 #666 #ccc;',
  519. 'border-style: solid;',
  520. 'border-width: 1px;',
  521. 'cursor: default;',
  522. 'font: normal 13px Arial, sans-serif;',
  523. 'margin: 0;',
  524. 'outline: none;',
  525. 'padding: 4px 0;',
  526. 'position: absolute;',
  527. 'overflow-y: auto;',
  528. 'overflow-x: hidden;',
  529. 'max-height: 100%;',
  530. 'z-index: 20000;', /* Arbitrary, but some apps depend on it... */
  531. '}',
  532. /* Copied from: goog/css/menuitem.css */
  533. /*
  534. * Copyright 2009 The Closure Library Authors. All Rights Reserved.
  535. *
  536. * Use of this source code is governed by the Apache License, Version 2.0.
  537. * See the COPYING file for details.
  538. */
  539. /**
  540. * Standard styling for menus created by goog.ui.MenuItemRenderer.
  541. *
  542. * @author attila@google.com (Attila Bodis)
  543. */
  544. /**
  545. * State: resting.
  546. *
  547. * NOTE(mleibman,chrishenry):
  548. * The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
  549. * classes and BiDi flipping done by the CSS compiler. Closure supports RTL
  550. * with or without the use of the CSS compiler. In order for them not
  551. * to conflict with each other, the "rtl" CSS classes need to have the #noflip
  552. * annotation. The non-rtl counterparts should ideally have them as well, but,
  553. * since .goog-menuitem existed without .goog-menuitem-rtl for so long before
  554. * being added, there is a risk of people having templates where they are not
  555. * rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
  556. * on the BiDi flipping by the CSS compiler. That's why we're not adding the
  557. * #noflip to .goog-menuitem.
  558. */
  559. '.blocklyWidgetDiv .goog-menuitem {',
  560. 'color: #000;',
  561. 'font: normal 13px Arial, sans-serif;',
  562. 'list-style: none;',
  563. 'margin: 0;',
  564. /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
  565. 'padding: 4px 7em 4px 28px;',
  566. 'white-space: nowrap;',
  567. '}',
  568. /* BiDi override for the resting state. */
  569. /* #noflip */
  570. '.blocklyWidgetDiv .goog-menuitem.goog-menuitem-rtl {',
  571. /* Flip left/right padding for BiDi. */
  572. 'padding-left: 7em;',
  573. 'padding-right: 28px;',
  574. '}',
  575. /* If a menu doesn't have checkable items or items with icons, remove padding. */
  576. '.blocklyWidgetDiv .goog-menu-nocheckbox .goog-menuitem,',
  577. '.blocklyWidgetDiv .goog-menu-noicon .goog-menuitem {',
  578. 'padding-left: 12px;',
  579. '}',
  580. /*
  581. * If a menu doesn't have items with shortcuts, leave just enough room for
  582. * submenu arrows, if they are rendered.
  583. */
  584. '.blocklyWidgetDiv .goog-menu-noaccel .goog-menuitem {',
  585. 'padding-right: 20px;',
  586. '}',
  587. '.blocklyWidgetDiv .goog-menuitem-content {',
  588. 'color: #000;',
  589. 'font: normal 13px Arial, sans-serif;',
  590. '}',
  591. /* State: disabled. */
  592. '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-accel,',
  593. '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content {',
  594. 'color: #ccc !important;',
  595. '}',
  596. '.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-icon {',
  597. 'opacity: 0.3;',
  598. '-moz-opacity: 0.3;',
  599. 'filter: alpha(opacity=30);',
  600. '}',
  601. /* State: hover. */
  602. '.blocklyWidgetDiv .goog-menuitem-highlight,',
  603. '.blocklyWidgetDiv .goog-menuitem-hover {',
  604. 'background-color: #d6e9f8;',
  605. /* Use an explicit top and bottom border so that the selection is visible',
  606. * in high contrast mode. */
  607. 'border-color: #d6e9f8;',
  608. 'border-style: dotted;',
  609. 'border-width: 1px 0;',
  610. 'padding-bottom: 3px;',
  611. 'padding-top: 3px;',
  612. '}',
  613. /* State: selected/checked. */
  614. '.blocklyWidgetDiv .goog-menuitem-checkbox,',
  615. '.blocklyWidgetDiv .goog-menuitem-icon {',
  616. 'background-repeat: no-repeat;',
  617. 'height: 16px;',
  618. 'left: 6px;',
  619. 'position: absolute;',
  620. 'right: auto;',
  621. 'vertical-align: middle;',
  622. 'width: 16px;',
  623. '}',
  624. /* BiDi override for the selected/checked state. */
  625. /* #noflip */
  626. '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-checkbox,',
  627. '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-icon {',
  628. /* Flip left/right positioning. */
  629. 'left: auto;',
  630. 'right: 6px;',
  631. '}',
  632. '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-checkbox,',
  633. '.blocklyWidgetDiv .goog-option-selected .goog-menuitem-icon {',
  634. /* Client apps may override the URL at which they serve the sprite. */
  635. 'background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;',
  636. '}',
  637. /* Keyboard shortcut ("accelerator") style. */
  638. '.blocklyWidgetDiv .goog-menuitem-accel {',
  639. 'color: #999;',
  640. /* Keyboard shortcuts are untranslated; always left-to-right. */
  641. /* #noflip */
  642. 'direction: ltr;',
  643. 'left: auto;',
  644. 'padding: 0 6px;',
  645. 'position: absolute;',
  646. 'right: 0;',
  647. 'text-align: right;',
  648. '}',
  649. /* BiDi override for shortcut style. */
  650. /* #noflip */
  651. '.blocklyWidgetDiv .goog-menuitem-rtl .goog-menuitem-accel {',
  652. /* Flip left/right positioning and text alignment. */
  653. 'left: 0;',
  654. 'right: auto;',
  655. 'text-align: left;',
  656. '}',
  657. /* Mnemonic styles. */
  658. '.blocklyWidgetDiv .goog-menuitem-mnemonic-hint {',
  659. 'text-decoration: underline;',
  660. '}',
  661. '.blocklyWidgetDiv .goog-menuitem-mnemonic-separator {',
  662. 'color: #999;',
  663. 'font-size: 12px;',
  664. 'padding-left: 4px;',
  665. '}',
  666. /* Copied from: goog/css/menuseparator.css */
  667. /*
  668. * Copyright 2009 The Closure Library Authors. All Rights Reserved.
  669. *
  670. * Use of this source code is governed by the Apache License, Version 2.0.
  671. * See the COPYING file for details.
  672. */
  673. /**
  674. * Standard styling for menus created by goog.ui.MenuSeparatorRenderer.
  675. *
  676. * @author attila@google.com (Attila Bodis)
  677. */
  678. '.blocklyWidgetDiv .goog-menuseparator {',
  679. 'border-top: 1px solid #ccc;',
  680. 'margin: 4px 0;',
  681. 'padding: 0;',
  682. '}',
  683. ''
  684. ];