pump_system.css 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  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. table {
  95. display: inline-block;
  96. }
  97. .main-top span, .main-bottom span {
  98. font-size: 30px;
  99. }
  100. .main-bottom {
  101. margin-top:100px;
  102. }
  103. .main-top select, .main-bottom select {
  104. width: 75px;
  105. height: 35px;
  106. font-size: 20px;
  107. border-radius: 5px;
  108. }
  109. .page-bottom {
  110. margin-top: 100px;
  111. }
  112. .form-control {
  113. background: #008CBA;
  114. border: 1px solid #CFCFCF;
  115. box-sizing: border-box;
  116. border-radius: 5px;
  117. width: 120px;
  118. height: 58px;
  119. text-align: center;
  120. line-height: 50px;
  121. color: #FFFFFF;
  122. display: inline-block;
  123. }
  124. @media(max-width:373px){
  125. }
  126. @media(max-width:577px){
  127. }
  128. @media(min-width:576px){
  129. }
  130. @media(min-width:768px){
  131. .navbar-nav > li {
  132. margin-left: 0px;
  133. }
  134. .navbar-nav .li-block {
  135. display:none;
  136. }
  137. }
  138. @media(min-width:991px){
  139. .navbar-nav > li {
  140. margin-left: 20px;
  141. }
  142. .navbar-nav .li-block {
  143. display:none;
  144. }
  145. }
  146. @media(min-width:1200px){
  147. .navbar-nav > li {
  148. margin-left: 0px;
  149. }
  150. .navbar-nav .li-block {
  151. display: inline-block;
  152. width: 100px;
  153. }
  154. }
  155. @media(min-width:1400px){
  156. .navbar-nav .li-block {
  157. display: inline-block;
  158. width: 250px;
  159. }
  160. }
  161. @media(min-width:1689px) {
  162. .navbar-nav > li {
  163. margin-left: 0px;
  164. }
  165. .navbar-nav .li-block {
  166. display: inline-block;
  167. width: 580px;
  168. }
  169. }