max80.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. @font-face {
  2. font-family: "Prisma";
  3. src: url(Prisma-MAX.woff2);
  4. }
  5. @font-face {
  6. font-family: "Charm";
  7. font-weight: 700;
  8. src: url(Charm-Bold-PoP.woff2);
  9. }
  10. body {
  11. background: #e6c185;
  12. font-family: "arial", "helvetica", "sans-serif";
  13. }
  14. .mono, pre, output, tt, code {
  15. font-family: "source code pro", "monospace";
  16. }
  17. div.title {
  18. display: flex;
  19. width: 100%;
  20. white-space: nowrap;
  21. padding: 1em 0em;
  22. overflow: hidden;
  23. align-items: center;
  24. }
  25. div.title svg {
  26. padding: 0 20px;
  27. }
  28. div.title *, nav * {
  29. display: flex;
  30. margin: 0;
  31. }
  32. div.title .logo2 {
  33. text-align: right;
  34. padding: 0 25px;
  35. font-weight: 700;
  36. font-size: 50px;
  37. font-family: "Charm","Brush Script MT","cursive";
  38. }
  39. nav {
  40. display: flex;
  41. border-style: solid none solid none;
  42. border-width: 5px;
  43. border-color: white;
  44. width: 100%;
  45. white-space: nowrap;
  46. overflow: hidden;
  47. align-items: stretch;
  48. }
  49. nav a {
  50. color: black;
  51. font-weight: 600;
  52. text-align: center;
  53. text-decoration: none;
  54. padding-left: 1.5em;
  55. padding-right: 1.5em;
  56. align-items: center;
  57. }
  58. nav a:hover {
  59. background: #af9365;
  60. }
  61. .pad {
  62. flex-grow: 1;
  63. }
  64. nav .text {
  65. padding-top: 1em;
  66. padding-bottom: 1em;
  67. }
  68. nav img {
  69. align-items: center;
  70. border: 1px solid black;
  71. object-fit: none;
  72. }
  73. form fieldset {
  74. border: 5px solid white;
  75. border-radius: 1em;
  76. margin: 1em;
  77. padding: 0.5em 1em;
  78. }
  79. form fieldset legend {
  80. font-weight: bold;
  81. padding: 0.25em;
  82. background: #af9365;
  83. }
  84. form label {
  85. margin: 0;
  86. padding: 0.5ch;
  87. display: flex;
  88. }
  89. form label span {
  90. width: 30ch;
  91. }
  92. input[type='text'], input[type='password'] {
  93. flex: 1;
  94. }
  95. .tz select {
  96. padding: 0;
  97. margin: 0 0 0 1px;
  98. }
  99. button.show, button.hide {
  100. width: 6ch;
  101. padding: 0;
  102. margin: 0 0 0 1px;
  103. font-size: 70%;
  104. }
  105. button.show .hide {
  106. display: none;
  107. }
  108. button.hide .show {
  109. display: none;
  110. }
  111. button {
  112. width: 28ch;
  113. margin: 1em;
  114. padding: 0.25em;
  115. vertical-align: middle;
  116. font-family: "arial", "sans-serif";
  117. font-size: 100%;
  118. }
  119. progress {
  120. display: block;
  121. width: 100%;
  122. margin: 0.5em 0;
  123. }
  124. output {
  125. display: none;
  126. border: 2px solid black;
  127. margin: 1em;
  128. padding: 0.75em 1.25em;
  129. border-radius: 1em;
  130. white-space: pre-wrap;
  131. }
  132. .ok output {
  133. display: block;
  134. background: #e0ffe0;
  135. }
  136. .err output {
  137. display: block;
  138. background: #ffe0e0;
  139. }
  140. .onerr {
  141. display: none;
  142. }
  143. .err .onerr {
  144. display: block;
  145. }
  146. .onerr h3 {
  147. font-weight: bold;
  148. text-decoration: underline;
  149. }
  150. .getstatus input {
  151. font-family: inherit;
  152. font-size: inherit;
  153. background: inherit;
  154. color: inherit;
  155. border: 0;
  156. opacity: 1;
  157. }