Skip to content

sopham / todolist

Go to a project
Commit dd7e84ca by yuderb
Options

Update style.css

parent 6eede0c5
Inline Side-by-side
Showing with 327 additions and 322 deletions
style.css
@charset "UTF-8";
@charset "UTF-8";
* {
* { box-sizing: border-box;
box-sizing: border-box; font-family: 'Roboto Slab', serif;
font-family: 'Roboto Slab', serif; font-size: 20px;
font-size: 20px; }
}
@media print{
@media print{ #form {
#form { overflow-y:hidden;
overflow-y:hidden; }
} #side {
#side { display: none; }
display: none; } #action{
#action{ display: none;
display: none; }
} #addAction{
#addAction{ display: none;
display: none; }
} #buttonExtra{
#buttonExtra{ display: none;
display: none; }
} #extraContent{
#extraContent{ display: none;
display: none; }
} #dropContent{
#dropContent{ display: none;
display: none; }
} #doList {
#doList { display: block;
display: block; position: absolute;
position: absolute; top: 10px;
top: 10px; left: 20px;
left: 20px; }
} }
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 600px) { body {
body { float: none;
float: none; }
} }
}
.row {
.row { margin: 0 -5px;
margin: 0 -5px; display: flex;
display: flex; width: 100%;
width: 100%; min-width: 1050px;
min-width: 1050px; }
}
.main {
.main { width: 100%;
width: 100%; float:none;
float:none; }
}
.card {
.card { height: 100%;
height: 100%; box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.2); padding: 20px;
padding: 20px; text-align: center;
text-align: center; background-color: #f1f1f1;
background-color: #f1f1f1; margin: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px; }
}
.list-card {
.list-card { height: 35%;
height: 35%; box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.2); padding: 12px;
padding: 12px; text-align: center;
text-align: center; font-family: 'Roboto Slab', serif;
font-family: 'Roboto Slab', serif; background-color: #f1f1f1;
background-color: #f1f1f1; text-align: center;
text-align: center; margin: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px; }
}
.task-card {
.task-card { cursor: pointer;
cursor: pointer; width: 220px;
width: 220px; height: 64%;
height: 64%; box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.2); padding: 30px;
padding: 30px; margin: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px; text-align: center;
text-align: center; background-color: #f1f1f1;
background-color: #f1f1f1; }
}
.side {
.side { padding: 0px 5px 0px 30px;
padding: 0px 5px 0px 30px; }
}
.extra-content {
.extra-content { font-family: 'Roboto Slab', serif;
font-family: 'Roboto Slab', serif; width: 100%;
width: 100%; border-radius: 6px;
border-radius: 6px; }
}
.extra-content a {
.extra-content a { color: black;
color: black; padding: 15px 16px;
padding: 15px 16px; display: block;
display: block; border-radius: 6px;
border-radius: 6px; }
}
.extra-content a:link{
.extra-content a:hover { text-decoration: none;
color: white; color:black;
background-color:#b198e6b9; }
}
.extra-content a:hover {
.logout-button { color: white;
background-color: #9370DB; background-color:#b198e6b9;
font-family: 'Roboto Slab', serif; }
width: 100%;
padding: 10px; .logout-button {
border-radius: 6px; background-color: #9370DB;
border: none; font-family: 'Roboto Slab', serif;
transition: all 0.5s; width: 100%;
cursor: pointer; padding: 10px;
display: inline-block; border-radius: 6px;
color: white; border: none;
} transition: all 0.5s;
.logout-button:hover{ cursor: pointer;
background: red; display: inline-block;
} color: white;
}
input[type=text] { .logout-button:hover{
width: 70%; background: red;
box-sizing: border-box; }
border: 2px solid #9370DB;
border-radius: 6px; input[type=text] {
background-color: white; width: 70%;
padding: 12px 0 12px 40px; box-sizing: border-box;
float:left; border: 2px solid #9370DB;
margin-left: 90px; border-radius: 6px;
margin-top: 60px; background-color: white;
} padding: 12px 0 12px 40px;
float:left;
.add-button { margin-left: 90px;
background-color:rgb(83, 68, 170); margin-top: 60px;
font-family: 'Roboto Slab', serif; }
width: 10%;
color: white; .add-button {
padding: 14px; background-color:rgb(83, 68, 170);
border-radius: 6px; font-family: 'Roboto Slab', serif;
border: none; width: 10%;
transition: all 0.5s; color: white;
cursor: pointer; padding: 14px;
float: left; border-radius: 6px;
margin-top: 60px; border: none;
margin-left: 5px; transition: all 0.5s;
} cursor: pointer;
float: left;
.add-button:hover{ margin-top: 60px;
background-color: #9370DB; margin-left: 5px;
color: white; }
}
.add-button:hover{
.task-board { background-color: #9370DB;
border: 6px; color: white;
margin-top: 150px; }
margin-left: 90px;
width: 80%; .task-board {
background-color: white; border: 6px;
border-radius: 15px; margin-top: 150px;
overflow-y: scroll; margin-left: 90px;
min-width: 200px; width: 80%;
height: 460px; background-color: white;
} border-radius: 15px;
overflow-y: scroll;
.checkmark { min-width: 200px;
position: absolute; height: 460px;
top: 9px; }
left: 15px;
height: 25px; .checkmark {
width: 25px; position: absolute;
border-radius: 50%; top: 9px;
background-color: #eee; left: 15px;
} height: 25px;
width: 25px;
.hidden { border-radius: 50%;
position: absolute; background-color: #eee;
appearance: none; }
}
.hidden {
.list { position: absolute;
display: flex; appearance: none;
} }
.check--label { .list {
display: flex; display: flex;
justify-content: flex-start; }
flex-direction: row;
flex-wrap: nowrap; .check--label {
align-items: center; display: flex;
margin-top: 15px; justify-content: flex-start;
height: 40px; flex-direction: row;
} flex-wrap: nowrap;
align-items: center;
.check--label-box { margin-top: 15px;
display: flex; height: 40px;
align-self: center; }
position: relative;
height: 25px; .check--label-box {
width: 25px; display: flex;
margin: 0 20px; align-self: center;
border: 2px solid rgb(83, 68, 170); position: relative;
cursor: pointer; height: 25px;
border-radius: 50%; width: 25px;
} margin: 0 20px;
border: 2px solid rgb(83, 68, 170);
.check--label-text { cursor: pointer;
position: relative; border-radius: 50%;
display: flex; }
cursor: pointer;
align-self: center; .check--label-text {
padding: 20px; position: relative;
font-size: 22px; display: flex;
border-left: 1px solid #ecf0f1; cursor: pointer;
} align-self: center;
padding: 20px;
.check--label-text:after { font-size: 22px;
content: ''; border-left: 1px solid #ecf0f1;
display: block; }
width: 0%;
height: 2px; .check--label-text:after {
background-color: #000; content: '';
position: absolute; display: block;
top: 50%; width: 0%;
left: 7.5%; height: 2px;
transform: translateY(-50%); background-color: #000;
transition: width 100ms ease-in-out; position: absolute;
} top: 50%;
left: 7.5%;
.hidden:checked + .check--label { transform: translateY(-50%);
background-color: #fff; transition: width 100ms ease-in-out;
} }
.hidden:checked + .check--label .check--label-box { .hidden:checked + .check--label {
background-color: rgb(83, 68, 170); background-color: #fff;
} }
.hidden:checked + .check--label .check--label-box:after {
content: ''; .hidden:checked + .check--label .check--label-box {
display: block; background-color: rgb(83, 68, 170);
position: absolute; }
top: 3px; .hidden:checked + .check--label .check--label-box:after {
left: 7px; content: '';
width: 7px; display: block;
height: 12px; position: absolute;
border: solid white; top: 3px;
border-width: 0 3px 3px 0; left: 7px;
transform: rotate(45deg); width: 7px;
} height: 12px;
border: solid white;
.hidden:checked + .check--label .check--label-text:after { border-width: 0 3px 3px 0;
width: 85%; transform: rotate(45deg);
} }
.avatar-upload { .hidden:checked + .check--label .check--label-text:after {
position: relative; width: 85%;
max-width: 205px; }
margin: 50px auto;
} .avatar-upload {
position: relative;
.avatar-edit { max-width: 205px;
position: absolute; margin: 50px auto;
right: 12px; }
z-index: 1;
top: -20px; .avatar-edit {
} position: absolute;
right: 12px;
.avatar-upload .avatar-edit input { z-index: 1;
display: none; top: -20px;
} }
.avatar-upload input + label { .avatar-upload .avatar-edit input {
display: inline-block; display: none;
width: 34px; }
height: 34px;
margin-bottom: 0; .avatar-upload input + label {
border-radius: 100%; display: inline-block;
background: #FFFFFF; width: 34px;
border: 1px solid transparent; height: 34px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); margin-bottom: 0;
cursor: pointer; border-radius: 100%;
font-weight: normal; background: #FFFFFF;
transition: all .2s ease-in-out; border: 1px solid transparent;
} box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
.avatar-upload input + label:hover { font-weight: normal;
background: #f1f1f1; transition: all .2s ease-in-out;
border-color: #d6d6d6; }
}
.avatar-upload input + label:hover {
.avatar-upload input + label:after { background: #f1f1f1;
content: "\f040"; border-color: #d6d6d6;
font-family: 'FontAwesome'; }
color: #757575;
position: absolute; .avatar-upload input + label:after {
top: 2px; content: "\f040";
left: 0px; font-family: 'FontAwesome';
right: 0px; color: #757575;
text-align: center; position: absolute;
margin: auto; top: 2px;
} left: 0px;
right: 0px;
.avatar-preview { text-align: center;
width: 190px; margin: auto;
height: 190px; }
position: relative;
top: -35px; .avatar-preview {
border-radius: 100%; width: 190px;
border: 6px solid #F8F8F8; height: 190px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); position: relative;
} top: -35px;
border-radius: 100%;
.avatar-preview > div { border: 6px solid #F8F8F8;
width: 100%; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
height: 100%; }
border-radius: 50%;
background-size: cover; .avatar-preview > div {
background-repeat: no-repeat; width: 100%;
background-position: center; height: 100%;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment