From 39df3c62a8f48700c04f2b772921ea03d1538b25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakobus=20Sch=C3=BCrz=20=28admin=29?= Date: Sat, 11 Mar 2023 02:20:51 +0100 Subject: [PATCH] Add Threadview to Frio --- frio-with-threadview/README.md | 7 ++ frio-with-threadview/threadview.css | 174 ++++++++++++++++++++++++++++ frio-with-threadview/threadview.php | 21 ++++ 3 files changed, 202 insertions(+) create mode 100644 frio-with-threadview/README.md create mode 100644 frio-with-threadview/threadview.css create mode 100644 frio-with-threadview/threadview.php diff --git a/frio-with-threadview/README.md b/frio-with-threadview/README.md new file mode 100644 index 0000000..37bbe47 --- /dev/null +++ b/frio-with-threadview/README.md @@ -0,0 +1,7 @@ +# Threadview in Frio + +Just place this two files in +/view/theme/frio/scheme/ +reload your browser and you can choose in custom theme settings "Threadview" as Color-Scheme, which gives you pretty Thread-Lines on the left. + +Also improves size of videos and images, so that they will fit always into screen. And the same for some veeeery long usernames too. diff --git a/frio-with-threadview/threadview.css b/frio-with-threadview/threadview.css new file mode 100644 index 0000000..3b43bbe --- /dev/null +++ b/frio-with-threadview/threadview.css @@ -0,0 +1,174 @@ +/* + Licence : AGPL + + Created on : Sun 26 Feb 2023 08:20:14 PM CET + Author : jakob@soc.schuerz.at + Color picker : https://www.w3schools.com/colors/colors_names.asp + CSS UTF8 icons : https://www.utf8icons.com + + +*/ +:root { + --main-border-radius: 10px; + --second-border-radius: 7px; + --third-border-radius: 4px; + --active_btn_color: #cc9f0d; // Gelb + --inactive_btn_color: #000055; // Gelb +} + +/* Radius arount boxes */ +.section, +.widget, +.media, +.wall-item-container, +.thread-wrapper, +div[class^="thread_level"], +div[class*=" thread_level"], +.toplevel_item, +.apub, +.panel-default, +.panel_body, +.panel { + border-bottom-left-radius: var(--main-border-radius) !important; + border-bottom-right-radius: var(--main-border-radius) !important; + border-top-right-radius: var(--main-border-radius) !important; +} + +.btn, +.label { + border-radius: var(--second-border-radius) !important; +} + +i .btn-link { + color: #fff !important; +} + +button .btn-link { + color: #000 !important; +} + +#contact-edit-actions-button, +#contact-edit-actions-button.active { + background-color: $nav_bg; + color: #fff !important; +} + +@media (hover: hover) { + #main-menu, + #nav-notifications-menu-btn, + button:hover { + //color: #fff !important; + filter: brightness(1); + } + button:active { + filter: brightness(1); + color: var(--active_btn_color) !important; + } +} + +@media (hover: none) { + #main-menu, + #nav-notifications-menu-btn, + button:hover{ + //color: #fff !important; + filter: brightness(1); + } + button:active { + filter: brightness(1); + color: var(--active_btn_color) !important; + } +} + +#contact-edit-actions-button { + //color: #fff; + filter: none !important; +} + +audio, canvas, progress, video, img { + max-height: 75vh; +} + +.wall-item-actions { + background-color: #b7b7b75c; + padding: 3px; + padding-left: 6px; + padding-right: 6px; + border-radius: var(--third-border-radius) !important; + +} + +/* Thread-Lines left on comments +.wall-item-container { + border-top: 1px solid; + border-top-color: $nav_bg; + border-image: linear-gradient(to right, $nav_bg, transparent) 30; +} +*/ +/*.tread-wrapper,*/ +div[class^="thread_level"], +div[class*=" thread_level"] { + border-left: 1px solid; + margin-left: 2px; + border-left-color: $nav_bg; +} + +.media, +{ + border-left: 1px solid; +} + +.wall-item-container { + margin-left: 3px !important; +} + +@media screen and (max-width: 767px) { + + button[id^=like-] { margin-right: 5px !important;} + .button, + .btn { + padding: 1px; + padding-inline: 22px; + margin-top: 5px; + margin-bottom: 5px; + background-color: $nav_bg; + filter: brightness(1.25); + } + .wall-item-container { + margin-top: 10px; + } + .contact-info-comment { + display: contents !important; + } + .fakelink, + .media-heading, + .wall-item-name-link { + word-wrap: anywhere !important; + } + .dropdown-toggle.active, + .button-likes.active, + .button-announces.active { + color: var(--active_btn_color) !important; + } + .dropdown-toggle, + .button-likes, + .button-announces { + color: #000; + } + .dropdown-menu { + max-width: 40vh; + } + /* Thread-Lines left on comments */ + div[class^="thread_level"], + div[class*=" thread_level"] { + border-left: 1px solid; + margin-left: 2px; + border-left-color: $nav_bg; + } + .media, + { + border-left: 1px solid; + } + .wall-item-container { + margin-left: 3px solid !important; + } +} diff --git a/frio-with-threadview/threadview.php b/frio-with-threadview/threadview.php new file mode 100644 index 0000000..c93abc7 --- /dev/null +++ b/frio-with-threadview/threadview.php @@ -0,0 +1,21 @@ + + * Overwrites: nav_bg, nav_icon_color, link_color, background_color, background_image, login_bg_color, contentbg_transp + * Accented: yes + */ + +require_once 'view/theme/frio/php/PHPColors/Color.php'; + +$accentColor = new Color($scheme_accent); + +$nav_bg = '#' . $accentColor->darken(10); +$menu_background_hover_color = '#' . $accentColor->darken(5); +$nav_icon_color = "#fff"; +$link_color = '#' . $accentColor->getHex(); +$background_color = "#ededed"; +$login_bg_color = "#ededed"; +$contentbg_transp = 100; +$background_image = '';