From c40c13f87366946bb9213013c54435de7ad9d448 Mon Sep 17 00:00:00 2001 From: roberto Date: Thu, 17 Oct 2024 18:53:03 +0200 Subject: [PATCH] First steps to remove w3css and introduce simplecss --- assets/static/css/main.css | 1210 +++++++++++------ assets/static/js/main.js | 19 +- assets/static/js/serviceWorker.js | 2 +- assets/templates/base.tmpl | 2 +- assets/templates/items/form.tmpl | 53 +- assets/templates/items/read.tmpl | 2 +- assets/templates/items/view.tmpl | 2 +- assets/templates/partials/notebooks-list.tmpl | 2 +- assets/templates/partials/sidebar.tmpl | 40 +- assets/templates/types/list.tmpl | 16 +- internal/funcs/funcs.go | 11 +- 11 files changed, 856 insertions(+), 503 deletions(-) diff --git a/assets/static/css/main.css b/assets/static/css/main.css index 484dc91..eaba499 100644 --- a/assets/static/css/main.css +++ b/assets/static/css/main.css @@ -1,31 +1,748 @@ -/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */ +/* Global variables. */ +:root, +::backdrop { + /* Set sans-serif & mono fonts */ + --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, + "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica, + "Helvetica Neue", sans-serif; + --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace; + --standard-border-radius: 5px; -:root { + /* Default (light) theme */ + --bg: #fff; + --accent-bg: #f5f7ff; + --text: #212121; + --text-light: #585858; + --border: #898EA4; + --accent: #0d47a1; + --accent-hover: #1266e2; + --accent-text: var(--bg); + --code: #d81b60; + --preformatted: #444; + --marked: #ffdd33; + --disabled: #efefef; +/* BrainMinder */ --quickbox-topbar-height: 50px; --quickbox-footer-height: 64px; --quickbox-send-width: 66px; + --bg-primary-color: #2b5797; } -html { +/* Dark theme */ +/* +@media (prefers-color-scheme: dark) { + :root, + ::backdrop { + color-scheme: dark; + --bg: #212121; + --accent-bg: #2b2b2b; + --text: #dcdcdc; + --text-light: #ababab; + --accent: #ffb300; + --accent-hover: #ffe099; + --accent-text: var(--bg); + --code: #f06292; + --preformatted: #ccc; + --disabled: #111; + } + */ + + /* Add a bit of transparency so light media isn't so glaring in dark mode */ + /* + img, + video { + opacity: 0.8; + } +} +*/ + +/* Reset box-sizing */ +*, *::before, *::after { box-sizing: border-box; } -*, -*:before, -*:after { - box-sizing: inherit +/* Reset default appearance */ +textarea, +select, +input, +progress { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; } -/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ html { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100% + /* Set the font globally */ + font-family: var(--sans-font), sans-serif; + scroll-behavior: smooth; } +/* Make the body a nice central block */ body { + color: var(--text); + background-color: var(--bg); + font-size: 0.9rem; + line-height: 1.5; margin: 0; + /* BrainMinder */ + /* + display: grid; + grid-template-columns: 1fr min(45rem, 90%) 1fr; + */ min-height: 100vh; } +body > * { + grid-column: 2; +} + +/* Make the header bg full width, but the content inline with body */ +body > header { + background-color: var(--accent-bg); + border-bottom: 1px solid var(--border); + text-align: center; + padding: 0 0.5rem 2rem 0.5rem; + grid-column: 1 / -1; +} + +body > header > *:only-child { + margin-block-start: 2rem; +} + +body > header h1 { + max-width: 1200px; + margin: 1rem auto; +} + +body > header p { + max-width: 40rem; + margin: 1rem auto; +} + +/* Add a little padding to ensure spacing is correct between content and header > nav */ +main { + padding-top: 1.5rem; +} + +body > footer { + margin-top: 4rem; + padding: 2rem 1rem 1.5rem 1rem; + color: var(--text-light); + font-size: 0.9rem; + text-align: center; + border-top: 1px solid var(--border); +} + +/* Format headers */ +h1 { + font-size: 3rem; +} + +h2 { + font-size: 2.6rem; + margin-top: 3rem; +} + +h3 { + font-size: 2rem; + margin-top: 3rem; +} + +h4 { + font-size: 1.44rem; +} + +h5 { + font-size: 1.15rem; +} + +h6 { + font-size: 0.96rem; +} + +p { + margin: 0.1rem 0; +} + +/* Prevent long strings from overflowing container */ +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +/* Fix line height when title wraps */ +h1, +h2, +h3 { + line-height: 1.1; +} + +/* Reduce header size on mobile */ +@media only screen and (max-width: 720px) { + h1 { + font-size: 2.5rem; + } + + h2 { + font-size: 2.1rem; + } + + h3 { + font-size: 1.75rem; + } + + h4 { + font-size: 1.25rem; + } +} + +/* Format links & buttons */ +/* +BrainMinder +a, +a:visited { + color: var(--accent); +} +*/ + +a:hover { + text-decoration: none; +} + +button, +.button, +a.button, /* extra specificity to override a */ +input[type="submit"], +input[type="reset"], +input[type="button"], +label[type="button"] { + border: 1px solid var(--accent); + background-color: var(--accent); + color: var(--accent-text); + padding: 0.5rem 0.9rem; + text-decoration: none; + line-height: normal; +} + +.button[aria-disabled="true"], +input:disabled, +textarea:disabled, +select:disabled, +button[disabled] { + cursor: not-allowed; + background-color: var(--disabled); + border-color: var(--disabled); + color: var(--text-light); +} + +input[type="range"] { + padding: 0; +} + +/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */ +abbr[title] { + cursor: help; + text-decoration-line: underline; + text-decoration-style: dotted; +} + +button:enabled:hover, +.button:not([aria-disabled="true"]):hover, +input[type="submit"]:enabled:hover, +input[type="reset"]:enabled:hover, +input[type="button"]:enabled:hover, +label[type="button"]:hover { + background-color: var(--accent-hover); + border-color: var(--accent-hover); + cursor: pointer; +} + +.button:focus-visible, +button:focus-visible:where(:enabled), +input:enabled:focus-visible:where( + [type="submit"], + [type="reset"], + [type="button"] +) { + outline: 2px solid var(--accent); + outline-offset: 1px; +} + +/* Format navigation */ +header > nav { + font-size: 1rem; + line-height: 2; + padding: 1rem 0 0 0; +} + +/* Use flexbox to allow items to wrap, as needed */ +header > nav ul, +header > nav ol { + align-content: space-around; + align-items: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + list-style-type: none; + margin: 0; + padding: 0; +} + +/* List items are inline elements, make them behave more like blocks */ +header > nav ul li, +header > nav ol li { + display: inline-block; +} + +header > nav a, +header > nav a:visited { + margin: 0 0.5rem 1rem 0.5rem; + border: 1px solid var(--border); + border-radius: var(--standard-border-radius); + color: var(--text); + display: inline-block; + padding: 0.1rem 1rem; + text-decoration: none; +} + +header > nav a:hover, +header > nav a.current, +header > nav a[aria-current="page"], +header > nav a[aria-current="true"] { + border-color: var(--accent); + color: var(--accent); + cursor: pointer; +} + +/* Reduce nav side on mobile */ +@media only screen and (max-width: 720px) { + header > nav a { + border: none; + padding: 0; + text-decoration: underline; + line-height: 1; + } +} + +/* Consolidate box styling */ +aside, details, pre, progress { + background-color: var(--accent-bg); + border: 1px solid var(--border); + border-radius: var(--standard-border-radius); + margin-bottom: 1rem; +} + +aside { + font-size: 1rem; + width: 30%; + padding: 0 15px; + margin-inline-start: 15px; + float: right; +} +*[dir="rtl"] aside { + float: left; +} + +/* Make aside full-width on mobile */ +@media only screen and (max-width: 720px) { + aside { + width: 100%; + float: none; + margin-inline-start: 0; + } +} + +article, fieldset, dialog { + border: 1px solid var(--border); + padding: 1rem; + border-radius: var(--standard-border-radius); + margin-bottom: 1rem; +} + +article h2:first-child, +section h2:first-child, +article h3:first-child, +section h3:first-child { + margin-top: 1rem; +} + +section { + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + padding: 2rem 1rem; + margin: 3rem 0; +} + +/* Don't double separators when chaining sections */ +section + section, +section:first-child { + border-top: 0; + padding-top: 0; +} + +section + section { + margin-top: 0; +} + +section:last-child { + border-bottom: 0; + padding-bottom: 0; +} + +details { + padding: 0.7rem 1rem; +} + +summary { + cursor: pointer; + font-weight: bold; + padding: 0.7rem 1rem; + margin: -0.7rem -1rem; + word-break: break-all; +} + +details[open] > summary + * { + margin-top: 0; +} + +details[open] > summary { + margin-bottom: 0.5rem; +} + +details[open] > :last-child { + margin-bottom: 0; +} + +/* Format tables */ +table { + border-collapse: collapse; + margin: 1.5rem 0; +} + +figure > table { + width: max-content; + margin: 0; +} + +td, +th { + border: 1px solid var(--border); + text-align: start; + padding: 0.5rem; +} + +th { + background-color: var(--accent-bg); + font-weight: bold; +} + +tr:nth-child(even) { + /* Set every other cell slightly darker. Improves readability. */ + background-color: var(--accent-bg); +} + +table caption { + font-weight: bold; + margin-bottom: 0.5rem; +} + +/* Format forms */ +textarea, +select, +input, +button, +.button { + font-size: inherit; + font-family: inherit; + padding: 0.5rem; + margin-bottom: 0.5rem; + border-radius: var(--standard-border-radius); + box-shadow: none; + max-width: 100%; + display: inline-block; +} +textarea, +select, +input { + color: var(--text); + background-color: var(--bg); + border: 1px solid var(--border); +} +label { + display: block; +} +textarea:not([cols]) { + width: 100%; +} + +/* Add arrow to drop-down */ +select:not([multiple]) { + background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%), + linear-gradient(135deg, var(--text) 51%, transparent 49%); + background-position: calc(100% - 15px), calc(100% - 10px); + background-size: 5px 5px, 5px 5px; + background-repeat: no-repeat; + padding-inline-end: 25px; +} +*[dir="rtl"] select:not([multiple]) { + background-position: 10px, 15px; +} + +/* checkbox and radio button style */ +input[type="checkbox"], +input[type="radio"] { + vertical-align: middle; + position: relative; + width: min-content; +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; +} + +input[type="radio"] { + border-radius: 100%; +} + +input[type="checkbox"]:checked, +input[type="radio"]:checked { + background-color: var(--accent); +} + +input[type="checkbox"]:checked::after { + /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */ + content: " "; + width: 0.18em; + height: 0.32em; + border-radius: 0; + position: absolute; + top: 0.05em; + left: 0.17em; + background-color: transparent; + border-right: solid var(--bg) 0.08em; + border-bottom: solid var(--bg) 0.08em; + font-size: 1.8em; + transform: rotate(45deg); +} +input[type="radio"]:checked::after { + /* creates a colored circle for the checked radio button */ + content: " "; + width: 0.25em; + height: 0.25em; + border-radius: 100%; + position: absolute; + top: 0.125em; + background-color: var(--bg); + left: 0.125em; + font-size: 32px; +} + +/* Makes input fields wider on smaller screens */ +@media only screen and (max-width: 720px) { + textarea, + select, + input { + width: 100%; + } +} + +/* Set a height for color input */ +input[type="color"] { + height: 2.5rem; + padding: 0.2rem; +} + +/* do not show border around file selector button */ +input[type="file"] { + border: 0; +} + +/* Misc body elements */ +hr { + border: none; + height: 1px; + background: var(--border); + margin: 1rem auto; +} + +mark { + padding: 2px 5px; + border-radius: var(--standard-border-radius); + background-color: var(--marked); + color: black; +} + +mark a { + color: #0d47a1; +} + +img, +video { + max-width: 100%; + height: auto; + border-radius: var(--standard-border-radius); +} + +figure { + margin: 0; + display: block; + overflow-x: auto; +} + +figure > img, +figure > picture > img { + display: block; + margin-inline: auto; +} + +figcaption { + text-align: center; + font-size: 0.9rem; + color: var(--text-light); + margin-block: 1rem; +} + +blockquote { + margin-inline-start: 2rem; + margin-inline-end: 0; + margin-block: 2rem; + padding: 0.4rem 0.8rem; + border-inline-start: 0.35rem solid var(--accent); + color: var(--text-light); + font-style: italic; +} + +cite { + font-size: 0.9rem; + color: var(--text-light); + font-style: normal; +} + +dt { + color: var(--text-light); +} + +/* Use mono font for code elements */ +/* +BrainMinder +code, +pre, +pre span, +kbd, +samp { + font-family: var(--mono-font); + color: var(--code); +} +*/ + + +kbd { + color: var(--preformatted); + border: 1px solid var(--preformatted); + border-bottom: 3px solid var(--preformatted); + border-radius: var(--standard-border-radius); + padding: 0.1rem 0.4rem; +} + +pre { + padding: 1rem 1.4rem; + max-width: 100%; + overflow: auto; + color: var(--preformatted); +} + +/* Fix embedded code within pre */ +pre code { + color: var(--preformatted); + background: none; + margin: 0; + padding: 0; +} + +/* Progress bars */ +/* Declarations are repeated because you */ +/* cannot combine vendor-specific selectors */ +progress { + width: 100%; +} + +progress:indeterminate { + background-color: var(--accent-bg); +} + +progress::-webkit-progress-bar { + border-radius: var(--standard-border-radius); + background-color: var(--accent-bg); +} + +progress::-webkit-progress-value { + border-radius: var(--standard-border-radius); + background-color: var(--accent); +} + +progress::-moz-progress-bar { + border-radius: var(--standard-border-radius); + background-color: var(--accent); + transition-property: width; + transition-duration: 0.3s; +} + +progress:indeterminate::-moz-progress-bar { + background-color: var(--accent-bg); +} + +dialog { + max-width: 40rem; + margin: auto; +} + +dialog::backdrop { + background-color: var(--bg); + opacity: 0.8; +} + +@media only screen and (max-width: 720px) { + dialog { + max-width: 100%; + margin: auto 1em; + } +} + +/* Superscript & Subscript */ +/* Prevent scripts from affecting line-height. */ +sup, sub { + vertical-align: baseline; + position: relative; +} + +sup { + top: -0.4em; +} + +sub { + top: 0.3em; +} + +/* Classes for notices */ +.notice { + background: var(--accent-bg); + border: 2px solid var(--border); + border-radius: var(--standard-border-radius); + padding: 1.5rem; + margin: 2rem 0; +} + +/* BrainMinder */ +.editor-toolbar button { + color: var(--text); +} + +.editor-toolbar button:hover { + background:#fcfcfc; + border-color:#95a5a6 +} + +/* End Good */ article, aside, @@ -45,6 +762,10 @@ summary { display: list-item } +template { + display: none +} + audio, canvas, progress, @@ -61,11 +782,6 @@ audio:not([controls]) { height: 0 } -[hidden], -template { - display: none -} - a { background-color: transparent } @@ -77,8 +793,7 @@ a:hover { abbr[title] { border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted + text-decoration: underline dotted; } b, @@ -86,15 +801,6 @@ strong { font-weight: bolder } -dfn { - font-style: italic -} - -mark { - background: #ff0; - color: #000 -} - small { font-size: 80% } @@ -137,29 +843,10 @@ hr { overflow: visible } -button, -input, -select, -textarea, -optgroup { - font: inherit; - margin: 0 -} - optgroup { font-weight: bold } -button, -input { - overflow: visible -} - -button, -select { - text-transform: none -} - button, [type=button], [type=reset], @@ -200,11 +887,6 @@ textarea { overflow: auto } -[type=checkbox], -[type=radio] { - padding: 0 -} - [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto @@ -224,18 +906,6 @@ textarea { font: inherit } -/* End extract */ -html, -body { - font-family: Verdana, sans-serif; - font-size: 15px; - line-height: 1.5 -} - -html { - overflow-x: hidden -} - h1 { font-size: 36px } @@ -253,36 +923,19 @@ h4 { } h5 { - font-size: 18px + font-size: 16px } h6 { font-size: 16px } -.w3-serif { - font-family: serif -} - -.w3-sans-serif { - font-family: sans-serif -} - -.w3-cursive { - font-family: cursive -} - -.w3-monospace { - font-family: monospace -} - h1, h2, h3, h4, h5, h6 { - font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; margin: 10px 0 } @@ -389,7 +1042,6 @@ a { .w3-button { -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none @@ -1036,7 +1688,7 @@ a { .w3-display-left { position: absolute; top: 50%; - left: 0%; + left: 0; transform: translate(0%, -50%); -ms-transform: translate(-0%, -50%) } @@ -1044,7 +1696,7 @@ a { .w3-display-right { position: absolute; top: 50%; - right: 0%; + right: 0; transform: translate(0%, -50%); -ms-transform: translate(0%, -50%) } @@ -1556,18 +2208,6 @@ a { background-color: #87CEEB !important } -.w3-brown, -.w3-hover-brown:hover { - color: #fff !important; - background-color: #795548 !important -} - -.w3-cyan, -.w3-hover-cyan:hover { - color: #000 !important; - background-color: #00bcd4 !important -} - .w3-blue-grey, .w3-hover-blue-grey:hover, .w3-blue-gray, @@ -1576,90 +2216,12 @@ a { background-color: #607d8b !important } -.w3-green, -.w3-hover-green:hover { - color: #fff !important; - background-color: #4CAF50 !important -} - -.w3-light-green, -.w3-hover-light-green:hover { - color: #000 !important; - background-color: #8bc34a !important -} - -.w3-indigo, -.w3-hover-indigo:hover { - color: #fff !important; - background-color: #3f51b5 !important -} - -.w3-khaki, -.w3-hover-khaki:hover { - color: #000 !important; - background-color: #f0e68c !important -} - -.w3-lime, -.w3-hover-lime:hover { - color: #000 !important; - background-color: #cddc39 !important -} - -.w3-orange, -.w3-hover-orange:hover { - color: #000 !important; - background-color: #ff9800 !important -} - -.w3-deep-orange, -.w3-hover-deep-orange:hover { - color: #fff !important; - background-color: #ff5722 !important -} - -.w3-pink, -.w3-hover-pink:hover { - color: #fff !important; - background-color: #e91e63 !important -} - -.w3-purple, -.w3-hover-purple:hover { - color: #fff !important; - background-color: #9c27b0 !important -} - -.w3-deep-purple, -.w3-hover-deep-purple:hover { - color: #fff !important; - background-color: #673ab7 !important -} - -.w3-red, -.w3-hover-red:hover { - color: #fff !important; - background-color: #f44336 !important -} - .w3-sand, .w3-hover-sand:hover { color: #000 !important; background-color: #fdf5e6 !important } -.w3-teal, -.w3-hover-teal:hover { - color: #fff !important; - background-color: #009688 !important -} - -.w3-yellow, -.w3-hover-yellow:hover { - color: #000 !important; - background-color: #ffeb3b !important -} - .w3-white, .w3-hover-white:hover { color: #000 !important; @@ -1696,60 +2258,11 @@ a { background-color: #616161 !important } -.w3-pale-red, -.w3-hover-pale-red:hover { - color: #000 !important; - background-color: #ffdddd !important -} - -.w3-pale-green, -.w3-hover-pale-green:hover { - color: #000 !important; - background-color: #ddffdd !important -} - -.w3-pale-yellow, -.w3-hover-pale-yellow:hover { - color: #000 !important; - background-color: #ffffcc !important -} - -.w3-pale-blue, -.w3-hover-pale-blue:hover { - color: #000 !important; - background-color: #ddffff !important -} - -.w3-text-amber, -.w3-hover-text-amber:hover { - color: #ffc107 !important -} - -.w3-text-aqua, -.w3-hover-text-aqua:hover { - color: #00ffff !important -} - .w3-text-blue, .w3-hover-text-blue:hover { color: #2196F3 !important } -.w3-text-light-blue, -.w3-hover-text-light-blue:hover { - color: #87CEEB !important -} - -.w3-text-brown, -.w3-hover-text-brown:hover { - color: #795548 !important -} - -.w3-text-cyan, -.w3-hover-text-cyan:hover { - color: #00bcd4 !important -} - .w3-text-blue-grey, .w3-hover-text-blue-grey:hover, .w3-text-blue-gray, @@ -1757,76 +2270,6 @@ a { color: #607d8b !important } -.w3-text-green, -.w3-hover-text-green:hover { - color: #4CAF50 !important -} - -.w3-text-light-green, -.w3-hover-text-light-green:hover { - color: #8bc34a !important -} - -.w3-text-indigo, -.w3-hover-text-indigo:hover { - color: #3f51b5 !important -} - -.w3-text-khaki, -.w3-hover-text-khaki:hover { - color: #b4aa50 !important -} - -.w3-text-lime, -.w3-hover-text-lime:hover { - color: #cddc39 !important -} - -.w3-text-orange, -.w3-hover-text-orange:hover { - color: #ff9800 !important -} - -.w3-text-deep-orange, -.w3-hover-text-deep-orange:hover { - color: #ff5722 !important -} - -.w3-text-pink, -.w3-hover-text-pink:hover { - color: #e91e63 !important -} - -.w3-text-purple, -.w3-hover-text-purple:hover { - color: #9c27b0 !important -} - -.w3-text-deep-purple, -.w3-hover-text-deep-purple:hover { - color: #673ab7 !important -} - -.w3-text-red, -.w3-hover-text-red:hover { - color: #f44336 !important -} - -.w3-text-sand, -.w3-hover-text-sand:hover { - color: #fdf5e6 !important -} - -.w3-text-teal, -.w3-hover-text-teal:hover { - color: #009688 !important -} - -.w3-text-yellow, -.w3-hover-text-yellow:hover { - color: #d2be0e !important -} - .w3-text-white, .w3-hover-text-white:hover { color: #fff !important @@ -1858,36 +2301,11 @@ a { color: #3a3a3a !important } -.w3-border-amber, -.w3-hover-border-amber:hover { - border-color: #ffc107 !important -} - -.w3-border-aqua, -.w3-hover-border-aqua:hover { - border-color: #00ffff !important -} - .w3-border-blue, .w3-hover-border-blue:hover { border-color: #2196F3 !important } -.w3-border-light-blue, -.w3-hover-border-light-blue:hover { - border-color: #87CEEB !important -} - -.w3-border-brown, -.w3-hover-border-brown:hover { - border-color: #795548 !important -} - -.w3-border-cyan, -.w3-hover-border-cyan:hover { - border-color: #00bcd4 !important -} - .w3-border-blue-grey, .w3-hover-border-blue-grey:hover, .w3-border-blue-gray, @@ -1895,76 +2313,6 @@ a { border-color: #607d8b !important } -.w3-border-green, -.w3-hover-border-green:hover { - border-color: #4CAF50 !important -} - -.w3-border-light-green, -.w3-hover-border-light-green:hover { - border-color: #8bc34a !important -} - -.w3-border-indigo, -.w3-hover-border-indigo:hover { - border-color: #3f51b5 !important -} - -.w3-border-khaki, -.w3-hover-border-khaki:hover { - border-color: #f0e68c !important -} - -.w3-border-lime, -.w3-hover-border-lime:hover { - border-color: #cddc39 !important -} - -.w3-border-orange, -.w3-hover-border-orange:hover { - border-color: #ff9800 !important -} - -.w3-border-deep-orange, -.w3-hover-border-deep-orange:hover { - border-color: #ff5722 !important -} - -.w3-border-pink, -.w3-hover-border-pink:hover { - border-color: #e91e63 !important -} - -.w3-border-purple, -.w3-hover-border-purple:hover { - border-color: #9c27b0 !important -} - -.w3-border-deep-purple, -.w3-hover-border-deep-purple:hover { - border-color: #673ab7 !important -} - -.w3-border-red, -.w3-hover-border-red:hover { - border-color: #f44336 !important -} - -.w3-border-sand, -.w3-hover-border-sand:hover { - border-color: #fdf5e6 !important -} - -.w3-border-teal, -.w3-hover-border-teal:hover { - border-color: #009688 !important -} - -.w3-border-yellow, -.w3-hover-border-yellow:hover { - border-color: #ffeb3b !important -} - .w3-border-white, .w3-hover-border-white:hover { border-color: #fff !important @@ -2033,7 +2381,7 @@ a { .w3-metro-dark-blue { color: #fff !important; - background-color: #2b5797 !important + background-color: var(--bg-primary-color) !important } .w3-text-metro-dark-blue { @@ -2051,7 +2399,7 @@ a { blockquote { background: #f9f9f9; - margin: 0.6em 0px; + margin: 0.6em 0; padding: 0.1em 10px 0.1em; quotes: "\201C" "\201D" "\2018" "\2019"; } @@ -2114,9 +2462,7 @@ a { } #page-content { - padding-top: 48px; - padding-left: 4px; - padding-right: 4px; + padding: 48px 4px 10px; } .page-container { @@ -2154,7 +2500,7 @@ h5.title { } .w3-button.w3-edit:hover { - background-color: #2b5797 !important; + background-color: var(--bg-primary-color); } .w3-button.w3-delete { @@ -2166,7 +2512,6 @@ h5.title { } .fields { - margin-top: 20px; margin-bottom: 20px; } @@ -2192,7 +2537,7 @@ h5.title { .footerNavbar { overflow: hidden; width: 100%; - background-color: #2b5797; + background-color: var(--bg-primary-color); } .footerNavbar .w3-bar-item { @@ -2426,11 +2771,17 @@ table.stickyheader.searchopened thead { } .ss-main .ss-values .ss-value .ss-value-text { - font-size: 15px; + font-size: 14px; } .ss-main .ss-values .ss-value { - background-color: #2b5797; + background-color: var(--bg-primary-color); +} + +.ss-content .ss-list .ss-option:hover, +.ss-content .ss-list .ss-option.ss-highlighted, +.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected { + background-color:var(--bg-primary-color); } /* Small */ @@ -2541,7 +2892,6 @@ table.stickyheader.searchopened thead { } @media (max-width:992px) { - /* The switch - the box around the slider */ .switch { position: relative; @@ -2609,7 +2959,7 @@ table.stickyheader.searchopened thead { /* Medium */ @media (max-width:992px) and (min-width:601px) { #page-title-container h5 { - padding-left: 0px; + padding-left: 0; } } @@ -2645,7 +2995,7 @@ table.stickyheader.searchopened thead { /* Large */ @media (min-width:993px) { - .w3-row > .w3-half:first { + .w3-row > .w3-half:first-child { padding-right: 4px; } @@ -2661,3 +3011,63 @@ table.stickyheader.searchopened thead { padding-right: 300px; } } + +[hidden], +.hidden { + display: none !important; +} +/* Phone landscape and bigger */ +@media (min-width: 640px) { + .hidden\@s { + display: none !important; + } +} +/* Tablet landscape and bigger */ +@media (min-width: 960px) { + .hidden\@m { + display: none !important; + } +} +/* Desktop and bigger */ +@media (min-width: 1200px) { + .hidden\@l { + display: none !important; + } +} +/* Large screen and bigger */ +@media (min-width: 1600px) { + .hidden\@xl { + display: none !important; + } +} +/* + * Visible + */ +/* Phone portrait and smaller */ +@media (max-width: 639px) { + .visible\@s { + display: none !important; + } +} +/* Phone landscape and smaller */ +@media (max-width: 959px) { + .visible\@m { + display: none !important; + } +} +/* Tablet landscape and smaller */ +@media (max-width: 1199px) { + .visible\@l { + display: none !important; + } +} +/* Desktop and smaller */ +@media (max-width: 1599px) { + .visible\@xl { + display: none !important; + } +} + +.invisible { + visibility: hidden !important; +} \ No newline at end of file diff --git a/assets/static/js/main.js b/assets/static/js/main.js index 07730b4..0f5babd 100644 --- a/assets/static/js/main.js +++ b/assets/static/js/main.js @@ -1,4 +1,4 @@ -if (typeof(registerServiceWorker) == undefined) { +if (typeof(registerServiceWorker) === undefined) { const registerServiceWorker = async () => { if ("serviceWorker" in navigator) { try { @@ -31,7 +31,7 @@ if (typeof(_bm_yDown) == undefined) { function bm_toggle_dropdown(list_id) { var list = document.getElementById(list_id); - if (list.className.indexOf("w3-show") == -1) { + if (list.className.indexOf("w3-show") === -1) { list.className += " w3-show"; } else { list.className = list.className.replace(" w3-show", ""); @@ -143,12 +143,9 @@ function bm_toggle_quickbox() { function bm_show_confirm(sender, title, message) { document.querySelector("#modal-confirm-dialog h5").innerHTML = title; document.querySelector("#modal-confirm-dialog p").innerHTML = message; - - btn_ok = document.getElementById("modal-confirm-ok"); - btn_ok.outerHTML = btn_ok.outerHTML; - + let btn_ok = document.getElementById("modal-confirm-ok"); document.getElementById("modal-confirm-ok").addEventListener('click', (event) => { - htmx.trigger(sender, 'confirmed'); + htmx.trigger(sender, 'confirmed', null); document.getElementById("modal-confirm-dialog").style.display = "none"; }); @@ -156,11 +153,11 @@ function bm_show_confirm(sender, title, message) { } function bm_item_field_add(type_field_id, widget) { - template = Handlebars.templates['items/field-' + widget] - fields_list = document.getElementById('fields-' + type_field_id); - counter = parseInt(document.getElementById('fields-' + type_field_id + '-counter').innerHTML); + let template = Handlebars.templates['items/field-' + widget] + let fields_list = document.getElementById('fields-' + type_field_id); + let counter = parseInt(document.getElementById('fields-' + type_field_id + '-counter').innerHTML); fields_list.insertAdjacentHTML('beforeend', template({type_field_id:type_field_id,counter:counter, value:""})); - document.getElementById('fields-' + type_field_id + '-counter').innerHTML = counter + 1; + document.getElementById('fields-' + type_field_id + '-counter').innerHTML = (counter + 1).toString(); } document.addEventListener("DOMContentLoaded", function(event){ diff --git a/assets/static/js/serviceWorker.js b/assets/static/js/serviceWorker.js index 685d33d..b66580f 100644 --- a/assets/static/js/serviceWorker.js +++ b/assets/static/js/serviceWorker.js @@ -1,4 +1,4 @@ -const cacheVersion = "0.271" +const cacheVersion = "0.281" const cacheName = "speedtech-brainminder" const cacheFiles = [ '/static/bootstrap-icons/font/bootstrap-icons.min.css', diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl index f0767a6..b22e4de 100644 --- a/assets/templates/base.tmpl +++ b/assets/templates/base.tmpl @@ -72,7 +72,7 @@

- +

@@ -150,7 +118,6 @@
+
{{if gt (len .item.Categories) 0 }} diff --git a/assets/templates/items/view.tmpl b/assets/templates/items/view.tmpl index 904d85b..b6af64d 100644 --- a/assets/templates/items/view.tmpl +++ b/assets/templates/items/view.tmpl @@ -1,7 +1,7 @@ {{define "page:content"}}