imagePreview.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. html, body {
  6. width: 100%;
  7. height: 100%;
  8. text-align: center;
  9. }
  10. body img {
  11. max-width: none;
  12. max-height: none;
  13. }
  14. .container:focus {
  15. outline: none !important;
  16. }
  17. .container {
  18. padding: 5px 0 0 10px;
  19. box-sizing: border-box;
  20. -webkit-user-select: none;
  21. user-select: none;
  22. }
  23. .container.image {
  24. padding: 0;
  25. display: flex;
  26. box-sizing: border-box;
  27. }
  28. .container.image img {
  29. padding: 0;
  30. background-position: 0 0, 8px 8px;
  31. background-size: 16px 16px;
  32. border: 1px solid var(--vscode-imagePreview-border);
  33. }
  34. .container.image img {
  35. background-image:
  36. linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)),
  37. linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230));
  38. }
  39. .vscode-dark.container.image img {
  40. background-image:
  41. linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)),
  42. linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20));
  43. }
  44. .container img.pixelated {
  45. image-rendering: pixelated;
  46. }
  47. .container img.scale-to-fit {
  48. max-width: calc(100% - 20px);
  49. max-height: calc(100% - 20px);
  50. object-fit: contain;
  51. }
  52. .container img {
  53. margin: auto;
  54. }
  55. .container.ready.zoom-in {
  56. cursor: zoom-in;
  57. }
  58. .container.ready.zoom-out {
  59. cursor: zoom-out;
  60. }
  61. .container .embedded-link,
  62. .container .embedded-link:hover {
  63. cursor: pointer;
  64. text-decoration: underline;
  65. margin-left: 5px;
  66. }
  67. .container.loading,
  68. .container.error {
  69. display: flex;
  70. justify-content: center;
  71. align-items: center;
  72. }
  73. .loading-indicator {
  74. width: 30px;
  75. height: 30px;
  76. background-image: url('./loading.svg');
  77. background-size: cover;
  78. }
  79. .loading-indicator,
  80. .image-load-error {
  81. display: none;
  82. }
  83. .loading .loading-indicator,
  84. .error .image-load-error {
  85. display: block;
  86. }
  87. .image-load-error {
  88. margin: 1em;
  89. }
  90. .vscode-dark .loading-indicator {
  91. background-image: url('./loading-dark.svg');
  92. }
  93. .vscode-high-contrast .loading-indicator {
  94. background-image: url('./loading-hc.svg');
  95. }