commit 9ccbe53afe5851b0a5ef0f6dc463b56f6d540e0d
parent 3021471fdaffe5e45ffd3b4b57ff84df6b34e7cf
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Wed, 24 Sep 2025 17:59:55 +0200
feat: adjust towards ktistec-2.4.14
Diffstat:
7 files changed, 74 insertions(+), 421 deletions(-)
diff --git a/Makefile b/Makefile
@@ -29,11 +29,6 @@ minify-css:
tee css/visibility.min.css > /dev/null
apply-css-docker:
- docker cp ./css/purpleish.min.css ktistec:/app/public/3rd/purpleish.min.css
- docker cp ./css/visibility.min.css ktistec:/app/public/3rd/visibility.min.css
- docker exec -ti ktistec \
- sh -c "echo \"@import url('purpleish.min.css');\" > ./tmp && \
- echo \"@import url('visibility.min.css');\" >> ./tmp && \
- cat /app/public/3rd/semantic*.css >> ./tmp && \
- mv ./tmp /app/public/3rd/semantic-*.min.css"
+ docker cp ./css/purpleish.min.css ktistec:/app/public/themes/purpleish.min.css
+ docker cp ./css/visibility.min.css ktistec:/app/public/themes/visibility.min.css
diff --git a/README.md b/README.md
@@ -31,12 +31,16 @@ variables while starting up the container:
## CSS
-Currently, the `./css/` directory contains three theming tweaks:
+Some of previous CSS hacks have found their way into upstream ktistec by now,
+for example:
+
+- [Improvements for mobile devices](https://github.com/toddsundsted/ktistec/commit/35d9476b8f5b458056e660247ed4ed3b4e8f76e4)
+- [The idea for a general Dark Mode](https://github.com/toddsundsted/ktistec/commit/99fe9ac72b0910c369153cb350e9ba86bf576671)
+
+Currently, the `./css/` directory contains following theming tweaks:
- [purple-ish](#purple-ish-theme): a modern theme with automatic dark/bright
mode and purple highlights
-- [mobile](#mobile): small adjustments of the layout to make the UI more
- appealing for mobile users
- [visibility](#visibility): small adjustments to improve visibility of content
in the sense of accessibility
@@ -44,31 +48,13 @@ Currently, the `./css/` directory contains three theming tweaks:
-### Mobile:
-
-
-
-
-
-
-
-
-
### Visibility:
-The *Visibility* CSS rules also mark all external URLs with an arrow-icon. For
-this to work properly, you have to inject your ktistec's domain into the CSS
-file. For example, if your ktistec is running under `social.example.com`, run
-following command before deploying the CSS file to your ktistec instance:
-
-```bash
-sed -e 's/\/\/localhost/\/\/social.example.com/g' -i css/visibility.css
-sed -e 's/\/\/localhost/\/\/social.example.com/g' -i css/visibility.min.css
-```
+The *Visibility* CSS rules also mark all external URLs with an arrow-icon.
**Minify CSS:**
@@ -76,47 +62,22 @@ sed -e 's/\/\/localhost/\/\/social.example.com/g' -i css/visibility.min.css
make minify-css
```
-Place the minified `purpleish.min.css`, `layout.min.css` and/or
-`visibility.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('visibility.min.css');
-@import url('mobile.min.css');
-
-/* ... rest of the file's content */
-```
+Place the minified `purpleish.min.css`, and/or `visibility.min.css` in the
+`public/theming/` directory.
**Manual installation:**
```bash
KTISTEC_PATH="/var/www/ktistec"
-KTISTEC_CSS="${KTISTEC_PATH}/public/3rd"
+KTISTEC_CSS="${KTISTEC_PATH}/public/theming"
cp ./css/*.min.css ${KTISTEC_CSS}/
-cp -r ./css/icons ${KTISTEC_CSS}/icons
-echo "@import url('purpleish.min.css');" > ${KTISTEC_CSS}/tmp
-echo "@import url('visibility.min.css');" >> ${KTISTEC_CSS}/tmp
-echo "@import url('mobile.min.css');" >> ${KTISTEC_CSS}/tmp
-cat ${KTISTEC_CSS}/semantic-*.min.css >> ${KTISTEC_CSS}/tmp
-mv ${KTISTEC_CSS}/tmp ${KTISTEC_CSS}/semantic-*.min.css
```
**Docker (via [this repo's docker-compose](#docker) file):**
```bash
-docker cp ./css/purpleish.min.css ktistec:/app/public/3rd/purpleish.min.css
-docker cp ./css/visibility.min.css ktistec:/app/public/3rd/visibility.min.css
-docker cp ./css/mobile.min.css ktistec:/app/public/3rd/mobile.min.css
-docker cp ./css/icons ktistec:/app/public/3rd/icons
-docker exec -ti ktistec \
- sh -c "
- echo \"@import url('purpleish.min.css');\" > /app/public/3rd/tmp && \
- echo \"@import url('visibility.min.css');\" >> /app/public/3rd/tmp && \
- echo \"@import url('mobile.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
- "
+docker cp ./css/purpleish.min.css ktistec:/app/public/theming/purpleish.min.css
+docker cp ./css/visibility.min.css ktistec:/app/public/theming/visibility.min.css
```
## Backups
diff --git a/css/purpleish.css b/css/purpleish.css
@@ -1,356 +1,56 @@
-:root
-{
- --bg1: #f8f8f2;
- --bg2: #e3e3d9;
- --fg1: #1d1e26;
- --hl1: #7277cf;
- --hl2: #3f426c;
- --invalid: #848484;
- --danger: #ff0000;
- --iconfilter: invert(0%) sepia(100%) saturate(20%) hue-rotate(39deg) brightness(101%) contrast(107%);
-}
-
-
+/* Set main colours for the purpleish theme */
+:root {
+ --text-primary: #1d1e26;
+ --text-primary-inverted: #dcdcdc;
+ --text-secondary: #3f426c;
+ --text-muted: #1d1e2699;
+
+ --bg-primary: #f8f8f2;
+ --bg-hover: #f8f8f220;
+ --bg-transparent: #f8f8f280;
+ --bg-icon-menu: #e3e3d9;
+
+ --bg-accent-code: var(--bg-icon-menu);
+ --bg-accent-pre: var(--bg-accent-code);
+ --bg-input: var(--bg-icon-menu);
+ --bg-label: var(--bg-icon-menu);
+
+ --semantic-primary: #7277cf;
+ --semantic-affirmative: var(--semantic-primary);
+ --semantic-negative: #ff0000;
+ --semantic-dangerous: #ff0000;
+ --semantic-dangerous-hover: #cc0000;
+
+ --color-blue: var(--semantic-primary);
+ --color-purple: var(--semantic-primary);
+ --color-yellow: var(--semantic-primary);
+
+ --border-color: var(--text-secondary);
+ --anchor-color: var(--semantic-primary);
+}
+
+/* Dark colours for the purpleish theme */
@media (prefers-color-scheme: dark) {
:root
{
- --bg1: #212121;
- --bg2: #2b2b2b;
- --fg1: #dcdcdc;
- --iconfilter: invert(98%) sepia(98%) saturate(0%) hue-rotate(294deg) brightness(102%) contrast(102%);
+ --text-primary: #dcdcdc;
+ --text-primary-inverted: #1d1e26;
+ --text-secondary: #dcdcdc99;
+ --text-muted: #dcdcdc80;
+
+ --bg-primary: #212121;
+ --bg-hover: #21212120;
+ --bg-transparent: #21212180;
+ --bg-icon-menu: #2b2b2b;
}
}
-/* Whole Content */
-body,
-table,
-tbody,
-tr,
-td
-{
- background-color: var(--bg1) !important;
- color: var(--fg1) !important;
-}
-
-/* Text */
-p,
-label,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6
-{
- color: var(--fg1) !important;
-}
-
-/* Links */
-a:not(.item)
-{
- color: var(--hl1) !important;
-}
-a:not(.item):hover
-{
- color: var(--hl1) !important;
- text-decoration: underline;
-}
-
-/* Navigation Bar */
-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;
-}
-
-/* Notification Counter */
-.ui.text.container .ui.stackable.secondary.menu > .item.notifications > .label,
-.red
-{
- background-color: var(--hl2) !important;
-}
-
-/* Secondary Mobile bar colours (if used) */
-.ui.text.container .ui.stackable.secondary.menu .mobile-menu-toggle label
-{
- background-color: var(--hl1) !important;
- color: var(--fg1) !important;
-}
-
-/* Secondary Mobile bar items */
-.ui.text.container .ui.stackable.secondary.menu .menu-items
-{
- background-color: var(--bg1) !important;
- color: var(--fg1) !important;
-}
-
-/* Footer */
-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;
-}
-
-/* Menu Entries */
-.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;
-}
-
-/* Menu Controllers */
-.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); /* Increases visibility */
-}
-
-/* Editor Form */
-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;
-}
-
-/* Editor Buttons */
-.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;
-}
-
-/* Refresh Banner */
-.ui.text.container .ui.feed #refresh-posts-message
-{
- background-color: var(--bg2) !important;
- color: var(--fg1) !important;
- box-shadow: 0 0 2px var(--fg1) !important;
-}
-.ui.text.container .ui.feed #refresh-posts-message .icon,
-.ui.text.container .ui.feed #refresh-posts-message .content,
-.ui.text.container .ui.feed #refresh-posts-message .content .header
-{
- color: var(--fg1) !important;
-}
-
-/* Posts */
-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;
-}
-
-/* Post Object Box */
-section.ui.feed > turbo-frame {
- border-radius: 10px;
- background-color: var(--bg2) !important;
- margin-top: 0.5em !important;
- margin-bottom: 0.5em !important;
- padding: 0.5em !important;
- box-shadow: 3px 3px 5px #00000033;
-}
-
-/* Post Labels */
-.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;
-}
-
-/* Posts Contributors and Tags */
-.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;
-}
-
-/* Post Attachments */
-.ui.feed > .event img.extra.image,
-.ui.feed > .event video.extra.video,
-.ui.feed > .event div.extra.text figure img.ui.image,
-.ui.feed > .event div.extra.text figure vid.ui.video
-{
- color: var(--fg1); /* alt text */
-}
-
-/* Post Actions */
-.ui.button,
-section.ui.feed .content .meta .ui.inline.form,
-section.ui.feed .content .meta a,
-.ui.mini.iconic,
-.ui.mini.iconic.button,
-.ui.mini.iconic.button .icon,
-.ui.mini.iconic.button.iconic.dangerous,
-.ui.text.container .ui.feed .event.activity-announce .content .meta .ui.inline.form .ui.button.mini.dangerous.iconic,
-.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;
- background-color: var(--bg2) !important;
-}
-section.ui.feed .content .meta a.blue,
-section.ui.feed .content .meta a.purple,
-.ui.mini.iconic.blue,
-.ui.mini.iconic.purple,
-.ui.mini.iconic.button.blue,
-.ui.mini.iconic.button.blue .icon,
-.ui.mini.iconic.button.purple,
-.ui.mini.iconic.button.purple .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: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;
-}
-
-/* Profile Button */
-.ui.button
-{
- color: var(--fg1) !important;
- background-color: var(--hl1) !important;
-}
-
-/* Profile cards */
-.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;
-}
-
-/* Event Cards */
-div.ui.text.container section.ui.feed div.ui.segments div.ui.segment.event {
- color: var(--fg1) !important;
- background-color: var(--bg2) !important;
-}
-
-/* Profile Accepted Section */
-ui.segment {
- color: var(--fg1) !important;
- background-color: var(--bg2) !important;
-}
-
-/* Code Blocks */
-code, pre
-{
- background-color: var(--bg2) !important
-}
-
-/* Paging Buttons */
-.ui.pagination.menu,
-.ui.pagination.menu a
-{
- color: var(--fg1) !important;
- background-color: var(--bg1) !important;
-}
-
-/* Filter */
-.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;
-}
-
-/* There is nothing there yet notification */
-.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;
-}
-
-/* Danger Buttons */
-.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,
-.ui.text.container .ui.form .ui.dangerous.button
-{
- background-color: var(--danger);
- color: var(--fg1) !important;
-}
-
-/* Pagination Buttons */
-.ui.text.container .ui.secondary.pagination.menu .item
-{
- background-color: var(--bg2) !important;
- border-radius: 3px;
- margin-top: 0.5em;
- margin-bottom: 1em;
+/* Style Posts and Post Threads as Cards */
+ section.ui.feed > turbo-frame {
+ border-radius: 10px;
+ background-color: var(--bg-icon-menu) !important;
+ margin-top: 0.5em !important;
+ margin-bottom: 0.5em !important;
+ padding: 0.5em !important;
+ box-shadow: 3px 3px 5px #00000080;
}
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;--iconfilter:invert(0%) sepia(100%) saturate(20%) hue-rotate(39deg) brightness(101%) contrast(107%);}@media (prefers-color-scheme:dark){:root{--bg1:#212121;--bg2:#2b2b2b;--fg1:#dcdcdc;--iconfilter:invert(98%) sepia(98%) saturate(0%) hue-rotate(294deg) brightness(102%) contrast(102%);}}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;}.ui.text.container .ui.stackable.secondary.menu>.item.notifications>.label,.red{background-color:var(--hl2) !important;}.ui.text.container .ui.stackable.secondary.menu .mobile-menu-toggle label{background-color:var(--hl1) !important;color:var(--fg1) !important;}.ui.text.container .ui.stackable.secondary.menu .menu-items{background-color:var(--bg1) !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;}.ui.text.container .ui.feed #refresh-posts-message{background-color:var(--bg2) !important;color:var(--fg1) !important;box-shadow:0 0 2px var(--fg1) !important;}.ui.text.container .ui.feed #refresh-posts-message .icon,.ui.text.container .ui.feed #refresh-posts-message .content,.ui.text.container .ui.feed #refresh-posts-message .content .header{color:var(--fg1) !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;}section.ui.feed>turbo-frame{border-radius:10px;background-color:var(--bg2) !important;margin-top:0.5em !important;margin-bottom:0.5em !important;padding:0.5em !important;box-shadow:3px 3px 5px #00000033;}.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.feed>.event img.extra.image,.ui.feed>.event video.extra.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video{color:var(--fg1);}.ui.button,section.ui.feed .content .meta .ui.inline.form,section.ui.feed .content .meta a,.ui.mini.iconic,.ui.mini.iconic.button,.ui.mini.iconic.button .icon,.ui.mini.iconic.button.iconic.dangerous,.ui.text.container .ui.feed .event.activity-announce .content .meta .ui.inline.form .ui.button.mini.dangerous.iconic,.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;background-color:var(--bg2) !important;}section.ui.feed .content .meta a.blue,section.ui.feed .content .meta a.purple,.ui.mini.iconic.blue,.ui.mini.iconic.purple,.ui.mini.iconic.button.blue,.ui.mini.iconic.button.blue .icon,.ui.mini.iconic.button.purple,.ui.mini.iconic.button.purple .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: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;}div.ui.text.container section.ui.feed div.ui.segments div.ui.segment.event{color:var(--fg1) !important;background-color:var(--bg2) !important;}ui.segment{color:var(--fg1) !important;background-color:var(--bg2) !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,.ui.text.container .ui.form .ui.dangerous.button{background-color:var(--danger);color:var(--fg1) !important;}.ui.text.container .ui.secondary.pagination.menu .item{background-color:var(--bg2) !important;border-radius:3px;margin-top:0.5em;margin-bottom:1em;}
-\ No newline at end of file
+:root{--text-primary:#1d1e26;--text-primary-inverted:#dcdcdc;--text-secondary:#3f426c;--text-muted:#1d1e2699;--bg-primary:#f8f8f2;--bg-hover:#f8f8f220;--bg-transparent:#f8f8f280;--bg-icon-menu:#e3e3d9;--bg-accent-code:var(--bg-icon-menu);--bg-accent-pre:var(--bg-accent-code);--bg-input:var(--bg-icon-menu);--bg-label:var(--bg-icon-menu);--semantic-primary:#7277cf;--semantic-affirmative:var(--semantic-primary);--semantic-negative:#ff0000;--semantic-dangerous:#ff0000;--semantic-dangerous-hover:#cc0000;--color-blue:var(--semantic-primary);--color-purple:var(--semantic-primary);--color-yellow:var(--semantic-primary);--border-color:var(--text-secondary);--anchor-color:var(--semantic-primary);}@media (prefers-color-scheme:dark){:root{--text-primary:#dcdcdc;--text-primary-inverted:#1d1e26;--text-secondary:#dcdcdc99;--text-muted:#dcdcdc80;--bg-primary:#212121;--bg-hover:#21212120;--bg-transparent:#21212180;--bg-icon-menu:#2b2b2b;}}section.ui.feed>turbo-frame{border-radius:10px;background-color:var(--bg-icon-menu) !important;margin-top:0.5em !important;margin-bottom:0.5em !important;padding:0.5em !important;box-shadow:3px 3px 5px #00000080;}
+\ No newline at end of file
diff --git a/css/visibility.css b/css/visibility.css
@@ -1,10 +1,6 @@
/* External Websites -------------------------------------------------------- */
-/* Mark anchors hat refer to external websites
- * "localhost" can be replaced by the ktistec instance's domain:
- * sed -e 's/\/\/localhost/\/\/social.example.com/g' -i visibility.css
- */
-a:not([href=""]):not([href^="/"]):not([href^="#"]):not([href^="?"]):not([href*="//localhost"]):after
+a[rel~="external"]:after
{
content: "︎ ↗";
}
@@ -34,7 +30,7 @@ video.ui.extra.attachment.video,
{
border-style: solid;
border-width: 1px;
- border-color: #808080;
+ border-color: var(--border-color);
}
/* Image full view background */
@@ -58,7 +54,7 @@ video.ui.extra.attachment.video,
{
border-left-style: solid !important;
border-left-width: 2px !important;
- border-left-color: #808080;
+ border-left-color: var(--border-color);
padding-left: 1em !important;
margin-right: 0; /* Ensure that padding does not mess up threadding*/
}
@@ -87,7 +83,7 @@ video.ui.extra.attachment.video,
{
border-style: solid;
border-width: 1px;
- border-color: #808080;
+ border-color: var(--border-color);
}
/* Image full view background */
@@ -102,7 +98,7 @@ video.ui.extra.attachment.video,
{
border-left-style: solid;
border-left-width: 2px;
- border-left-color: #80808080;
+ border-left-color: var(--border-color);
margin-right: 0; /* Ensure that padding does not mess up threadding*/
padding-right: 1em !important;
}
diff --git a/css/visibility.min.css b/css/visibility.min.css
@@ -1 +1 @@
-a:not([href=""]):not([href^="/"]):not([href^="#"]):not([href^="?"]):not([href*="//localhost"]):after{content:"︎ ↗";}.ui.feed>.event img.extra.image,.ui.feed>.event video.extra.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video{width:100%;height:auto;max-height:400px !important;min-height:100px;}img.ui.extra.attachment.image,.extra.media img.ui.attachment.image,video.ui.extra.attachment.video,.extra.media video.ui.attachment.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video,.lg-image{border-style:solid;border-width:1px;border-color:#808080;}.lg-backdrop.in{opacity:0.9 !important;}.lg-components{max-height:25vh;overflow-y:scroll;}.lg-components{bottom:0 !important;}.threaded:not(.depth-0){border-left-style:solid !important;border-left-width:2px !important;border-left-color:#808080;padding-left:1em !important;margin-right:0;}.ui.feed>.event img.extra.image,.ui.feed>.event video.extra.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.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,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video,.lg-image{border-style:solid;border-width:1px;border-color:#808080;}.lg-backdrop.in{opacity:0.8 !important;}.threaded:not(.depth-0){border-left-style:solid;border-left-width:2px;border-left-color:#80808080;margin-right:0;padding-right:1em !important;}
-\ No newline at end of file
+a[rel~="external"]:after{content:"︎ ↗";}.ui.feed>.event img.extra.image,.ui.feed>.event video.extra.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video{width:100%;height:auto;max-height:400px !important;min-height:100px;}img.ui.extra.attachment.image,.extra.media img.ui.attachment.image,video.ui.extra.attachment.video,.extra.media video.ui.attachment.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video,.lg-image{border-style:solid;border-width:1px;border-color:var(--border-color);}.lg-backdrop.in{opacity:0.9 !important;}.lg-components{max-height:25vh;overflow-y:scroll;}.lg-components{bottom:0 !important;}.threaded:not(.depth-0){border-left-style:solid !important;border-left-width:2px !important;border-left-color:var(--border-color);padding-left:1em !important;margin-right:0;}.ui.feed>.event img.extra.image,.ui.feed>.event video.extra.video,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.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,.ui.feed>.event div.extra.text figure img.ui.image,.ui.feed>.event div.extra.text figure vid.ui.video,.lg-image{border-style:solid;border-width:1px;border-color:var(--border-color);}.lg-backdrop.in{opacity:0.8 !important;}.threaded:not(.depth-0){border-left-style:solid;border-left-width:2px;border-left-color:var(--border-color);margin-right:0;padding-right:1em !important;}
+\ No newline at end of file
diff --git a/docker/docker-compose.yaml b/docker/docker-compose.yaml
@@ -24,6 +24,7 @@ services:
- /var/www/ktistec/db:/db
- /var/www/ktistec/uploads:/uploads
- /var/www/ktistec/backups:/backups
+ - /var/www/ktistec/themes:/app/public/themes
environment:
- LIBRETRANSLATE_API_KEY="${LIBRETRANSLATE_API_KEY:-}"
