To-Do-List/todo.css at main · dev-skas/To-Do-List · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
*{
    margin: 0px;
    padding: 0%;
}
body{
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color: rgb(247, 214, 242);
    overflow-x: hidden;


}
.top{
    background: #642B73;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #C6426E, #642B73);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #C6426E, #642B73); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     height: 300px;
}
.homeContainer{
    margin-top: -100px;
    background-color: white;

   position: relative;
   width: 80%;
   margin-left: auto;
   margin-right:auto;

   border-top-left-radius:20px ;
   border-top-right-radius:20px ;
}
 .listContainer{
     margin-top: -120px;
     background-color: white;
    position: relative;
    width: 68%;
    margin-left: auto;
    margin-right:auto;
    padding-top: 30px;
    border-top-left-radius:20px ;
    border-top-right-radius:20px ;


}
.listContainer li {
    list-style-type: none;

    margin:15px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


}
.listContainer label{
    width:100%;
    background-color: #e4eff0;
    padding: 30px 5px;
    border-left: 6px solid #C6426E;
    font-size: 19px;
    border-radius: 3px;
}

 input[type=checkbox]{
     position: absolute;

    right: 40px;
    margin-top:10px ;
    height: 20px;
    width: 20px;
}
input[type=checkbox]:checked + label.strikethrough{
    text-decoration: line-through;
    font-style: italic;
    border-left: 6px solid #0cf173;
    background-color: rgba(168, 166, 166, 0.644);


}


@media screen and (max-width: 767px) {
    .listContainer{
        width: 98%;


    }
  }