hydration_system.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. body {
  2. margin:0;
  3. }
  4. .navbar-dark .navbar-nav .nav-link {
  5. color: white;
  6. cursor: pointer;
  7. text-decoration:none;
  8. }
  9. .nav-top {
  10. line-height:40px;
  11. background-color: #C4C4C4;
  12. }
  13. .website_title{
  14. font-family: Roboto;
  15. font-style: normal;
  16. font-weight: normal;
  17. font-size: 30px;
  18. color: #000000;
  19. }
  20. .navbar-nav > li{
  21. float: none;
  22. display: inline-block;
  23. width: 200px;
  24. margin: 0 auto;
  25. text-align: center;
  26. }
  27. .navbar-nav > li a{
  28. font-size: 20px;
  29. }
  30. .main-page {
  31. margin-top: 200px;
  32. }
  33. .page-title {
  34. font-family: Roboto;
  35. font-style: normal;
  36. font-weight: bold;
  37. font-size: 36px;
  38. color: #000000;
  39. }
  40. form {
  41. margin-top: 70px;
  42. }
  43. .cmn-toggle {
  44. position: absolute;
  45. margin-left: 0px;
  46. visibility: hidden;
  47. }
  48. .cmn-toggle + label {
  49. display: block;
  50. position: relative;
  51. cursor: pointer;
  52. outline: none;
  53. user-select: none;
  54. }
  55. input.cmn-toggle-round-flat + label {
  56. padding: 2px;
  57. width: 60px;
  58. height: 30px;
  59. background-color: #C0C0C0;
  60. border-radius: 60px;
  61. transition: background 0.4s;
  62. }
  63. input.cmn-toggle-round-flat + label:before,
  64. input.cmn-toggle-round-flat + label:after {
  65. display: block;
  66. position: absolute;
  67. content: "";
  68. }
  69. input.cmn-toggle-round-flat + label:before {
  70. top: 2px;
  71. left: 2px;
  72. bottom: 2px;
  73. right: 2px;
  74. background-color: #fff;
  75. border-radius: 60px;
  76. transition: background 0.4s;
  77. }
  78. input.cmn-toggle-round-flat + label:after {
  79. top: 4px;
  80. left: 4px;
  81. bottom: 4px;
  82. width: 24px;
  83. background-color: #dddddd;
  84. border-radius: 52px;
  85. transition: margin 0.4s, background 0.4s;
  86. }
  87. input.cmn-toggle-round-flat:checked + label {
  88. background-color: #C0C0C0;
  89. }
  90. input.cmn-toggle-round-flat:checked + label:after {
  91. margin-left: 27px;
  92. background-color: #008CBA;
  93. }
  94. .switch_div {
  95. display: inline-block;
  96. }
  97. table {
  98. display: inline-block;
  99. }
  100. .main-top span, .main-bottom span {
  101. font-size: 30px;
  102. }
  103. .main-bottom {
  104. margin-top:100px;
  105. }
  106. .main-top select, .main-bottom select {
  107. width: 80px;
  108. height: 35px;
  109. font-size: 20px;
  110. border-radius: 5px;
  111. }
  112. .page-bottom {
  113. margin-top: 100px;
  114. }
  115. .form-control {
  116. background: #008CBA;
  117. border: 1px solid #CFCFCF;
  118. box-sizing: border-box;
  119. border-radius: 5px;
  120. width: 120px;
  121. height: 58px;
  122. text-align: center;
  123. line-height: 50px;
  124. color: #FFFFFF;
  125. display: inline-block;
  126. }
  127. @media(max-width:373px){
  128. }
  129. @media(max-width:577px){
  130. }
  131. @media(min-width:576px){
  132. }
  133. @media(min-width:768px){
  134. .navbar-nav > li {
  135. margin-left: 0px;
  136. }
  137. .navbar-nav .li-block {
  138. display:none;
  139. }
  140. }
  141. @media(min-width:991px){
  142. .navbar-nav > li {
  143. margin-left: 20px;
  144. }
  145. .navbar-nav .li-block {
  146. display:none;
  147. }
  148. }
  149. @media(min-width:1200px){
  150. .navbar-nav > li {
  151. margin-left: 0px;
  152. }
  153. .navbar-nav .li-block {
  154. display: inline-block;
  155. width: 100px;
  156. }
  157. }
  158. @media(min-width:1400px){
  159. .navbar-nav .li-block {
  160. display: inline-block;
  161. width: 250px;
  162. }
  163. }
  164. @media(min-width:1689px) {
  165. .navbar-nav > li {
  166. margin-left: 0px;
  167. }
  168. .navbar-nav .li-block {
  169. display: inline-block;
  170. width: 580px;
  171. }
  172. }