viewport.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. .msp-viewport {
  2. position: absolute;
  3. left: 0;
  4. top: 0;
  5. right: 0;
  6. bottom: 0;
  7. background: black;
  8. .msp-btn-link {
  9. background: rgba(0,0,0,0.2);
  10. }
  11. }
  12. .msp-viewport-expanded {
  13. position: fixed;
  14. z-index: 1000;
  15. }
  16. .msp-viewport-host3d {
  17. position: absolute;
  18. left: 0;
  19. top: 0;
  20. right: 0;
  21. bottom: 0;
  22. -webkit-user-select: none;
  23. -webkit-tap-highlight-color: rgba(0,0,0,0);
  24. -webkit-touch-callout: none;
  25. touch-action: manipulation;
  26. }
  27. .msp-viewport-controls {
  28. position: absolute;
  29. right: $control-spacing;
  30. top: $control-spacing;
  31. width: 32px;
  32. }
  33. .msp-viewport-controls-buttons {
  34. text-align: right;
  35. position: relative;
  36. > button {
  37. padding: 0;
  38. text-align: center;
  39. width: $row-height;
  40. position: relative;
  41. }
  42. .msp-btn-link-toggle-off {
  43. color: $msp-btn-link-toggle-off-font-color;
  44. }
  45. .msp-btn-link:hover {
  46. color: $hover-font-color;
  47. }
  48. }
  49. .msp-semi-transparent-background {
  50. background: $default-background;
  51. opacity: 0.2;
  52. position: absolute;
  53. top: 0;
  54. left: 0;
  55. width: 100%;
  56. height: 100%;
  57. }
  58. .msp-viewport-controls-scene-options {
  59. overflow-y: auto;
  60. max-height: 400px;
  61. width: 290px;
  62. right: 0px;
  63. position: absolute;
  64. background: $control-background;
  65. margin-top: $control-spacing;
  66. .msp-control-group-wrapper:first-child {
  67. padding-top: 0;
  68. }
  69. }
  70. /* highlight & toasts */
  71. .msp-highlight-toast-wrapper {
  72. position: absolute;
  73. right: $control-spacing;
  74. bottom: $control-spacing;
  75. max-width: 95%;
  76. z-index: 10000;
  77. }
  78. .msp-highlight-info {
  79. color: $highlight-info-font-color;
  80. padding: $info-vertical-padding $control-spacing;
  81. background: $default-background; //$highlight-info-background;
  82. min-height: $row-height;
  83. text-align: right;
  84. @include non-selectable;
  85. }
  86. .msp-highlight-info-additional {
  87. font-size: 85%;
  88. display: inline-block;
  89. color: $highlight-info-additional-font-color;
  90. }