Add close icons on modals (#12)

master
Boris K 2022-10-18 10:41:41 +02:00 committed by GitHub
parent 3e9c9c21ad
commit 4a12427d23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 13 deletions

View File

@ -121,8 +121,9 @@ npm/microtip@0.2.2/microtip.min.css
</div> </div>
</footer> </footer>
<div id="description-modal" data-micromodal-close class="modal"> <div id="description-modal" data-micromodal-close class="modal">
<div tabindex="-1" class="modal-overlay"> <div tabindex="-1" class="modal-overlay">
<div role="dialog" class="modal-content shadow-bottom p-3 m-3"> <div role="dialog" class="modal-content shadow-bottom p-3 m-3">
<div class="modal-close" data-micromodal-close><span class="icon-close"></span></div>
<h2 class="mt-0">What is NoPaste?</h2> <h2 class="mt-0">What is NoPaste?</h2>
<span class="pink">NoPaste</span> is an open-source website similar to Pastebin where you can store any piece of code, <span class="pink">NoPaste</span> is an open-source website similar to Pastebin where you can store any piece of code,
@ -144,7 +145,7 @@ npm/microtip@0.2.2/microtip.min.css
🔍 Google <span class="pink">will not index</span> your data, even if your link is public<br /> 🔍 Google <span class="pink">will not index</span> your data, even if your link is public<br />
<br /> <br />
If you want to know more, you can find more information on If you want to know more, you can find more information on
<a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="pink">Github</a> <a href="https://github.com/bokub/nopaste" rel="noopener" target="_blank" class="pink">GitHub</a>
<div class="additional-info"> <div class="additional-info">
Note: NoPaste is an improved version of Topaz's Note: NoPaste is an improved version of Topaz's
<a href="https://topaz.github.io/paste" rel="noopener" target="_blank">Paste</a> <a href="https://topaz.github.io/paste" rel="noopener" target="_blank">Paste</a>
@ -155,6 +156,7 @@ npm/microtip@0.2.2/microtip.min.css
<div id="error-modal" class="modal" data-micromodal-close> <div id="error-modal" class="modal" data-micromodal-close>
<div tabindex="-1" class="modal-overlay"> <div tabindex="-1" class="modal-overlay">
<div role="dialog" class="modal-content shadow-bottom p-3 m-3"> <div role="dialog" class="modal-content shadow-bottom p-3 m-3">
<div class="modal-close" data-micromodal-close><span class="icon-close"></span></div>
NoPaste cannot decompress the URL<br /><br /> NoPaste cannot decompress the URL<br /><br />
It's possible that you clicked on an invalid link<br /><br /> It's possible that you clicked on an invalid link<br /><br />
Sorry about that Sorry about that

View File

@ -101,6 +101,7 @@ h1 {
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
cursor: initial; cursor: initial;
position: relative;
} }
.modal-content .additional-info { .modal-content .additional-info {
opacity: 0.75; opacity: 0.75;
@ -121,6 +122,12 @@ h1 {
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
.modal-close {
cursor: pointer;
position: absolute;
right: 8px;
top: 8px;
}
/* Form elements */ /* Form elements */
@ -187,7 +194,8 @@ button:hover {
@font-face { @font-face {
font-family: 'icomoon'; font-family: 'icomoon';
src: url('data:application/x-font-woff;charset=utf-8;base64,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') /* Can be updated using the JSON data from https://github.com/bokub/nopaste/issues/11 */
src: url('data:application/x-font-woff;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZkmZnrUAAAF4AAABVGhlYWQhhmIeAAACzAAAADZoaGVhB0IDyQAAAwQAAAAkaG10eBYAAoAAAAMoAAAAIGxvY2EBLgDcAAADSAAAABJtYXhwAAwAIwAAA1wAAAAgbmFtZZlKCfsAAAN8AAABhnBvc3QAAwAAAAAFBAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABANYAgQMqAtUACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gKZ7u487u487u487u4AAgCAACsDgAMrAAsAEAAAAQcnNzYzMh8BFhUUCQEXASMDdE6gTgwSEgxkDP0AAdig/iigAn9OoE4MDGQMEhL+QAHYoP4oAAAAAwCqACsDgALVABgAHAAgAAABMhcWFRQHBisBFSc3FTMyNzY1NCcmIyE1ARUhNRE1IRUC1kYyMjIyRlaAgGAiGhoaGiL9ygKs/VQBAAHVMjJGRjIyVoCAVhoaIiIaGlQBAFRU/axUVAADAIAAqwOAAqsAAwAHAAsAABM1IRUBIRUhETUhFYADAP0AAwD9AAIAAYFUVAEqVv5WVlYAAQAAAAEAAKuSQ39fDzz1AAsEAAAAAADfdA77AAAAAN90DvsAAAAAA4ADKwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADgAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAADWBAAAgAQAAKoEAACAAAAAAAAKABQAHgA4AFwAkACqAAAAAQAAAAgAIQADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=')
format('truetype'); format('truetype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
@ -208,21 +216,18 @@ button:hover {
font-size: 21px; font-size: 21px;
} }
.icon-edit { .icon-edit {
font-size: 12px; font-size: 14px;
} }
.icon-question:before { .icon-close:before {
content: '\e900'; content: '\e900';
} }
.icon-github:before { .icon-edit:before {
content: '\e901'; content: '\e901';
} }
.icon-edit:before { .icon-wrap-text:before {
content: '\e903';
}
.icon-notes:before {
content: '\e902'; content: '\e902';
} }
.icon-wrap-text:before { .icon-notes:before {
content: '\e905'; content: '\e903';
} }

2
sw.js
View File

@ -1,4 +1,4 @@
const VERSION = '20220614'; const VERSION = '20221018';
const PRECACHE = 'precache-' + VERSION; const PRECACHE = 'precache-' + VERSION;
const MODES = 'modes-' + VERSION; const MODES = 'modes-' + VERSION;