customizing-the-appearence-scrollbars.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
  3. <html>
  4. <head>
  5. <base href="..">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8. </head>
  9. <body>
  10. <style>
  11. /*----------------------------------------SAMPLE CSS START*/
  12. /* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */
  13. .monaco-editor .monaco-scrollable-element .scrollbar.horizontal,
  14. .monaco-editor .decorationsOverviewRuler,
  15. .monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background {
  16. background: rgba(230, 230, 230, 255);
  17. }
  18. /* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */
  19. .monaco-editor .monaco-scrollable-element .scrollbar.vertical {
  20. background: rgba(0, 0, 0, 0);
  21. }
  22. /*----------------------------------------SAMPLE CSS END*/
  23. </style>
  24. <a class="loading-opts" href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
  25. THIS IS A GENERATED FILE VIA gulp generate-test-samples
  26. <div id="bar" style="margin-bottom: 6px;"></div>
  27. <div style="clear:both"></div>
  28. <div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
  29. <!-- ----------------------------------------SAMPLE HTML START-->
  30. <div id="container" style="height:100%;"></div>
  31. <!-- ----------------------------------------SAMPLE HTML END-->
  32. </div>
  33. <div style="clear:both"></div>
  34. <script src="../metadata.js"></script>
  35. <script src="dev-setup.js"></script>
  36. <script>
  37. loadEditor(function() {
  38. /*----------------------------------------SAMPLE JS START*/
  39. // Remember to check out the CSS too!
  40. var htmlCode = "<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\n<head>\n <!-- HTML comment -->\n <style type=\"text/css\">\n /* CSS comment */\n </style>\n <script type=\"javascript\">\n // JavaScript comment\n </"+"script>\n</head>\n<body></body>\n</html>";
  41. monaco.editor.create(document.getElementById("container"), {
  42. value: htmlCode,
  43. language: "text/html",
  44. theme: "vs",
  45. scrollbar: {
  46. // Subtle shadows to the left & top. Defaults to true.
  47. useShadows: false,
  48. // Render vertical arrows. Defaults to false.
  49. verticalHasArrows: true,
  50. // Render horizontal arrows. Defaults to false.
  51. horizontalHasArrows: true,
  52. // Render vertical scrollbar.
  53. // Accepted values: 'auto', 'visible', 'hidden'.
  54. // Defaults to 'auto'
  55. vertical: 'visible',
  56. // Render horizontal scrollbar.
  57. // Accepted values: 'auto', 'visible', 'hidden'.
  58. // Defaults to 'auto'
  59. horizontal: 'visible',
  60. verticalScrollbarSize: 17,
  61. horizontalScrollbarSize: 17,
  62. arrowSize: 30
  63. }
  64. });
  65. /*----------------------------------------SAMPLE CSS END*/
  66. });
  67. </script>
  68. </body>
  69. </html>