Sudoku Bonus

Bonus/bonus.css

@@ -0,0 +1,196 @@
+:root{
+    --grey-color: rgb(86, 92, 106);
+    --blue-color: rgb(201, 225, 246);
+    --font-large: 52px;
+    --font-medium: 44px;
+    --font-small: 24px;
+}
+
+body{
+    box-sizing: border-box;
+}
+
+*{
+    color: var(--grey-color);
+    font-family: cursive;
+}
+
+#start-screen{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 50px;
+    font-size: var(--font-large);
+    color: rgb(255, 255, 255);
+    width: 100vw;
+    height: 100vh;
+    color: var(--grey-color);
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--blue-color);
+}
+
+h1{
+    display: flex;
+    justify-content: center;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 50px;
+}
+
+section{
+    font-size: var(--font-medium);
+    display: flex;
+    justify-content: center;
+    margin-bottom: 50px;
+}
+
+#difficulty-select{
+    border: 0;
+    border-radius: 50px;
+    margin-left: 10px;
+    text-align: center;
+    font-size: 0.8em;
+    font-family: inherit;
+    width: 200px;
+}
+
+#difficulty-select:focus{
+    outline: none;
+    border: 4px solid var(--grey-color);
+}
+
+button{
+    font-size: 1.4em;
+    font-family: inherit;
+    background-color: rgb(255, 255, 255);
+    border: 0;
+    border-radius: 50px;
+}
+
+#start-bttn{
+    width: 200px;
+    margin-top: 140px;
+}
+
+#exit-bttn{
+    width: 100px;
+    height: 40px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+#start-bttn:focus{
+    border: 4px solid var(--grey-color);
+}
+
+#exit-bttn:focus{
+    border: 2px solid var(--grey-color);
+}
+
+#sudoku{
+    width: 652px !important;
+    height: 652px !important;
+}
+
+div.wdr-cell{
+    position: relative;
+    text-align: center !important;
+    font-weight: normal !important;
+    font-size: var(--font-small) !important;
+    pointer-events: none !important;
+}
+
+/* Перший стовпець R1, R2, ... і 0-ий рядок C1, C2, ... */
+#wdr-pivot-view div[data-c="0"], #wdr-pivot-view div[data-r="0"]{
+    font-weight: bold !important;
+    background-color:  rgb(191, 197, 203) !important;
+}
+
+/* Зробити текст у кутку  невидимим */
+div.wdr-cell[data-r="0"][data-c="0"]{
+    color: transparent !important;
+}
+
+/* Зробити шахматне розфарбування */
+div.wdr-cell[data-r="1"]:is([data-c="1"], [data-c="2"], [data-c="3"], [data-c="7"], [data-c="8"], [data-c="9"]),
+div.wdr-cell[data-r="2"]:is([data-c="1"], [data-c="2"], [data-c="3"], [data-c="7"], [data-c="8"], [data-c="9"]),
+div.wdr-cell[data-r="3"]:is([data-c="1"], [data-c="2"], [data-c="3"], [data-c="7"], [data-c="8"], [data-c="9"]),
+div.wdr-cell[data-r="4"]:is([data-c="4"], [data-c="5"], [data-c="6"]),
+div.wdr-cell[data-r="5"]:is([data-c="4"], [data-c="5"], [data-c="6"]),
+div.wdr-cell[data-r="6"]:is([data-c="4"], [data-c="5"], [data-c="6"]),
+div.wdr-cell[data-r="7"]:is([data-c="1"], [data-c="2"], [data-c="3"], [data-c="7"], [data-c="8"], [data-c="9"]),
+div.wdr-cell[data-r="8"]:is([data-c="1"], [data-c="2"], [data-c="3"], [data-c="7"], [data-c="8"], [data-c="9"]),
+div.wdr-cell[data-r="9"]:is([data-c="1"], [data-c="2"], [data-c="3"], [data-c="7"], [data-c="8"], [data-c="9"]){
+    background-color: rgb(225, 224, 224) !important;
+}
+
+/* Приховати зайві елементи */
+.wdr-icon, .wdr-fields-view-wrap, .wdr-ui-element .wdr-ui .wdr-ui-list, .wdr-handle, #wdr-text-display, .wdr-ui-modal-overlay, #wdr-filter-view{
+    display: none !important;
+}
+
+.wdr-draggable{ /* заборона на перетаскування колонок */
+    pointer-events: none !important;
+}
+
+#game-screen{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--blue-color);
+}
+
+.user-input{
+    pointer-events: all !important;
+    top: 0;
+    left: 0;
+    position: absolute;
+    background: transparent !important;
+    text-align: center !important;
+    width: 100%;
+    height: 100% !important;
+    font-size: var(--font-small) !important;
+}
+
+.hidden{
+    display: none !important;
+}
+
+#wdr-pivot-view .wdr-ui input.correct{
+    background-color: rgb(38, 167, 72, 0.4) !important;
+}
+
+#wdr-pivot-view .wdr-ui input.incorrect{
+    background-color: rgb(205, 51, 51, 0.4) !important;
+}
+
+#win-dialog{
+    border-radius: 20px;
+    border: 2px solid var(--grey-color);
+    padding: 4rem 10rem;
+}
+
+#win-dialog::backdrop{
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+#close-dialog-bttn{
+    color: rgb(208, 62, 62);
+    position: absolute;
+    top: 5px;
+    right: 5px;
+}
+
+h2{
+    font-size: var(--font-medium);
+}