diff --git a/index.html b/index.html index 3747770..5e53c61 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,12 @@
- +
+
+ + +
+
diff --git a/style.css b/style.css index 2d6246f..d29c608 100644 --- a/style.css +++ b/style.css @@ -5,7 +5,7 @@ html { background-color: #1e1e1e; - cursor: url(img/Orange_cursor.png) , default !important + cursor: url(img/Orange_cursor.png), default !important } body { @@ -47,6 +47,64 @@ button { font-size: 16px; } +/* Начало стилей для переключателя темы */ +.themeSwitch input[type="checkbox"] { + display: none; + visibility: hidden; +} + +.themeSwitch { + --size: 50px; +} + +.themeSwitch .block { + position: relative; + clear: both; + float: left; +} + +.themeSwitch label { + width: var(--size); + height: calc(var(--size) / 2); + box-sizing: border-box; + border: 3px solid; + float: left; + border-radius: 100px; + position: relative; + cursor: pointer; + transition: .3s ease; + color: black; + background: white; + cursor: url(img/Orange_pointer.png), pointer !important; + margin-top: 10px; +} + +.themeSwitch input[type=checkbox]:checked+label { + background: orangered; +} + +.themeSwitch input[type=checkbox]:checked+label:before { + left: calc(var(--size) / 2); + background: white; +} + +.themeSwitch label:before { + transition: .3s ease; + content: ''; + width: calc((var(--size) / 2) - 10px); + height: calc((var(--size) / 2) - 10px); + position: absolute; + background: orangered; + left: 5px; + top: 2px; + box-sizing: border-box; + border: 3px solid; + color: black; + border-radius: 100px; +} + +/* Конец стилей для переключателя темы */ + .btns { margin: 7px auto; width: 60%;