local storage存储可拖动待办事项管理系统代码
代码语言：html
所属分类：其他
代码描述：local storage存储可拖动待办事项管理系统代码
代码标签： local storage 存储 拖动 待办 事项 管理 系统
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--icon-options: #a4c75a;
--icon-options-clear: #9f9f9f;
--icon-opacity: #5972cb;
--icon-warning: #a02f1b;
--icon-board-full: #c5bc56;
--icon-board-bg: #a27dc2;
--icon-remove: #ff6347;
--icon-urgent: #ff8800;
--icon-new-task: #2a92bf;
--icon-total: #777777;
--icon-import-export: #607d8b;
--list-working: #ffc000;
--list-done: #00b91f;
--dark-color: #282828;
}
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans serif;
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.overlay-bg {
background:
radial-gradient(farthest-side at bottom left, var(--icon-board-bg), #fff0),
radial-gradient(farthest-side at top left, var(--list-working), #fff0),
radial-gradient(farthest-corner at bottom right, var(--icon-new-task), #fff0),
radial-gradient(farthest-corner at top right, var(--list-done), #fff0)
/*, var(--list-working)*/;
position: fixed;
width: 102%;
height: 100%;
background-size: cover;
background-position: center center;
}
.overlay-bg.mountain {
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e3632bed9568.png);
background-position: center top;
}
.overlay-bg.climbing {
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png);
background-position: right top;
}
.overlay-bg.coast {
background-image: url(//repo.bfw.wiki/bfwrepo/image/5e5ef121633fa.png);
}
.overlay-bg.space {
background-image: url(//repo.bfw.wiki/bfwrepo/image/611da9b999795.png);
}
.overlay-bg.code {
background-image: url(//repo.bfw.wiki/bfwrepo/image/6171f56b4f166.png);
}
/* space */
/* https://images.nasa.gov/details-PIA08093 */
/* code */
/* https://www.itl.cat/wallview/iowhbwo_wallpaper-code-programming-symbols-strings-colorful-/ */
.overlay-bg:after {
content: " ";
position: absolute;
right: 2%;
bottom: 57px;
color: #0008;
font-size: 10px;
text-shadow: -1px -1px 0px #fff8;
width: 20em;
text-align: right;
padding-right: 1em;
filter: invert(1);
}
.overlay-bg.space:after {
content: "\00a9 \00a0 nasa.gov";
}
.overlay-bg.mountain:after,
.overlay-bg.climbing:after,
.overlay-bg.coast:after{
content: "\00a9 \00a0 cuadernodeescaladas.com";
}
.overlay-bg.code:after {
content: "\00a9 \00a0 itl.cat";
}
/*** HEADER START ***/
header {
padding: 12px 2%;
background: var(--dark-color);
height: 60px;
position: fixed;
width: 100%;
z-index: 1;
box-shadow: #00000030 0px 2px 6px, #00000040 0px 2px 6px;
}
/* title start */
h1 {
display: inline-block;
margin: 0px 0.75em 0 0;
font-weight: normal;
color: #ffffff;
font-size: 1.5em;
padding: 4px 0.625em 0 0;
border-right: 1px solid #000;
float: left;
position: relative;
background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff2 100%);
height: 1.5em;
}
h1 a {
color: #fff;
}
h1 a:hover {
color: var(--list-working);
}
h1 span {
float: left;
text-transform: uppercase;
position: relative;
}
h1 span:nth-child(1) {
font-size: 1.5em;
line-height: 0.725em;
}
h1 span:nth-child(2) {
font-size: 0.475em;
position: absolute;
left: 18px;
margin-top: -3px;
color: #ccc;
}
h1 span:nth-child(3) {
margin-left: -1px;
margin-top: -7px;
font-size: 1.05em;
top: 11px;
}
h1 span:nth-child(4) {
font-size: 0.425em;
margin-left: 0px;
top: 7px;
color: #999;
}
h1 span:nth-child(5) {
font-size: 0.62em;
font-weight: bold;
top: 16px;
left: -34px;
}
h1 span:nth-child(6) {
margin-left: -3.75em;
font-size: 0.365em;
margin-top: 17px;
color: var(--icon-total);
}
/* title end */
/* total tasks start */
#totalTask {
display: inline-block;
color: var(--dark-color);
font-size: 1.35em;
position: relative;
height: 1.65em;
float: left;
width: 1.65em;
text-align: center;
background: var(--icon-total);
margin-top: 0px;
line-height: 1.75em;
margin-right: 2.75em;
border-radius: 2px;
}
#totalTask:after {
content: "TOTAL TASKS";
font-size: 11px;
line-height: 1.25em;
position: absolute;
max-width: 5em;
right: -5em;
padding: 5px 0 0.45em 10px;
box-sizing: border-box;
color: var(--icon-total);
text-align: left;
}
#totalTask:hover, #totalTask:hover:after {
color: #fff;
}
/* total tasks end */
/*** buttons start ***/
#btns {
display: inline-block;
font-size: 1em;
padding-top: 0px;
height: 2.3em;
border-left: 1px solid #282828;
padding-left: 1.15em;
}
#btns:before {
content: "";
float: left;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(90deg, #fff1 0 1px, #000 0 2px);
margin-left: -1.2em;
}
#btns button {
cursor: pointer;
padding: 0.25em;
font-size: 1.5em;
color: var(--dark-color);
border: 0;
outline: none;
border-radius: 2px;
width: 1.5em;
height: 1.5em;
}
#addToDo {
background: var(--icon-new-task);
line-height: 0.75em;
}
.btnAdd, .btnUrg {
position: relative;
float: left;
padding-right: 3.35em;
border-right: 1px solid #000000;
margin-right: 1.2em;
background: linear-gradient(90deg, #fff0 calc(100% - 1px), #fff2 100%);
}
.btnUrg {
padding-right: 4.5em;
}
.btnAdd button:after {
margin-left: 7px;
width: 2.5em;
margin-top: -9px;
content: "NEW TASK";
font-size: 11px;
line-height: 1.2em;
color: var(--icon-new-task);
position: absolute;
padding-left: 10px;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
#btns button:hover, #btns button:hover:after {
color: #fff;
}
#btns .btnAdd:hover:after, #btns .btnUrg:hover:after {
color: #fff;
}
#addUrgent {
line-height: 0.75em;
background: radial-gradient(circle at 49% 72%, var(--dark-color) 0 6.5%, #fff0 8.5% 100%), var(--icon-urgent);
}
.btnUrg button:after {
color: var(--icon-urgent);
margin-left: 12px;
width: 4.5em;
margin-top: -9px;
font-size: 11px;
line-height: 13px;
content: "CREATE URGENT";
position: absolute;
padding-left: 10px;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
.btnUrg.active button:after {
content: "REMOVE URGENT";
}
#addUrgent:before /*.btnUrg:before*/ {
content: "";
background: transparent;
float: left;
width: 3px;
position: absolute;
height: 3px;
border-top: 15px solid var(--dark-color);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
top: 7px;
border-radius: 21px;
left: 15px;
}
.btnUrg:after {
float: left;
width: 5px;
height: 6px;
background: var(--dark-color);
left: 16px;
content: "";
position: absolute;
top: 23px;
border-radius: 100%;
display: none;
}
#addUrgent:hover::before {
border-top-color: #fff;
}
/*
.btnUrg:hover::after {
background: #fff;
}
*/
#addUrgent:hover {
background: radial-gradient(circle at 49% 72%, #fff 0 6.5%, #fff0 8.5% 100%), var(--icon-urgent);
}
#deleteItem {
display: inline-block;
background: var(--icon-remove);
height: 1.5em;
color: #fff;
border: 2px dashed rgba(0,0,0,0.1);
border-radius: 2px;
width: 1.5em;
position: relative;
font-size: 1.5em;
}
#deleteItem:before {
position: absolute;
left: 34px;
width: 107px;
top: -2px;
content: "DROP TO REMOVE";
font-size: 11px;
cursor: alias;
color: var(--icon-total);
padding-left: 8px;
padding-top: 5px;
}
#deleteItem:after {
content: "CLICK TO EMPTY";
position: absolute;
width: 108px;
font-size: 11px;
border-radius: 1px;
left: 34px;
color: var(--icon-remove);
padding-left: 7px;
top: 13px;
cursor: pointer;
padding-top: 4px;
padding-bottom: 4px;
}
#deleteItem:hover:before {
color: #ffffff;
}
#deleteItem ul {
margin: 0;
position: relative;
z-index: 1;
padding: 0.5em;
height: 100%;
cursor: pointer;
}
#deleteItem ul:before {
width: 12px;
height: 15px;
top: 11px;
left: 10px;
background: var(--dark-color);
content: "";
position: absolute;
border-radius: 0 0 2px 2px;
}
#deleteItem ul:after {
border-bottom: 3px solid var(--dark-color);
width: 14px;
position: absolute;
left: 9px;
line-height: 1em;
top: -8px;
color: var(--dark-color);
content: "-";
padding-bottom: 3px;
height: 12px;
text-align: center;
text-indent: -1px;
}
#deleteItem:hover ul:before {
background: #fff;
}
#deleteItem:hover ul:after {
border-bottom: 3px solid #ffffff;
color: #ffffff;
}
#deleteItem #delete-list.drag-enter {
border-radius: 2px;
background: #ffffff;
z-index: 0;
}
#deleteItem #delete-list.drag-enter:before {
background: var(--icon-remove);
}
#deleteItem #delete-list.drag-enter:after {
border-bottom: 3px solid var(--icon-remove);
color: var(--icon-remove);
}
/* buttons end */
/*** OPTIONS ***/
.options {
right: -276px;
float: right;
padding-left: 20px;
/*border-left: 1px solid #282828;*/
height: 37px;
width: 350px;
position: absolute;
top: 12px;
transition: right 0.5s ease 0s;
}
.options:before {
content: "";
float: left;
width: 2px;
height: calc(100% - 1px);
background: linear-gradient(90deg, #fff1 0 1px, #000 0 2px);
margin-left: -1.3em;
}
.options.opened {
right: 0;
transition: right 0.5s ease 0s;
}
.options button {
padding: 0;
}
/* options toggle */
#toggleOptions {
display: inline-block;
width: 36px;
height: 36px;
background: red;
border-radius: 2px;
margin-right: 18px;
float: left;
}
#btnOptions {
float: left;
width: 100%;
height: 100%;
border: 0;
outline: none;
border-radius: 2px;
background: var(--icon-options);
position: relative;
cursor: pointer;
}
#btnOptions:before {
left: 5px;
top: 7px;
background:
linear-gradient(transparent 0, transparent 2px, var(--dark-color) 2px, var(--dark-color) 4px,transparent 4px,transparent 10px, var(--dark-color) 10px, var(--dark-color) 12px, transparent 12px, transparent 18px, var(--dark-color) 18px, var(--dark-color) 20px, transparent 20px, transparent 100%);
width: 26px;
height: 22px;
content: "";
float: left;
position: absolute;
content: "●";
font-size: 16px;
color: var(--dark-color);
text-align: right;
line-height: 21px;
}
#btnOptions:after {
float: left;
margin-left: -13px;
top: 4px;
width: 25px;
height: 35px;
line-height: 16px;
color: var(--dark-color);
font-size: 16px;
text-indent: 4px;
transform: rotate(0deg);
letter-spacing: 0px;
content: "●● ●";
position: absolute;
content: "● ●";
text-align: left;
margin-top: -3px;
padding-left: 1px;
}
.options #btnOptions:hover:before {
background: linear-gradient(transparent 0, transparent 2px, #ffffff 2px, #ffffff 4px,transparent 4px,transparent 10px, #ffffff 10px, #ffffff 12px, transparent 12px, transparent 18px, #ffffff 18px, #ffffff 20px, transparent 20px, transparent 100%);
color: #fff;
}
.options #btnOptions:hover:after {
color: #ffffff;
}
/* bg image */
.imageBg {
display: inline-block;
margin-right: 18px;
position: relative;
float: left;
}
.imageBg:hover:after, .imageBg:hover #boardBg:before, .imageBg:hover #boardBg:after {
color: #fff;
border-bottom-color: #fff;
}
.imageBg:hover .bgs {
max-height: 166px;
transition: max-height 0.5s ease 0s;
}
#boardBg {
background: var(--icon-board-bg);
border-radius: 2px;
height: 36px;
display: block;
width: 36px;
font-size: 0.85em;
float: right;
font-weight: bold;
line-height: 1.5em;
color: var(--dark-color);
cursor: pointer;
outline: none;
border: 0;
position: relative;
margin-left: 1px;
}
#boardBg:before {
border: 9px solid transparent;
border-bottom: 12px solid var(--dark-color);
position: absolute;
left: 5px;
margin-top: -25px;
content: "\25CF";
width: 0;
text-indent: 5px;
height: 1em;
}
#boardBg:after {
content: "";
border: 8px solid transparent;
border-bottom-color: var(--dark-color);
position: absolute;
left: 15px;
margin-top: -6px;
}
.bgs {
font-size: 11px;
max-height: 0;
text-align: center;
padding: 0;
max-height: 0;
height: 166px;
transition: max-height 0.5s ease 0s;
margin-left: -22px;
position: absolute;
overflow: hidden;
top: 37px;
width: 80px;
position: absolute;
background: var(--dark-color);
border-top: 10px solid var(--dark-color);
border-radius: 0 0 2px 2px;
}
.bgs > div {
color: #fff;
margin: 5px 0;
}
.bgs span {
background: #444444;
display: block;
margin: 5px;
padding: 1px 5px;
border-radius: 2px;
cursor: pointer;
color: #7d7d7d;
}
.bgs span:hover, .bgs span.selected {
background: var(--icon-board-bg);
color: #fff;
}
/* range styles */
input[type='range']:focus {
outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
background-color: var(--icon-opacity);
width: 20px;
height: 20px;
border: 3px solid var(--dark-color);
border-radius: 50%;
margin-top: -9px;
}
input[type=range]::-moz-range-thumb {
background-color: var(--icon-total);
width: 15px;
height: 15px;
border: 3px solid var(--dark-color);
border-radius: 50%;
}
input[type=range]::-ms-thumb {
background-color: var(--icon-total);
width: 20px;
height: 20px;
border: 3px solid var(--dark-color);
border-radius: 50%;
}
input[type=range]::-webkit-slider-runnable-track {
background-color: var(--icon-total);
height: 3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
outline: none;
}
input[type=range]::-moz-range-track {
background-color: var(--icon-total);
height: 3px;
}
input[type=range]::-ms-track {
background-color: var(--icon-total);
height: 3px;
}
input[type=range]::-ms-fill-lower {
background-color: var(--icon-remove)
}
input[type=range]::-ms-fill-upper {
background-color: black;
}
#byUrl {
position: relative;
top: -22px;
display: none;
}
#byUrl input {
width: 47px;
float: left;
border: 0;
margin-left: 5px;
border-radius: 2px 0 0 2px;
outline: none;
font-size: 10px;
height: 17px;
}
#byUrl input:focus {
background: var(--dark-color);
color: #fff;
}
#byUrl button {
width: 23px;
text-align: center;
padding: 0;
font-size: 11px;
height: 17px;
border: 0;
outline: none;
float: left;
border-radius: 0 2px 2px 0;
background: var(--icon-board-bg);
color: #fff;
line-height: 10px;
border-left: 2px solid var(--dark-color);
cursor: pointer;
}
/* full height */
.boardHeight {
display: inline-block;
margin-right: 18px;
float: left;
}
#boardFull {
background: var(--icon-board-full);
border-radius: 2px;
height: 36px;
display: block;
width: 36px;
font-size: 0.85em;
float: right;
font-weight: bold;
line-height: 1.5em;
color: var(--dark-color);
cursor: pointer;
outline: none;
border: 0;
position: relative;
}
#boardFull:hover {
color: #fff;
}
#boardFull:after {
margin-left: -8px;
float: left;
position: absolute;
width: 0;
margin-top: 2px;
padding-top: 0;
border: 8px solid transparent;
content: "";
border-top: 10px solid var(--dark-color);
}
#boardFull:hover:after {
border-top-color: #fff;
}
#boardFull:hover:before {
background: #fff;
}
#boardFull:before {
background: var(--dark-color);
width: 10px;
height: 10px;
content: "";
float: left;
margin-left: -5px;
margin-top: -8px;
position: absolute;
}
#boardFull.active {
/* background: #e6e6e6;*/
}
#boardFull.active:hover {
color: #fff;
}
#boardFull.active:after {
border-top-color: transparent;
border-bottom: 10px solid var(--dark-color);
top: -5px;
}
#boardFull.active:before {
margin-top: -1px;
}
#boardFull.active:hover:after {
border-bottom-color: #fff;
}
/* list opacity */
.boardOpacity {
display: inline-block;
margin-right: 18px;
width: 36px;
background: var(--icon-opacity);
height: 36px;
border-radius: 2px;
cursor: pointer;
float: left;
}
.boardOpacity:before {
content: "";
border: 2px solid var(--dark-color);
width: 13px;
height: 13px;
position: absolute;
top: 12px;
border-radius: 2px 100% 100% 100%;
transform: rotate(45deg);
margin-left: 10px;
background: linear-gradient(-45deg, var(--dark-color) 0, var(--dark-color) 50%, transparent 50%, transparent 100%);
}
.boardOpacity:hover:before {
border-color: #fff;
background: linear-gradient(-45deg, #fff 0, #fff 50%, transparent 50%, transparent 100%);
}
.boardOpacity .selector {
background: var(--dark-color);
position: absolute;
top: 37px;
width: 65px;
margin-left: -15px;
max-height: 0px;
overflow: hidden;
transition: max-height 0.5s ease 0s;
padding-top: 10px;
border-radius: 0 0 2px 2px;
z-index: -1;
}
.boardOpacity:hover .selector {
max-height: 65px;
transition: max-height 0.5s ease 0s;
}
#boardOpac {
margin: 0 5px 8px 5px;
background: transparent;
cursor: pointer;
position: relative;
float: left;
height: 15px;
width: 55px;
}
.boardOpacity div span {
color: #fff;
font-size: 11px;
text-align: center;
padding-top: 4px;
float: left;
width: 100%;
margin: 0 0 2px 0;
}
/* delete warning */
.deleteWarnig {
display: inline-block;
margin-right: 18px;
width: 36px;
background: #8e5247;
height: 36px;
border-radius: 2px;
cursor: pointer;
float: left;
}
.deleteWarnig.showWng {
background: var(--icon-warning);
}
#optionCfrm {
width: 100%;
height: 100%;
border: 0;
outline: 0;
border-radius: 2px;
background: transparent;
cursor: pointer;
}
.warningToggle, .deleteToggle, .heightToggle, .optionsToggle {
background: var(--dark-color);
font-size: 11px;
text-align: center;
position: absolute;
width: 65px;
margin-left: -14px;
border-radius: 0 0 2px 2px;
top: 36px;
height: 35px;
line-height: 16px;
padding-top: 10px;
color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease 0s;
cursor: default;
}
.deleteWarnig:hover .warningToggle, .deleteOptions:hover .deleteToggle, .boardHeight:hover .heightToggle , #toggleOptions:hover .optionsToggle {
max-height: 52px;
transition: max-height 0.5s ease 0s;
height: 52px;
}
.deleteToggle span {
margin-top: 3px;
display: block;
}
.heightToggle span {
margin-top: 4px;
display: block;
}
#optionCfrm:before {
top: 5px;
float: left;
left: 17px;
z-index: 2;
position: relative;
content: "\2757";
font-size: 12px;
content: "";
background: transparent;
border-top: 6px solid var(--icon-warning);
border-bottom: 2px solid var(--icon-warning);
width: 2px;
height: 2px;
border-radius: 10px;
}
#optionCfrm:after {
content: "";
font-weight: bold;
border: 10px solid transparent;
border-bottom: 18px solid var(--dark-color);
float: left;
margin-top: -10px;
margin-left: 5px;
border-radius: 2px;
width: 2px;
}
.deleteWarnig #optionCfrm:before {
border-color: #8e5247;
}
.deleteWarnig.showWng #optionCfrm:before {
border-color: var(--icon-warning);
}
#optionCfrm:hover:after {
border-bottom-color: #fff;
}
span#textWarning {
margin-top: 3px;
display: block;
}
/* delete options */
.deleteOptions {
display: inline-block;
margin-right: 18px;
width: 36px;
height: 36px;
border-radius: 2px;
cursor: pointer;
float: left;
}
#optionOptns {
width: 100%;
height: 100%;
border: 0;
border-radius: 2px;
outline: none;
background: #a4c75a;
background: var(--icon-options-clear);
cursor: pointer;
position: relative;
}
#optionOptns:before {
background: linear-gradient(45deg, var(--dark-color) 0 30%, #fff0 0 100%);
width: 8px;
height: 8px;
position: absolute;
content: "";
border: 2px solid var(--dark-color);
border-radius: 2px;
border-right-width: 10px;
transform: rotate(-45deg);
top: 10px;
left: 6px;
}
#optionOptns:after {
left: 6px;
top: 23px;
width: 25px;
height: 2px;
position: absolute;
background: var(--dark-color);
border-radius: 1px;
content: "\2716";
content: "";
border-top: 3px solid var(--icon-options-clear);
}
#optionOptns:hover:after {
background-color: #fff;
/*
transition: all 0.5s ease 0s;
width: 20px;
left: 11px;
*/
}
#optionOptns:hover:before {
border-color: #fff;
background: linear-gradient(45deg, #fff 0 30%, #fff0 0 100%);
}
/*** HEADER END ***/
/*************************************************************************************/
/*** LISTS ***/
#myLists {
padding: 1.35% 1% 5% 1%;
float: left;
width: 100%;
display: inline-table;
/*min-height: calc(100% - 108px);*/
margin-top: 60px;
}
#myLists.full {
display: flex;
min-height: calc(100% - 60px);
}
#myLists > div {
width: 32.3%;
display: inline-table;
margin: 0.5%;
background: rgba(247 247 247 / 0.5);
position: relative;
border-radius: 2px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 6px, rgba(0, 0, 0, 0.25) 0px 2px 6px;
}
#myLists > div.full {
display: block;
}
#myLists.fourCol > div {
width: 24%;
}
#myLists div h3 {
background: var(--icon-new-task);
color: #fff;
padding: 0.65em;
margin-top: 0;
font-weight: normal;
border-bottom: 2px solid rgba(0,0,0,0.1);
margin-bottom: 0;
}
#myLists #work-in h3 {
background: var(--list-working) ;
}
#myLists #ur-gent h3 {
background: var(--icon-urgent);
}
#myLists #do-ne h3 {
background: var(--list-done);
}
#myLists div h3:before {
content: "\2022";
border: 2px solid rgb(255 255 255);
float: left;
width: 1em;
height: 1em;
color: var(--icon-new-task);
margin-right: 0.5em;
border-radius: 2px;
background: rgb(255 255 255);
text-align: center;
font-weight: bold;
line-height: 1.1em;
}
#myLists #work-in h3:before {
background: rgb(255 255 255 / 1);
content: "O";
color: var(--list-working);
}
#myLists #ur-gent h3:before {
color: var(--icon-urgent);
text-align: center;
line-height: 19px;
font-weight: normal;
content: "";
}
#myLists #ur-gent h3::after {
content: "";
width: 3px;
float: left;
height: 2px;
border-top: 9px solid #f80;
border-bottom: 4px solid #f80;
position: absolute;
left: 22px;
top: 16px;
border-radius: 10px;
}
#myLists #do-ne h3:before {
content: "";
}
#myLists #do-ne h3:after {
content: "\00ac";
position: absolute;
color: var(--list-done);
font-size: 1.5em;
transform:rotate(120deg);
left: 0.5em;
top: 0.2em
}
#myLists h3 span {
float: right;
width: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 1px;
font-size: 0.775em;
margin-right: -0.25em;
color: rgb(255 255 255 / 75%);
font-weight: bold;
background: #00000070;
}
#myLists ul {
padding: 0;
margin: 0.5em;
height: calc(100% - 3.5em);
box-sizing: border-box;
padding-bottom: 0.6em;
margin-bottom: 0;
display: flex;
flex-direction: column;
}
#myLists ul:after {
margin-top: 0;
content: "DROP TASK HERE";
border: 2px dashed #00000040;
padding: 1.05em 0.5em;
font-size: 0.75em;
text-transform: uppercase;
text-align: center;
color: rgb(0 0 0 / 0.35);
display: inline-table; /*block*/
width: 100%;
box-sizing: border-box;
bottom: 0.8em;
border-radius: 2px;
font-weight: bold;
min-height: 0;
flex: 1;
}
#myLists ul:hover:after {
border-color: rgb(0 0 0 / 0.35);
color: rgb(0 0 0 / 0.4);
background: #ffffff40;
}
#myLists ul li {
position: relative;
list-style: none;
min-height: 3.5em; /*2.35em*/
border: 3px dashed rgb(0 0 0 / 0);
border-radius: 2px;
background: #ffffff;
padding: 0.05em 1.25em 1.65em 0.5em;
margin-bottom: 0.65em;
color: #828282;
cursor: grabbing;
box-shadow: 1px 1px 2px -1px #00000087; /*1px 1px 5px 0px #ccc*/
max-height: 10em;
/*overflow: hidden;*/
}
#myLists ul li:active {
cursor: grabbing;
border-color: rgba(0,0,0,0.15);
}
#myLists ul li:before {
content: "";
background: var(--icon-new-task);
position: absolute;
left: -3px;
top: -3px;
height: calc(100% + 2px);
width: 4px;
border-radius: 1px;
border: 2px solid transparent;
}
#myLists #work-in ul li:before {
background: var(--list-working);
}
#myLists #ur-gent ul li:before {
background: var(--icon-urgent);
}
#myLists #do-ne ul li:before {
background: var(--list-done);
}
#myLists ul li:after {
content:"";
border-left:2px dotted #fff;
height: 10px;
position:absolute;
left: 0;
top: 50%;
margin-top:-5px;
}
#myLists ul li span.txt {
cursor: pointer;
display: block;
padding: 0.25em 0.25em 0.25em 0.25em;
border: 1px dotted rgba(0,0,0,0);
font-size: 0.95em;
overflow: hidden;
text-align: justify;
color: #666;
transition: color 0.4s ease 0s;
height: 100%;
max-height: 7.5em;
}
#myLists ul li span.txt:hover {
background: #ececec;
color: #999;
border: 1px dotted rgba(0,0,0,0.1);
border-radius: 1px;
transition: color 0.4s ease 0s;
}
#myLists ul li span.txt:before {
content: "EDIT";
position: absolute;
left: 1.25em;
background: #49637d80;
font-size: 0.65em;
bottom: 0.5em;
text-align: center;
color: #ffffff;
font-weight: bold;
border-radius: 1px;
padding: 0.25em 0.45em;
}
#myLists ul li span.idTask {
font-size: 0.7em;
color: #fff;
position: absolute;
left: 6.25em;
bottom: 5px;
background: var(--icon-new-task);
padding: 0 0.25em;
border-radius: 1px;
height: 16px;
line-height: 16px;
}
#myLists ul li span.idTask:before {
content: "ID";
font-family: monospace;
margin-top: 1px;
margin-right: 2px;
font-size: 1.275em;
color: #00000055;
line-height: 1em;
font-weight: bold;
}
#myLists #ul-working span.idTask {
background: var(--list-working);
}
#myLists #ul-urgent span.idTask {
background: var(--icon-urgent);
}
#myLists #ul-done span.idTask {
background: var(--list-done);
}
#myLists ul li a.up, #myLists ul li a.down {
float: right;
position: absolute;
right: 0em;
top: 0;
background: linear-gradient(180deg, #e2e4e6 0 1.3em, #fff0 0 100%);
width: 16px;
height: 50%;
border-bottom: 1px dotted #fff;
}
#myLists ul li a.down {
bottom: 0;
top: inherit;
border-bottom: 0;
background: linear-gradient(0deg, #e2e4e6 0 1.3em, #fff0 0 100%);
}
#myLists ul li a.up:before {
content: "";
border: 5px solid transparent;
float: right;
border-bottom: 9px solid #fff;
margin-top: 2px;
margin-right: 3px;
transition: all 0.5s ease 0s;
}
#myLists ul li a.down:before {
content: "";
border: 5px solid transparent;
float: right;
border-top: 8px solid #fff;
right: 3px;
bottom: 2px;
position: absolute;
transition: all 0.5s ease 0s;
}
#myLists ul li a.up:hover:before {
border-bottom-color: var(--dark-color);
margin-top: 0;
}
#myLists ul li a.down:hover:before {
border-top-color: var(--dark-color);
bottom: 0px;
}
#myLists ul li a.delete {
background: var(--icon-remove);
width: 1em;
height: 1em;
float: right;
bottom: 0.3em;
position: absolute;
left: 3em;
text-decoration: none;
}
#myLists ul li a.delete:before {
background:
conic-gradient(from 180deg at 30% 37.5%, var(--icon-remove) 0 25%, #fff0 0 100%),
conic-gradient(from 90deg at 70% 37.5%, var(--icon-remove) 0 25%, #fff0 0 100%),
linear-gradient(0deg, var(--icon-remove) 1% 20%, #fff0 0% 62%, var(--icon-remove) 0% 70%, #fff0 0 80%, var(--icon-remove) 0 100%),
linear-gradient(90deg, #fff0 0 25%, #FFF 0% 75%, #fff0 0 100%), var(--icon-remove);
content: "";
position: absolute;
font-size: 1.1em;
height: 16px;
width: 16px;
text-align: center;
line-height: 1.6em;
border-radius: 2px;
left: 0;top: 0;
}
#myLists ul li a.delete:hover:after {
content: "DELETE";
background: var(--icon-remove);
left: 22px;
position: relative;
font-size: 10px;
padding: 3px 4px;
color: #fff;
top: -3px;
}
#myLists ul li a.delete:after {
/*transform: rotate(-45deg);*/
}
#myLists ul li a.delete:hover {
/*background: #444;*/
overflow: visible;
}
#myLists #ul-todo.drag-enter:after {
background: #2a92bfab;
}
#myLists #ul-working.drag-enter:after {
background: #ffcc00ab;
}
#myLists #ul-urgent.drag-enter:after {
background: #ff8800ab;
}
#myLists #ul-done.drag-enter:after {
background: #00b91fab;
}
/*** LISTS END ***/
/*******************************************************************************/
/*** FOOTER ***/
footer {
background: var(--dark-color); /*#212121*/
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
float: left;
box-shadow: rgba(0, 0, 0, 0.16) 0px -2px 6px, rgba(0, 0, 0, 0.25) 0px -2px 6px;
}
footer > div {
float: left;
width: 50%;
height: 100%;
padding: 0.5em;
}
footer button {
cursor: pointer;
}
/* right footer start */
.r-footer > span {
position: relative;
width: 6.6em;
float: right;
}
.r-footer button:before {
content: "";
border: 5px solid transparent;
border-top: 7px solid var(--dark-color);
position: absolute;
margin-left: 11px;
margin-top: 14px;
}
.r-footer button:after {
--hover-color: var(--dark-color);
content: "";
position: absolute;
border-top: 0;
border-bottom: 0;
left: 11px;
top: 4px;
height: 22px;
width: 10px;
background: linear-gradient(#fff0 0 70%, var(--icon-import-export) 0 77%, #FFF0 0 100%),conic-gradient(from 90deg at 0% 0%, var(--hover-color) 0 25%, #fff0 0 0%) 45% 85%, linear-gradient(#fff0 0 45%, var(--icon-import-export).........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0