123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- * {
- box-sizing: border-box;
- }
- body {
- background-color: rgb(105, 179, 179);
- display: flex;
- justify-content: center;
- align-items: center;
- margin: 0;
- min-height: 100vh;
- }
- #knopka {
- width: 70px;
- }
- .container, .container2 {
- background-color: #2c3e50;
- height: 200px;
- width: 70px;
- border-radius: 50px;
- display: flex;
- justify-content: space-between;
- align-items:center;
- padding: 15px 0;
- flex-direction: column;
- margin: 20px 0;
- }
- .container2 {
- height: 140px;
- }
- .circleRed {
- background-color: rgb(0, 0, 0, 0.3);
- width: 40px;
- height: 40px;
- border-radius: 50%;
- }
- .circleRed.active {
- background-color: red;
- box-shadow: 0 0 25px red;
- }
- .circleYellow{
- background-color: rgb(0, 0, 0, 0.3);
- width: 40px;
- height: 40px;
- border-radius: 50%;
- }
- .circleYellow.active {
- background-color: yellow;
- box-shadow: 0 0 25px yellow;
- }
- .circleGreen {
- background-color: rgb(0, 0, 0, 0.3);
- width: 40px;
- height: 40px;
- border-radius: 50%;
- }
- .circleGreen.active {
- background-color: green;
- box-shadow: 0 0 25px green;
- }
|