diff options
Diffstat (limited to 'templates/55/ad-hominem/css/_edit.css')
| -rw-r--r-- | templates/55/ad-hominem/css/_edit.css | 453 |
1 files changed, 453 insertions, 0 deletions
diff --git a/templates/55/ad-hominem/css/_edit.css b/templates/55/ad-hominem/css/_edit.css new file mode 100644 index 0000000..32889e4 --- /dev/null +++ b/templates/55/ad-hominem/css/_edit.css @@ -0,0 +1,453 @@ +/** + * This file provides styles for the edit view (?do=edit), preview + * and section edit buttons. + */ + +/* edit view +********************************************************************/ + +.mode_edit div.editBox { +} + +.mode_edit div.editBox button { + border: #666 solid 1px; + border-radius: 1px; + padding: 3pt 6pt; + margin: 0 2px; + cursor: pointer; +} + +.mode_edit div.editButtons button:hover { + text-decoration: underline; +} +.mode_edit div.editBox button:focus { + outline: @ini_focus_color solid 2px; + background-color: @ini_background; +} + +/*____________ toolbar ____________*/ + +.mode_edit .editBox > .toolbar, +.mode_preview .editBox > .toolbar { + display: block; + position: -webkit-sticky; + position: sticky; + top: 0; + background-color: @ini_background; + padding-bottom: 2px; + z-index: 9; +} + + +.mode_edit div.toolbar, +.mode_preview div.toolbar { + display: inline-block; +} +#draft__status { + font-size: small; + color: @ini_text_alt; + background-color: inherit; +} +[dir=rtl] #draft__status { + /* float: left; */ +} +#tool__bar { + float: left; +} +[dir=rtl] #tool__bar { + float: right; +} + +/* hide the hard-coded button images */ +#tool__bar button>img { + visibility: hidden; +} + +#tool__bar button { + background: #E9E9ED url('images/editor/default.svg') center no-repeat; + background-size: 20px; + padding: 3pt 6pt; + border: @ini_border solid 1px; +} +#tool__bar button[aria-haspopup=true]:after, +#tool__bar button:nth-child(10):after, +#tool__bar button:nth-child(15):after { + content: ''; + display: inline-block; + position: absolute; + width: 8px; + height: 8px; + margin-left: -2px; + margin-top: 14px; + background: transparent none center no-repeat; + background-size: 13px; +} + +#tool__bar button[aria-haspopup=true]:after { + background-image: url('images/editor/overlay-menu.svg'); +} +#tool__bar button:nth-child(10):after, +#tool__bar button:nth-child(15):after { + background-image: url('images/editor/overlay-popup.svg'); +} + +/* import the new icons */ +#tool__bar button[accesskey="b"] { background-image: url('images/editor/format-bold.svg'); margin-left: 1.5pt; } +#tool__bar button[accesskey="i"] { background-image: url('images/editor/format-italic.svg'); } +#tool__bar button[accesskey="u"] { background-image: url('images/editor/format-underline.svg'); } +#tool__bar button[accesskey="m"] { background-image: url('images/editor/format-monospace.svg'); } +#tool__bar button[accesskey="d"] { background-image: url('images/editor/format-strikethrough.svg'); } +#tool__bar button[accesskey="8"] { background-image: url('images/editor/format-header-equal.svg'); margin-left: 4pt; } +#tool__bar button[accesskey="9"] { background-image: url('images/editor/format-header-decrease.svg'); } +#tool__bar button[accesskey="0"] { background-image: url('images/editor/format-header-increase.svg'); } +#tool__bar button:nth-child(9) { background-image: url('images/editor/format-header-menu.svg'); } +#tool__bar button[accesskey="l"] { background-image: url('images/editor/insert-link.svg');margin-left:4pt; } +#tool__bar button:nth-child(11) { background-image: url('images/editor/insert-external-link.svg'); } +#tool__bar button[accesskey="-"] { background-image: url('images/editor/format-list-numbered.svg'); margin-left:4pt;} +#tool__bar button[accesskey="."] { background-image: url('images/editor/format-list-bulleted.svg'); } +#tool__bar button:nth-child(14) { background-image: url('images/editor/insert-hr.svg');margin-left:4pt;} +#tool__bar button:nth-child(15) { background-image: url('images/editor/insert-media.svg');margin-left:4pt; } +#tool__bar button:nth-child(16) { background-image: url('images/editor/insert-emoticon.svg');margin-left:4pt; } +#tool__bar button:nth-child(17) { background-image: url('images/editor/insert-symbol.svg'); } +#tool__bar button[accesskey="y"] { background-image: url('images/editor/insert-signature.svg');margin-left:4pt; } + +/* set icons for known plugins: */ +#tool__bar #tbbtn_adhoctagsInline { background-image: url('../../plugins/adhoctags/images/code-tags.svg');margin-left:4pt; } +#tool__bar #tbbtn_adhoctagsBlocks { background-image: url('../../plugins/adhoctags/images/code-brackets.svg'); } + +/* buttons inside of toolbar */ +.mode_edit div.toolbar button.toolbutton { + margin: 0; +} +/* picker popups (outside of .dokuwiki) */ +div.picker { + width: 300px; + border: 1px solid #CCC; + background-color: #EEE; + color: inherit; +} +/* picker for headlines */ +div.picker.pk_hl { + width: auto; +} + +/* buttons inside of picker */ +div.picker button.pickerbutton, +div.picker button.toolbutton { + padding: .1em .35em; + border-width: 0; +} + +/*____________ edit textarea ____________*/ + +.dokuwiki textarea.edit { + width: 100%; + padding: 1px 0 0 2px; + margin-bottom: .5em; + min-height: 52pt; + background-color: #EEE; + font-family: 'Source Code Pro',Menlo,Consolas,'Courier New',Courier,monospace; + font-size: 12pt; + line-height: 17pt; + caret-color: #0078D7; + resize: vertical; +} +.dokuwiki textarea.edit:focus { + outline: transparent none 0; +} + +.dokuwiki textarea::-webkit-scrollbar-track { + background: @ini_background_alt; +} +.dokuwiki textarea::-webkit-scrollbar-thumb { + background: @ini_blockquote; +} +.dokuwiki textarea::-webkit-scrollbar-thumb:hover { + background: @ini_separator; +} +.dokuwiki textarea::-webkit-resizer { + background-color: @ini_background_alt; + background: linear-gradient(135deg, @ini_background_alt 0%, @ini_background_alt 50%, @ini_blockquote 50%, @ini_blockquote 100%); +} + +.dokuwiki textarea { scrollbar-color: @ini_blockquote @ini_background_alt; } + +/*____________ below the textarea ____________*/ + +.dokuwiki div.editBar { + display: grid; + grid-template-columns: 320px minmax(500px, 1fr) auto; + align-items: start; + margin-bottom: .5em; +} + +/* size and wrap controls */ +#size__ctl { + grid-row: 1; + grid-column: 3; + min-width: 64px; +} +#size__ctl img { + cursor: pointer; +} + +/* edit buttons */ +.dokuwiki .editBar .editButtons { + grid-row: 1; + grid-column: 1; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +[dir=rtl] .dokuwiki .editBar .editButtons { + margin-right: 0; + margin-left: 1em; +} +.dokuwiki .editBar .editButtons button { + border: #CCC solid 1.5pt; + padding: .25em .5em; + margin: 0 2pt; +} +.dokuwiki .editBar .editButtons button::before { + content: ' '; + display: inline-block; + position: relative; + top: .1em; + width: 1em; + height: 1em; + background: none center bottom no-repeat; + background-size: 1em; + margin-right: 4px; +} + +.dokuwiki .editBar .editButtons button#edbtn__save { + background-color: #ccddff; +} +.dokuwiki .editBar .editButtons button#edbtn__save::before { + background-image: url('images/editor/edit-save.svg'); +} +.dokuwiki .editBar .editButtons button#edbtn__preview { + background-color: #ccffdd; +} +.dokuwiki .editBar .editButtons button#edbtn__preview::before { + background-image: url('images/editor/edit-preview.svg'); +} +.dokuwiki .editBar .editButtons button[name="do[cancel]"] { + background-color: #ffccdd; +} +.dokuwiki .editBar .editButtons button[name="do[cancel]"]::before { + background-image: url('images/editor/edit-cancel.svg'); +} + +/* summary input and minor changes checkbox */ +.dokuwiki .editBar .summary { + grid-row: 1; + grid-column: 2; + display: grid; + grid-template-columns: 1fr auto; + line-height: 1em; + padding-top: 2pt; + padding-right: 5pt; +} + +.dokuwiki .editBar .summary #edit__summary { + background-color: @ini_background_alt; + border-color: @ini_border; + color: @ini_text; + border-radius: 3pt; + margin-left: 0; + width: 100%; +} + +.dokuwiki .editBar .summary label { + white-space: nowrap; +} +.dokuwiki .editBar .summary label:last-child { + padding: 2pt 0 2pt 4pt; +} +.dokuwiki .editBar .summary > label:first-child { + display: grid; + grid-template-columns: auto 1fr; + column-gap: 10px; + padding: 2pt 5pt 0 0; +} +.dokuwiki .editBar .summary label span { + font-size: small; + margin: 0 1pt 0 3pt; +} +.dokuwiki .editBar .summary input { +} +/* change background colour if summary is missing */ +.dokuwiki .editBar .summary input.missing { + color: @ini_text; + background-color: #ffcccc; +} + +/* toolbar popups */ +.dokuwiki div.picker { + & { + background-color: @ini_background_alt; + border: @ini_border solid 1px; + padding: .125rem; + -webkit-box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2); + -moz-box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2); + box-shadow: .125rem .125rem .5rem 0 rgba(0,0,0,.2); + } + button { + & { + color: @ini_text; + background-color: @ini_background; + border: @ini_border solid 1px; + min-width: 24px; min-height: 24px; + cursor: pointer; + margin: 1px; + } + &:hover { + background-color: @ini_text; + color: @ini_background; + } + } + &#picker1 { + /* width: 308px; max-width: 308px; min-width: 308px; */ + resize: both; + overflow: auto; + } + &#picker2 { + /* width: 585px; max-width: 585px; min-width: 585px; */ + resize: both; + overflow: auto; + } +} + +/* preview +********************************************************************/ + +.dokuwiki div.preview { + border: dotted #CCC; + border-width: .2em 0; + padding: 1.4em 0; + margin-bottom: 1.4em; +} + +/* narrow screen overrides: */ +@media (max-width: @ini_tablet_width) { + + .dokuwiki div.editBar { + grid-template-columns: 1fr 5px auto; + } + .dokuwiki div.editBar .summary { + grid-row: 2; + grid-column: 1 / span 3; + } + .dokuwiki .editBar .summary #edit__summary { + margin-left: 8pt; + width: ~"calc(100% - 8px)"; + } + .dokuwiki .editBar .summary label:last-child { + /*text-align: right;*/ + } +} +@media (max-width: @ini_phone_width) { + + .dokuwiki .editBar .summary, + .dokuwiki .editBar .summary > label:first-child { + grid-template-columns: 100%; + } +} +@media (max-width: 390px) { + + .dokuwiki .editBar .editButtons button { + overflow: hidden; + height: 30px; + line-height: 24px; + } + .dokuwiki .editBar .summary #edit__summary { + margin-left: 4px; + width: 100%; + } + +} +/* dark mode overrides */ +@media (prefers-color-scheme: dark) { + + body.darkmode .editBox > .toolbar { + background-color: @ini_background_dark; + } + body.darkmode textarea.edit { + background-color: @ini_background_alt_dark; + border: @ini_headlines_dark solid 1px; + color: @ini_text_dark; + } + + body.darkmode textarea::-webkit-scrollbar-track { + background: @ini_background_alt_dark; + } + body.darkmode textarea::-webkit-scrollbar-thumb { + background: @ini_background_dark; + } + body.darkmode textarea::-webkit-scrollbar-thumb:hover { + background: @ini_background_site_dark; + } + body.darkmode textarea { scrollbar-color: @ini_background_dark @ini_background_alt_dark; } + .dokuwiki textarea::-webkit-resizer { + background-color: @ini_background_alt_dark; + background: linear-gradient(135deg, @ini_background_alt_dark 0%, @ini_background_alt_dark 50%, @ini_text_alt_dark 50%, @ini_text_alt_dark 100%); + } + + body.mode_edit.darkmode div.editBox button, + body.mode_preview.darkmode div.editBox button { + background-color: @ini_headlines_dark; + border-color: @ini_border_dark; + } + body.mode_edit.darkmode .editBar .editButtons button::before, + body.mode_preview.darkmode .editBar .editButtons button::before { + filter: invert(.9); + } + body.darkmode .editBar .editButtons button#edbtn__save { + background-color: #334466; + color: #CCDDFF; + } + body.darkmode .editBar .editButtons button#edbtn__preview { + background-color: #226633; + color: #CCFFDD; + } + body.darkmode .editBar .editButtons button[name="do[cancel]"] { + background-color: #663344; + color: #FFCCDD; + } + + body.mode_edit.darkmode #tool__bar button, + body.mode_preview.darkmode #tool__bar button { + border-color: @ini_border_dark; + filter: invert(.8); + } + body.mode_edit.darkmode .editBar .editButtons button, + body.mode_preview.darkmode .editBar .editButtons button { + border-color: @ini_border_dark; + } + + body.mode_edit.darkmode .editBar .summary #edit__summary, + body.mode_preview.darkmode .editBar .summary #edit__summary { + background-color: @ini_background_alt_dark; + border-color: @ini_headlines_dark; + color: @ini_text_dark; + } + + body.darkmode div.picker { + & { + background-color: @ini_background_dark; + border: @ini_border_dark solid 1px; + } + button { + & { + color: @ini_text_dark; + background-color: @ini_background_alt_dark; + border-color: @ini_border_dark; + } + &:hover { + background-color: @ini_text_dark; + color: @ini_background_alt_dark; + } + } + } + +}
\ No newline at end of file |