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-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 {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #111111;
|
||||
background: #111111;
|
||||
color: #f5f5f5;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -33,12 +33,16 @@ body {
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
.view .header {
|
||||
background: #121122;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
background: #121212;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
|
|
@ -48,19 +52,22 @@ body {
|
|||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
|
|
@ -87,9 +94,6 @@ body {
|
|||
line-height: 1.4em;
|
||||
color: inherit;
|
||||
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;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -105,7 +109,6 @@ body {
|
|||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
|
|
@ -153,7 +156,6 @@ body {
|
|||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
|
|
@ -215,7 +217,7 @@ body {
|
|||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
font-weight: 400;
|
||||
color: #484848;
|
||||
color: #BB86FC;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
padding: 25px;
|
||||
background: #fff;
|
||||
background: #11111;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -79,6 +79,8 @@ input {
|
|||
font-size: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 5px;
|
||||
background-color:#200;
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
input[type=email]:not(:focus):invalid,
|
||||
|
|
|
|||
|
|
@ -7,24 +7,7 @@
|
|||
<link rel="stylesheet" href="/css/base.css">
|
||||
<link rel="stylesheet" href="/css/index.css">
|
||||
<link rel="stylesheet" href="/css/app.css">
|
||||
<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>
|
||||
<script src="/js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="todoapp">
|
||||
|
|
@ -41,9 +24,13 @@ function absolutePath (href) {
|
|||
<header class="header">
|
||||
<h1>Embedder</h1>
|
||||
<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">
|
||||
<input type="submit">
|
||||
<!---->
|
||||
<div id="dropArea">
|
||||
<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>
|
||||
</header>
|
||||
<% if (Count > 0) { %>
|
||||
|
|
@ -53,8 +40,8 @@ function absolutePath (href) {
|
|||
<li>
|
||||
<form action="<%= file.url %>" method="post">
|
||||
<div class="view">
|
||||
<img src="/uploads/<%=file.path %>" height="400" 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>
|
||||
<img class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)">
|
||||
<label text-align:"center"><%= file.path %></label>
|
||||
<button class="destroy" form="delete-<%= file.path %>"></button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue