You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_side_toolbar_container.scss 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /**
  2. * Toolbar side panel main container element.
  3. */
  4. #sideToolbarContainer {
  5. display: inline-block;
  6. position:absolute;
  7. top: 0px;
  8. left: $defaultToolbarSize;
  9. width: 0;
  10. background-color: rgba(0,0,0,0.8);
  11. height: 100%;
  12. max-width: $sidebarWidth;
  13. z-index: 800;
  14. overflow: hidden;
  15. letter-spacing: $titleLetterSpacing;
  16. /**
  17. * Labels inside the side panel.
  18. */
  19. label {
  20. color: $defaultColor;
  21. }
  22. /**
  23. * Form elements and blocks.
  24. */
  25. input, label, select, a,
  26. .sideToolbarBlock, .input-control, .button-control {
  27. display: inline-block;
  28. margin-top: 15px;
  29. margin-left: 10%;
  30. width: 80%;
  31. }
  32. /**
  33. * Specify colors for edit elements.
  34. */
  35. select, input[type="button"], input[type="text"],
  36. input[type="reset"], input[type="submit"] {
  37. color: $inputColor;
  38. background: $inputBackground;
  39. border: none;
  40. }
  41. /**
  42. * Specify styling of elements inside a block.
  43. */
  44. .sideToolbarBlock {
  45. input, label, button, a, select {
  46. margin-top: 5px;
  47. margin-left: 0;
  48. width: 100%;
  49. }
  50. .startMutedLabel,
  51. .followMeLabel {
  52. display: inline;
  53. margin-top: 0;
  54. }
  55. }
  56. /**
  57. * Inner container, for example contact list, settings or profile.
  58. */
  59. .sideToolbarContainer__inner {
  60. display: none;
  61. height: 100%;
  62. width: $sidebarWidth;
  63. position: absolute;
  64. box-sizing: border-box;
  65. color: #FFF;
  66. /**
  67. * Titles and subtitles of inner containers.
  68. */
  69. > div.title,
  70. div.subTitle {
  71. text-align: left;
  72. margin: 10px 0px 10px 0px;
  73. }
  74. /**
  75. * Main title size.
  76. */
  77. > div.title {
  78. color: $defaultColor !important;
  79. text-align: center;
  80. font-size: 16px;
  81. }
  82. /**
  83. * Subtitle specific properties.
  84. */
  85. > div.subTitle {
  86. font-size: 11px;
  87. font-weight: 500;
  88. color: $defaultSideBarFontColor !important;
  89. margin-left: 10%;
  90. }
  91. /**
  92. * First element after a title.
  93. */
  94. .first {
  95. margin-top: 0px !important;
  96. }
  97. /**
  98. * Buttons in the side toolbar container.
  99. */
  100. .button-control {
  101. margin: 9px 0;
  102. width: 100%;
  103. }
  104. }
  105. }
  106. #device_settings {
  107. width : auto !important;
  108. text-align: center;
  109. }
  110. #startAudioMuted,
  111. #startVideoMuted,
  112. #followMeCheckBox {
  113. width: 13px !important;
  114. }