Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* allgemeine Konfigurationen */
- :root {
- --size: 50px;
- --font-size: 40px;
- --outer-border-width: 3px;
- --inner-border-width: 1px;
- --page-width: 485px;
- }
- body {
- background: yellow;
- font-family: arial;
- font-weight: 300;
- margin: 0;
- }
- header {
- background: #222;
- }
- .h1 {
- font-size: 35;
- text-align: center;
- color: #ffffff;
- }
- .sudokubild {
- width: 20%;
- }
- main {
- width: var(--page-width);
- margin: 0 auto;
- }
- input[type="submit"], button {
- display: block;
- width: 70%;
- height: 40px;
- margin: 10px 0;
- font-size: 20px;
- border: solid 1px #00e300;
- background: #f0f0f0;
- }
- input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus {
- border: solid 4px #00e300;
- background: #BDBDBD;
- }
- #sudoku {
- display: inline-block;
- }
- /* aussehen eines Feldes */
- .input {
- margin: 0;
- width: var(--size);
- height: var(--size);
- line-height: var(--size);
- font-size: var(--font-size);
- text-align: center;
- border: solid var(--inner-border-width) grey;
- display: inline-block;
- position: relative;
- overflow: hidden;
- float: left;
- }
- /* Input-Felder zentrieren */
- .input input {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- border: none;
- width: var(--size);
- height: var(--size);
- font-size: var(--font-size);
- text-align: center;
- }
- /* Input-Feld, in dem ein Buchstabe oder ungültiges Zeichen steht */
- .input input:invalid {
- background: darkred;
- }
- /*
- * nach 9 Feldern 'umbrechen' (wieder vorne anfangen)
- * dickerer Strich auf der linken Seite
- */
- .input:nth-child(9n+1) {
- clear: left;
- border-left: solid var(--outer-border-width) grey;
- }
- /* dickerer Strich nach 3 Feldern (wagerecht) */
- .input:nth-child(n+19):nth-child(-n+27),
- .input:nth-child(n+46):nth-child(-n+54),
- .input:nth-child(n+73):nth-child(-n+81) {
- border-bottom: solid var(--outer-border-width) grey
- }
- /* dickerer Strich nach drei Feldern (senkrecht) */
- .input:nth-child(3n) {
- border-right: solid var(--outer-border-width) grey
- }
- /* dickerer Strich oberhalb des Feldes */
- .input:nth-child(n+1):nth-child(-n+9) {
- border-top: solid var(--outer-border-width) grey
- }
- .erklärung {
- font-size: 30;
- color: #222;
- text-align: center;
- font-weight: bold;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement