Skip to content

sopham / todolist

Go to a project
Commit e701a50f by yuderb
Options

Update style.css

parent 690b82b4
Inline Side-by-side
Showing with 318 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:hover {
.extra-content a:hover { color: white;
color: white; background-color:#b198e6b9;
background-color:#b198e6b9; }
}
.logout-button {
.logout-button { background-color: #9370DB;
background-color: #9370DB; font-family: 'Roboto Slab', serif;
font-family: 'Roboto Slab', serif; width: 100%;
width: 100%; padding: 10px;
padding: 10px; border-radius: 6px;
border-radius: 6px; border: none;
border: none; transition: all 0.5s;
transition: all 0.5s; cursor: pointer;
cursor: pointer; display: inline-block;
display: inline-block; color: white;
color: white; }
} .logout-button:hover{
.logout-button:hover{ background: red;
background: red; }
}
input[type=text] {
input[type=text] { width: 70%;
width: 70%; box-sizing: border-box;
box-sizing: border-box; border: 2px solid #9370DB;
border: 2px solid #9370DB; border-radius: 6px;
border-radius: 6px; background-color: white;
background-color: white; padding: 12px 0 12px 40px;
padding: 12px 0 12px 40px; float:left;
float:left; margin-left: 90px;
margin-left: 90px; margin-top: 60px;
margin-top: 60px; }
}
.add-button {
.add-button { background-color:rgb(83, 68, 170);
background-color:rgb(83, 68, 170); font-family: 'Roboto Slab', serif;
font-family: 'Roboto Slab', serif; width: 10%;
width: 10%; color: white;
color: white; padding: 14px;
padding: 14px; border-radius: 6px;
border-radius: 6px; border: none;
border: none; transition: all 0.5s;
transition: all 0.5s; cursor: pointer;
cursor: pointer; float: left;
float: left; margin-top: 60px;
margin-top: 60px; margin-left: 5px;
margin-left: 5px; }
}
.add-button:hover{
.add-button:hover{ background-color: #9370DB;
background-color: #9370DB; color: white;
color: white; }
}
.task-board {
.task-board { border: 6px;
border: 6px; margin-top: 150px;
margin-top: 150px; margin-left: 90px;
margin-left: 90px; width: 80%;
width: 80%; background-color: white;
background-color: white; border-radius: 15px;
border-radius: 15px; overflow-y: scroll;
overflow-y: scroll; min-width: 200px;
min-width: 200px; height: 460px;
height: 460px; }
}
.checkmark {
.checkmark { position: absolute;
position: absolute; top: 9px;
top: 9px; left: 15px;
left: 15px; height: 25px;
height: 25px; width: 25px;
width: 25px; border-radius: 50%;
border-radius: 50%; background-color: #eee;
background-color: #eee; }
}
.hidden {
.hidden { position: absolute;
position: absolute; appearance: none;
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