Merge pull request 'Threadview for frio' (#4) from jakob/themes-community:main into main

Reviewed-on: #4
This commit is contained in:
Tobias Diekershoff 2024-02-21 07:59:09 +01:00
commit 1302cd3b55
4 changed files with 228 additions and 0 deletions

View file

@ -0,0 +1,14 @@
# Threadview in Frio
## Install it
Just place this two files in
<friendica>/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)

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

View file

@ -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 {
}

View file

@ -0,0 +1,21 @@
<?php
/*
* Name: Threadview
* Licence: AGPL
* Author: Jakob Schürz <jakob@schuerz.at>
* 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 = '';