SHARE
TWEET

Untitled

a guest Apr 26th, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* allgemeine Konfigurationen */
  2. :root {
  3.     --size: 50px;
  4.     --font-size: 40px;
  5.     --outer-border-width: 3px;
  6.     --inner-border-width: 1px;
  7.     --page-width: 500px;
  8. }
  9.  
  10. body {
  11.     background: yellow;
  12.     font-family: arial;
  13.     font-weight: 300;
  14.     margin: 0;
  15. }
  16.  
  17. header {
  18.     background: #222;
  19. }
  20.  
  21. .h1 {
  22.     font-size: 35;
  23.     text-align: center;
  24.     color: #ffffff;
  25. }
  26.  
  27. .sudokubild {
  28.     width: 20%;
  29. }
  30.  
  31. main {
  32.     width: var(--page-width);
  33.     margin: 0 auto;
  34. }
  35.  
  36. /* festes Feld; Wert kann nicht geändert werden */
  37. input.fixed {
  38.     background: lightgrey;
  39.     color: black;
  40. }
  41.  
  42. input[type="submit"], button {
  43.     display: block;
  44.     width: 70%;
  45.     height: 40px;
  46.     margin: 10px 0;
  47.     font-size: 20px;
  48.     border: solid 1px #00e300;
  49.     background: #f0f0f0;
  50. }
  51.  
  52. input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus {
  53.     border: solid 3px #2E64FE;
  54.     background: #dcd8d8;
  55. }
  56.  
  57. #sudoku {
  58.     display: inline-block;
  59. }
  60.  
  61. /* aussehen eines Feldes */
  62. .input {
  63.     margin: 0;
  64.     width: var(--size);
  65.     height: var(--size);
  66.     line-height: var(--size);
  67.     font-size: var(--font-size);
  68.     text-align: center;
  69.     border: solid var(--inner-border-width) grey;
  70.     display: inline-block;
  71.     position: relative;
  72.     overflow: hidden;
  73.     float: left;
  74. }
  75.  
  76. /* Input-Felder zentrieren */
  77. .input input {
  78.     position: absolute;
  79.     top: 0;
  80.     bottom: 0;
  81.     left: 0;
  82.     right: 0;
  83.     border: none;
  84.     width: var(--size);
  85.     height: var(--size);
  86.     font-size: var(--font-size);
  87.     text-align: center;
  88. }
  89.  
  90. /* Input-Feld, in dem ein Buchstabe oder ungültiges Zeichen steht */
  91. .input input:invalid {
  92.     background: darkred;
  93. }
  94.  
  95. /* nach 9 Feldern 'umbrechen' (wieder vorne anfangen)
  96.     dickerer Strich auf der linken Seite */
  97. .input:nth-child(9n+1) {
  98.     clear: left;
  99.     border-left: solid var(--outer-border-width) grey;
  100. }
  101.  
  102. /* dickerer Strich nach 3 Feldern (wagerecht) */
  103. .input:nth-child(n+19):nth-child(-n+27),
  104. .input:nth-child(n+46):nth-child(-n+54),
  105. .input:nth-child(n+73):nth-child(-n+81) {
  106.     border-bottom: solid var(--outer-border-width) grey
  107. }
  108.  
  109. /* dickerer Strich nach drei Feldern (senkrecht) */
  110. .input:nth-child(3n) {
  111.     border-right: solid var(--outer-border-width) grey
  112. }
  113.  
  114. /* dickerer Strich oberhalb des Feldes */
  115. .input:nth-child(n+1):nth-child(-n+9) {
  116.     border-top: solid var(--outer-border-width) grey
  117. }
  118.  
  119. .erklärung {
  120.     font-size: 30;
  121.     color: #2E64FE;
  122.     text-align: center;
  123.     font-weight: bold;
  124. }
  125.  
  126. input[id="neustarten"]:hover, input[id="neustarten"]:focus, button:hover, button:focus {
  127.     border: solid 3px #2E64FE;
  128.     background: #dcd8d8;
  129. }
  130.  
  131. .einstellungen {
  132.     background: #222;
  133.     font-size: 50;
  134.     color: #ffffff;
  135.     text-align: center;
  136.     font-weight: bold;
  137.     margin: 0;
  138.     padding: 0;
  139.     height: 60px;
  140.     }
  141.  
  142. input[type="submit"][name="absenden"], button {
  143.     display: block;
  144.     width: 10%;
  145.     height: 40px;
  146.     margin: 10px 0;
  147.     font-size: 20px;
  148.     border: solid 1px #00e300;
  149.     background: #f0f0f0;
  150. }
  151.  
  152. input[name="absenden"]:hover, input[name="absenden"]:focus, button:hover, button:focus {
  153.     border: solid 3px #2E64FE;
  154.         background: #dcd8d8;
  155. }
  156.  
  157. input[type="submit"][name="richtig"], button {
  158.     display: block;
  159.     width: 15%;
  160.     height: 40px;
  161.     margin: 10px 0;
  162.     font-size: 20px;
  163.     border: solid 1px #00e300;
  164.     background: #f0f0f0;
  165. }
  166.  
  167. input[name="richtig"]:hover, input[name="richtig"]:focus, button:hover, button:focus {
  168.     border: solid 3px #2E64FE;
  169.         background: #dcd8d8;
  170. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top