mirror of
https://github.com/JanGross/quicknotes.git
synced 2025-11-30 23:37:16 +01:00
Some css fixes for NC25...
This commit is contained in:
Matias De lellis
373
css/style.css
Normal file
373
css/style.css
Normal file
@@ -0,0 +1,373 @@
|
||||
.icon-quicknotes {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIGZpbGw9IiNmZmYiPgogIDxwYXRoIGQ9Im0yOC4xOTggMjUuMjMxYy0wLjEwMzUyIDEuNTE2MS0xLjY1NTIgMi41MzkyLTMuMDg0MSAyLjMzOTctNy4yNjcyLTAuMDA4Ni0xNC41MzUtMC4wMjI2LTIxLjgwMi0wLjA1MzE4LTEuMzI1NC0wLjA5MDY2LTIuMjEzNS0xLjI0NDYtMi4yODY1LTIuNDk5Mi0xLjQ5ZS00IDAuOTU2NjUgMC4wMDEyIDEuOTE0OCAwIDIuODcxNC0wLjE5OTc2IDEuNDMxNyAwLjc2ODg4IDIuOTgwNCAyLjI4NjUgMy4wODQxIDcuMjgwNCAwLjAzMDYxIDE0LjU3NC0wLjAwODYgMjEuODU1IDAgMS40MzE3IDAuMTk5NzYgMi45ODA0LTAuNzY4ODggMy4wODQxLTIuMjg2NWwtMC4wNTMxOC0zLjQ1NjR6Ii8+CiAgPHBhdGggZD0ibTMuNTc4NCAzLjc0ODZjLTEuMjczMS0wLjAyMTk3NC0yLjM5NiAwLjgyOTI5LTIuNDk5MiAxLjg2MTEtMC4wMzA1NiA1LjkwOTMtMC4wNDQ0NSAxMS43OTctMC4wNTMxNyAxNy43MDctMC4xOTkzOCAxLjE2MiAwLjc3MTc2IDIuNDE1IDIuMjg2NSAyLjQ5OTIgNy4yNjY2IDAuMDI0ODQgMTQuNTM0IDAuMDQ2MDggMjEuODAyIDAuMDUzMTggMS40MjkgMC4xNjIxNCAyLjk4MDYtMC42MjkzMSAzLjA4NDEtMS44NjExIDAuMDI2NDUtNS4xMTMxIDAuMDUyMzItMTAuMjU0IDAuMDUzMTgtMTUuMzY3bC04LjU2MTEgOC41NjExYy0wLjYzODA5IDAuNjM4MDgtMS40MjM1IDAuODY3MTEtMi4yMzMzIDAuOTAzOTctMC4zOTI0OCAwLjMyMTItMC43ODEyIDAuNjMyNjItMS4yNzYyIDAuNzk3NjItMC42NzEyNiAwLjIyMzc2LTEuNzEwMiAwLjMxMDQyLTIuNTUyNC0wLjUzMTc1LTAuODQyMTYtMC44NDIxNi0wLjc1NTUtMS44ODExLTAuNTMxNzUtMi41NTI0IDAuMTY1LTAuNDk0OTkgMC40NzY0Mi0wLjg4MzcyIDAuNzk3NjItMS4yNzYyIDAuMDM2ODUtMC44MDk4NiAwLjI2NTg4LTEuNTk1MiAwLjkwMzk3LTIuMjMzM2w4LjU2MTEtOC41NjExYy02LjU3OTYtMC4wMTMzNTctMTMuMjAxIDAuMDA2MjYtMTkuNzgxIDB6Ii8+CiAgPHBhdGggZD0ibTE2LjA2MiAxMy41MzJjLTAuNDQwNDkgMC40NDA0OS0wLjU1NTI5IDEuMDU1OC0wLjQxMzYgMS42MTY4bC0wLjE4OCAwLjE4OGMtMC42NjY1OCAwLjY2NjU4LTAuOTM0ODkgMS40NzE1LTAuNjAxNiAxLjgwNDggMC4zMzMyOSAwLjMzMzI5IDEuMTM4MiAwLjA2NDk3IDEuODA0OC0wLjYwMTZsMC4xODgtMC4xODhjMC41NjA5NiAwLjE0MTY5IDEuMTc2MyAwLjAyNjg4IDEuNjE2OC0wLjQxMzZsMTIuMDMyLTEyLjAzMmMwLjY2NjU4LTAuNjY2NTggMC42NjY1OC0xLjczOTggMC0yLjQwNjQtMC42NjY1Ny0wLjY2NjU4LTEuNzM5OC0wLjY2NjU4LTIuNDA2NCAweiIvPgogPC9nPgo8L3N2Zz4K")
|
||||
}
|
||||
|
||||
.icon-pin {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41NzEgMi40djQuOWwxLjQyODYgMi4xdjEuNGgtNC4yODU3djMuNWwtMC43MTQyOSAwLjctMC43MTQyOS0wLjd2LTMuNWgtNC4yODU3di0xLjRsMS40Mjg2LTIuMXYtNC45YzAtMC43NyAwLjY0Mjg2LTEuNCAxLjQyODYtMS40aDQuMjg1N2MwLjc5Mjg2IDAgMS40Mjg2IDAuNjIzIDEuNDI4NiAxLjR6bS01LjcxNDMgMHY1LjQyNWwtMS4wNzE0IDEuNTc1aDYuNDI4NmwtMS4wNzE0LTEuNTc1di01LjQyNXoiIHN0cm9rZS13aWR0aD0iLjcwNzExIi8+PC9zdmc+Cg==")
|
||||
}
|
||||
|
||||
.icon-pinned {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld2JveD0iMCAwIDE2IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41NzIgMi40YTEuNDI4NiAxLjQgMCAwIDAtMS40Mjg2LTEuNGgtNC4yODU3Yy0wLjc4NTcxIDAtMS40Mjg2IDAuNjMtMS40Mjg2IDEuNHY0LjlsLTEuNDI4NiAyLjF2MS40aDQuMjg1N3YzLjVsMC43MTQyOSAwLjcgMC43MTQyOS0wLjd2LTMuNWg0LjI4NTd2LTEuNGwtMS40Mjg2LTIuMXoiIHN0cm9rZS13aWR0aD0iLjcwNzExIi8+PC9zdmc+Cg==")
|
||||
}
|
||||
|
||||
#app-content-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#new-note {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding-left: 34px;
|
||||
background-position: 10px center;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#new-note-fixed {
|
||||
z-index: 111; /* navigation menu is 110 ;-) */
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.quicknote {
|
||||
color: #202124;
|
||||
min-height: 150px;
|
||||
width: 250px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.quicknote:hover {
|
||||
box-shadow: 0px 0px 4px #808080;
|
||||
}
|
||||
|
||||
#title-editable:empty:before {
|
||||
content: attr(data-placeholder);
|
||||
}
|
||||
|
||||
.quicknote ul {
|
||||
list-style: initial;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.quicknote ol {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.quicknote blockquote {
|
||||
margin: 0px 0px 0px 10px;
|
||||
border-left: 1px dotted;
|
||||
padding-left: 1ex;
|
||||
}
|
||||
|
||||
.quicknote a {
|
||||
color: #15c;
|
||||
}
|
||||
|
||||
.note-active {
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.save-button #unshare-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#div-content .buttons-toolbar {
|
||||
float: right;
|
||||
display: flex;
|
||||
/*padding-right: 8px;*/
|
||||
/*padding-bottom: 5px;*/
|
||||
}
|
||||
|
||||
#div-content textarea {
|
||||
border: 0;
|
||||
overflow-y: auto;
|
||||
/*resize: none;*/
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/* Grid Note */
|
||||
|
||||
#div-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#div-content .note-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.note-content {
|
||||
margin: 4px;
|
||||
overflow-wrap: break-word;
|
||||
min-height: 75px;
|
||||
}
|
||||
|
||||
.icon-header-note {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
margin-left: 2px;
|
||||
padding: 12px;
|
||||
background-color: rgba(0,0,0,0.08);
|
||||
background-size: 22px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
border-radius: 50%;
|
||||
-moz-transition: opacity 0.218s ease-in;
|
||||
transition: opacity 0.218s ease-in;
|
||||
}
|
||||
|
||||
.icon-header-note:hover {
|
||||
background-color: rgba(0,0,0,0.12);
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
.hide-header-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fixed-header-icon,
|
||||
.show-header-icon {
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
not supported by any browser */
|
||||
}
|
||||
|
||||
.colors-toolbar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.colorPickButton,
|
||||
.circle-toolbar {
|
||||
display:inline-block;
|
||||
width:20px;
|
||||
height:20px;
|
||||
min-width: 20px;
|
||||
min-height: 16px;
|
||||
padding: unset;
|
||||
border-radius:10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.circle-toolbar:hover {
|
||||
border-color: var(--color-primary-element);
|
||||
}
|
||||
|
||||
.any-color {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Isotope Grid */
|
||||
|
||||
.notes-grid {
|
||||
margin: 0 auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.note-grid-item {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* Modal Note */
|
||||
|
||||
/* The Modal (background) */
|
||||
|
||||
.modal-note-background {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1051; /* Sit on top */
|
||||
padding-top: 100px; /* Location of the box */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
background-color: rgb(0,0,0); /* Fallback color */
|
||||
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
.hide-modal-note {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show-modal-note {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div[contenteditable="true"] {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
#title-editable:active, #title-editable:hover, #title-editable:focus,
|
||||
#content-editable:active, #content-editable:hover, #content-editable:focus {
|
||||
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 {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
min-height: 50px;
|
||||
word-wrap: break-word;
|
||||
background: none;
|
||||
color: unset;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#title-editable {
|
||||
width: 100%;
|
||||
background: none;
|
||||
color: unset;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.note-editable-options,
|
||||
.note-noneditable-options {
|
||||
padding: 8px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
#note-share-options {
|
||||
display: none;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.selected-share:hover, .unselected-share:hover, .selected-share span:hover, .unselected-share span:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected-share, .unselected-share {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.note-share-select {
|
||||
width: 100%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.slim-share,
|
||||
.slim-tag {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
padding: 0px 6px 0 24px;
|
||||
background-color: rgba(0,0,0,0.08);
|
||||
background-position: 8px center;
|
||||
opacity: 0.87;
|
||||
border-radius: 10px;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.slim-share:hover,
|
||||
.slim-tag:hover {
|
||||
background-color: rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.note-shares > .slim-share,
|
||||
.note-tags > .slim-tag {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* Restore defaults select2 rules */
|
||||
|
||||
.select2-container-multi
|
||||
.select2-choices
|
||||
.select2-search-choice {
|
||||
padding: 3px 5px 3px 18px !important;
|
||||
margin: 3px 0 3px 5px !important;
|
||||
}
|
||||
|
||||
.select2-search-choice-close {
|
||||
display: block !important;
|
||||
top: 6px !important;
|
||||
}
|
||||
|
||||
.select2-results .select2-selected {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#select2-drop {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
div.select2-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
margin: auto;
|
||||
width: 60%;
|
||||
height: auto;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.note-attachts {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.note-attach-grid {
|
||||
position: absolute;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note-attach {
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attach-preview {
|
||||
background-color: rgba(210, 210, 210, .5);
|
||||
}
|
||||
|
||||
.attach-remove {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
padding: 12px;
|
||||
background-color: rgba(210, 210, 210, .4);
|
||||
opacity: 0.54;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.attach-remove:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(210, 210, 210, .5);
|
||||
opacity: 0.87;
|
||||
}
|
||||
|
||||
.note-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.round-tool-button {
|
||||
width: 32px !important;
|
||||
height: 32px;
|
||||
padding: 0px !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
Reference in New Issue
Block a user