tanya/CustomWeb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Init from Manwell

Browse source
This commit is contained in:
nazrin 2024-12-25 23:04:55 +00:00
commit 4ec6d1e14f
25 changed files with 1369 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

233
css/editor.css Normal file
View 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);
}