Ad5001/SimpleWebpageContentEditor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Minor UI changes + adding webpage to the title.

Browse source 
+ Dark theme support.
+ UI element to make it clearer whether the editing has been enabled.
This commit is contained in:
Adsooi 2023-10-17 18:25:54 +02:00
parent 76d80b1c6a
commit c374b6adc7
Signed by: Ad5001
GPG key ID: EF45F9C6AFE20160
3 changed files with 57 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

57
popup/control.html
View file

@ -21,8 +21,17 @@
<meta charset="UTF-8">
<title>Simple Content Editor Control Popup</title>
<style>
body {
width: 20ch;
--green: green;
--blue: #4185ff;
--red: #bb1111;
--gray-status: gray;
--green-status: #003706;
}
button {
margin: .3em;
margin-top: .5ch;
border: none;
border-radius: .5em;
color: white;
@ -30,7 +39,7 @@
padding-right: 1em;
padding-left: 1em;
cursor: pointer;
width: 15ch;
width: 100%;
}
button:hover, button:focus {
@ -40,30 +49,62 @@
button:active {
filter: brightness(1.4)
}
#status {
font-family: sans-serif;
line-height: 1em;
}
#status::before {
display: inline-block;
vertical-align: middle;
content: " ";
margin-right: .6ch;
background: var(--gray-status);
width: .6em;
height: .6em;
border-radius: 100%;
}
#start-editing {
background: green;
background: var(--green);
}
#save-html {
background: #4185ff;
background: var(--blue);
}
#stop-editing {
background: #bb1111;
background: var(--blue);
}
.editing > #status::before {
background: var(--green-status);
}
.not-editing > #save-html,
.not-editing > #stop-editing,
.editing > #start-editing {
.editing > #start-editing,
.not-editing > #status > #status-editing,
.editing > #status > #status-not-editing {
display: none;
}
@media (prefers-color-scheme: dark) {
body {
--green-status: #30e60b;
--gray-status: lightgray;
background: #1c1b22;
color: white;
}
}
</style>
<script src="control.js"></script>
</head>
<body id="editing-controls" class="not-editing">
<button id="start-editing">Start Editing</button>
<p id="status">Status: <span id="status-not-editing">Not Editing</span><span id="status-editing">Editing</span></p>
<button id="start-editing">Start/Resume Editing</button>
<button id="save-html">Save HTML</button><br>
<button id="stop-editing">Stop Editing</button>
<button id="stop-editing">Pause Editing</button>
</body>
</html>