Advertisement
Guest User

Příklad CSS debílku

a guest
Mar 26th, 2019
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.55 KB | None | 0 0
  1. #nowPlayingLeft,
  2. #nowPlayingRight {
  3. width: 30%;
  4. min-width: 180px;
  5. }
  6.  
  7. #nowPlayingRight {
  8. position: relative;
  9. margin-top: 16px;
  10. }
  11.  
  12. #nowPlayingCenter {
  13. width: 40%;
  14. max-width: 700px;
  15. display: flex;
  16. flex-direction: column;
  17. align-items: center;
  18. }
  19.  
  20. #nowPlayingBar .content {
  21. width: 100%;
  22. height: 57px;
  23. }
  24.  
  25. .playerControls .buttons {
  26. margin: 0 auto;
  27. display: table;
  28. }
  29.  
  30. .controlButton {
  31. background-color: transparent;
  32. border: none;
  33. vertical-align: middle;
  34. }
  35.  
  36. .controlButton img {
  37. width: 20px;
  38. height: 20px;
  39. }
  40.  
  41. .controlButton.play img,
  42. .controlButton.pause img {
  43. width: 32px;
  44. height: 32px;
  45. }
  46.  
  47. .controlButton:hover {
  48. cursor: pointer;
  49. }
  50.  
  51. .progressTime {
  52. color: #a0a0a0;
  53. font-size: 11px;
  54. min-width: 40px;
  55. text-align: center;
  56. }
  57.  
  58. .playbackBar {
  59. display: flex;
  60. }
  61.  
  62. .progressBar {
  63. width: 100%;
  64. height: 12px;
  65. display: inline-flex;
  66. cursor: pointer;
  67. }
  68.  
  69. .progressBarBg {
  70. background-color: #404040;
  71. height: 4px;
  72. width: 100%;
  73. border-radius: 2px;
  74. }
  75.  
  76. .progress {
  77. background-color: #a0a0a0;
  78. height: 4px;
  79. width: 0;
  80. border-radius: 2px;
  81. }
  82.  
  83. .playbackBar .progressBar {
  84. margin-top: 3px;
  85. }
  86.  
  87. #nowPlayingLeft .albumArtwork {
  88. height: 100%;
  89. max-width: 57px;
  90. margin-right: 15px;
  91. float: left;
  92. background-size: cover;
  93. }
  94.  
  95. #nowPlayingLeft .trackInfo {
  96. display: table;
  97. }
  98.  
  99. #nowPlayingLeft .trackInfo .trackName {
  100. margin: 6px 0;
  101. display: inline-block;
  102. width: 100%;
  103. }
  104.  
  105. #nowPlayingLeft .trackInfo .artistName span {
  106. font-size: 12px;
  107. color: #a0a0a0;
  108. }
  109.  
  110. .volumeBar {
  111. width: 180px;
  112. position: absolute;
  113. right: 0;
  114. }
  115.  
  116. .volumeBar .progressBar {
  117. width: 125px;
  118. }
  119.  
  120. #topContainer {
  121. min-height: 100%;
  122. width: 100%;
  123. }
  124.  
  125. #navBarContainer {
  126. background-color: #000;
  127. width: 220px;
  128. height: 100vh;
  129. position: fixed;
  130. top: 0;
  131. left: 0;
  132. }
  133.  
  134. .navBar {
  135. padding: 25px;
  136. display: flex;
  137. flex-direction: column;
  138. -ms-flex-direction: column;
  139. }
  140.  
  141. .logo {
  142. margin-bottom: 15px;
  143. }
  144.  
  145. .logo img {
  146. width: 32px;
  147. }
  148.  
  149. .navBar .group {
  150. border-top: 1px solid #a0a0a0;
  151. padding: 10px 0;
  152. }
  153.  
  154. .navItem {
  155. padding: 10px 0;
  156. font-size: 14px;
  157. font-weight: 700;
  158. display: block;
  159. letter-spacing: 1px;
  160. position: relative;
  161. }
  162.  
  163. .navItemLink {
  164. color: #a0a0a0;
  165. text-decoration: none;
  166. }
  167.  
  168. .navItemLink:hover {
  169. color: #ffffff;
  170. }
  171.  
  172. .navItemLink .icon {
  173. position: absolute;
  174. right: 0;
  175. top: 6px;
  176. width: 25px;
  177. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement