djledda.de main
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

199 рядки
3.1 KiB

  1. :root {
  2. --text-color: #313131;
  3. --bg-color-box: #ffffff;
  4. --bg-color: #f6f9f6;
  5. }
  6. body {
  7. font-family: "Roboto", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  8. color: #313131;
  9. background-color: var(--bg-color);
  10. }
  11. h1, h2, h3, h4, h5 {
  12. font-family: "Roboto Slab", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  13. }
  14. a.home-btn {
  15. display: block;
  16. text-align: center;
  17. &.hide {
  18. visibility: hidden;
  19. }
  20. }
  21. .ge-article {
  22. .header {
  23. margin-top: 20px;
  24. display: flex;
  25. justify-content: space-between;
  26. }
  27. p {
  28. position: relative;
  29. transition: background 0.15s;
  30. }
  31. p.swap {
  32. background-color: #bde4ff;
  33. }
  34. button.swap {
  35. background-color: white;
  36. height: 25px;
  37. width: 25px;
  38. font-size: 16px;
  39. border-radius: 3px;
  40. border: solid 1px gray;
  41. cursor: pointer;
  42. position: absolute;
  43. top: 5px;
  44. right: 5px;
  45. opacity: 0%;
  46. transition: opacity 150ms;
  47. }
  48. button.swap:hover {
  49. background-color: lightgray;
  50. }
  51. p:hover > button.swap {
  52. opacity: 100%;
  53. }
  54. .lang-en p.swap > span:lang(de) {
  55. display: revert;
  56. }
  57. .lang-en p.swap > span:lang(en) {
  58. display: none;
  59. }
  60. .lang-de p.swap > span:lang(en) {
  61. display: revert;
  62. }
  63. .lang-de p.swap > span:lang(de) {
  64. display: none;
  65. }
  66. .lang-en *:lang(de) {
  67. display: none;
  68. }
  69. .lang-de *:lang(en) {
  70. display: none;
  71. }
  72. }
  73. main {
  74. width: 100%;
  75. }
  76. @media (min-width: 600px) {
  77. main {
  78. max-width: 1340px;
  79. margin: auto;
  80. min-width: 600px;
  81. width: 60%;
  82. }
  83. }
  84. header {
  85. margin: auto;
  86. text-align: center;
  87. }
  88. article {
  89. margin: auto;
  90. }
  91. .text-slab {
  92. margin-bottom: 15px;
  93. background-color: white;
  94. border-radius: 5px;
  95. padding: 10px;
  96. }
  97. .text-slab > p:first-of-type {
  98. margin-top: 0;
  99. }
  100. .text-slab > p:last-of-type {
  101. margin-bottom: 0;
  102. }
  103. form {
  104. display: block;
  105. text-align: center;
  106. margin: 40px;
  107. }
  108. label {
  109. display: block;
  110. }
  111. hr {
  112. border: 0;
  113. border-bottom: 1px dashed #ccc;
  114. background: #999;
  115. }
  116. footer .bottom {
  117. display: flex;
  118. flex-direction: row;
  119. justify-content: space-between;
  120. }
  121. footer {
  122. margin-bottom: 20px;
  123. }
  124. .ge-calculator {
  125. table {
  126. border-collapse: separate;
  127. margin: auto;
  128. margin-top: 20px;
  129. margin-bottom: 20px;
  130. border-radius: 5px;
  131. border-spacing: 0;
  132. border: 1px solid var(--text-color);
  133. }
  134. input {
  135. width: 70px;
  136. }
  137. tr:last-of-type td {
  138. border-bottom: none;
  139. }
  140. td {
  141. border-bottom: 1px solid var(--text-color);
  142. border-right: 1px solid var(--text-color);
  143. padding: 10px;
  144. }
  145. td:last-of-type {
  146. border-right: none;
  147. }
  148. .breathe {
  149. padding-left: 4px;
  150. padding-right: 4px;
  151. }
  152. @media (min-width: 600px) {
  153. td.right div {
  154. display: inline-block;
  155. }
  156. }
  157. }
  158. .fade-enter-active,
  159. .fade-leave-active {
  160. transition: opacity 0.5s ease;
  161. }
  162. .fade-enter-from,
  163. .fade-leave-to {
  164. opacity: 0;
  165. }