From 636e6ace94d72ef0edf4021ba54e7cecb7111828 Mon Sep 17 00:00:00 2001 From: Matias De lellis Date: Mon, 15 Aug 2022 20:44:35 -0300 Subject: [PATCH] Some css fixes for NC25... --- appinfo/info.xml | 4 +- css/global.css | 7 + css/global.scss | 7 - css/medium.css | 81 ++++++++++++ css/medium.scss | 134 -------------------- css/{qn-colorpick.scss => qn-colorpick.css} | 0 css/{style.scss => style.css} | 13 +- 7 files changed, 99 insertions(+), 147 deletions(-) create mode 100644 css/global.css delete mode 100644 css/global.scss create mode 100644 css/medium.css delete mode 100644 css/medium.scss rename css/{qn-colorpick.scss => qn-colorpick.css} (100%) rename css/{style.scss => style.css} (63%) diff --git a/appinfo/info.xml b/appinfo/info.xml index 3a799b8..321e6ab 100644 --- a/appinfo/info.xml +++ b/appinfo/info.xml @@ -5,7 +5,7 @@ Quick notes Quick notes with a basic rich text Quick notes with a basic rich text - 0.8.1 + 0.8.5 agpl Matias De lellis QuickNotes @@ -20,6 +20,6 @@ https://raw.githubusercontent.com/matiasdelellis/quicknotes/master/doc/quicknotes-attachments.jpeg https://raw.githubusercontent.com/matiasdelellis/quicknotes/master/doc/quicknotes-shared-note.jpeg - + \ No newline at end of file diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..6e28bcd --- /dev/null +++ b/css/global.css @@ -0,0 +1,7 @@ +.icon-quicknotes { + background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIGZpbGw9IiNmZmYiPgogIDxwYXRoIGQ9Im0yOC4xOTggMjUuMjMxYy0wLjEwMzUyIDEuNTE2MS0xLjY1NTIgMi41MzkyLTMuMDg0MSAyLjMzOTctNy4yNjcyLTAuMDA4Ni0xNC41MzUtMC4wMjI2LTIxLjgwMi0wLjA1MzE4LTEuMzI1NC0wLjA5MDY2LTIuMjEzNS0xLjI0NDYtMi4yODY1LTIuNDk5Mi0xLjQ5ZS00IDAuOTU2NjUgMC4wMDEyIDEuOTE0OCAwIDIuODcxNC0wLjE5OTc2IDEuNDMxNyAwLjc2ODg4IDIuOTgwNCAyLjI4NjUgMy4wODQxIDcuMjgwNCAwLjAzMDYxIDE0LjU3NC0wLjAwODYgMjEuODU1IDAgMS40MzE3IDAuMTk5NzYgMi45ODA0LTAuNzY4ODggMy4wODQxLTIuMjg2NWwtMC4wNTMxOC0zLjQ1NjR6Ii8+CiAgPHBhdGggZD0ibTMuNTc4NCAzLjc0ODZjLTEuMjczMS0wLjAyMTk3NC0yLjM5NiAwLjgyOTI5LTIuNDk5MiAxLjg2MTEtMC4wMzA1NiA1LjkwOTMtMC4wNDQ0NSAxMS43OTctMC4wNTMxNyAxNy43MDctMC4xOTkzOCAxLjE2MiAwLjc3MTc2IDIuNDE1IDIuMjg2NSAyLjQ5OTIgNy4yNjY2IDAuMDI0ODQgMTQuNTM0IDAuMDQ2MDggMjEuODAyIDAuMDUzMTggMS40MjkgMC4xNjIxNCAyLjk4MDYtMC42MjkzMSAzLjA4NDEtMS44NjExIDAuMDI2NDUtNS4xMTMxIDAuMDUyMzItMTAuMjU0IDAuMDUzMTgtMTUuMzY3bC04LjU2MTEgOC41NjExYy0wLjYzODA5IDAuNjM4MDgtMS40MjM1IDAuODY3MTEtMi4yMzMzIDAuOTAzOTctMC4zOTI0OCAwLjMyMTItMC43ODEyIDAuNjMyNjItMS4yNzYyIDAuNzk3NjItMC42NzEyNiAwLjIyMzc2LTEuNzEwMiAwLjMxMDQyLTIuNTUyNC0wLjUzMTc1LTAuODQyMTYtMC44NDIxNi0wLjc1NTUtMS44ODExLTAuNTMxNzUtMi41NTI0IDAuMTY1LTAuNDk0OTkgMC40NzY0Mi0wLjg4MzcyIDAuNzk3NjItMS4yNzYyIDAuMDM2ODUtMC44MDk4NiAwLjI2NTg4LTEuNTk1MiAwLjkwMzk3LTIuMjMzM2w4LjU2MTEtOC41NjExYy02LjU3OTYtMC4wMTMzNTctMTMuMjAxIDAuMDA2MjYtMTkuNzgxIDB6Ii8+CiAgPHBhdGggZD0ibTE2LjA2MiAxMy41MzJjLTAuNDQwNDkgMC40NDA0OS0wLjU1NTI5IDEuMDU1OC0wLjQxMzYgMS42MTY4bC0wLjE4OCAwLjE4OGMtMC42NjY1OCAwLjY2NjU4LTAuOTM0ODkgMS40NzE1LTAuNjAxNiAxLjgwNDggMC4zMzMyOSAwLjMzMzI5IDEuMTM4MiAwLjA2NDk3IDEuODA0OC0wLjYwMTZsMC4xODgtMC4xODhjMC41NjA5NiAwLjE0MTY5IDEuMTc2MyAwLjAyNjg4IDEuNjE2OC0wLjQxMzZsMTIuMDMyLTEyLjAzMmMwLjY2NjU4LTAuNjY2NTggMC42NjY1OC0xLjczOTggMC0yLjQwNjQtMC42NjY1Ny0wLjY2NjU4LTEuNzM5OC0wLjY2NjU4LTIuNDA2NCAweiIvPgogPC9nPgo8L3N2Zz4K") +} + +.icon-pinned { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41NzIgMi40YTEuNDI4NiAxLjQgMCAwIDAtMS40Mjg2LTEuNGgtNC4yODU3Yy0wLjc4NTcxIDAtMS40Mjg2IDAuNjMtMS40Mjg2IDEuNHY0LjlsLTEuNDI4NiAyLjF2MS40aDQuMjg1N3YzLjVsMC43MTQyOSAwLjcgMC43MTQyOS0wLjd2LTMuNWg0LjI4NTd2LTEuNGwtMS40Mjg2LTIuMXoiIHN0cm9rZS13aWR0aD0iLjcwNzExIi8+PC9zdmc+Cg==") +} diff --git a/css/global.scss b/css/global.scss deleted file mode 100644 index 5121a05..0000000 --- a/css/global.scss +++ /dev/null @@ -1,7 +0,0 @@ -.icon-quicknotes { - @include icon-color('app', 'quicknotes', $color-black); -} - -.icon-pinned { - @include icon-color('pinned', 'quicknotes', $color-black); -} diff --git a/css/medium.css b/css/medium.css new file mode 100644 index 0000000..edab17e --- /dev/null +++ b/css/medium.css @@ -0,0 +1,81 @@ +.medium-toolbar-arrow-under:after { + border-color: #000 transparent transparent transparent; + top: 40px; } + +.medium-toolbar-arrow-over:before { + border-color: transparent transparent #000 transparent; } + +.medium-editor-toolbar { + background-color: #000; + border: none; + border-radius: 50px; } + .medium-editor-toolbar li button { + background-color: transparent; + border: none; + box-sizing: border-box; + color: #ccc; + height: 40px; + min-width: 40px; + padding: 5px 12px; + -webkit-transition: background-color .2s ease-in, color .2s ease-in; + transition: background-color .2s ease-in, color .2s ease-in; } + .medium-editor-toolbar li button:hover { + background-color: #000; + color: #a2d7c7; } + .medium-editor-toolbar li .medium-editor-button-first { + border-bottom-left-radius: 50px; + border-top-left-radius: 50px; + padding-left: 24px; } + .medium-editor-toolbar li .medium-editor-button-last { + border-bottom-right-radius: 50px; + border-right: none; + border-top-right-radius: 50px; + padding-right: 24px; } + .medium-editor-toolbar li .medium-editor-button-active { + background-color: #000; + color: #a2d7c7; } + +.medium-editor-toolbar-form { + background: #000; + border-radius: 50px; + color: #ccc; + overflow: hidden; } + .medium-editor-toolbar-form .medium-editor-toolbar-input { + background: #000; + box-sizing: border-box; + color: #ccc; + height: 40px; + padding-left: 16px; + width: 220px; } + .medium-editor-toolbar-form .medium-editor-toolbar-input::-webkit-input-placeholder { + color: #f8f5f3; + color: rgba(248, 245, 243, 0.8); } + .medium-editor-toolbar-form .medium-editor-toolbar-input:-moz-placeholder { + /* Firefox 18- */ + color: #f8f5f3; + color: rgba(248, 245, 243, 0.8); } + .medium-editor-toolbar-form .medium-editor-toolbar-input::-moz-placeholder { + /* Firefox 19+ */ + color: #f8f5f3; + color: rgba(248, 245, 243, 0.8); } + .medium-editor-toolbar-form .medium-editor-toolbar-input:-ms-input-placeholder { + color: #f8f5f3; + color: rgba(248, 245, 243, 0.8); } + .medium-editor-toolbar-form a { + color: #ccc; + -webkit-transform: translateY(2px); + transform: translateY(2px); } + .medium-editor-toolbar-form .medium-editor-toolbar-close { + margin-right: 16px; } + +.medium-editor-toolbar-anchor-preview { + background: #000; + border-radius: 50px; + padding: 5px 12px; } + +.medium-editor-anchor-preview a { + color: #ccc; + text-decoration: none; } + +.medium-editor-toolbar-actions li, .medium-editor-toolbar-actions button { + border-radius: 50px; } diff --git a/css/medium.scss b/css/medium.scss deleted file mode 100644 index 3eb526b..0000000 --- a/css/medium.scss +++ /dev/null @@ -1,134 +0,0 @@ -// theme settings -$medium-editor-bgcolor: #000; -$medium-editor-button-size: 20px; -$medium-editor-button-active-text-color: #fff; -$medium-editor-hover-color: $medium-editor-bgcolor; -$medium-editor-link-color: #fff; -$medium-editor-border-radius: 8px; -$medium-editor-placeholder-color: #f8f5f3; - -// theme rules -.medium-toolbar-arrow-under:after { - border-color: $medium-editor-bgcolor transparent transparent transparent; - top: $medium-editor-button-size; -} - -.medium-toolbar-arrow-over:before { - border-color: transparent transparent $medium-editor-bgcolor transparent; -} - -.medium-editor-toolbar { - background-color: $medium-editor-bgcolor; - border: none; - border-radius: $medium-editor-border-radius; - - li { - button { - background-color: transparent; - border: none; - box-sizing: border-box; - color: $medium-editor-link-color; - height: $medium-editor-button-size; - min-width: $medium-editor-button-size; - padding: 5px 12px; - opacity: 0.6; - transition: background-color .2s ease-in, color .2s ease-in; - &:hover { - background-color: $medium-editor-hover-color; - color: $medium-editor-button-active-text-color; - opacity: 1.0; - } - } - - .medium-editor-button-first { - border-bottom-left-radius: $medium-editor-border-radius; - border-top-left-radius: $medium-editor-border-radius; - //padding-left: 24px; - } - - .medium-editor-button-last { - border-bottom-right-radius: $medium-editor-border-radius; - border-right: none; - border-top-right-radius: $medium-editor-border-radius; - //padding-right: 24px - } - - .medium-editor-button-active { - background-color: $medium-editor-hover-color; - color: $medium-editor-button-active-text-color; - opacity: 1.0; - } - } -} - -.medium-editor-toolbar-form { - background: $medium-editor-bgcolor; - border-radius: $medium-editor-border-radius; - color: $medium-editor-link-color; - overflow: hidden; - - .medium-editor-toolbar-input { - background: $medium-editor-bgcolor; - box-sizing: border-box; - color: $medium-editor-link-color; - height: $medium-editor-button-size; - padding-left: 16px; - width: 220px; - - &::-webkit-input-placeholder { - color: $medium-editor-placeholder-color; - color: rgba($medium-editor-placeholder-color, .8); - } - &:-moz-placeholder { /* Firefox 18- */ - color: $medium-editor-placeholder-color; - color: rgba($medium-editor-placeholder-color, .8); - } - &::-moz-placeholder { /* Firefox 19+ */ - color: $medium-editor-placeholder-color; - color: rgba($medium-editor-placeholder-color, .8); - } - &:-ms-input-placeholder { - color: $medium-editor-placeholder-color; - color: rgba($medium-editor-placeholder-color, .8); - } - } - - a { - color: $medium-editor-link-color; - transform: translateY(2px); - } - - .medium-editor-toolbar-close { - margin-right: 16px; - } -} - -.medium-editor-toolbar-anchor-preview { - background: $medium-editor-bgcolor; - border-radius: $medium-editor-border-radius; - padding: 5px 12px; -} - -.medium-editor-anchor-preview { - a { - color: $medium-editor-link-color; - text-decoration: none; - margin: 5px; - font-size: small; - } -} - -.medium-editor-toolbar-actions { - li, button { - border-radius: $medium-editor-border-radius; - } -} - -.medium-editor-placeholder-relative:after, -.medium-editor-placeholder:after { - font-style: inherit; -} - -div[contenteditable="true"] { - font-size: inherit; -} diff --git a/css/qn-colorpick.scss b/css/qn-colorpick.css similarity index 100% rename from css/qn-colorpick.scss rename to css/qn-colorpick.css diff --git a/css/style.scss b/css/style.css similarity index 63% rename from css/style.scss rename to css/style.css index 23cc29b..23403e9 100644 --- a/css/style.scss +++ b/css/style.css @@ -1,13 +1,13 @@ .icon-quicknotes { - @include icon-color('app', 'quicknotes', $color-black); + background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIGZpbGw9IiNmZmYiPgogIDxwYXRoIGQ9Im0yOC4xOTggMjUuMjMxYy0wLjEwMzUyIDEuNTE2MS0xLjY1NTIgMi41MzkyLTMuMDg0MSAyLjMzOTctNy4yNjcyLTAuMDA4Ni0xNC41MzUtMC4wMjI2LTIxLjgwMi0wLjA1MzE4LTEuMzI1NC0wLjA5MDY2LTIuMjEzNS0xLjI0NDYtMi4yODY1LTIuNDk5Mi0xLjQ5ZS00IDAuOTU2NjUgMC4wMDEyIDEuOTE0OCAwIDIuODcxNC0wLjE5OTc2IDEuNDMxNyAwLjc2ODg4IDIuOTgwNCAyLjI4NjUgMy4wODQxIDcuMjgwNCAwLjAzMDYxIDE0LjU3NC0wLjAwODYgMjEuODU1IDAgMS40MzE3IDAuMTk5NzYgMi45ODA0LTAuNzY4ODggMy4wODQxLTIuMjg2NWwtMC4wNTMxOC0zLjQ1NjR6Ii8+CiAgPHBhdGggZD0ibTMuNTc4NCAzLjc0ODZjLTEuMjczMS0wLjAyMTk3NC0yLjM5NiAwLjgyOTI5LTIuNDk5MiAxLjg2MTEtMC4wMzA1NiA1LjkwOTMtMC4wNDQ0NSAxMS43OTctMC4wNTMxNyAxNy43MDctMC4xOTkzOCAxLjE2MiAwLjc3MTc2IDIuNDE1IDIuMjg2NSAyLjQ5OTIgNy4yNjY2IDAuMDI0ODQgMTQuNTM0IDAuMDQ2MDggMjEuODAyIDAuMDUzMTggMS40MjkgMC4xNjIxNCAyLjk4MDYtMC42MjkzMSAzLjA4NDEtMS44NjExIDAuMDI2NDUtNS4xMTMxIDAuMDUyMzItMTAuMjU0IDAuMDUzMTgtMTUuMzY3bC04LjU2MTEgOC41NjExYy0wLjYzODA5IDAuNjM4MDgtMS40MjM1IDAuODY3MTEtMi4yMzMzIDAuOTAzOTctMC4zOTI0OCAwLjMyMTItMC43ODEyIDAuNjMyNjItMS4yNzYyIDAuNzk3NjItMC42NzEyNiAwLjIyMzc2LTEuNzEwMiAwLjMxMDQyLTIuNTUyNC0wLjUzMTc1LTAuODQyMTYtMC44NDIxNi0wLjc1NTUtMS44ODExLTAuNTMxNzUtMi41NTI0IDAuMTY1LTAuNDk0OTkgMC40NzY0Mi0wLjg4MzcyIDAuNzk3NjItMS4yNzYyIDAuMDM2ODUtMC44MDk4NiAwLjI2NTg4LTEuNTk1MiAwLjkwMzk3LTIuMjMzM2w4LjU2MTEtOC41NjExYy02LjU3OTYtMC4wMTMzNTctMTMuMjAxIDAuMDA2MjYtMTkuNzgxIDB6Ii8+CiAgPHBhdGggZD0ibTE2LjA2MiAxMy41MzJjLTAuNDQwNDkgMC40NDA0OS0wLjU1NTI5IDEuMDU1OC0wLjQxMzYgMS42MTY4bC0wLjE4OCAwLjE4OGMtMC42NjY1OCAwLjY2NjU4LTAuOTM0ODkgMS40NzE1LTAuNjAxNiAxLjgwNDggMC4zMzMyOSAwLjMzMzI5IDEuMTM4MiAwLjA2NDk3IDEuODA0OC0wLjYwMTZsMC4xODgtMC4xODhjMC41NjA5NiAwLjE0MTY5IDEuMTc2MyAwLjAyNjg4IDEuNjE2OC0wLjQxMzZsMTIuMDMyLTEyLjAzMmMwLjY2NjU4LTAuNjY2NTggMC42NjY1OC0xLjczOTggMC0yLjQwNjQtMC42NjY1Ny0wLjY2NjU4LTEuNzM5OC0wLjY2NjU4LTIuNDA2NCAweiIvPgogPC9nPgo8L3N2Zz4K") } .icon-pin { - @include icon-color('pin', 'quicknotes', $color-black); + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41NzEgMi40djQuOWwxLjQyODYgMi4xdjEuNGgtNC4yODU3djMuNWwtMC43MTQyOSAwLjctMC43MTQyOS0wLjd2LTMuNWgtNC4yODU3di0xLjRsMS40Mjg2LTIuMXYtNC45YzAtMC43NyAwLjY0Mjg2LTEuNCAxLjQyODYtMS40aDQuMjg1N2MwLjc5Mjg2IDAgMS40Mjg2IDAuNjIzIDEuNDI4NiAxLjR6bS01LjcxNDMgMHY1LjQyNWwtMS4wNzE0IDEuNTc1aDYuNDI4NmwtMS4wNzE0LTEuNTc1di01LjQyNXoiIHN0cm9rZS13aWR0aD0iLjcwNzExIi8+PC9zdmc+Cg==") } .icon-pinned { - @include icon-color('pinned', 'quicknotes', $color-black); + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41NzIgMi40YTEuNDI4NiAxLjQgMCAwIDAtMS40Mjg2LTEuNGgtNC4yODU3Yy0wLjc4NTcxIDAtMS40Mjg2IDAuNjMtMS40Mjg2IDEuNHY0LjlsLTEuNDI4NiAyLjF2MS40aDQuMjg1N3YzLjVsMC43MTQyOSAwLjcgMC43MTQyOS0wLjd2LTMuNWg0LjI4NTd2LTEuNGwtMS40Mjg2LTIuMXoiIHN0cm9rZS13aWR0aD0iLjcwNzExIi8+PC9zdmc+Cg==") } #app-content-wrapper { @@ -211,7 +211,12 @@ div[contenteditable="true"] { #title-editable:active, #title-editable:hover, #title-editable:focus, #content-editable:active, #content-editable:hover, #content-editable:focus { - background-color: transparent !important; + background-color: transparent !important; + box-shadow: none; +} + +div.select2-drop .select2-search input:not(:disabled):not(.primary):focus-visible, select:not(:disabled):not(.primary):focus-visible, button:not(.button-vue):not(:disabled):not(.primary):focus-visible, .button:not(:disabled):not(.primary):focus-visible, input:not([type="range"]):not(:disabled):not(.primary):focus-visible, textarea:not(:disabled):not(.primary):focus-visible, div[contenteditable="true"]:not(:disabled):not(.primary):focus-visible, .pager li a:not(:disabled):not(.primary):focus-visible { +box-shadow: 0 0 0 2px var(--color-primary); } #content-editable {