main.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. .insp-wrapper {
  2. // Import variables, color and font files
  3. @import "defines";
  4. // Style for resize bar
  5. .gutter {
  6. background-color: $background-lighter;
  7. &.gutter-vertical:not(.blocked) {
  8. cursor : ns-resize;
  9. }
  10. &.gutter-horizontal:not(.blocked) {
  11. cursor : ew-resize;
  12. }
  13. }
  14. user-select: none;
  15. display:flex;
  16. font-size:0.9em;
  17. font-family : $font;
  18. // The panel containing the two subpanel : tree and details
  19. .insp-right-panel {
  20. width: 750px;
  21. &.popupmode {
  22. width:100% !important;
  23. }
  24. display:flex;
  25. flex-direction: column;
  26. flex-shrink: 0;
  27. // The tree panel
  28. .top-panel {
  29. width:100%;
  30. height:100%;
  31. position:relative;
  32. background-color: $background;
  33. color : $color;
  34. font-size : 1em;
  35. // The div that will contain the tab div
  36. .tab-panel-content {
  37. width:100%;
  38. height:calc(100% - #{$tabbar-height});
  39. }
  40. // The div displaying all invisible tabs (when the tabbar width is small)
  41. .more-tabs-panel {
  42. position:absolute;
  43. z-index:10;
  44. top:$tabbar-height;
  45. right:0;
  46. width:100px;
  47. display:none;
  48. flex-direction: column;
  49. align-items: center;
  50. justify-content: center;
  51. border: 1px solid $background-lighter3;
  52. background-color: $background;
  53. .invisible-tab {
  54. height : 25px;
  55. width : 100%;
  56. line-height: 25px;
  57. text-align : center;
  58. background-color: $background-lighter;
  59. cursor:pointer;
  60. // Hover on it
  61. &:hover {
  62. background-color: $background-lighter2;
  63. }
  64. // Clic on it
  65. &:active {
  66. background-color: $background-lighter3;
  67. }
  68. }
  69. }
  70. }
  71. }
  72. @import 'tooltip';
  73. // All tools used on object in the tree
  74. @import 'treeTool';
  75. @import "tabPanel";
  76. @import "tabs/shaderTab";
  77. @import "tabs/consoleTab";
  78. @import "tabs/statsTab";
  79. @import "tree";
  80. @import "detailPanel";
  81. @import "tabbar";
  82. @import "toolbar";
  83. @import "searchbar";
  84. }