HLayout.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. @font-face {
  2. font-family: 'Open Sans';
  3. src: url('OpenSans-Regular.ttf') format('truetype') /* Safari, Android, iOS */
  4. }
  5. body,html {
  6. position:relative;
  7. width:100%;
  8. height:100%;
  9. margin:0px;
  10. padding:0px;
  11. }
  12. * {
  13. box-sizing: border-box;
  14. -moz-box-sizing: border-box;
  15. -webkit-box-sizing: border-box;
  16. }
  17. .layout-container {
  18. box-sizing: border-box;
  19. -moz-box-sizing: border-box;
  20. -webkit-box-sizing: border-box;
  21. padding:5px;
  22. position:absolute;
  23. top:0px;
  24. bottom:0px;
  25. left:0px;
  26. right:0px;
  27. display:flex;
  28. background: #333;
  29. }
  30. section {
  31. display:flex;
  32. flex:1 0 auto;
  33. background:transparent;
  34. }
  35. section.vertical {
  36. flex-direction: row;
  37. }
  38. section.horizontal {
  39. flex-direction: column;
  40. }
  41. section.horizontal > .splitter {
  42. cursor:s-resize;
  43. }
  44. section.vertical > .splitter {
  45. cursor:e-resize;
  46. }
  47. .splitter {
  48. background: transparent;
  49. flex-basis:6px;
  50. flex-grow: 0;
  51. min-width:6px;
  52. min-height:6px;
  53. }
  54. /* AKA PAne */
  55. .hpane {
  56. /*box-shadow: 0px 0px 10px #000;*/
  57. position:relative;
  58. overflow:hidden;
  59. flex: 1 1 auto;
  60. flex-direction: column;
  61. /* Theme part */
  62. background: #EEE;
  63. color: #333;
  64. transition: border 1s ease;
  65. opacity:1;
  66. }
  67. .hpane.discover {
  68. box-sizing: border-box;
  69. -moz-box-sizing: border-box;
  70. -webkit-box-sizing: border-box;
  71. gborder: solid 40px #999;
  72. transition: border 1s ease;
  73. }
  74. .hpane.detached {
  75. position:Fixed;
  76. /*width:20%;*/
  77. /*height:50%;*/
  78. z-index:99;
  79. box-shadow: 0px 0px 10px #000;
  80. }
  81. .hpane.detached.moving {
  82. opacity: 0.5;
  83. pointer-events: none;
  84. }
  85. .hpane.preview {
  86. background: #555;
  87. border: dashed 1px #FFF;
  88. }
  89. .hpane >header {
  90. padding:10px;
  91. background: #555;
  92. color:#FFF;
  93. font-family: 'Open Sans';
  94. text-transform:uppercase;
  95. font-weight: 700;
  96. -webkit-touch-callout: none; /* iOS Safari */
  97. -webkit-user-select: none; /* Chrome/Safari/Opera */
  98. -khtml-user-select: none; /* Konqueror */
  99. -moz-user-select: none; /* Firefox */
  100. -ms-user-select: none; /* IE/Edge */
  101. user-select: none;
  102. }
  103. .hpane .hcontent {
  104. overflow:auto;
  105. position:absolute;
  106. top:40px;
  107. bottom:0px;
  108. left:0px;
  109. right:0px;
  110. background: #EEE;
  111. color:#333;
  112. font-family: 'Open Sans';
  113. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  114. -moz-box-sizing: border-box; /* Firefox, other Gecko */
  115. box-sizing: border-box; /* Opera/IE 8+ */
  116. }
  117. .attach-preview {
  118. position:fixed;
  119. background: rgba(0,0,0,0.2);
  120. border: dashed 1px #777;
  121. z-index:90;
  122. pointer-events:none;
  123. transition: all 0.2s;
  124. }
  125. section.horizontal {
  126. cursor:s-resize;
  127. }
  128. section.vertical {
  129. cursor:e-resize;
  130. }
  131. section.horizontal > *:first-child {
  132. rborder: solid 1px #F00;
  133. margin-bottom:7px;
  134. }
  135. section.vertical > *:first-child {
  136. rborder: solid 1px #F00;
  137. margin-right:7px;
  138. }
  139. section > * {
  140. cursor:initial;
  141. }