Line endings fix
This commit is contained in:
anarch3
parent
5116dd2137
commit
544abd1ebd
25 changed files with 7378 additions and 7372 deletions
|
|
@ -1,116 +1,116 @@
|
|||
.nav {
|
||||
position: absolute;
|
||||
top: -130px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav button:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.nav .user {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.nav .logout {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
#dropArea {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
font-family: sans-serif;
|
||||
padding: 50px 0px 50px 0px;
|
||||
}
|
||||
|
||||
#dropArea.highlight {
|
||||
border-color: purple;
|
||||
}
|
||||
|
||||
.dragregion {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia p {
|
||||
color: #444;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video .overlay {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 70%;
|
||||
transform: translateY(0%) translateX(70%);
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #73AD21;
|
||||
padding: 5px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.video .overlay a {
|
||||
color: #73AD21;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.nav {
|
||||
position: absolute;
|
||||
top: -130px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav li {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
}
|
||||
|
||||
.nav button {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.nav button:hover {
|
||||
border-bottom: 1px solid #DB7676;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.nav .user {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.nav .logout {
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-log-out'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
#dropArea {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
font-family: sans-serif;
|
||||
padding: 50px 0px 50px 0px;
|
||||
}
|
||||
|
||||
#dropArea.highlight {
|
||||
border-color: purple;
|
||||
}
|
||||
|
||||
.dragregion {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia {
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.nonmedia p {
|
||||
color: #444;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.video {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video .overlay {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 70%;
|
||||
transform: translateY(0%) translateX(70%);
|
||||
z-index: 1;
|
||||
border-radius: 25px;
|
||||
border: 2px solid #73AD21;
|
||||
padding: 5px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.video .overlay a {
|
||||
color: #73AD21;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,141 +1,141 @@
|
|||
hr {
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px dashed #c5c5c5;
|
||||
border-bottom: 1px dashed #f7f7f7;
|
||||
}
|
||||
|
||||
.learn a {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
.learn a:hover {
|
||||
text-decoration: underline;
|
||||
color: #787e7e;
|
||||
}
|
||||
|
||||
.learn h3,
|
||||
.learn h4,
|
||||
.learn h5 {
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.learn h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.learn h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.learn h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.learn ul {
|
||||
padding: 0;
|
||||
margin: 0 0 30px 25px;
|
||||
}
|
||||
|
||||
.learn li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.learn p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#issue-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border: none;
|
||||
margin: 20px 0 60px 0;
|
||||
}
|
||||
|
||||
.quote p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.quote p:before {
|
||||
content: '“';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.quote p:after {
|
||||
content: '”';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
bottom: -42px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.quote footer {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quote footer img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quote footer a {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.speech-bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 30px;
|
||||
border: 13px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
position: absolute;
|
||||
width: 272px;
|
||||
top: 8px;
|
||||
left: -300px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
transition-property: left;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
@media (min-width: 899px) {
|
||||
.learn-bar {
|
||||
width: auto;
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px dashed #c5c5c5;
|
||||
border-bottom: 1px dashed #f7f7f7;
|
||||
}
|
||||
|
||||
.learn a {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
.learn a:hover {
|
||||
text-decoration: underline;
|
||||
color: #787e7e;
|
||||
}
|
||||
|
||||
.learn h3,
|
||||
.learn h4,
|
||||
.learn h5 {
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.learn h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.learn h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.learn h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.learn ul {
|
||||
padding: 0;
|
||||
margin: 0 0 30px 25px;
|
||||
}
|
||||
|
||||
.learn li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.learn p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#issue-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border: none;
|
||||
margin: 20px 0 60px 0;
|
||||
}
|
||||
|
||||
.quote p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.quote p:before {
|
||||
content: '“';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.quote p:after {
|
||||
content: '”';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
bottom: -42px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.quote footer {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quote footer img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quote footer a {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.speech-bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 30px;
|
||||
border: 13px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
position: absolute;
|
||||
width: 272px;
|
||||
top: 8px;
|
||||
left: -300px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
transition-property: left;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
@media (min-width: 899px) {
|
||||
.learn-bar {
|
||||
width: auto;
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,42 @@
|
|||
.todohome {
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.todohome h1 {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
width: 100%;
|
||||
font-size: 80px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
color: #b83f45;
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.todohome section {
|
||||
padding-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todohome h2 {
|
||||
padding-bottom: 48px;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.todohome .button {
|
||||
padding: 13px 45px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
background: #d83f45;
|
||||
}
|
||||
|
||||
.todohome a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
.todohome {
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.todohome h1 {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
width: 100%;
|
||||
font-size: 80px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
color: #b83f45;
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.todohome section {
|
||||
padding-top: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todohome h2 {
|
||||
padding-bottom: 48px;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.todohome .button {
|
||||
padding: 13px 45px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
background: #d83f45;
|
||||
}
|
||||
|
||||
.todohome a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,393 +1,393 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #111111;
|
||||
color: #f5f5f5;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.view .header {
|
||||
background: #121122;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #121212;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
width: 100%;
|
||||
font-size: 80px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
color: #b83f45;
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
height: 65px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: none; /* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.toggle-all + label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 65px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -65px;
|
||||
left: -0;
|
||||
}
|
||||
|
||||
.toggle-all + label:before {
|
||||
content: '❯';
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
color: #949494;
|
||||
padding: 10px 27px 10px 27px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toggle-all:checked + label:before {
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: calc(100% - 43px);
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.todo-list li .toggle + label {
|
||||
/*
|
||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked + label {
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 60px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
font-weight: 400;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #949494;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #949494;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover,
|
||||
.todo-list li .destroy:focus {
|
||||
color: #C18585;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: '×';
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
|
||||
0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
||||
0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a:hover {
|
||||
border-color: #DB7676;
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: #CE4646;
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 19px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #4d4d4d;
|
||||
font-size: 11px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:focus,
|
||||
.toggle:focus + label,
|
||||
.toggle-all:focus + label {
|
||||
box-shadow: 0 0 2px 2px #CF7D7D;
|
||||
outline: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #111111;
|
||||
color: #f5f5f5;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.view .header {
|
||||
background: #121122;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #121212;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
width: 100%;
|
||||
font-size: 80px;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
color: #b83f45;
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
height: 65px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border: none; /* Mobile Safari */
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.toggle-all + label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 65px;
|
||||
font-size: 0;
|
||||
position: absolute;
|
||||
top: -65px;
|
||||
left: -0;
|
||||
}
|
||||
|
||||
.toggle-all + label:before {
|
||||
content: '❯';
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
color: #949494;
|
||||
padding: 10px 27px 10px 27px;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.toggle-all:checked + label:before {
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: calc(100% - 43px);
|
||||
padding: 12px 16px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.todo-list li .toggle + label {
|
||||
/*
|
||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||
*/
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked + label {
|
||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
word-break: break-all;
|
||||
padding: 15px 15px 15px 60px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
font-weight: 400;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #949494;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #949494;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover,
|
||||
.todo-list li .destroy:focus {
|
||||
color: #C18585;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: '×';
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
|
||||
0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
||||
0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a:hover {
|
||||
border-color: #DB7676;
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: #CE4646;
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 19px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #4d4d4d;
|
||||
font-size: 11px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:focus,
|
||||
.toggle:focus + label,
|
||||
.toggle-all:focus + label {
|
||||
box-shadow: 0 0 2px 2px #CF7D7D;
|
||||
outline: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,116 +1,116 @@
|
|||
.prompt {
|
||||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
padding: 25px;
|
||||
background: #11111;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: #d83f45;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.button {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.google {
|
||||
background: #4787ed;
|
||||
}
|
||||
|
||||
a.facebook {
|
||||
background: #4267b2;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c83f45;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0 0 5px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
form section {
|
||||
margin: 0 0 20px 0;
|
||||
position: relative; /* for password toggle positioning */
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 5px;
|
||||
background-color:#200;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
input[type=email]:not(:focus):invalid,
|
||||
input[type=password]:not(:focus):invalid {
|
||||
color: red;
|
||||
outline-color: red;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #d9d9d9;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
p.instructions {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p.help {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.messages p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
color: #d83f45;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d83f45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-alert-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
.prompt {
|
||||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
padding: 25px;
|
||||
background: #11111;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: #d83f45;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.button {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
background: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
a.google {
|
||||
background: #4787ed;
|
||||
}
|
||||
|
||||
a.facebook {
|
||||
background: #4267b2;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #c83f45;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 20px 0;
|
||||
padding: 0 0 5px 0;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
form section {
|
||||
margin: 0 0 20px 0;
|
||||
position: relative; /* for password toggle positioning */
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 5px;
|
||||
background-color:#200;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
input[type=email]:not(:focus):invalid,
|
||||
input[type=password]:not(:focus):invalid {
|
||||
color: red;
|
||||
outline-color: red;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid #d9d9d9;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
p.instructions {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p.help {
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* background image by Cole Bemis <https://feathericons.com> */
|
||||
.messages p {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
color: #d83f45;
|
||||
padding-left: 20px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d83f45' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-alert-circle'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,143 +1,143 @@
|
|||
/* eslint-env browser: true */
|
||||
|
||||
function copyURI(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("src"))).then(() => {
|
||||
/* clipboard successfully set */
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
/* clipboard write failed */
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function copyA(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("href"))).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function copyPath(evt) {
|
||||
navigator.clipboard.writeText(absolutePath(evt)).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function absolutePath (href) {
|
||||
let link = document.createElement("a");
|
||||
link.href = href;
|
||||
return link.href;
|
||||
}
|
||||
|
||||
function extension(string) {
|
||||
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
|
||||
}
|
||||
|
||||
let dropArea = document.getElementById("dropArea");
|
||||
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
["dragenter", "dragover"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
})
|
||||
|
||||
;["dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add("highlight");
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove("highlight");
|
||||
}
|
||||
|
||||
dropArea.addEventListener("drop", handleDrop, false);
|
||||
window.addEventListener("paste", handlePaste);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handlePaste(e) {
|
||||
// Get the data of clipboard
|
||||
const clipboardItems = e.clipboardData.items;
|
||||
const items = [].slice.call(clipboardItems).filter(function (item) {
|
||||
// Filter the image items only
|
||||
return item.type.indexOf("image") !== -1;
|
||||
});
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = items[0];
|
||||
// Get the blob of image
|
||||
const blob = item.getAsFile();
|
||||
console.log(blob);
|
||||
|
||||
uploadFile(blob);
|
||||
previewFile(blob);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
files = [...files];
|
||||
files.forEach(uploadFile);
|
||||
files.forEach(previewFile);
|
||||
}
|
||||
|
||||
|
||||
function previewFile(file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = function() {
|
||||
let img = document.createElement("img");
|
||||
img.src = reader.result;
|
||||
img.className = "image";
|
||||
document.getElementById("gallery").appendChild(img);
|
||||
console.log(document.getElementById("fileupload"));
|
||||
document.getElementById("fileupload").src = img.src;
|
||||
};
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData();
|
||||
let reader = new FileReader();
|
||||
|
||||
xhr.open("POST", "/", true);
|
||||
|
||||
xhr.addEventListener("readystatechange", function(e) {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
location.reload();
|
||||
}
|
||||
else if (xhr.readyState == 4 && xhr.status != 200) {
|
||||
// Error. Inform the user
|
||||
}
|
||||
});
|
||||
|
||||
if (file == null || file == undefined) {
|
||||
//file = reader.readAsDataURL(document.getElementById("fileupload").files[0]);
|
||||
//file = reader.readAsDataURL(document.querySelector("#fileupload").files[0]);
|
||||
file = document.querySelector("#fileupload").files[0];
|
||||
}
|
||||
|
||||
formData.append("fileupload", file);
|
||||
formData.append("expire", document.getElementById("expire").value);
|
||||
console.log(formData);
|
||||
xhr.send(formData);
|
||||
}
|
||||
/* eslint-env browser: true */
|
||||
|
||||
function copyURI(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("src"))).then(() => {
|
||||
/* clipboard successfully set */
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
/* clipboard write failed */
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function copyA(evt) {
|
||||
evt.preventDefault();
|
||||
navigator.clipboard.writeText(absolutePath(evt.target.getAttribute("href"))).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function copyPath(evt) {
|
||||
navigator.clipboard.writeText(absolutePath(evt)).then(() => {
|
||||
console.log("copied");
|
||||
}, () => {
|
||||
console.log("failed");
|
||||
});
|
||||
}
|
||||
|
||||
function absolutePath (href) {
|
||||
let link = document.createElement("a");
|
||||
link.href = href;
|
||||
return link.href;
|
||||
}
|
||||
|
||||
function extension(string) {
|
||||
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
|
||||
}
|
||||
|
||||
let dropArea = document.getElementById("dropArea");
|
||||
|
||||
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
function preventDefaults (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
["dragenter", "dragover"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false);
|
||||
})
|
||||
|
||||
;["dragleave", "drop"].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add("highlight");
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove("highlight");
|
||||
}
|
||||
|
||||
dropArea.addEventListener("drop", handleDrop, false);
|
||||
window.addEventListener("paste", handlePaste);
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
handleFiles(files);
|
||||
}
|
||||
|
||||
function handlePaste(e) {
|
||||
// Get the data of clipboard
|
||||
const clipboardItems = e.clipboardData.items;
|
||||
const items = [].slice.call(clipboardItems).filter(function (item) {
|
||||
// Filter the image items only
|
||||
return item.type.indexOf("image") !== -1;
|
||||
});
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const item = items[0];
|
||||
// Get the blob of image
|
||||
const blob = item.getAsFile();
|
||||
console.log(blob);
|
||||
|
||||
uploadFile(blob);
|
||||
previewFile(blob);
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
files = [...files];
|
||||
files.forEach(uploadFile);
|
||||
files.forEach(previewFile);
|
||||
}
|
||||
|
||||
|
||||
function previewFile(file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onloadend = function() {
|
||||
let img = document.createElement("img");
|
||||
img.src = reader.result;
|
||||
img.className = "image";
|
||||
document.getElementById("gallery").appendChild(img);
|
||||
console.log(document.getElementById("fileupload"));
|
||||
document.getElementById("fileupload").src = img.src;
|
||||
};
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
let formData = new FormData();
|
||||
let reader = new FileReader();
|
||||
|
||||
xhr.open("POST", "/", true);
|
||||
|
||||
xhr.addEventListener("readystatechange", function(e) {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
location.reload();
|
||||
}
|
||||
else if (xhr.readyState == 4 && xhr.status != 200) {
|
||||
// Error. Inform the user
|
||||
}
|
||||
});
|
||||
|
||||
if (file == null || file == undefined) {
|
||||
//file = reader.readAsDataURL(document.getElementById("fileupload").files[0]);
|
||||
//file = reader.readAsDataURL(document.querySelector("#fileupload").files[0]);
|
||||
file = document.querySelector("#fileupload").files[0];
|
||||
}
|
||||
|
||||
formData.append("fileupload", file);
|
||||
formData.append("expire", document.getElementById("expire").value);
|
||||
console.log(formData);
|
||||
xhr.send(formData);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue