pub / ktistec-tweaks

Tweaks for the ActivityPub server ktistec
git clone https://src.jayvii.de/pub/ktistec-tweaks.git
Home | Log | Files | Exports | Refs | Submodules | README | RSS

commit 1516a7294bd1de52b74648ee1824e2634002e99b
parent 139404bc81f046a0c750690af33ffc2ed9aaa10e
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Sun, 28 Jul 2024 11:05:59 +0200

feat: split attachment related extra tweaks into their own rules file

Diffstat:
MMakefile | 17++++++++++++-----
MREADME.md | 12++++++++----
Acss/attachments.css | 24++++++++++++++++++++++++
Acss/attachments.min.css | 2++
Mcss/purpleish.css | 16----------------
Mcss/purpleish.min.css | 4++--
6 files changed, 48 insertions(+), 27 deletions(-)

diff --git a/Makefile b/Makefile @@ -1,7 +1,14 @@ minify-css: cat css/purpleish.css | \ - sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \ - tr -d '\t' | \ - tr -d '\n' | \ - tr -s ' ' ' ' | \ - tee css/purpleish.min.css + sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \ + tr -d '\t' | \ + tr -d '\n' | \ + tr -s ' ' ' ' | \ + tee css/purpleish.min.css > /dev/null + cat css/attachments.css | \ + sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | \ + tr -d '\t' | \ + tr -d '\n' | \ + tr -s ' ' ' ' | \ + tee css/attachments.min.css > /dev/null + diff --git a/README.md b/README.md @@ -23,24 +23,26 @@ Minify CSS: make minify-css ``` -Place the minified `purpleish.min.css` in the `public/3rd/` directory and -at **AT THE START OF** `public/3rd/semantic-2.4.1.min.css`: +Place the minified `purpleish.min.css` and/or `attachments.min.css`in the +`public/3rd/` directory and at **AT THE START OF** +`public/3rd/semantic-2.4.1.min.css`: ```css @import url('purpleish.min.css'); +@import url('attachments.min.css'); /* ... rest of the file's content */ ``` -### tl;dr - **Manual installation:** ```bash KTISTEC_PATH="/var/www/ktistec" KTISTEC_CSS="${KTISTEC_PATH}/public/3rd" cp ./css/purpleish.min.css ${KTISTEC_CSS}/ +cp ./css/attachments.min.css ${KTISTEC_CSS}/ echo "@import url('purpleish.min.css');" > ${KTISTEC_CSS}/tmp +echo "@import url('attachments.min.css');" >> ${KTISTEC_CSS}/tmp cat ${KTISTEC_CSS}/semantic-*.min.css >> ${KTISTEC_CSS}/tmp mv ${KTISTEC_CSS}/tmp ${KTISTEC_CSS}/semantic-*.min.css ``` @@ -49,9 +51,11 @@ mv ${KTISTEC_CSS}/tmp ${KTISTEC_CSS}/semantic-*.min.css ```bash docker cp ./css/purpleish.min.css ktistec:/app/public/3rd/purpleish.min.css +docker cp ./css/attachments.min.css ktistec:/app/public/3rd/attachments.min.css docker exec -ti ktistec \ sh -c " echo \"@import url('purpleish.min.css');\" > /app/public/3rd/tmp && \ + echo \"@import url('attachments.min.css');\" >> /app/public/3rd/tmp && \ cat /app/public/3rd/semantic*.css >> /app/public/3rd/tmp && \ mv /app/public/3rd/tmp /app/public/3rd/semantic-*.min.css " diff --git a/css/attachments.css b/css/attachments.css @@ -0,0 +1,24 @@ +/* Try to avoid image and video clipping in feed */ +.ui.feed > .event img.extra.image, +.ui.feed > .event video.extra.video +{ + width: 100%; + height: auto; + max-height: 800px; +} + +/* Add Image and Video Borders */ +img.ui.extra.attachment.image, +.extra.media img.ui.attachment.image, +video.ui.extra.attachment.video, +.extra.media video.ui.attachment.video +{ + border-style: solid; + border-width: 1px; + border-color: #808080; +} + +/* Image full view background */ +.lg-backdrop.in { + opacity: 0.8 !important; +} diff --git a/css/attachments.min.css b/css/attachments.min.css @@ -0,0 +1 @@ +.ui.feed > .event img.extra.image,.ui.feed > .event video.extra.video{ width: 100%; height: auto; max-height: 800px;}img.ui.extra.attachment.image,.extra.media img.ui.attachment.image,video.ui.extra.attachment.video,.extra.media video.ui.attachment.video{ border-style: solid; border-width: 1px; border-color: #808080;}.lg-backdrop.in { opacity: 0.8 !important;} +\ No newline at end of file diff --git a/css/purpleish.css b/css/purpleish.css @@ -268,19 +268,3 @@ code, pre background-color: var(--danger) !important; color: var(--fg1) !important; } - -/* Image and Video Borders */ -img.ui.extra.attachment.image, -.extra.media img.ui.attachment.image, -video.ui.extra.attachment.video, -.extra.media video.ui.attachment.video -{ - border-style: solid; - border-width: 1px; - border-color: var(--hl1); -} - -/* Image full view background */ -.lg-backdrop.in { - opacity: 0.8 !important; -} diff --git a/css/purpleish.min.css b/css/purpleish.min.css @@ -1 +1 @@ -:root{ --bg1: #f8f8f2; --bg2: #e3e3d9; --fg1: #1d1e26; --hl1: #7277cf; --hl2: #3f426c; --invalid: #848484; --danger: #ff0000;}@media (prefers-color-scheme: dark) { :root { --bg1: #212121; --bg2: #2b2b2b; --fg1: #dcdcdc; }}body,table,tbody,tr,td{ background-color: var(--bg1) !important; color: var(--fg1) !important;}p,label,h1,h2,h3,h4,h5,h6{ color: var(--fg1) !important;}a:not(.item){ color: var(--hl1) !important;}a:not(.item):hover{ color: var(--hl1) !important; text-decoration: underline;}nav,nav > .item,nav .menu,nav .container .item .menu,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item,nav.ui.top.fixed.inverted.navigation.menu .ui.text.container .item{ background: var(--bg2) !important; color: var(--fg1) !important;}nav .item:hover,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover > p > a,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active > p > a{ background: var(--hl1) !important; color: var(--fg1) !!important;}nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item:hover p a,nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p:hover a,nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p a:hover{ color: var(--fg1) !important;}.ui.stackable.secondary.menu .item,.ui.stackable.secondary.menu .item a{ color: var(--fg1) !important; text-decoration: none !important;}.ui.stackable.secondary.menu .item:hover,.ui.stackable.secondary.menu .item a:hover{ color: var(--hl1) !important; text-decoration: none !important;}.ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu,.ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu .item .ui.slider.checkbox label{ color: var(--fg1) !important; background-color: var(--bg2) !important;}.ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu{ box-shadow: 3px 3px 3px var(--bg1); }trix-editor,textarea,.trix-dialog,input,table,.ui.selection.dropdown{ background-color: var(--bg2) !important; color: var(--fg1) !important; box-shadow: 0 0 0.1em var(--hl1) !important;}.ui.compact.mini.icon.menu,.ui.compact.mini.icon.menu .item,.ui.buttons .ui.button{ color: var(--fg1) !important; background-color: var(--hl1) !important;}.ui.compact.mini.icon.menu .trix-active,.ui.buttons .ui.button:active,.buttons .ui.button:hover{ background-color: var(--hl2) !important;}section.ui.feed,section.ui.feed .content,section.ui.feed .content .label,section.ui.feed .content .summary,section.ui.feed .content .extra.text,section.ui.feed .content .meta{ color: var(--fg1) !important;}.ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label,.ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label a{ background-color: var(--bg2) !important; color: var(--fg1) !important;}.ui.text.container #thread_page_thread_controls .ui.thread.segments .ui.segment,.ui.text.container #tag_page_tag_controls .ui.thread.segments .ui.segment{ background-color: var(--bg2) !important; color: var(--fg1) !important;}.ui.button,section.ui.feed .content .meta .ui.inline.form,section.ui.feed .content .meta a,.ui.mini.iconic,.ui.mini.iconic.button .icon,.ui.mini.iconic.button.iconic.dangerous,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox label,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox input{ color: var(--fg1) !important;}section.ui.feed .content .meta a.blue,.ui.mini.iconic.blue,.ui.mini.iconic.button.blue,.ui.mini.iconic.button.blue .icon,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked label,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked input{ color: var(--hl1) !important}.ui.button:hover,section.ui.feed .content .meta .ui.inline.form:hover,section.ui.feed .content .meta a:hover,.ui.mini.iconic:hover,.ui.mini.iconic.button .icon:hover.ui.feed > .event > .content .meta a:hover,.ui.feed > .event > .content .meta a:hover > button > .icon,.ui.feed > .event > .content .meta .ui.inline.form:hover > button,.ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,.ui.button:active,section.ui.feed .content .meta .ui.inline.form:active,section.ui.feed .content .meta a:active,.ui.mini.iconic:active,.ui.mini.iconic.button .icon:active,.ui.feed > .event > .content .meta a:active,.ui.feed > .event > .content .meta a:active > button > .icon,.ui.feed > .event > .content .meta .ui.inline.form:active > button,.ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon{ color: var(--hl1) !important;}.ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,.ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon{ color: var(--danger) !important;}.ui.button{ color: var(--fg1) !important; background-color: var(--hl1) !important;}.ui.text.container .ui.cards .ui.fluid.actor.card,.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content{ color: var(--fg1) !important; background-color: var(--bg2) !important;}.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content a .meta { color: var(--hl1) !important;}code, pre{ background-color: var(--bg2) !important}.ui.pagination.menu,.ui.pagination.menu a{ color: var(--fg1) !important; background-color: var(--bg1) !important;}.ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard{ background-color: var(--bg1) !important; color: var(--fg1) !important;}.ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,.ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon{ color: var(--fg1) !important;}.ui.dangerous.button,.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content .ui.form.right.floated .ui.button.dangerous,.ui.text.container .ui.actor.segments .ui.basic.segment .ui.inline.form .ui.button.dangerous{ background-color: var(--danger) !important; color: var(--fg1) !important;}img.ui.extra.attachment.image,.extra.media img.ui.attachment.image,video.ui.extra.attachment.video,.extra.media video.ui.attachment.video{ border-style: solid; border-width: 1px; border-color: var(--hl1);}.lg-backdrop.in { opacity: 0.8 !important;} -\ No newline at end of file +:root{ --bg1: #f8f8f2; --bg2: #e3e3d9; --fg1: #1d1e26; --hl1: #7277cf; --hl2: #3f426c; --invalid: #848484; --danger: #ff0000;}@media (prefers-color-scheme: dark) { :root { --bg1: #212121; --bg2: #2b2b2b; --fg1: #dcdcdc; }}body,table,tbody,tr,td{ background-color: var(--bg1) !important; color: var(--fg1) !important;}p,label,h1,h2,h3,h4,h5,h6{ color: var(--fg1) !important;}a:not(.item){ color: var(--hl1) !important;}a:not(.item):hover{ color: var(--hl1) !important; text-decoration: underline;}nav,nav > .item,nav .menu,nav .container .item .menu,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item,nav.ui.top.fixed.inverted.navigation.menu .ui.text.container .item{ background: var(--bg2) !important; color: var(--fg1) !important;}nav .item:hover,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover > p > a,nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active > p > a{ background: var(--hl1) !important; color: var(--fg1) !!important;}nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item:hover p a,nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p:hover a,nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p a:hover{ color: var(--fg1) !important;}.ui.stackable.secondary.menu .item,.ui.stackable.secondary.menu .item a{ color: var(--fg1) !important; text-decoration: none !important;}.ui.stackable.secondary.menu .item:hover,.ui.stackable.secondary.menu .item a:hover{ color: var(--hl1) !important; text-decoration: none !important;}.ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu,.ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu .item .ui.slider.checkbox label{ color: var(--fg1) !important; background-color: var(--bg2) !important;}.ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu{ box-shadow: 3px 3px 3px var(--bg1); }trix-editor,textarea,.trix-dialog,input,table,.ui.selection.dropdown{ background-color: var(--bg2) !important; color: var(--fg1) !important; box-shadow: 0 0 0.1em var(--hl1) !important;}.ui.compact.mini.icon.menu,.ui.compact.mini.icon.menu .item,.ui.buttons .ui.button{ color: var(--fg1) !important; background-color: var(--hl1) !important;}.ui.compact.mini.icon.menu .trix-active,.ui.buttons .ui.button:active,.buttons .ui.button:hover{ background-color: var(--hl2) !important;}section.ui.feed,section.ui.feed .content,section.ui.feed .content .label,section.ui.feed .content .summary,section.ui.feed .content .extra.text,section.ui.feed .content .meta{ color: var(--fg1) !important;}.ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label,.ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label a{ background-color: var(--bg2) !important; color: var(--fg1) !important;}.ui.text.container #thread_page_thread_controls .ui.thread.segments .ui.segment,.ui.text.container #tag_page_tag_controls .ui.thread.segments .ui.segment{ background-color: var(--bg2) !important; color: var(--fg1) !important;}.ui.button,section.ui.feed .content .meta .ui.inline.form,section.ui.feed .content .meta a,.ui.mini.iconic,.ui.mini.iconic.button .icon,.ui.mini.iconic.button.iconic.dangerous,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox label,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox input{ color: var(--fg1) !important;}section.ui.feed .content .meta a.blue,.ui.mini.iconic.blue,.ui.mini.iconic.button.blue,.ui.mini.iconic.button.blue .icon,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked label,.ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked input{ color: var(--hl1) !important}.ui.button:hover,section.ui.feed .content .meta .ui.inline.form:hover,section.ui.feed .content .meta a:hover,.ui.mini.iconic:hover,.ui.mini.iconic.button .icon:hover.ui.feed > .event > .content .meta a:hover,.ui.feed > .event > .content .meta a:hover > button > .icon,.ui.feed > .event > .content .meta .ui.inline.form:hover > button,.ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,.ui.button:active,section.ui.feed .content .meta .ui.inline.form:active,section.ui.feed .content .meta a:active,.ui.mini.iconic:active,.ui.mini.iconic.button .icon:active,.ui.feed > .event > .content .meta a:active,.ui.feed > .event > .content .meta a:active > button > .icon,.ui.feed > .event > .content .meta .ui.inline.form:active > button,.ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon{ color: var(--hl1) !important;}.ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,.ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon{ color: var(--danger) !important;}.ui.button{ color: var(--fg1) !important; background-color: var(--hl1) !important;}.ui.text.container .ui.cards .ui.fluid.actor.card,.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content{ color: var(--fg1) !important; background-color: var(--bg2) !important;}.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content a .meta { color: var(--hl1) !important;}code, pre{ background-color: var(--bg2) !important}.ui.pagination.menu,.ui.pagination.menu a{ color: var(--fg1) !important; background-color: var(--bg1) !important;}.ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard{ background-color: var(--bg1) !important; color: var(--fg1) !important;}.ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,.ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon{ color: var(--fg1) !important;}.ui.dangerous.button,.ui.text.container .ui.cards .ui.fluid.actor.card .extra.content .ui.form.right.floated .ui.button.dangerous,.ui.text.container .ui.actor.segments .ui.basic.segment .ui.inline.form .ui.button.dangerous{ background-color: var(--danger) !important; color: var(--fg1) !important;} +\ No newline at end of file