diff --git a/frio-with-threadview/README.md b/frio-with-threadview/README.md new file mode 100644 index 0000000..d45acbd --- /dev/null +++ b/frio-with-threadview/README.md @@ -0,0 +1,14 @@ +# Threadview in Frio + +## Install it +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. + +Activate "intelligent threadview", it really helps with new Link to parent comment!!! + +## And how it looks like? + +[![Preview of Video for Friendica with loooooooong thread](./preview-video.png)](https://kino.schuerz.at/w/1EEXMnx6Z2LM52r9E3snby) diff --git a/frio-with-threadview/preview-video.png b/frio-with-threadview/preview-video.png new file mode 100644 index 0000000..b727c4c Binary files /dev/null and b/frio-with-threadview/preview-video.png differ diff --git a/frio-with-threadview/threadview.css b/frio-with-threadview/threadview.css new file mode 100644 index 0000000..5469e98 --- /dev/null +++ b/frio-with-threadview/threadview.css @@ -0,0 +1,193 @@ +/* + 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: 4px; + --second-border-radius: 7px; + --third-border-radius: 1px; + --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{ + filter: brightness(1); + } + button:active { + filter: brightness(1); + color: var(--active_btn_color) !important; + } +} + +#contact-edit-actions-button { + filter: none !important; +} + +/*figure, audio, canvas, progress, video, img { + max-height: 75vh; +}*/ + +figure, audio, canvas, progress, video { + 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, +.media { +/* +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; +} + +.dropdown-toggle.active, +.button-likes.active, +.button-event.active, +.button-announces.active { + color: var(--active_btn_color) !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, + .button-likes, + .button-event, + .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; + } +} +.media.shiny { + + +} diff --git a/frio-with-threadview/threadview.php b/frio-with-threadview/threadview.php new file mode 100644 index 0000000..52b68c2 --- /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 = '';