Merge pull request 'Threadview for frio' (#4) from jakob/themes-community:main into main
Reviewed-on: #4
This commit is contained in:
commit
1302cd3b55
|
|
@ -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?
|
||||
|
||||
[](https://kino.schuerz.at/w/1EEXMnx6Z2LM52r9E3snby)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 297 KiB |
|
|
@ -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 {
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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 = '';
|
||||
Loading…
Reference in New Issue