browser-demo.css 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. html, body {
  2. height: 100%;
  3. overflow: hidden;
  4. font-family: "proxima-nova", sans-serif; }
  5. .tether.tether-theme-arrows-dark .tether-content {
  6. -webkit-filter: none;
  7. filter: none;
  8. background: #000; }
  9. .tether.tether-theme-arrows-dark .tether-content ul {
  10. color: #fff;
  11. list-style: none;
  12. padding: 0;
  13. margin: 0; }
  14. .tether.tether-theme-arrows-dark.tether-element-attached-top.tether-element-attached-left.tether-target-attached-right .tether-content:before {
  15. border-right-color: #000; }
  16. .browser-demo {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. bottom: 0;
  21. right: 0; }
  22. .browser-demo *, .browser-demo *:after, .browser-demo *:before {
  23. box-sizing: border-box; }
  24. .browser-demo .top {
  25. position: absolute;
  26. height: 60px;
  27. padding: 20px;
  28. line-height: 40px;
  29. width: 100%;
  30. border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  31. .browser-demo .bottom {
  32. position: absolute;
  33. top: 60px;
  34. bottom: 0;
  35. width: 100%; }
  36. .browser-demo .bottom .left {
  37. border-right: 1px solid rgba(0, 0, 0, 0.1);
  38. position: absolute;
  39. width: 30%;
  40. height: 100%;
  41. overflow: auto; }
  42. .browser-demo .bottom .left .item {
  43. height: 64px;
  44. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  45. cursor: pointer; }
  46. .browser-demo .bottom .left .item:hover, .browser-demo .bottom .left .item.tether-open {
  47. background: rgba(0, 0, 0, 0.1);
  48. border-bottom: 1px solid transparent; }
  49. .browser-demo .bottom .left .item:last-child {
  50. border-bottom: 0; }
  51. .browser-demo .bottom .right {
  52. position: absolute;
  53. width: 70%;
  54. right: 0;
  55. height: 100%;
  56. padding: 20px; }
  57. .browser-demo .title {
  58. display: inline-block;
  59. vertical-align: middle;
  60. *vertical-align: auto;
  61. *zoom: 1;
  62. *display: inline;
  63. background: rgba(0, 0, 0, 0.1);
  64. width: 150px;
  65. height: 15px;
  66. margin-bottom: 20px; }
  67. .browser-demo .word {
  68. display: inline-block;
  69. vertical-align: middle;
  70. *vertical-align: auto;
  71. *zoom: 1;
  72. *display: inline;
  73. background: rgba(0, 0, 0, 0.1);
  74. width: 50px;
  75. height: 8px;
  76. margin-right: 5px;
  77. margin-bottom: 5px; }
  78. .browser-demo .word:nth-last-child(4n+1) {
  79. width: 73px; }
  80. .browser-demo .word:nth-last-child(10n+1) {
  81. width: 14px; }
  82. .browser-demo .word:nth-last-child(9n+1) {
  83. width: 80px; }