css updates
This commit is contained in:
parent
afa4f54f97
commit
e02e3d2946
4 changed files with 43 additions and 36 deletions
|
|
@ -53,3 +53,19 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center left;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,8 @@ button {
|
||||||
body {
|
body {
|
||||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
background: #f5f5f5;
|
background: #111111;
|
||||||
color: #111111;
|
color: #f5f5f5;
|
||||||
min-width: 230px;
|
min-width: 230px;
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -33,12 +33,16 @@ body {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.view .header {
|
||||||
|
background: #121122;
|
||||||
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp {
|
.todoapp {
|
||||||
background: #fff;
|
background: #121212;
|
||||||
margin: 130px 0 40px 0;
|
margin: 130px 0 40px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||||
|
|
@ -48,19 +52,22 @@ body {
|
||||||
.todoapp input::-webkit-input-placeholder {
|
.todoapp input::-webkit-input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.4);
|
color: #f5f5f5;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp input::-moz-placeholder {
|
.todoapp input::-moz-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.4);
|
color: #f5f5f5;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp input::input-placeholder {
|
.todoapp input::input-placeholder {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.4);
|
color: #f5f5f5;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp h1 {
|
.todoapp h1 {
|
||||||
|
|
@ -87,9 +94,6 @@ body {
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
border: 1px solid #999;
|
|
||||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
@ -105,7 +109,6 @@ body {
|
||||||
.main {
|
.main {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-top: 1px solid #e6e6e6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-all {
|
.toggle-all {
|
||||||
|
|
@ -153,7 +156,6 @@ body {
|
||||||
.todo-list li {
|
.todo-list li {
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
border-bottom: 1px solid #ededed;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li:last-child {
|
.todo-list li:last-child {
|
||||||
|
|
@ -215,7 +217,7 @@ body {
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
transition: color 0.4s;
|
transition: color 0.4s;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #484848;
|
color: #BB86FC;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li.completed label {
|
.todo-list li.completed label {
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
margin: 50px auto;
|
margin: 50px auto;
|
||||||
padding: 25px;
|
padding: 25px;
|
||||||
background: #fff;
|
background: #11111;
|
||||||
border: 1px solid #e6e6e6;
|
border: 1px solid #e6e6e6;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
@ -79,6 +79,8 @@ input {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
border: 1px solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
background-color:#200;
|
||||||
|
color:#fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=email]:not(:focus):invalid,
|
input[type=email]:not(:focus):invalid,
|
||||||
|
|
|
||||||
|
|
@ -7,24 +7,7 @@
|
||||||
<link rel="stylesheet" href="/css/base.css">
|
<link rel="stylesheet" href="/css/base.css">
|
||||||
<link rel="stylesheet" href="/css/index.css">
|
<link rel="stylesheet" href="/css/index.css">
|
||||||
<link rel="stylesheet" href="/css/app.css">
|
<link rel="stylesheet" href="/css/app.css">
|
||||||
<script>
|
<script src="/js/index.js"></script>
|
||||||
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 absolutePath (href) {
|
|
||||||
let link = document.createElement("a");
|
|
||||||
link.href = href;
|
|
||||||
return link.href;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section class="todoapp">
|
<section class="todoapp">
|
||||||
|
|
@ -41,9 +24,13 @@ function absolutePath (href) {
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<h1>Embedder</h1>
|
<h1>Embedder</h1>
|
||||||
<form action="/" method="post" encType="multipart/form-data">
|
<form action="/" method="post" encType="multipart/form-data">
|
||||||
<input class="new-todo" type="text" name="title" placeholder="File Title (optional)">
|
<!---->
|
||||||
<input class="new-todo" type="file" name="fileupload">
|
<div id="dropArea">
|
||||||
<input type="submit">
|
<p class="dragregion">Upload a file or drag n' drop into the dashed region</p>
|
||||||
|
<br>
|
||||||
|
<p class="dragregion"><input class="" type="file" id="fileupload" name="fileupload"><input type="submit"></p>
|
||||||
|
<p class="dragregion">Click the file to copy the url</p>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</header>
|
</header>
|
||||||
<% if (Count > 0) { %>
|
<% if (Count > 0) { %>
|
||||||
|
|
@ -53,8 +40,8 @@ function absolutePath (href) {
|
||||||
<li>
|
<li>
|
||||||
<form action="<%= file.url %>" method="post">
|
<form action="<%= file.url %>" method="post">
|
||||||
<div class="view">
|
<div class="view">
|
||||||
<img src="/uploads/<%=file.path %>" height="400" onclick="copyURI(event)">
|
<img class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)">
|
||||||
<label ondblclick="this.closest('li').className = this.closest('li').className + ' editing'; this.closest('li').querySelector('input.edit').focus(); this.closest('li').querySelector('input.edit').value = ''; this.closest('li').querySelector('input.edit').value = '<%= file.path %>';"><%= file.path %></label>
|
<label text-align:"center"><%= file.path %></label>
|
||||||
<button class="destroy" form="delete-<%= file.path %>"></button>
|
<button class="destroy" form="delete-<%= file.path %>"></button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue