Init from Manwell
This commit is contained in:
commit
4ec6d1e14f
25 changed files with 1369 additions and 0 deletions
67
css/common.css
Normal file
67
css/common.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
*{box-sizing:border-box;}
|
||||
|
||||
:root{
|
||||
--top: #212121;
|
||||
--background: #303030;
|
||||
--light: #424242;
|
||||
--lighter: #606060;
|
||||
--lightest: #848484;
|
||||
}
|
||||
html{
|
||||
height:100vh;
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
}
|
||||
body{
|
||||
min-height:100%;
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.check{
|
||||
font-size:20px;
|
||||
|
||||
display: inline-flex;
|
||||
width:2em;
|
||||
height:1em;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.check input{
|
||||
display:none;
|
||||
}
|
||||
.check input + span{
|
||||
position:relative;
|
||||
display:inline-flex;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: #000;
|
||||
border-radius:1000px;
|
||||
cursor:pointer;
|
||||
transition: background 100ms ease-in-out;
|
||||
}
|
||||
.check input:checked + span{
|
||||
background:#0a3;
|
||||
}
|
||||
.check input + span::before{
|
||||
content:"";
|
||||
display:inline-block;
|
||||
width:1em; height:1em;
|
||||
margin-left:1px;
|
||||
border:0.15em solid transparent;
|
||||
background-clip: padding-box;
|
||||
box-sizing:border-box;
|
||||
border-radius:100%;
|
||||
background-color:white;
|
||||
transition: all 100ms ease-in-out;
|
||||
}
|
||||
.check input:checked + span::before{
|
||||
transform: translateX(100%);
|
||||
margin-left:-1px;
|
||||
}
|
||||
.check.no-transition input + span,
|
||||
.check.no-transition input + span::before{
|
||||
transition:none;
|
||||
}
|
||||
/* Small Check */
|
||||
.check.small{
|
||||
font-size:17px;
|
||||
}
|
||||
233
css/editor.css
Normal file
233
css/editor.css
Normal file
|
|
@ -0,0 +1,233 @@
|
|||
/* reset */
|
||||
input {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
#editor {
|
||||
margin: 0;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
/* custom styles */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* header */
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
height: 50px;
|
||||
flex-shrink: 0;
|
||||
padding: 0 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: var(--top);
|
||||
}
|
||||
|
||||
header .check {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
header input {
|
||||
width: 50%;
|
||||
height: 40px;
|
||||
padding: 0 15px;
|
||||
margin-right: auto;
|
||||
border-radius: 40px;
|
||||
background-color: var(--top);
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-size: 30px;
|
||||
color: white;
|
||||
cursor:pointer;
|
||||
margin-right: auto;
|
||||
|
||||
transition: padding 100ms ease-in-out;
|
||||
}
|
||||
header input:hover,
|
||||
header input:focus {
|
||||
background-color: var(--light);
|
||||
}
|
||||
header input:focus{
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
header > span {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
margin-left: 5px;
|
||||
border-radius: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
header > span#download-btn {
|
||||
padding: 7px;
|
||||
}
|
||||
header > span:last-child {
|
||||
margin-right: -5px;
|
||||
}
|
||||
header > span:hover {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header > span svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#save-btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
#save-btn.edited {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#save-btn svg {
|
||||
opacity: 0.25;
|
||||
transition: opacity 100ms ease-in-out;
|
||||
}
|
||||
#save-btn.edited svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* editor */
|
||||
main {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* links popup */
|
||||
#links-popup {
|
||||
display: none; /* flex */
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
height: 500px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0; bottom: 0;
|
||||
right: 0; left: 0;
|
||||
z-index: 10;
|
||||
|
||||
background-color: var(--light);
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#links-popup header {
|
||||
background: none;
|
||||
background-color: var(--background);
|
||||
}
|
||||
#links-popup header h1 {
|
||||
margin-right: auto;
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#links-popup header > span {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
#links-popup main {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry input {
|
||||
display: block;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
padding: 10px 15px;
|
||||
padding-right: 40px;
|
||||
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: rgb(235, 227, 227);
|
||||
opacity: 1;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry:hover,
|
||||
#links-popup main #links-wrapper .link-entry input:focus {
|
||||
background-color: var(--lighter);
|
||||
opacity: 1;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry input:focus {
|
||||
cursor:auto;
|
||||
}
|
||||
|
||||
#links-popup main #links-wrapper .link-entry svg {
|
||||
position: absolute;
|
||||
top: 0; right: 0px;
|
||||
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
padding: 10px;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 0;
|
||||
|
||||
fill: white;
|
||||
opacity: 0;
|
||||
cursor: pointer
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry:hover svg,
|
||||
#links-popup main #links-wrapper .link-entry input:focus + svg {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#links-popup main #links-wrapper .link-entry svg:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* better monokai */
|
||||
|
||||
#editor.ace-monokai {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_gutter {
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_selection {
|
||||
background-color: var(--lighter);
|
||||
}
|
||||
|
||||
#editor.ace-monokai .ace_marker-layer .ace_active-line {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
145
css/index.css
Normal file
145
css/index.css
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
svg{
|
||||
max-width:100%;
|
||||
max-height:100%;
|
||||
}
|
||||
|
||||
body.drag-over{
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header{
|
||||
width:100%;
|
||||
height:50px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
padding:0px 20px;
|
||||
background-color: var(--top);
|
||||
color:white;
|
||||
fill:white;
|
||||
font-size:30px;
|
||||
}
|
||||
header img{
|
||||
width:36px;
|
||||
margin-right:10px;
|
||||
}
|
||||
header img + span{
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
header #new-file {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
|
||||
transition: width 100ms ease-in-out;
|
||||
}
|
||||
header #new-file:hover {
|
||||
width: 175px;
|
||||
background-color: var(--light);
|
||||
}
|
||||
|
||||
header #new-file span.btn {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-width: 30px;
|
||||
height: 100%;
|
||||
opacity:0.5;
|
||||
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
header #new-file span.btn:hover {
|
||||
opacity:1;
|
||||
text-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
header #new-file .btn-svg {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
header #new-file .btn-svg svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
#files{
|
||||
padding:10px 20px;
|
||||
}
|
||||
.file{
|
||||
position:relative;
|
||||
color:white;
|
||||
height:45px;
|
||||
padding:10px 15px;
|
||||
display:grid;
|
||||
grid-template-columns: 60px auto 50px 125px;
|
||||
align-items:center;
|
||||
font-size:16px;
|
||||
border-radius:45px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.file:hover{
|
||||
background: var(--lighter);
|
||||
}
|
||||
.file .file-type{
|
||||
justify-self: center;
|
||||
}
|
||||
.file .file-name,
|
||||
.file .file-type{
|
||||
pointer-events:none;
|
||||
}
|
||||
.file .file-icons{
|
||||
display:flex;
|
||||
pointer-events:none;
|
||||
}
|
||||
.file .file-icons .file-icon{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-radius:20px;
|
||||
padding:2px 0px;
|
||||
transition: all 100ms ease-in-out;
|
||||
cursor:pointer;
|
||||
pointer-events:all;
|
||||
}
|
||||
.file .file-icons .file-icon svg{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
opacity:0.7;
|
||||
}
|
||||
.file .file-icons .file-icon.icon-confirm svg,
|
||||
.file .file-icons .file-icon svg:hover{
|
||||
opacity:1;
|
||||
}
|
||||
.file .file-icons .file-icon.icon-confirm{
|
||||
background:#C00;
|
||||
padding:2px 5px;
|
||||
}
|
||||
.file .file-icons .file-icon::before{
|
||||
content:"DELETE";
|
||||
font-size: 12px;
|
||||
width: 0px;
|
||||
overflow:hidden;
|
||||
text-align:center;
|
||||
transition: width 100ms ease-in-out;
|
||||
}
|
||||
.file .file-icons .file-icon.icon-confirm::before{
|
||||
width:50px;
|
||||
}
|
||||
.file .file-icons .file-edit{
|
||||
margin-left:auto;
|
||||
margin-right:5px;
|
||||
}
|
||||
89
css/popup.css
Normal file
89
css/popup.css
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
html{
|
||||
height:auto;
|
||||
}
|
||||
body{
|
||||
width:200px;
|
||||
color:white;
|
||||
padding:3px 0px;
|
||||
font-size:12px;
|
||||
}
|
||||
img{
|
||||
height:22px;
|
||||
width:22px;
|
||||
justify-self:center;
|
||||
}
|
||||
.title{
|
||||
font-size:16px;
|
||||
}
|
||||
.line{
|
||||
display:grid;
|
||||
align-items:center;
|
||||
grid-template-columns: 34px auto 25px;
|
||||
column-gap: 10px;
|
||||
height:30px;
|
||||
padding:0px 10px;
|
||||
}
|
||||
.line .check{
|
||||
flex-shrink:0;
|
||||
}
|
||||
.line > .line-item{
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events:none;
|
||||
}
|
||||
.line > .line-item + .line-item{
|
||||
opacity:0.5;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.btn{
|
||||
cursor:pointer;
|
||||
}
|
||||
.btn:hover{
|
||||
opacity:1;
|
||||
background: var(--lighter);
|
||||
}
|
||||
|
||||
#files:empty{
|
||||
display:none;
|
||||
}
|
||||
|
||||
section:not(:first-child){
|
||||
margin-top:3px;
|
||||
padding-top:3px;
|
||||
border-top:1px solid var(--light);
|
||||
}
|
||||
section h2{
|
||||
margin: 0;
|
||||
font-size: 10px;
|
||||
font-weight:400;
|
||||
padding:0px 10px;
|
||||
color: var(--lighter)
|
||||
}
|
||||
section h2 span{
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
pointer-events:none;
|
||||
}
|
||||
|
||||
#add-new .line {
|
||||
grid-template-columns: 50% 50%;
|
||||
align-items: stretch;
|
||||
column-gap:0;
|
||||
height:20px;
|
||||
}
|
||||
#add-new .line .btn{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
opacity:0.7;
|
||||
}
|
||||
#add-new .line .btn:hover{
|
||||
opacity:1;
|
||||
background:none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue