Merge pull request #9039 from MrPetovan/task/frio-accent-scheme

[frio] Add accented schemes including dark scheme and black scheme

mod/cal.php

@@ -105,6 +105,11 @@ function cal_content(App $a)
 	// get the translation strings for the callendar
 	$i18n = Event::getStrings();
 
+	DI::page()->registerStylesheet('view/asset/fullcalendar/dist/fullcalendar.min.css');
+	DI::page()->registerStylesheet('view/asset/fullcalendar/dist/fullcalendar.print.min.css', 'print');
+	DI::page()->registerFooterScript('view/asset/moment/min/moment-with-locales.min.js');
+	DI::page()->registerFooterScript('view/asset/fullcalendar/dist/fullcalendar.min.js');
+
 	$htpl = Renderer::getMarkupTemplate('event_head.tpl');
 	DI::page()['htmlhead'] .= Renderer::replaceMacros($htpl, [
 		'$module_url' => '/cal/' . $a->data['user']['nickname'],

mod/events.php

@@ -256,6 +256,11 @@ function events_content(App $a)
 	// get the translation strings for the callendar
 	$i18n = Event::getStrings();
 
+	DI::page()->registerStylesheet('view/asset/fullcalendar/dist/fullcalendar.min.css');
+	DI::page()->registerStylesheet('view/asset/fullcalendar/dist/fullcalendar.print.min.css', 'print');
+	DI::page()->registerFooterScript('view/asset/moment/min/moment-with-locales.min.js');
+	DI::page()->registerFooterScript('view/asset/fullcalendar/dist/fullcalendar.min.js');
+
 	$htpl = Renderer::getMarkupTemplate('event_head.tpl');
 	DI::page()['htmlhead'] .= Renderer::replaceMacros($htpl, [
 		'$module_url' => '/events',

src/App/Page.php

@@ -165,11 +165,10 @@ class Page implements ArrayAccess
 	 * The path can be absolute or relative to the Friendica installation base folder.
 	 *
 	 * @param string $path
-	 *
+	 * @param string $media
 	 * @see Page::initHead()
-	 *
 	 */
-	public function registerStylesheet($path)
+	public function registerStylesheet($path, string $media = 'screen')
 	{
 		$path = Network::appendQueryParam($path, ['v' => FRIENDICA_VERSION]);
 
@@ -177,7 +176,7 @@ class Page implements ArrayAccess
 			$path = mb_substr($path, mb_strlen($this->basePath . DIRECTORY_SEPARATOR));
 		}
 
-		$this->stylesheets[] = trim($path, '/');
+		$this->stylesheets[trim($path, '/')] = $media;
 	}
 
 	/**
@@ -252,7 +251,7 @@ class Page implements ArrayAccess
 			'$shortcut_icon'   => $shortcut_icon,
 			'$touch_icon'      => $touch_icon,
 			'$block_public'    => intval($config->get('system', 'block_public')),
-			'$stylesheets'     => array_unique($this->stylesheets),
+			'$stylesheets'     => $this->stylesheets,
 		]) . $this->page['htmlhead'];
 	}
 

src/Module/Theme.php

@@ -32,19 +32,17 @@ class Theme extends BaseModule
 {
 	public static function rawContent(array $parameters = [])
 	{
-		header("Content-Type: text/css");
+		header('Content-Type: text/css');
 
-		$a = DI::app();
+		$theme = Strings::sanitizeFilePathItem($parameters['theme']);
 
-		if ($a->argc == 4) {
+		if (file_exists("view/theme/$theme/theme.php")) {
-			$theme = $a->argv[2];
+			require_once "view/theme/$theme/theme.php";
-			$theme = Strings::sanitizeFilePathItem($theme);
+		}
 
 		// set the path for later use in the theme styles
-			$THEMEPATH = "view/theme/$theme";
 		if (file_exists("view/theme/$theme/style.php")) {
-				require_once("view/theme/$theme/style.php");
+			require_once "view/theme/$theme/style.php";
-			}
 		}
 
 		exit();

view/templates/event_head.tpl

@@ -1,9 +1,3 @@
-
-<link rel="stylesheet" type="text/css" href="{{$baseurl}}/view/asset/fullcalendar/dist/fullcalendar.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" />
-<link rel="stylesheet" type="text/css" href="{{$baseurl}}/view/asset/fullcalendar/dist/fullcalendar.print.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" media="print" />
-<script type="text/javascript" src="{{$baseurl}}/view/asset/moment/min/moment-with-locales.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
-<script type="text/javascript" src="{{$baseurl}}/view/asset/fullcalendar/dist/fullcalendar.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
-
 <script>
 	function showEvent(eventid) {
 		$.get(

view/templates/head.tpl

@@ -8,8 +8,8 @@
 <link rel="stylesheet" href="view/asset/jquery-datetimepicker/build/jquery.datetimepicker.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" type="text/css" media="screen" />
 <link rel="stylesheet" href="view/asset/perfect-scrollbar/dist/css/perfect-scrollbar.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" type="text/css" media="screen" />
 
-{{foreach $stylesheets as $stylesheetUrl}}
+{{foreach $stylesheets as $stylesheetUrl => $media}}
-<link rel="stylesheet" href="{{$stylesheetUrl}}" type="text/css" media="screen" />
+	<link rel="stylesheet" href="{{$stylesheetUrl}}" type="text/css" media="{{$media}}" />
 {{/foreach}}
 
 <link rel="shortcut icon" href="{{$shortcut_icon}}" />

view/theme/frio/config.php

@@ -32,14 +32,25 @@ function theme_post(App $a)
 	}
 
 	if (isset($_POST['frio-settings-submit'])) {
-		DI::pConfig()->set(local_user(), 'frio', 'scheme',           $_POST['frio_scheme']           ?? '');
+		foreach ([
-		DI::pConfig()->set(local_user(), 'frio', 'nav_bg',           $_POST['frio_nav_bg']           ?? '');
+			'scheme',
-		DI::pConfig()->set(local_user(), 'frio', 'nav_icon_color',   $_POST['frio_nav_icon_color']   ?? '');
+			'scheme_accent',
-		DI::pConfig()->set(local_user(), 'frio', 'link_color',       $_POST['frio_link_color']       ?? '');
+			'nav_bg',
-		DI::pConfig()->set(local_user(), 'frio', 'background_color', $_POST['frio_background_color'] ?? '');
+			'nav_icon_color',
-		DI::pConfig()->set(local_user(), 'frio', 'contentbg_transp', $_POST['frio_contentbg_transp'] ?? '');
+			'link_color',
-		DI::pConfig()->set(local_user(), 'frio', 'background_image', $_POST['frio_background_image'] ?? '');
+			'background_color',
-		DI::pConfig()->set(local_user(), 'frio', 'bg_image_option',  $_POST['frio_bg_image_option']  ?? '');
+			'contentbg_transp',
+			'background_image',
+			'bg_image_option',
+			'login_bg_image',
+			'login_bg_color'
+		] as $field) {
+			if (isset($_POST['frio_' . $field])) {
+				DI::pConfig()->set(local_user(), 'frio', $field, $_POST['frio_' . $field]);
+			}
+
+		}
+
 		DI::pConfig()->set(local_user(), 'frio', 'css_modified',     time());
 	}
 }
@@ -51,16 +62,24 @@ function theme_admin_post(App $a)
 	}
 
 	if (isset($_POST['frio-settings-submit'])) {
-		DI::config()->set('frio', 'scheme',           $_POST['frio_scheme']           ?? '');
+		foreach ([
-		DI::config()->set('frio', 'nav_bg',           $_POST['frio_nav_bg']           ?? '');
+			'scheme',
-		DI::config()->set('frio', 'nav_icon_color',   $_POST['frio_nav_icon_color']   ?? '');
+			'scheme_accent',
-		DI::config()->set('frio', 'link_color',       $_POST['frio_link_color']       ?? '');
+			'nav_bg',
-		DI::config()->set('frio', 'background_color', $_POST['frio_background_color'] ?? '');
+			'nav_icon_color',
-		DI::config()->set('frio', 'contentbg_transp', $_POST['frio_contentbg_transp'] ?? '');
+			'link_color',
-		DI::config()->set('frio', 'background_image', $_POST['frio_background_image'] ?? '');
+			'background_color',
-		DI::config()->set('frio', 'bg_image_option',  $_POST['frio_bg_image_option']  ?? '');
+			'contentbg_transp',
-		DI::config()->set('frio', 'login_bg_image',   $_POST['frio_login_bg_image']   ?? '');
+			'background_image',
-		DI::config()->set('frio', 'login_bg_color',   $_POST['frio_login_bg_color']   ?? '');
+			'bg_image_option',
+			'login_bg_image',
+			'login_bg_color'
+		] as $field) {
+			if (isset($_POST['frio_' . $field])) {
+				DI::config()->set('frio', $field, $_POST['frio_' . $field]);
+			}
+		}
+
 		DI::config()->set('frio', 'css_modified',     time());
 	}
 }
@@ -75,6 +94,7 @@ function theme_content(App $a)
 	$node_scheme = DI::config()->get('frio', 'scheme', DI::config()->get('frio', 'scheme'));
 
 	$arr['scheme']           = DI::pConfig()->get(local_user(), 'frio', 'scheme', DI::pConfig()->get(local_user(), 'frio', 'schema', $node_scheme));
+	$arr['scheme_accent']    = DI::pConfig()->get(local_user(), 'frio', 'scheme_accent'   , DI::config()->get('frio', 'scheme_accent'));
 	$arr['share_string']     = '';
 	$arr['nav_bg']           = DI::pConfig()->get(local_user(), 'frio', 'nav_bg'          , DI::config()->get('frio', 'nav_bg'));
 	$arr['nav_icon_color']   = DI::pConfig()->get(local_user(), 'frio', 'nav_icon_color'  , DI::config()->get('frio', 'nav_icon_color'));
@@ -95,6 +115,7 @@ function theme_admin(App $a)
 	$arr = [];
 
 	$arr['scheme']           = DI::config()->get('frio', 'scheme', DI::config()->get('frio', 'schema'));
+	$arr['scheme_accent']    = DI::config()->get('frio', 'scheme_accent');
 	$arr['share_string']     = '';
 	$arr['nav_bg']           = DI::config()->get('frio', 'nav_bg');
 	$arr['nav_icon_color']   = DI::config()->get('frio', 'nav_icon_color');
@@ -112,23 +133,23 @@ function theme_admin(App $a)
 function frio_form($arr)
 {
 	require_once 'view/theme/frio/php/scheme.php';
+	require_once 'view/theme/frio/theme.php';
 
 	$scheme_info = get_scheme_info($arr['scheme']);
 	$disable = $scheme_info['overwrites'];
-	if (!is_array($disable)) {
-		$disable = [];
-	}
 
-	$scheme_choices = [];
+	$schemes = [
-	$scheme_choices['---'] = DI::l10n()->t('Custom');
+		'light' => DI::l10n()->t('Light (Accented)'),
-	$files = glob('view/theme/frio/scheme/*.php');
+		'dark'  => DI::l10n()->t('Dark (Accented)'),
-	if ($files) {
+		'black' => DI::l10n()->t('Black (Accented)'),
-		foreach ($files as $file) {
+	];
-			$f = basename($file, '.php');
+
-			if ($f != 'default') {
+	$legacy_schemes = [];
-				$scheme_name = ucfirst($f);
+	foreach (glob('view/theme/frio/scheme/*.php') ?: [] as $file) {
-				$scheme_choices[$f] = $scheme_name;
+		$scheme = basename($file, '.php');
-			}
+		if (!in_array($scheme, ['default', 'light', 'dark', 'black'])) {
+			$scheme_name = ucfirst($scheme);
+			$legacy_schemes[$scheme] = $scheme_name;
 		}
 	}
 
@@ -138,13 +159,17 @@ function frio_form($arr)
 	$ctx = [
 		'$submit'           => DI::l10n()->t('Submit'),
 		'$title'            => DI::l10n()->t('Theme settings'),
-		'$scheme'           => ['frio_scheme', DI::l10n()->t('Select color scheme'), $arr['scheme'], '', $scheme_choices],
+		'$custom'           => DI::l10n()->t('Custom'),
-		'$share_string'     => ['frio_share_string', DI::l10n()->t('Copy or paste schemestring'), $arr['share_string'], DI::l10n()->t('You can copy this string to share your theme with others. Pasting here applies the schemestring'), false, false],
+		'$legacy'           => DI::l10n()->t('Legacy'),
+		'$accented'         => DI::l10n()->t('Accented'),
+		'$scheme'           => ['frio_scheme', DI::l10n()->t('Select color scheme'), $arr['scheme'], $schemes, $legacy_schemes],
+		'$scheme_accent'    => !$scheme_info['accented'] ? '' : ['frio_scheme_accent', DI::l10n()->t('Select scheme accent'), $arr['scheme_accent'], ['blue' => DI::l10n()->t('Blue'), 'red' => DI::l10n()->t('Red'), 'purple' => DI::l10n()->t('Purple'), 'green' => DI::l10n()->t('Green'), 'pink' => DI::l10n()->t('Pink')]],
+		'$share_string'     => $arr['scheme'] != '---' ? '' : ['frio_share_string', DI::l10n()->t('Copy or paste schemestring'), $arr['share_string'], DI::l10n()->t('You can copy this string to share your theme with others. Pasting here applies the schemestring'), false, false],
 		'$nav_bg'           => array_key_exists('nav_bg', $disable) ? '' : ['frio_nav_bg', DI::l10n()->t('Navigation bar background color'), $arr['nav_bg'], '', false],
 		'$nav_icon_color'   => array_key_exists('nav_icon_color', $disable) ? '' : ['frio_nav_icon_color', DI::l10n()->t('Navigation bar icon color '), $arr['nav_icon_color'], '', false],
 		'$link_color'       => array_key_exists('link_color', $disable) ? '' : ['frio_link_color', DI::l10n()->t('Link color'), $arr['link_color'], '', false],
 		'$background_color' => array_key_exists('background_color', $disable) ? '' : ['frio_background_color', DI::l10n()->t('Set the background color'), $arr['background_color'], '', false],
-		'$contentbg_transp' => array_key_exists('contentbg_transp', $disable) ? '' : ['frio_contentbg_transp', DI::l10n()->t('Content background opacity'), ($arr['contentbg_transp'] ?? 0) ?: 100, ''],
+		'$contentbg_transp' => array_key_exists('contentbg_transp', $disable) ? '' : ['frio_contentbg_transp', DI::l10n()->t('Content background opacity'), $arr['contentbg_transp'] ?? 100, ''],
 		'$background_image' => array_key_exists('background_image', $disable) ? '' : ['frio_background_image', DI::l10n()->t('Set the background image'), $arr['background_image'], $background_image_help, false],
 		'$bg_image_options_title' => DI::l10n()->t('Background image style'),
 		'$bg_image_options' => Image::get_options($arr),

view/theme/frio/css/hovercard.css

@@ -5,7 +5,6 @@
 	left: 0;
 	z-index: 1040;
 	display: none;
-  /*max-width: 276px;*/
 	max-width: 400px;
 	padding: 1px;
 	text-align: left;
@@ -18,18 +17,23 @@
 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 	white-space: normal;
 }
+
 .hovercard.top {
 	margin-top: -10px;
 }
+
 .hovercard.right {
 	margin-left: 10px;
 }
+
 .hovercard.bottom {
 	margin-top: 10px;
 }
+
 .hovercard.left {
 	margin-left: -10px;
 }
+
 .hovercard-title {
 	margin: 0;
 	padding: 8px 14px;
@@ -41,10 +45,11 @@
 	border-radius: 199px 199px 0 0;
 	display: none;
 }
+
 .hovercard-content {
-  color: #777;
 	padding: 0;
 }
+
 .hovercard > .arrow,
 .hovercard > .arrow:after {
 	position: absolute;
@@ -54,13 +59,16 @@
 	border-color: transparent;
 	border-style: solid;
 }
+
 .hovercard > .arrow {
 	border-width: 11px;
 }
+
 .hovercard > .arrow:after {
 	border-width: 10px;
 	content: "";
 }
+
 .hovercard.top > .arrow {
 	left: 50%;
 	margin-left: -11px;
@@ -69,6 +77,7 @@
 	border-top-color: rgba(0, 0, 0, 0.25);
 	bottom: -11px;
 }
+
 .hovercard.top > .arrow:after {
 	content: " ";
 	bottom: 1px;
@@ -76,6 +85,7 @@
 	border-bottom-width: 0;
 	border-top-color: #ffffff;
 }
+
 .hovercard.right > .arrow {
 	top: 50%;
 	left: -11px;
@@ -84,6 +94,7 @@
 	border-right-color: #999999;
 	border-right-color: rgba(0, 0, 0, 0.25);
 }
+
 .hovercard.right > .arrow:after {
 	content: " ";
 	left: 1px;
@@ -91,6 +102,7 @@
 	border-left-width: 0;
 	border-right-color: #ffffff;
 }
+
 .hovercard.bottom > .arrow {
 	left: 50%;
 	margin-left: -11px;
@@ -99,6 +111,7 @@
 	border-bottom-color: rgba(0, 0, 0, 0.25);
 	top: -11px;
 }
+
 .hovercard.bottom > .arrow:after {
 	content: " ";
 	top: 1px;
@@ -106,6 +119,7 @@
 	border-top-width: 0;
 	border-bottom-color: #ffffff;
 }
+
 .hovercard.left > .arrow {
 	top: 50%;
 	right: -11px;
@@ -114,6 +128,7 @@
 	border-left-color: #999999;
 	border-left-color: rgba(0, 0, 0, 0.25);
 }
+
 .hovercard.left > .arrow:after {
 	content: " ";
 	right: 1px;
@@ -125,13 +140,16 @@
 .right-aligned {
 	float: right !important;
 }
+
 .left-align {
 	float: left !important;
 }
+
 .hidden {
 	display: none !important;
 	visibility: hidden !important;
 }
+
 .hovercard h1,
 .hovercard .h1,
 .hovercard h2,
@@ -141,9 +159,11 @@
 	margin: 0;
 	padding: 0;
 }
+
 .hovercard h3 {
 	font-size: 24px;
 }
+
 .hovercard h4,
 .hovercard .h4,
 .hovercard h5,
@@ -153,23 +173,28 @@
 	margin: 0;
 	padding: 0;
 }
+
 .hovercard h4.text-center {
 	margin-top: 10px;
 	margin-bottom: 5px;
 }
+
 .hovercard sup {
 	top: 0;
 }
+
 .hovercard small,
 .hovercard .small {
 	font-size: 85%;
 }
+
 .hovercard ul,
 .hovercard ol {
 	margin: 0;
 	padding: 0;
 	margin-bottom: 0;
 }
+
 .hovercard a:hover,
 .hovercard a:active,
 .hovercard a:focus,
@@ -182,26 +207,29 @@
 .basic-content {
 	padding: 9px;
 }
+
 .image-wrapper {
-  background: #fff;
-  border: 2px #fff solid;
 	display: block;
 	overflow: hidden;
 }
+
 .image-wrapper > a,
 .image-wrapper > span {
 	background-size: 100% !important;
 }
+
 .image-wrapper.medium > a,
 .image-wrapper.medium > span {
 	content: " ";
 	display: block;
 }
+
 .image-wrapper.medium > a img {
 	height: 80px;
 	width: 80px;
 	margin-bottom: 0;
 }
+
 .hovercard {
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
@@ -214,24 +242,31 @@
 	box-shadow: 0 10px 100px rgba(0, 0, 0, 0.25);
 	border: 1px solid rgba(0, 0, 0, 0);
 }
+
 .hovercard a:hover {
 	text-decoration: none;
 }
+
 .hovercard.right > .arrow {
 	border-right-color: rgba(0, 0, 0, 0.05);
 }
+
 .hovercard.left > .arrow {
 	border-left-color: rgba(0, 0, 0, 0.05);
 }
+
 .hovercard.bottom > .arrow {
 	border-bottom-color: rgba(0, 0, 0, 0.05);
 }
+
 .hovercard.top > .arrow {
 	border-top-color: rgba(0, 0, 0, 0.05);
 }
+
 .advance-hovercard + .hovercard {
 	max-width: 445px;
 }
+
 .advance-hovercard + .hovercard .hovercard-content {
 	padding: 5px;
 }
@@ -239,6 +274,7 @@
 .basic-hovercard + .hovercard {
 	max-width: 445px;
 }
+
 .basic-hovercard + .hovercard .hovercard-content {
 	padding: 5px;
 }
@@ -246,57 +282,64 @@
 .hover-card-header {
 	width: 100%;
 }
+
 .hover-card-header h4 {
 	display: block;
 
 }
+
 .hover-card-header h4 a {
 	font-size: 18px;
 	font-weight: bold;
 	letter-spacing: 0.03rem;
 }
+
 .hover-card-details {
 	width: 100%;
 }
+
 .hover-card-pic {
 	margin-top: 0px;
 	display: block;
 }
+
 .hover-card-pic .image-wrapper {
 	margin-right: 0.75em;
 	float: left;
 	position: relative;
 }
+
 .hover-card-content {
 	list-style-type: none;
 	width: 100%;
 	display: block;
-  background: #fff;
 	padding: 0.3em 0 1em;
 }
+
 .hover-card-content .profile-details {
 	font-size: 13px;
 }
+
 .hover-card-content .profile-addr {
 	overflow: hidden;
 	display: block;
 	text-overflow: ellipsis;
 }
-.hovercard-content .hover-card-details .hover-card-content   .profile-details > .profile-network a {
+
-    color: #777;
-}
 .hover-card-actions {
 	display: flex;
 }
+
 .hover-card-actions-connection {
 	margin-left: 10px;
 }
+
 .hovercard .hovercard-content .hover-card-actions a.btn {
 	display: inline-block;
 }
+
 .hover-card-footer {
 	background-color: #f7f7f7;
 	border-top: 1px solid #ebebeb;
 	padding: 0 10px;
 }
-

view/theme/frio/css/mod_events.css

@@ -1,118 +0,0 @@
-/**
- * @file view/theme/frio/css/mod_event.css
- */
-
-/**
- * The different views of js fullcalendar
- */
-#fc-header {
-    margin-top: 20px;
-    margin-bottom: 10px;
-}
-#fc-header-left,
-#fc-header-right,
-#event-calendar-title {
-    display: inline-block;
-}
-#fc-title {
-    margin: 0;
-    padding-left: 20px;
-
-}
-#fc-header-right {
-    margin-top: -4px;
-}
-#fc-header-right .dropdown > button {
-    color: inherit;
-}
-#event-calendar-title {
-    vertical-align: middle;
-}
-#event-calendar-views {
-    padding: 6px 9px;
-    font-size: 14px
-}
-.fc .fc-toolbar {
-    display: none;
-}
-.fc .fc-month-view td.fc-widget-content,
-.fc .fc-list-view,
-.fc .fc-list-view .fc-list-table td,
-.fc .fc-body td {
-    border-style: none;
-}
-.fc td.fc-widget-header,
-.fc th.fc-widget-header {
-    border-left: none;
-    border-right: none;
-    border-top: none;
-}
-.fc .fc-month-view td.fc-day {
-    border-left: none;
-    border-right: none;
-    border-bottom: 1px solid;
-    padding: 0 6px;
-}
-.fc .fc-day-grid-container .fc-row {
-    border-bottom: 1px solid;
-    border-color: #ddd;
-}
-.fc .fc-day-grid-event .fc-content {
-    /*white-space: normal;*/
-}
-.fc tr td.fc-today {
-    border-style: none;
-}
-.fc .fc-month-view .fc-content .fc-title .item-desc {
-    font-size: 11px;
-}
-.fc .fc-view-container {
-    margin-top: 25px;
-}
-.fc .fc-list-view td {
-    padding: 0;
-}
-#events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
-    float: left;
-    font-size: 12px;
-}
-.fc .fc-event {
-    background-color: transparent;
-    background-color: #E3F2FD;
-    border: 1px solid #BBDEFB;
-    color: #555;
-}
-.fc .fc-month-view .fc-time,
-.fc .fc-listMonth-view .fc-list-item-time,
-.fc .fc-listMonth-view .fc-list-item-marker,
-.fc .fc-listMonth-view .fc-widget-header {
-    display: none;
-}
-.fc .fc-listMonth-view .fc-list-item:hover td {
-    background: transparent;
-    cursor: pointer;
-}
-.fc .fc-listMonth-view .seperator {
-    margin-left: 30px;
-    width: 60px;
-}
-
-/**
- * The event-card
- */
-.event-card {
-    width: auto;
-}
-.event-card .event-label,
-.event-card .location-label {
-    font-weight: bold;
-}
-.popover.event-card .event-card-basic-content {
-    margin-top: 0;
-    padding: 9px;
-    padding-left: 0px;
-}
-.event-card .event-hover-location .location {
-    color: #777;
-    font-size: 13px;
-}

view/theme/frio/css/style.css

@@ -1,27 +1,8 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
 /*
     Created on : 17.02.2016, 23:55:45
     Author     : rabuzarus
 */
 
-/* Imports */
-/*@import url("frameworks/bootstrap/css/bootstrap.min.css");
-@import url("frameworks/bootstrap/css/bootstrap-theme.min.css");
-@import url("frameworks/font-awesome/css/font-awesome.min.css");
-@import url("frameworks/jasny/css/jasny-bootstrap.min.css");
-@import url("frameworks/bootstrap-select/css/bootstrap-select.min.css");
-@import url("frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css");
-@import url("frameworks/ekko-lightbox/ekko-lightbox.min.css");
-@import url("frameworks/justifiedGallery/justifiedGallery.min.css");
-@import url("frameworks/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css");
-@import url("font/open_sans/open-sans.css");
-@import url("css/hovercard.css");*/
-
-
 body {
     padding-top: 110px;
     background-color: $background_color;
@@ -29,8 +10,7 @@ body {
     background-size: $background_size_img;
     background-repeat: $background_repeat;
     background-attachment: fixed;
-    color: #777;
+    color: $font_color;
-    /*color: #555;*/
     font-family: 'Open Sans',sans-serif;
 }
 body.minimal {
@@ -38,8 +18,6 @@ body.minimal {
 }
 
 body a {
-    /*color: #555;*/
-    /*color: #6fdbe8;*/
     color: $link_color;
     text-decoration: none;
 }
@@ -203,7 +181,7 @@ blockquote {
 
 .btn-default {
     background: #ededed;
-    color: #7a7a7a;
+    color: $font_color;
 }
 .btn-sm {
     padding: 4px 8px;
@@ -289,7 +267,6 @@ blockquote {
 }
 .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
     padding: .275rem .75rem;
-    /*font-size: .875rem;*/
     line-height: 1.5;
     height: 30px;
     border-radius: .2rem;
@@ -418,7 +395,6 @@ header #banner #logo-img,
 }
 .topbar .dropdown-header .dropdown-header-link a,
 .topbar .dropdown-header .dropdown-header-link .btn-link {
-    /*color: #6fdbe8!important;*/
     color: $link_color !important;
     font-size: 12px;
     font-weight: 400
@@ -440,12 +416,15 @@ nav.navbar .nav > li > button
 {
 	color: $nav_icon_color;
 }
+#topbar-first .nav > .open > a,
+#topbar-first .nav > .open > button
+{
+	background-color: $nav_bg;
+}
 #topbar-first .nav > li > a:hover,
 #topbar-first .nav > li > a:focus,
-#topbar-first .nav > li > button:hover,
+#topbar-first .nav > li > button:not(#main-menu):hover,
-#topbar-first .nav > li > button:focus,
+#topbar-first .nav > li > button:not(#main-menu):focus,
-#topbar-first .nav > .open > a,
-#topbar-first .nav > .open > button,
 nav.navbar .nav > li > a:hover,
 nav.navbar .nav > li > a:focus
 nav.navbar .nav > li > button:hover,
@@ -596,11 +575,11 @@ nav.navbar .nav > li > button:focus
     max-height: 400px;
 }
 #topbar-first #nav-notifications-menu a {
-    color: #555;
+    color: $font_color_darker;
     padding: 0;
 }
 #topbar-first #nav-notifications-menu li.notif-entry {
-    color: #555;
+    color: $font_color_darker;
     padding: 10px;
     border-bottom: 1px solid #eee;
     position: relative;
@@ -614,23 +593,11 @@ nav.navbar .nav > li > button:focus
 }
 #topbar-first #nav-notifications-menu li.notif-entry:hover {
     background-color: #f7f7f7;
-    /*border-left: 3px solid #6fdbe8;*/
     border-left: 3px solid $link_color;
 }
-/*#topbar-first #nav-notifications-menu i.accepted {
-    color: #6fdbe8!important
-}
-#topbar-first #nav-notifications-menu i.declined {
-    color: #ff8989!important
-}*/
 #topbar-first #nav-notifications-menu li.placeholder {
     border-bottom: none
 }
-#topbar-first #nav-notifications-menu .media .media-body {
-    font-size: 13px!important;
-    font-weight: 600!important;
-    cursor: pointer;
-}
 #topbar-first #nav-notifications-menu .media .media-body .contactname {
     font-weight: bold;
 }
@@ -664,14 +631,6 @@ nav.navbar .nav > li > button:focus
 #myNavmenu li.nav-sitename {
     font-weight: bold;
 }
-#topbar-first .dropdown.account > a,
-#topbar-first .dropdown.account.open > a,
-#topbar-first .dropdown.account > button,
-#topbar-first .dropdown.account.open > button,
-#topbar-first .dropdown.account > :hover,
-#topbar-first .dropdown.account.open > :hover {
-    background-color: $nav_bg;
-}
 #topbar-first .dropdown.account li#nav-sitename {
     padding-left: 15px;
     padding-right: 15px;
@@ -710,7 +669,7 @@ nav.navbar .nav > li > button:focus
     -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
     box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
-    border-bottom: 1px solid #d4d4d4
+    border-bottom: 1px solid #d4d4d4;
 }
 #topbar-second > .container {
     height: 100%;
@@ -757,64 +716,6 @@ nav.navbar .nav > li > button:focus
     display: none;
     cursor: pointer
 }
-#topbar-second .nav>li>a {
-    padding: 6px 13px 0;
-    text-decoration: none;
-    text-shadow: none;
-    font-weight: 600;
-    font-size: 10px;
-    text-transform: uppercase;
-    text-align: center;
-    min-height: 49px
-}
-#topbar-second .nav>li>a:hover,
-#topbar-second .nav>li>a:active,
-#topbar-second .nav>li>a:focus {
-    /*border-bottom: 3px solid #6fdbe8;*/
-    border-bottom: 3px solid $link_color;
-    background-color: #f7f7f7;
-    color: #555;
-    text-decoration: none
-}
-#topbar-second .nav>li>a i {
-    font-size: 14px
-}
-#topbar-second .nav>li>a .caret {
-    border-top-color: #7a7a7a
-}
-#topbar-second .nav>li>ul>li>a {
-    border-left: 3px solid #fff;
-    background-color: #fff;
-    color: #555
-}
-#topbar-second .nav>li>ul>li>a:hover,
-#topbar-second .nav>li>ul>li>a.active {
-    /*border-left: 3px solid #6fdbe8;*/
-    border-left: 3px solid $link_color;
-    background-color: #f7f7f7;
-    color: #555
-}
-#topbar-second .nav>li.active>a {
-    min-height: 46px
-}
-#topbar-second .nav>li>a#space-menu {
-    padding-right: 13px;
-    border-right: 1px solid #ededed
-}
-#topbar-second .nav>li>a#search-menu {
-    padding-top: 15px
-}
-#topbar-second .nav>li>a:hover,
-#topbar-second .nav .open>a,
-#topbar-second .nav>li.active {
-    /*border-bottom: 3px solid #6fdbe8;*/
-    border-left: 3px solid $link_color;
-    background-color: #f7f7f7;
-    color: #555
-}
-#topbar-second .nav>li.active>a:hover {
-    border-bottom: none
-}
 #topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p {
     color: #bebebe;
     font-size: 11px;
@@ -864,10 +765,10 @@ nav.navbar .nav > li > button:focus
     border-bottom: none;
     margin: 9px 1px!important
 }
-.nav-pills .dropdown-menu li,
+.nav-pills .dropdown-menu li > a,
-.nav-tabs .dropdown-menu li,
+.nav-tabs .dropdown-menu li > a,
-.account .dropdown-menu li,
+.account .dropdown-menu li > a,
-.contact-photo-wrapper .dropdown-menu li {
+.contact-photo-wrapper .dropdown-menu li > a {
     border-left: 3px solid $nav_bg;
 }
 .nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link,
@@ -891,39 +792,20 @@ nav.navbar .nav > li > button:focus
     display: inline-block;
     width: 14px
 }
-.nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover,
+.nav-pills .dropdown-menu li > a:hover,
-.nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover,
+.nav-tabs .dropdown-menu li > a:hover,
-.account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover,
+.account .dropdown-menu li > a:hover,
-.contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover,
+.contact-photo-wrapper .dropdown-menu li > a:hover,
-.nav-pills .dropdown-menu li a:visited, .nav-pills .dropdown-menu li .btn-link:visited,
+.nav-pills .dropdown-menu li.selected a,
-.nav-tabs .dropdown-menu li a:visited, .nav-tabs .dropdown-menu li .btn-link:visited,
+.nav-tabs .dropdown-menu li.selected a,
-.account .dropdown-menu li a:visited, .account .dropdown-menu li .btn-link:visited,
+.account .dropdown-menu li.selected a,
-.contact-photo-wrapper .dropdown-menu li a:visited, .contact-photo-wrapper .dropdown-menu li .btn-link:visited,
+.contact-photo-wrapper .dropdown-menu li.selected a {
-.nav-pills .dropdown-menu li a:hover, .nav-pills .dropdown-menu li .btn-link:hover,
-.nav-tabs .dropdown-menu li a:hover, .nav-tabs .dropdown-menu li .btn-link:hover,
-.account .dropdown-menu li a:hover, .account .dropdown-menu li .btn-link:hover,
-.contact-photo-wrapper .dropdown-menu li a:hover, .contact-photo-wrapper .dropdown-menu li .btn-link:hover,
-.nav-pills .dropdown-menu li a:focus, .nav-pills .dropdown-menu li .btn-link:focus,
-.nav-tabs .dropdown-menu li a:focus, .nav-tabs .dropdown-menu li .btn-link:focus,
-.account .dropdown-menu li a:focus, .account .dropdown-menu li .btn-link:focus,
-.contact-photo-wrapper .dropdown-menu li a:focus, .contact-photo-wrapper .dropdown-menu li .btn-link:focus {
-    background: 0 0
-}
-.nav-pills .dropdown-menu li:hover,
-.nav-tabs .dropdown-menu li:hover,
-.account .dropdown-menu li:hover,
-.contact-photo-wrapper .dropdown-menu li:hover,
-.nav-pills .dropdown-menu li.selected,
-.nav-tabs .dropdown-menu li.selected,
-.account .dropdown-menu li.selected,
-.contact-photo-wrapper .dropdown-menu li.selected {
-    /*border-left: 3px solid #6fdbe8;*/
     border-left: 3px solid $link_color;
-    color: #fff!important;
+    color: #fff;
-    background-color: $menu_background_hover_color !important;
+    background: $menu_background_hover_color;
 }
 #photo-edit-link-wrap {
-    color: #555;
+    color: $font_color_darker;
     margin-bottom: 15px;
 }
 
@@ -940,8 +822,7 @@ nav.navbar .nav > li > button:focus
 aside .widget,
 .nav-container .widget {
     border: none;
-    color: #777;
+    color: $font_color;
-    /*background-color: #fff;*/
     background-color: rgba(255, 255, 255, $contentbg_transp);
     box-shadow: 0 0 3px #dadada;
     -webkit-box-shadow: 0 0 3px #dadada;
@@ -968,7 +849,6 @@ aside .widget ul,
     margin-bottom: 0px;
     margin-left: -10px;
     margin-right: -10px;
-    /*padding-left: 10px;*/
     list-style: none;
 }
 
@@ -983,16 +863,14 @@ aside .widget li:hover,
 aside .widget li.selected,
 .nav-container .widget li:hover {
     z-index: 2;
-    color: #555;
+    color: $font_color_darker;
-    /*background-color: #f7f7f7;*/
     background-color: rgba(247, 247, 247, $contentbg_transp);
-    /*border-left: 3px solid #6fdbe8!important;*/
     border-left: 3px solid $link_color !important;
     padding-left: 17px;
 }
 aside .widget li a,
 aside .widget li a:hover {
-    color: #555;
+    color: $font_color_darker;
 }
 
 /* forumlist widget */
@@ -1166,12 +1044,12 @@ aside .vcard #wallmessage-link {
     font-weight: bold;
 }
 #nav-short-info .contact-wrapper .media-heading a {
-    color: #555;
+    color: $font_color_darker;
     font-size: 14px !important;
 }
 #vcard-short-desc > .vcard-short-addr,
 #nav-short-info .contact-wrapper #contact-entry-url-network {
-    color: #777;
+    color: $font_color;
     font-size: 12px;
 }
 .network-content-wrapper > #viewcontact_wrapper-network,
@@ -1207,16 +1085,16 @@ div#sidebar-group-list {
 }
 
 .group-edit-tool {
-    color: #555;
+    color: $font_color_darker;
 }
 
 .faded-icon {
-    color: #555;
+    color: $font_color_darker;
     opacity: 0.3;
     transition: all 0.1s ease-in-out;
 }
 .faded-icon:hover {
-    color: #555;
+    color: $font_color_darker;
     opacity: 1;
 }
 .icon-padding {
@@ -1253,8 +1131,6 @@ aside #group-sidebar li .group-edit-tool:first-child {
 .contact-block-div {
     float: left;
     margin: 0px 5px 5px 0px;
-/*    height: 90px;
-    width: 90px;*/
 }
 .contact-block-link {
 
@@ -1285,9 +1161,6 @@ section #jotOpen {
 #jot-content {
     display: none;
 }
-.jothidden {
-    /*display: none;*/
-}
 .modal #jot-sections {
     max-height: calc(100vh - 22px);
 }
@@ -1306,14 +1179,13 @@ section #jotOpen {
 #jot-modal #item-Q0,
 #jot-modal #profile-jot-acl-wrapper,
 #jot-modal #acl-wrapper {
-    overflow: hidden;
     display: flex;
     flex: auto;
     flex-direction: column;
 }
 #jot-modal .modal-header a, #jot-modal .modal-header .btn-link,
 #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link {
-    color: #555;
+    color: $font_color_darker;
     text-transform: capitalize;
 }
 #jot-modal .modal-header {
@@ -1334,9 +1206,6 @@ section #jotOpen {
     overflow-y: auto !important;
     overflow-y: overlay !important;
 }
-/*#jot-attachment-preview {
-    display: none;
-}*/
 #jot-text-wrap .preview textarea {
     width: 100%;
 }
@@ -1350,7 +1219,7 @@ section #jotOpen {
     box-shadow: none;
     border-radius: 0 0 4px 4px;
     background: #fff;
-    color: #555;
+    color: $font_color_darker;
 }
 textarea#profile-jot-text:focus + #preview_profile-jot-text,
 textarea.comment-edit-text:focus + .comment-edit-form .preview {
@@ -1432,7 +1301,7 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
     padding: 0;
 }
 .fbrowser .breadcrumb > li:last-of-type a{
-    color: #777;
+    color: $font_color;
     pointer-events: none;
     cursor: default;
 }
@@ -1462,14 +1331,14 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
 }
 .fbrowser .folders li:hover {
     z-index: 2;
-    color: #555;
+    color: $font_color_darker;
     background-color: rgba(247, 247, 247, $contentbg_transp);
-    border-left: 3px solid $link_color !important;
+    border-left: 3px solid $link_color;
     padding-left: 17px;
 }
 .fbrowser .folders li a,
 .fbrowser .folders li a:hover {
-    color: #555;
+    color: $font_color_darker;
     font-size: 13px;
 }
 .fbrowser .folders + .list {
@@ -1506,7 +1375,6 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
 */
 .panel {
     border: none;
-    /*background-color: #fff;*/
     background-color: rgba(255,255,255,$contentbg_transp);
     box-shadow: 0 0 3px #dadada;
     -webkit-box-shadow: 0 0 3px #dadada;
@@ -1523,9 +1391,6 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
 .panel .panel-body {
     word-wrap: break-word;
 }
-.panel .panel-body .wall-item-content {
-    color: #555;
-}
 .tread-wrapper .media {
     overflow: visible;
     word-wrap: break-word;
@@ -1536,11 +1401,11 @@ aside .panel-body {
 
 /* Thread hover effects */
 .desktop-view .wall-item-container .wall-item-content a,
-.desktop-view .wall-item-container a,
+.desktop-view .wall-item-name,
 .desktop-view .wall-item-container .fakelink,
 .desktop-view .toplevel_item .fakelink,
 .desktop-view .toplevel_item .wall-item-container .wall-item-responses a {
-    color: #555;
+    color: $font_color;
     -webkit-transition: all 0.25s ease-in-out;
     -moz-transition: all 0.25s ease-in-out;
     -o-transition: all 0.25s ease-in-out;
@@ -1555,7 +1420,6 @@ aside .panel-body {
 .wall-item-container:hover .wall-item-content a,
 .wall-item-container:hover .wall-item-name,
 .wall-item-container:hover .wall-item-location a {
-    /*color: #6fdbe8;*/
     color: $link_color;
     -webkit-transition: all 0.25s ease-in-out;
     -moz-transition: all 0.25s ease-in-out;
@@ -1655,7 +1519,7 @@ aside .panel-body {
 .media .media-body h4.media-heading {
     font-size: 14px;
     font-weight: 500;
-    color: #555;
+    color: $font_color_darker;
 }
 .media .media-body .addional-info a, .media .media-body h5.media-heading > a {
     display: block;
@@ -1738,11 +1602,11 @@ aside .panel-body {
     border-radius: 3px;
 }
 .wall-item-body .body-attach > a {
-    color: #555;
+    color: $font_color_darker;
     display: inline-block;
 }
 .wall-item-body .body-attach > a div {
-    color: #555;
+    color: $font_color_darker;
     width: 20px;
 }
 
@@ -1832,7 +1696,7 @@ code > .hl-main {
 }
 
 .wall-item-tags a {
-    color: #555;
+    color: $font_color_darker;
 }
 
 .wall-item-tags a:hover {
@@ -1855,7 +1719,7 @@ code > .hl-main {
 }
 .wall-item-actions a, .wall-item-actions button {
     font-size: 13px;
-    color: #555;
+    color: $font_color_darker;
 }
 .wall-item-actions .active {
     font-weight: bold;
@@ -1878,7 +1742,7 @@ code > .hl-main {
     text-transform: capitalize;
 }
 .wall-item-actions button:hover {
-    color: #555;
+    color: $font_color_darker;
     text-decoration: underline;
 }
 .wall-item-actions .separator {
@@ -1923,7 +1787,6 @@ code > .hl-main {
 wall-item-comment-wrapper.well {
     border: none;
     box-shadow: none;
-    /*background-color: #ededed;*/
     background-color: rgba(237, 237, 237, $contentbg_transp);
     background-image: none;
     margin-bottom: 1px;
@@ -1967,7 +1830,8 @@ wall-item-comment-wrapper.well hr {
     padding: 10px;
     border-top: 1px solid rgba(255, 255, 255, 0.8);
     background-color: rgba(0, 0, 0, 0.03);
-    border-radius: 0 0 10px 10px;
+    border-radius: 0 0 4px 4px;
+	margin-bottom: 0;
 }
 
 .comment-fake-form {
@@ -1996,7 +1860,6 @@ wall-item-comment-wrapper.well hr {
 
 /* acpopup  + textcompletion*/
 .acpopup {
-    /* max-height: 150px; */
     background-color: #ffffff;
     border-radius: 4px;
     overflow: auto;
@@ -2004,13 +1867,12 @@ wall-item-comment-wrapper.well hr {
     box-shadow: 0 6px 12px rgba(0,0,0,.175);
 }
 nav .acpopup {
-    /*top: 35px !important;*/
     margin-left: -23px;
 }
 /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns
  at the beginning of this file to get rid of the !important */
 .textcomplete-item > a {
-    color: #555 !important;
+    color: $font_color_darker !important;
     padding: 5px 20px !important;
 }
 .textcomplete-item.active > a {
@@ -2028,27 +1890,6 @@ img.acpopup-img {
 
 
 /* The wall-item thread levels */
-/*.wall-item-container.thread_level_3 {
-  margin-left: 80px;
-  width: calc(100% - 90px);
-}
-.wall-item-container.thread_level_4 {
-  margin-left: 95px;
-  width: calc(100% - 105px);
-}
-.wall-item-container.thread_level_5 {
-  margin-left: 110px;
-  width: calc(100% - 120px);
-}
-.wall-item-container.thread_level_6 {
-  margin-left: 125px;
-  width: calc(100% - 135px);
-}
-.wall-item-container.thread_level_7 {
-  margin-left: 140px;
-  width: calc(100% - 150px);
-}*/
-
 .wall-item-container.thread_level_3,
 .wall-item-container.thread_level_4,
 .wall-item-container.thread_level_5,
@@ -2081,7 +1922,6 @@ moved it to the nav through js */
 .tabbar,
 .tabbar > li {
     height: 100%;
-    /*margin-left: -15px;*/
     padding: 0;
 }
 #tabmenu .search-heading {
@@ -2100,20 +1940,14 @@ ul.tabs li {
     float: left;
     margin: 0;
     padding: 0;
-    /*border-bottom: 0 solid #6fdbe8;*/
     border-bottom: 0 solid $link_color;
     font-size: 13px;
     height: 102%;
     transition: all .15s ease;
 }
-/*ul.tabs.visible-xs > li.active {
-    min-width: 150px;  This is a workaround to make the topbar-second dropdown better visible on mobile. We need something better here
-}*/
 ul.tabs li a {
     margin-left: 10px;
     margin-right: 10px;
-    /*color: #6fdbe8;*/
-    color: $link_color !important;
 }
 ul.tabs li:hover, ul.tabs li.active {
     border-bottom-width: 4px;
@@ -2158,13 +1992,12 @@ ul.dropdown-menu li:hover {
 .media .location,
 .media .location a {
     font-size: 11px;
-    color: #bebebe;
+    color: $font_color_darker;
 }
 .media-list > li {
     padding: 10px;
     border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
     position: relative;
-/*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
     border-left: 3px solid rgba(255,255,255,0);
     font-size: 12px;
 }
@@ -2177,7 +2010,6 @@ ul.dropdown-menu li:hover {
 
 /* Forms */
 .form-control {
-    border: 2px solid #ededed;
     box-shadow: none;
 }
 .form-control:focus {
@@ -2185,11 +2017,31 @@ ul.dropdown-menu li:hover {
     box-shadow: none;
 }
 
+.radio label::before,
+.checkbox label::before {
+	background-color: $background_color;
+}
+.radio label::after {
+	background-color: $link_color;
+}
+.checkbox label::after {
+	color: $link_color;
+}
+
 .checkbox input[type="checkbox"]:focus + label::before,
 .radio input[type="radio"]:focus + label::before {
 	outline-color: $link_hover_color;
 }
 
+.help-block {
+	color: $font_color_darker;
+}
+
+input[type=range].form-control {
+	padding-left: 0;
+	padding-right: 0;
+}
+
 /* Search form */
 .form-control.form-search {
     border-radius: 30px;
@@ -2232,12 +2084,10 @@ ul.dropdown-menu li:hover {
     padding-bottom: 20px;
     margin-bottom: 20px;
     border: none;
-    /*background-color: #fff;*/
     background-color: rgba(255,255,255,$contentbg_transp);
     border-radius: 4px;
     position: relative;
-    /*overflow: hidden;*/
+    color: $font_color_darker;
-    color: #555;
     box-shadow: 0 0 3px #dadada;
     -webkit-box-shadow: 0 0 3px #dadada;
     -moz-box-shadow: 0 0 3px #dadada;
@@ -2262,12 +2112,10 @@ section > .generic-page-wrapper, .videos-content-wrapper,
     padding-bottom: 20px;
     margin-bottom: 20px;
     border: none;
-    /*background-color: #fff;*/
     background-color: rgba(255,255,255,$contentbg_transp);
     border-radius: 4px;
     position: relative;
-    /*overflow: hidden;*/
+    color: $font_color_darker;
-    color: #555;
     box-shadow: 0 0 3px #dadada;
     -webkit-box-shadow: 0 0 3px #dadada;
     -moz-box-shadow: 0 0 3px #dadada;
@@ -2312,12 +2160,6 @@ ul.viewcontact_wrapper {
 ul.viewcontact_wrapper > li {
     padding-left: 15px;
 }
-.contact-wrapper {
-/*    padding: 10px;
-    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
-    position: relative;*/
-    /*border-left: 3px solid white;*/
-}
 .contact-wrapper .contact-photo-wrapper button {
     padding: 0;
 }
@@ -2356,7 +2198,7 @@ ul.viewcontact_wrapper > li {
 }
 
 .contact-entry-desc {
-    color: #555;
+    color: $font_color_darker;
 }
 .contact-entry-checkbox {
     margin-top: -20px;
@@ -2373,7 +2215,7 @@ ul.viewcontact_wrapper > li {
 .contact-wrapper .contact-action-link:hover,
 .textcomplete-item .contact-wrapper .contact-action-link {
     padding: 0 5px;
-    color: #555;
+    color: $font_color_darker;
     border: 0;
 }
 .contact-wrapper .contact-action-link {
@@ -2406,20 +2248,11 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 }
 #contact-edit-status-wrapper {
     border: none;
-    background-color: #E1F5FE;
+    background-color: rgba(225, 245, 254, $contentbg_transp);
     margin: 15px -15px;
 }
-#contact-edit-tools {
-    margin-left: -15px;
-    margin-right: -15px;
-}
-#contact-edit-tools > .panel {
-    padding-left: 15px;
-    padding-right: 15px;
-}
 #contact-edit-settings {
     display: block;
-    margin: 0;
 }
 
 /* directory page */
@@ -2504,14 +2337,9 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     overflow-y: auto;
     max-height: calc(100vh - 400px);
     max-height: auto;
-    /*height: 500px;*/
     margin-bottom: 0px;
     padding: 0 15px;
 }
-#mail-conversation.can-reply {
-/*    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;*/
-}
 .mail-conv-wrapper .media .contact-photo-wrapper img {
     height: 48px;
     width: 48px;
@@ -2524,10 +2352,6 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     display:none;
 }
 .mail-thread #prvmail-message-label textarea {
-/*    border-top: none;
-    margin-top: -10px;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;*/
     max-height: 120px;
 }
 .mail-conv-wrapper {
@@ -2538,7 +2362,6 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     height: calc(100vh - 150px);
 }
 #message-preview {
-    /*padding: 0 10px;*/
     height: calc(100% - 20px);
 }
 #message-preview ul {
@@ -2595,9 +2418,6 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     color: $link_hover_color;
     text-decoration: none;
 }
-/*.event-date-wrapper.medium .event-hover-short-month {
-    color: $link_color;
-}*/
 .event-wrapper .event-owner {
   margin-bottom: 15px;
 }
@@ -2625,7 +2445,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     padding-top: 15px;
 }
 #event-nav a {
-    color: #555;
+    color: $font_color_darker;
 }
 #event-edit-form-wrapper #event-edit-time {
     padding: 10px 0;
@@ -2682,7 +2502,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     width: 100%;
     padding: 0 5px 0 15px;
     box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset;
-    color: #777;
+    color: $font_color;
     position: relative;
 }
 .event-card .event-card-content .event-map-btn {
@@ -2693,7 +2513,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
 }
 .event-card .event-card-title {
     font-size: 14px;
-    color: #555;
+    color: $font_color_darker;
     line-height: 15px;
     font-weight: bold;
     margin: 0;
@@ -2738,7 +2558,6 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     top: 50%;
     transform: translateZ(0);
     transition: opacity .2s;
-    /*width: 27px;*/
     width: 100px;
     z-index: 11;
     font-size: 64px;
@@ -2774,7 +2593,7 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
     position: relative;
 }
 .photo-comment-wrapper .wall-item-content {
-    color: #555;
+    color: $font_color_darker;
     font-size: 13px;
 }
 .photo-comment-wrapper .comment-wwedit-wrapper,
@@ -2841,8 +2660,7 @@ details.profile-jot-net[open] summary:before {
 /* Emulates Bootstrap display */
 .settings-block {
     margin: 0 0 5px;
-    color: #333;
+    background-color: rgba(255, 255, 255, $contentbg_transp);
-    background-color: rgba(255,255,255,0.95);
     border-radius: 4px;
     padding: 10px 15px;
     box-shadow: 0 0 3px #dadada;
@@ -2927,7 +2745,7 @@ ul.notif-network-list > li {
 .intro-wrapper button.intro-action-link:hover {
     padding-right: 5px;
     padding-left: 5px;
-    color: #555;
+    color: $font_color_darker;
 }
 ul li:hover .intro-wrapper button.intro-action-link {
     opacity: 0.8;
@@ -2938,13 +2756,11 @@ ul li:hover .intro-wrapper button.intro-action-link:hover {
 }
 .intro-action-buttons {
     margin-top: 15px;
-    /*display: none;*/
     max-height: 0px;
     overflow: hidden;
     transition: max-height 0.1s ease-out;
 }
 ul.notif-network-list > li:hover .intro-action-buttons {
-    /*display: block;*/
     max-height: 30px;
     transition: max-height 0.1s ease-in;
 }
@@ -2976,7 +2792,7 @@ ul.notif-network-list li.unseen {
 .notif-item .notif-desc-wrapper a {
     height: 100%;
     display: block;
-    color: #555;
+    color: $font_color_darker;
     font-size: 13px;
     font-weight: 600;
 }
@@ -2994,12 +2810,10 @@ little modifications to emulate a standard page template */
     margin: 0;
     margin-bottom: 20px;
     border: none;
-    /*background-color: #fff;*/
     background-color: rgba(255,255,255,$contentbg_transp);
     border-radius: 4px;
     position: relative;
-    /*overflow: hidden;*/
+    color: $font_color_darker;
-    color: #555;
     box-shadow: 0 0 3px #dadada;
     -webkit-box-shadow: 0 0 3px #dadada;
     -moz-box-shadow: 0 0 3px #dadada;
@@ -3073,7 +2887,7 @@ section.help-content-wrapper li {
     margin-top: 2px;
     border: 1px solid #cccccc;
     border-radius: 3px;
-    background-color: #fff;
+	background-color: $background_color;
     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
@@ -3092,14 +2906,14 @@ section.help-content-wrapper li {
     padding-left: 3px;
     padding-top: 1px;
     font-size: 11px;
-    color: #555555;
+    color: $link_color;
 }
 #adminpage .addon .desc {
     padding-left: 10px;
 }
 .adminpage .admin-settings-action-link,
 .adminpage .admin-settings-action-link:hover {
-    color: #555;
+    color: $font_color_darker;
 }
 .adminpage .admin-settings-action-link:hover {
     opacity: 1;
@@ -3272,6 +3086,11 @@ body .tread-wrapper .hovercard:hover .hover-card-content a {
     display: none;
 }
 
+.pagination li > a,
+.pager li > a {
+	background-color: rgba(255, 255, 255, $contentbg_transp);
+}
+
 /*
  * some temporary workarounds until this will solved
  * elsewhere (e.g. new templates)
@@ -3388,6 +3207,117 @@ section .profile-match-wrapper {
     margin-top: 15px !important;
 }
 
+/**
+ * The different views of js fullcalendar
+ */
+#fc-header {
+	margin-top: 20px;
+	margin-bottom: 10px;
+}
+#fc-header-left,
+#fc-header-right,
+#event-calendar-title {
+	display: inline-block;
+}
+#fc-title {
+	margin: 0;
+	padding-left: 20px;
+
+}
+#fc-header-right {
+	margin-top: -4px;
+}
+#fc-header-right .dropdown > button {
+	color: inherit;
+}
+#event-calendar-title {
+	vertical-align: middle;
+}
+#event-calendar-views {
+	padding: 6px 9px;
+	font-size: 14px
+}
+.fc .fc-toolbar {
+	display: none;
+}
+.fc .fc-month-view td.fc-widget-content,
+.fc .fc-list-view,
+.fc .fc-list-view .fc-list-table td,
+.fc .fc-body td {
+	border-style: none;
+}
+.fc td.fc-widget-header,
+.fc th.fc-widget-header {
+	border-left: none;
+	border-right: none;
+	border-top: none;
+}
+.fc .fc-month-view td.fc-day {
+	border-left: none;
+	border-right: none;
+	border-bottom: 1px solid;
+	padding: 0 6px;
+}
+.fc .fc-day-grid-container .fc-row {
+	border-bottom: 1px solid;
+	border-color: #ddd;
+}
+.fc tr td.fc-today {
+	border-style: none;
+}
+.fc .fc-month-view .fc-content .fc-title .item-desc {
+	font-size: 11px;
+}
+.fc .fc-view-container {
+	margin-top: 25px;
+}
+.fc .fc-list-view td {
+	padding: 0;
+}
+#events-calendar.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
+	float: left;
+	font-size: 12px;
+}
+.fc .fc-event {
+	background-color: #E3F2FD;
+	border: 1px solid #BBDEFB;
+	color: $font_color_darker;
+}
+.fc .fc-month-view .fc-time,
+.fc .fc-listMonth-view .fc-list-item-time,
+.fc .fc-listMonth-view .fc-list-item-marker,
+.fc .fc-listMonth-view .fc-widget-header {
+	display: none;
+}
+.fc .fc-listMonth-view .fc-list-item:hover td {
+	background: transparent;
+	cursor: pointer;
+}
+.fc .fc-listMonth-view .seperator {
+	margin-left: 30px;
+	width: 60px;
+}
+
+/**
+ * The event-card
+ */
+.event-card {
+	width: auto;
+}
+.event-card .event-label,
+.event-card .location-label {
+	font-weight: bold;
+}
+.popover.event-card .event-card-basic-content {
+	margin-top: 0;
+	padding: 9px;
+	padding-left: 0px;
+}
+.event-card .event-hover-location .location {
+	color: $font_color;
+	font-size: 13px;
+}
+
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
     .mod-home.is-not-singleuser #content,

view/theme/frio/js/theme.js

@@ -702,7 +702,7 @@ function scrollToItem(elementId) {
 		scrollTop: itemPos
 	}, 400).promise().done( function() {
 		// Highlight post/commenent with ID  (GUID)
-		$el.animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
+		$el.animate(colWhite, 1000).animate(colShiny).animate({backgroundColor: 'transparent'}, 600);
 	});
 }
 

view/theme/frio/php/default.php

@@ -27,6 +27,7 @@
 use Friendica\DI;
 use Friendica\Model\Profile;
 
+require_once 'view/theme/frio/theme.php';
 require_once 'view/theme/frio/php/frio_boot.php';
 
 //	$minimal = is_modal();
@@ -62,19 +63,15 @@ $is_singleuser_class = $is_singleuser ? "is-singleuser" : "is-not-singleuser";
 		if ($scheme && is_string($scheme) && $scheme != '---') {
 			if (file_exists('view/theme/frio/scheme/' . $scheme . '.php')) {
 				$schemefile = 'view/theme/frio/scheme/' . $scheme . '.php';
+				$scheme_accent =
+					DI::pConfig()->get($uid, 'frio', 'scheme_accent') ?:
+						DI::config()->get('frio', 'scheme_accent') ?: FRIO_SCHEME_ACCENT_BLUE;
+
 				require_once $schemefile;
 			}
-		} else {
-			$nav_bg = DI::pConfig()->get($uid, 'frio', 'nav_bg');
 		}
 
-		if (empty($nav_bg)) {
+		$nav_bg = $nav_bg ?: DI::pConfig()->get($uid, 'frio', 'nav_bg', DI::config()->get('frio', 'nav_bg', '#708fa0'));
-			$nav_bg = DI::config()->get('frio', 'nav_bg');
-		}
-
-		if (empty($nav_bg) || !is_string($nav_bg)) {
-			$nav_bg = "#708fa0";
-		}
 
 		echo '<meta name="theme-color" content="' . $nav_bg . '" />';
 ?>

view/theme/frio/php/scheme.php

@@ -52,7 +52,8 @@ function get_scheme_info($scheme)
 		'description' => '',
 		'author' => [],
 		'version' => '',
-		'overwrites' => []
+		'overwrites' => [],
+		'accented' => false,
 	];
 
 	if (!is_file($themepath . 'scheme/' . $scheme . '.php')) return $info;
@@ -84,6 +85,8 @@ function get_scheme_info($scheme)
 					foreach ($theme_settings as $key => $value) {
 						$info['overwrites'][$value] = true;
 					}
+				} elseif ($k == 'accented') {
+					$info['accented'] = $v && $v != 'false' && $v != 'no';
 				} else {
 					if (array_key_exists($k, $info)) {
 						$info[$k] = $v;

view/theme/frio/scheme/black.css

@@ -0,0 +1,347 @@
+/*
+    Licence    : AGPL
+    Created on : 11.08.2020
+    Author     : Hypolite Petovan <hypolite@friendica.mrpetovan.com>
+*/
+#topbar-first {
+	background-color: $background_color;
+}
+#topbar-first .dropdown.account > a,
+#topbar-first .dropdown.account.open > a,
+#topbar-first .dropdown.account > button,
+#topbar-first .dropdown.account.open > button {
+	background: none;
+}
+
+#topbar-first #nav-notifications-menu li.notif-entry:hover {
+	background-color: $nav_bg;
+}
+
+
+#topbar-second {
+	background-color: $nav_bg;
+	border-color: $link_color;
+}
+#topbar-second ul.tabs li {
+	border_color: $link_color;
+}
+
+.dropdown-menu, .account .dropdown-menu {
+	background-color: $background_color;
+}
+.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
+	color: $link_color;
+}
+.account .dropdown-menu li {
+	border-color: $background_color;
+}
+
+.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
+	background-image: none;
+	background-color: rgba(232, 232, 232, $contentbg_transp);
+}
+
+.breadcrumb,
+.panel-footer,
+.list-group-item {
+	background-color: rgba(245, 245, 245, $contentbg_transp);
+}
+.panel-group .panel-footer {
+	border-top: 1px solid $nav_bg;
+}
+
+.well {
+	background-image: none;
+	background-color: $nav_bg;
+	box-shadow: 0 0 3px #dadada;
+	-webkit-box-shadow: 0 0 3px #dadada;
+	border-color: #a0a0a0;
+}
+
+input[type=text],
+input[type=submit],
+button[type=submit]:not(.btn),
+select,
+textarea,
+.form-control {
+	border: none;
+	background-color: $nav_bg;
+	color: $font_color;
+	box-shadow: 0 0 3px #dadada;
+	-webkit-box-shadow: 0 0 3px #dadada;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+	background-color: $background_color;
+	color: $font_color_darker;
+}
+
+.nav-tabs>li.active>a,
+.nav-tabs>li.active>a:focus,
+.nav-tabs>li.active>a:hover,
+main .nav-tabs>li.active>a,
+main .nav-tabs>li.active>a:focus,
+main .nav-tabs>li.active>a:hover {
+	background-color: $nav_bg;
+	color: $font_color_darker;
+}
+
+.nav > li > a:focus, .nav > li > a:hover {
+	background-color: rgba(238, 238, 238, $contentbg_transp);
+}
+
+.modal-content {
+	background-color: $background_color;
+}
+
+.pager li > a,
+.pager li > span {
+	border-color: #a0a0a0;
+}
+
+.pager li > a:focus,
+.pager li > a:hover {
+	background-color: #303030;
+}
+
+.pagination > .active > a,
+.pagination > .active > a:focus,
+.pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+	border-color: $link_color;
+	background-color: $nav_bg;
+	color: $font_color;
+}
+
+.pagination>li>a:hover, .pagination>li>span:hover {
+	background-color: $nav_bg;
+}
+
+#jotOpen {
+	border: none;
+	background-color: $background_color;
+}
+
+.close {
+	color: $font_color;
+	text-shadow: 0 1px 0 $nav_bg;
+}
+.close:focus, .close:hover {
+	color: $link_color;
+}
+
+.input-group-addon {
+	color: $font_color;
+	background-color: $nav_bg;
+	box-shadow: 0 0 3px #dadada;
+	-webkit-box-shadow: 0 0 3px #dadada;
+	border: none;
+}
+
+#topbar-first #nav-notifications-menu li.notif-entry,
+.panel-footer,
+.panel-group .panel-heading + .panel-collapse > .list-group,
+.panel-group .panel-heading + .panel-collapse > .panel-body,
+.wall-item-container,
+.comment-fake-form {
+	border-color: $nav_bg;
+}
+
+.wall-item-comment-wrapper {
+	border: 0;
+}
+
+.badge {
+	background-color: $nav_bg;
+}
+
+.btn {
+	box-shadow: 0 0 2px #dadada;
+	-webkit-box-shadow: 0 0 2px #dadada;
+	background: none;
+	color: $font_color_darker;
+}
+.btn.focus, .btn:focus, .btn:hover {
+	color: $font_color;
+}
+.btn-default:focus, .btn-default:hover {
+	background: $nav_bg;
+}
+.btn-default.active, .btn-default:active {
+	background-color: $nav_bg;
+	color: $font_color;
+}
+
+button[type=submit]:not(.btn),
+input[type=submit],
+.btn.btn-primary {
+	border: 1px solid $link_color;
+}
+
+.label-primary {
+	background-color: $background_color;
+	color: $link_color;
+}
+
+.panel-default>.panel-heading {
+	background: none;
+	background-color: $nav_bg;
+	color: $font_color;
+}
+
+.btn-success,
+.label-success,
+.alert-success,
+.panel-success > .panel-heading {
+	background: rgba(60, 118, 61, 0.4);
+	color: #dff0d8;
+}
+
+.fc .fc-event,
+.btn-info,
+.label-info,
+.alert-info,
+.panel-info > .panel-heading,
+.table > tbody > tr.info > td,
+.table > tbody > tr.info > th,
+.table > tbody > tr > td.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr.info > td,
+.table > tfoot > tr.info > th,
+.table > tfoot > tr > td.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > thead > tr.info > th,
+.table > thead > tr > td.info,
+.table > thead > tr > th.info {
+	background: rgba(49, 112, 143, 0.4);
+	color: #d9edf7;
+}
+
+.btn-warning,
+.label-warning,
+.alert-warning,
+.panel-warning > .panel-heading {
+	background: rgba(139, 109, 59, 0.4);
+	color: #fcf8e3;
+}
+
+.btn-danger,
+.label-danger,
+.alert-danger,
+.panel-danger > .panel-heading {
+	background: rgba(169, 68, 66, 0.4);
+	color: #f2dede;
+}
+
+.wall-item-actions a, .wall-item-actions button {
+	color: $link_color;
+}
+
+@media (min-width: 768px) {
+	.wall-item-container .wall-item-links,
+	.wall-item-container .wall-item-actions button,
+	.wall-item-container .body-attach > a {
+		opacity: 0.3;
+		-webkit-transition: all 0.25s ease-in-out;
+		-moz-transition: all 0.25s ease-in-out;
+		-o-transition: all 0.25s ease-in-out;
+		-ms-transition: all 0.25s ease-in-out;
+		transition: all 0.25s ease-in-out;
+		color: $font_color;
+	}
+	.wall-item-container:hover .wall-item-links,
+	.wall-item-container:hover .wall-item-actions button,
+	.wall-item-container:hover .body-attach > a {
+		opacity: 1;
+		-webkit-transition: all 0.25s ease-in-out;
+		-moz-transition: all 0.25s ease-in-out;
+		-o-transition: all 0.25s ease-in-out;
+		-ms-transition: all 0.25s ease-in-out;
+		transition: all 0.25s ease-in-out;
+		color: $link_color;
+	}
+	.wall-item-container .wall-item-body .body-attach > a:hover {
+		opacity: 1;
+	}
+}
+
+.fc-unthemed td.fc-today {
+	background-color: $nav_bg;
+}
+
+.nav .open > .btn-link {
+	background-color: $nav_bg;
+}
+
+.hovercard {
+	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+}
+.hovercard, .hover-card-footer {
+	background-color: $nav_bg;
+}
+.hovercard.top > .arrow:after {
+	border-top-color: $nav_bg;
+}
+.hovercard.right > .arrow:after {
+	border-right-color: $nav_bg;
+}
+.hovercard.bottom > .arrow:after {
+	border-bottom-color: $nav_bg;
+}
+.hovercard.left > .arrow:after {
+	border-left-color: $nav_bg;
+}
+
+.friendica-tagsinput .tag {
+	color: inherit;
+}
+
+
+code {
+	color: $font_color;
+	background-color: rgba(255, 255, 255, .2);
+}
+pre {
+	color: $font_color_darker;
+	background-color: rgba(255, 255, 255, .05);
+}
+
+legend {
+	color: $font_color;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd),
+.table-hover > tbody > tr:hover,
+.adminpage .table-hover > tbody > tr:hover + tr.details {
+	background-color: $nav_bg;
+}
+
+section > .generic-page-wrapper,
+.videos-content-wrapper,
+.suggest-content-wrapper,
+.help-content-wrapper,
+.match-content-wrapper,
+.dirfind-content-wrapper,
+.delegation-content-wrapper,
+.notes-content-wrapper,
+.message-content-wrapper,
+.apps-content-wrapper, #adminpage,
+.delegate-content-wrapper,
+.uexport-content-wrapper,
+.dfrn_request-content-wrapper,
+.friendica-content-wrapper,
+.credits-content-wrapper,
+.nogroup-content-wrapper,
+.profperm-content-wrapper,
+.invite-content-wrapper,
+.tos-content-wrapper,
+.fsuggest-content-wrapper,
+.panel,
+aside .widget,
+.nav-container .widget{
+	box-shadow: 0 0 3px $link_color;
+	-webkit-box-shadow: 0 0 3px $link_color;
+}

view/theme/frio/scheme/black.php

@@ -0,0 +1,21 @@
+<?php
+/*
+ * Name: Black
+ * Licence: AGPL
+ * Author: Hypolite Petovan <hypolite@friendica.mrpetovan.com>
+ * Overwrites: nav_bg, nav_icon_color, link_color, background_color, contentbg_transp
+ * Accented: yes
+ */
+
+require_once 'view/theme/frio/php/PHPColors/Color.php';
+
+$accentColor = new Color($scheme_accent);
+
+$menu_background_hover_color = '#' . $accentColor->darken(45);
+$nav_bg = '#202020';
+$link_color = '#' . $accentColor->lighten(10);
+$nav_icon_color = '#d4d4d4';
+$background_color = '#000000';
+$contentbg_transp = '0';
+$font_color = '#cccccc';
+$font_color_darker = '#acacac';

view/theme/frio/scheme/dark.css

@@ -0,0 +1,320 @@
+/*
+    Licence    : AGPL
+    Created on : 11.08.2020
+    Author     : Hypolite Petovan <hypolite@friendica.mrpetovan.com>
+*/
+#topbar-first {
+	background-color: $background_color;
+}
+#topbar-first .dropdown.account > a,
+#topbar-first .dropdown.account.open > a,
+#topbar-first .dropdown.account > button,
+#topbar-first .dropdown.account.open > button {
+	background: none;
+}
+
+#topbar-first #nav-notifications-menu li.notif-entry:hover {
+	background-color: $nav_bg;
+}
+
+
+#topbar-second {
+	background-color: $nav_bg;
+	border-color: $link_color;
+}
+#topbar-second ul.tabs li {
+	border_color: $link_color;
+}
+
+.dropdown-menu, .account .dropdown-menu {
+	background-color: $background_color;
+}
+.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
+	color: $link_color;
+}
+.account .dropdown-menu li {
+	border-color: $background_color;
+}
+
+.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
+	background-image: none;
+	background-color: rgba(232, 232, 232, $contentbg_transp);
+}
+
+.breadcrumb,
+.panel-footer,
+.list-group-item {
+	background-color: rgba(245, 245, 245, $contentbg_transp);
+}
+.panel-group .panel-footer {
+	border-top: 1px solid $nav_bg;
+}
+
+.well {
+	background-image: none;
+	background-color: $nav_bg;
+	box-shadow: 0 0 3px #dadada;
+	-webkit-box-shadow: 0 0 3px #dadada;
+}
+
+input[type=text],
+input[type=submit],
+button[type=submit]:not(.btn),
+select,
+textarea,
+.form-control {
+	border: none;
+	background-color: $nav_bg;
+	color: $font_color;
+	box-shadow: 0 0 3px #dadada;
+	-webkit-box-shadow: 0 0 3px #dadada;
+}
+.form-control[disabled],
+.form-control[readonly],
+.ieldset[disabled] .form-control {
+	background-color: $background_color;
+	color: $font_color_darker;
+}
+
+.nav-tabs>li.active>a,
+.nav-tabs>li.active>a:focus,
+.nav-tabs>li.active>a:hover,
+main .nav-tabs>li.active>a,
+main .nav-tabs>li.active>a:focus,
+main .nav-tabs>li.active>a:hover {
+	background-color: $nav_bg;
+	color: $font_color_darker;
+}
+
+.nav > li > a:focus,
+.nav > li > a:hover {
+	background-color: rgba(238, 238, 238, $contentbg_transp);
+}
+
+.modal-content {
+	background-color: $background_color;
+}
+
+.pagination > .active > a,
+.pagination > .active > a:focus,
+.pagination > .active > a:hover,
+.pagination > .active > span,
+.pagination > .active > span:focus,
+.pagination > .active > span:hover {
+	border-color: $link_color;
+	background-color: $nav_bg;
+	color: $font_color;
+}
+
+.pagination>li>a:hover,
+.pagination>li>span:hover {
+	background-color: $nav_bg;
+}
+
+#jotOpen {
+	border: none;
+	background-color: $background_color;
+}
+
+.close {
+	color: $font_color;
+	text-shadow: 0 1px 0 $nav_bg;
+}
+.close:focus,
+.close:hover {
+	color: $link_color;
+}
+
+.input-group-addon {
+	color: $font_color;
+	background-color: $nav_bg;
+	box-shadow: 0 0 3px #dadada;
+	-webkit-box-shadow: 0 0 3px #dadada;
+	border: none;
+}
+
+#topbar-first #nav-notifications-menu li.notif-entry,
+.panel-footer,
+.panel-group .panel-heading + .panel-collapse > .list-group,
+.panel-group .panel-heading + .panel-collapse > .panel-body,
+.wall-item-container,
+.comment-fake-form {
+	border-color: $nav_bg;
+}
+
+.wall-item-comment-wrapper {
+	border: 0;
+}
+
+.badge {
+	background-color: $nav_bg;
+}
+
+.btn {
+	box-shadow: 0 0 2px #dadada;
+	-webkit-box-shadow: 0 0 2px #dadada;
+	background: none;
+	color: $font_color_darker;
+}
+.btn.focus,
+.btn:focus,
+.btn:hover {
+	color: $font_color;
+}
+.btn-default:focus,
+.btn-default:hover {
+	background: $nav_bg;
+}
+.btn-default.active,
+.btn-default:active {
+	background-color: $nav_bg;
+	color: $font_color;
+}
+
+button[type=submit]:not(.btn),
+input[type=submit],
+.btn.btn-primary {
+	border: 1px solid $link_color;
+}
+
+.label-primary {
+	background-color: $background_color;
+	color: $link_color;
+}
+
+.panel-default>.panel-heading {
+	background: none;
+	background-color: $nav_bg;
+	color: $font_color;
+}
+
+.btn-success,
+.label-success,
+.alert-success,
+.panel-success > .panel-heading {
+	background: rgba(60, 118, 61, 0.4);
+	color: #dff0d8;
+}
+
+.fc .fc-event,
+.btn-info,
+.label-info,
+.alert-info,
+.panel-info > .panel-heading,
+.table > tbody > tr.info > td,
+.table > tbody > tr.info > th,
+.table > tbody > tr > td.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr.info > td,
+.table > tfoot > tr.info > th,
+.table > tfoot > tr > td.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > thead > tr.info > th,
+.table > thead > tr > td.info,
+.table > thead > tr > th.info {
+	background: rgba(49, 112, 143, 0.4);
+	color: #d9edf7;
+}
+
+.btn-warning,
+.label-warning,
+.alert-warning,
+.panel-warning > .panel-heading {
+	background: rgba(139, 109, 59, 0.4);
+	color: #fcf8e3;
+}
+
+.btn-danger,
+.label-danger,
+.alert-danger,
+.panel-danger > .panel-heading {
+	background: rgba(169, 68, 66, 0.4);
+	color: #f2dede;
+}
+
+.wall-item-actions a,
+.wall-item-actions button {
+	color: $link_color;
+}
+
+@media (min-width: 768px) {
+	.wall-item-container .wall-item-links,
+	.wall-item-container .wall-item-actions button,
+	.wall-item-container .body-attach > a {
+		opacity: 0.3;
+		-webkit-transition: all 0.25s ease-in-out;
+		-moz-transition: all 0.25s ease-in-out;
+		-o-transition: all 0.25s ease-in-out;
+		-ms-transition: all 0.25s ease-in-out;
+		transition: all 0.25s ease-in-out;
+		color: $font_color;
+	}
+	.wall-item-container:hover .wall-item-links,
+	.wall-item-container:hover .wall-item-actions button,
+	.wall-item-container:hover .body-attach > a {
+		opacity: 1;
+		-webkit-transition: all 0.25s ease-in-out;
+		-moz-transition: all 0.25s ease-in-out;
+		-o-transition: all 0.25s ease-in-out;
+		-ms-transition: all 0.25s ease-in-out;
+		transition: all 0.25s ease-in-out;
+		color: $link_color;
+	}
+	.wall-item-container .wall-item-body .body-attach > a:hover {
+		opacity: 1;
+	}
+}
+
+.fc-unthemed td.fc-today {
+	background-color: $nav_bg;
+}
+
+.nav .open > .btn-link {
+	background-color: $nav_bg;
+}
+
+.hovercard {
+	box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+	-webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
+}
+.hovercard,
+.hover-card-footer {
+	background-color: $nav_bg;
+}
+.hovercard.top > .arrow:after {
+	border-top-color: $nav_bg;
+}
+.hovercard.right > .arrow:after {
+	border-right-color: $nav_bg;
+}
+.hovercard.bottom > .arrow:after {
+	border-bottom-color: $nav_bg;
+}
+.hovercard.left > .arrow:after {
+	border-left-color: $nav_bg;
+}
+
+.friendica-tagsinput .tag {
+	color: inherit;
+}
+
+
+code {
+	color: $font_color;
+	background-color: rgba(255, 255, 255, .2);
+}
+pre {
+	color: $font_color_darker;
+	background-color: rgba(255, 255, 255, .05);
+}
+
+legend {
+	color: $font_color;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd),
+.table-hover > tbody > tr:hover,
+.adminpage .table-hover > tbody > tr:hover + tr.details {
+	background-color: $nav_bg;
+}

view/theme/frio/scheme/dark.php

@@ -0,0 +1,34 @@
+<?php
+/*
+ * Name: Dark
+ * Licence: AGPL
+ * Author: Hypolite Petovan <hypolite@friendica.mrpetovan.com>
+ * Overwrites: nav_bg, nav_icon_color, link_color, background_color, contentbg_transp
+ * Accented: yes
+ */
+
+require_once 'view/theme/frio/php/PHPColors/Color.php';
+
+$accentColor = new Color($scheme_accent);
+
+$menu_background_hover_color = '#' . $accentColor->darken(20);
+switch ($scheme_accent) {
+	default:
+		$link_color = '#' . $accentColor->lighten(25);
+}
+$nav_icon_color = $scheme_accent;
+$nav_icon_hover_color = '#' . $accentColor->darken(20);
+switch ($scheme_accent) {
+	case FRIO_SCHEME_ACCENT_GREEN:
+	case FRIO_SCHEME_ACCENT_RED:
+		$nav_bg = '#' . $accentColor->darken(25);
+		$background_color = '#' . $accentColor->darken(27);
+		break;
+	default:
+		$nav_bg = '#' . $accentColor->darken(30);
+		$background_color = '#' . $accentColor->darken(33);
+}
+
+$contentbg_transp = 4;
+$font_color = '#e4e4e4';
+$font_color_darker = '#dcdcdc';

view/theme/frio/scheme/light.php

@@ -0,0 +1,20 @@
+<?php
+/*
+ * Name: Light
+ * Licence: AGPL
+ * Author: Hypolite Petovan <hypolite@friendica.mrpetovan.com>
+ * Overwrites: nav_bg, nav_icon_color, link_color, background_color, 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;

view/theme/frio/style.php

@@ -22,6 +22,7 @@
 use Friendica\DI;
 use Friendica\Util\Strings;
 
+require_once 'view/theme/frio/theme.php';
 require_once 'view/theme/frio/php/PHPColors/Color.php';
 
 $scheme = '';
@@ -33,11 +34,12 @@ DI::config()->load('frio');
 
 // Default to hard-coded values for empty settings
 $scheme           = DI::config()->get('frio', 'scheme', DI::config()->get('frio', 'schema'));
+$scheme_accent    = DI::config()->get('frio', 'scheme_accent')    ?: FRIO_SCHEME_ACCENT_BLUE;
 $nav_bg           = DI::config()->get('frio', 'nav_bg')           ?: '#708fa0';
 $nav_icon_color   = DI::config()->get('frio', 'nav_icon_color')   ?: '#ffffff';
 $link_color       = DI::config()->get('frio', 'link_color')       ?: '#6fdbe8';
 $background_color = DI::config()->get('frio', 'background_color') ?: '#ededed';
-$contentbg_transp = DI::config()->get('frio', 'contentbg_transp') ?: '';
+$contentbg_transp = DI::config()->get('frio', 'contentbg_transp') ?? 100;
 $background_image = DI::config()->get('frio', 'background_image') ?: 'img/none.png';
 $bg_image_option  = DI::config()->get('frio', 'bg_image_option')  ?: '';
 $login_bg_image   = DI::config()->get('frio', 'login_bg_image')   ?: '';
@@ -56,11 +58,12 @@ if ($uid) {
 
 	// Only override display settings that have actually been set
 	$scheme           = DI::pConfig()->get($uid, 'frio', 'scheme', DI::pConfig()->get($uid, 'frio', 'schema')) ?: $scheme;
+	$scheme_accent    = DI::pConfig()->get($uid, 'frio', 'scheme_accent')    ?: $scheme_accent;
 	$nav_bg           = DI::pConfig()->get($uid, 'frio', 'nav_bg')           ?: $nav_bg;
 	$nav_icon_color   = DI::pConfig()->get($uid, 'frio', 'nav_icon_color')   ?: $nav_icon_color;
 	$link_color       = DI::pConfig()->get($uid, 'frio', 'link_color')       ?: $link_color;
 	$background_color = DI::pConfig()->get($uid, 'frio', 'background_color') ?: $background_color;
-	$contentbg_transp = DI::pConfig()->get($uid, 'frio', 'contentbg_transp') ?: $contentbg_transp;
+	$contentbg_transp = DI::pConfig()->get($uid, 'frio', 'contentbg_transp') ?? $contentbg_transp;
 	$background_image = DI::pConfig()->get($uid, 'frio', 'background_image') ?: $background_image;
 	$bg_image_option  = DI::pConfig()->get($uid, 'frio', 'bg_image_option')  ?: $bg_image_option;
 	$modified         = DI::pConfig()->get($uid, 'frio', 'css_modified')     ?: $modified;
@@ -123,7 +126,7 @@ if (!isset($nav_icon_hover_color)) {
 	if ($nihc->isLight()) {
 		$nav_icon_hover_color = '#' . $nihc->darken(10);
 	} else {
-		$nav_icon_hover_color = '#' . $nihc->lighten(10);
+		$nav_icon_hover_color = '#' . $nihc->lighten(20);
 	}
 }
 if (!isset($link_hover_color)) {
@@ -184,7 +187,9 @@ $options = [
 	'$background_size_img'         => $background_size_img,
 	'$background_repeat'           => $background_repeat,
 	'$login_bg_image'              => $login_bg_image,
-	'$login_bg_color'              => $login_bg_color
+	'$login_bg_color'              => $login_bg_color,
+	'$font_color_darker'           => $font_color_darker ?? '#555',
+	'$font_color'                  => $font_color ?? '#777',
 ];
 
 $css_tpl = file_get_contents('view/theme/frio/css/style.css');

view/theme/frio/templates/admin/blocklist/contact.tpl

@@ -9,7 +9,7 @@
 	<div class="panel-group panel-group-settings" id="admin-settings" role="tablist" aria-multiselectable="true">
 		{{* The form for entering user profile which should be blocked *}}
 		<div class="panel">
-			<div class="section-subtitle-wrapper" role="tab" id="admin-settings-contactblock-block">
+			<div class="panel-heading section-subtitle-wrapper" role="tab" id="admin-settings-contactblock-block">
 				<h4>
 					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contactblock-block-collapse" aria-expanded="false" aria-controls="admin-settings-contactblock-block-collapse">
 						{{$h_newblock}}
@@ -17,7 +17,7 @@
 				</h4>
 			</div>
 
-			<div id="admin-settings-contactblock-block-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-contactblock-block">
+			<div id="admin-settings-contactblock-block-collapse" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="admin-settings-contactblock-block">
 				<form action="{{$baseurl}}/admin/blocklist/contact" method="post">
 					<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 
@@ -34,7 +34,7 @@
 
 		{{* The list of blocked user profiles with the possibility to unblock them *}}
 		<div class="panel">
-			<div class="section-subtitle-wrapper" role="tab" id="admin-settings-contactblock-blocked">
+			<div class="panel-heading section-subtitle-wrapper" role="tab" id="admin-settings-contactblock-blocked">
 				<h4>
 					<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#admin-settings" href="#admin-settings-contactblock-blocked-collapse" aria-expanded="{{if count($contacts) > 0}}true{{else}}false{{/if}}" aria-controls="admin-settings-contactblock-blocked-collapse">
 						{{$h_contacts}} ({{$total_contacts}})
@@ -42,7 +42,7 @@
 				</h4>
 			</div>
 
-			<div id="admin-settings-contactblock-blocked-collapse" class="panel-collapse collapse {{if count($contacts) > 0}}in{{/if}}" role="tabpanel" aria-labelledby="admin-settings-contactblock-blocked">
+			<div id="admin-settings-contactblock-blocked-collapse" class="panel-body panel-collapse collapse {{if count($contacts) > 0}}in{{/if}}" role="tabpanel" aria-labelledby="admin-settings-contactblock-blocked">
 				<form action="{{$baseurl}}/admin/blocklist/contact" method="post">
 					<input type="hidden" name="form_security_token" value="{{$form_security_token}}">
 

view/theme/frio/templates/contact_edit.tpl

@@ -67,14 +67,14 @@
 
 					{{* Some information about the contact from the profile *}}
 					<div class="panel">
-						<div class="section-subtitle-wrapper" role="tab" id="contact-edit-profile">
+						<div class="section-subtitle-wrapper panel-heading" role="tab" id="contact-edit-profile">
 							<h4>
 								<a class="accordion-toggle" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-profile-collapse" aria-expanded="true" aria-controls="contact-edit-profile-collapse">
 									{{$contact_profile_label}}
 								</a>
 							</h4>
 						</div>
-						<div id="contact-edit-profile-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="contact-edit-profile">
+						<div id="contact-edit-profile-collapse" class="panel-body panel-collapse collapse in" role="tabpanel" aria-labelledby="contact-edit-profile">
 							<div class="section-content-tools-wrapper">
 								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 									<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-muted">{{$profileurllabel}}</div><a target="blank" href="{{$url}}">{{$profileurl}}</a>
@@ -118,14 +118,14 @@
 
 					{{if $contact_settings_label}}
 					<div class="panel">
-						<div class="section-subtitle-wrapper" role="tab" id="contact-edit-settings">
+						<div class="section-subtitle-wrapper panel-heading" role="tab" id="contact-edit-settings">
 							<h4>
 								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-settings-collapse" aria-expanded="false" aria-controls="contact-edit-settings-collapse">
 									{{$contact_settings_label}}
 								</a>
 							</h4>
 						</div>
-						<div id="contact-edit-settings-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="contact-edit-settings">
+						<div id="contact-edit-settings-collapse" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="contact-edit-settings">
 							<div class="section-content-tools-wrapper">
 
 								<input type="hidden" name="contact_id" value="{{$contact_id}}">
@@ -137,7 +137,7 @@
 								{{/if}}
 								{{include file="field_checkbox.tpl" field=$hidden}}
 
-								<div class="form-group pull-right settings-submit-wrapper" >
+								<div class="pull-right settings-submit-wrapper" >
 									<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 								</div>
 								<div class="clear"></div>
@@ -148,19 +148,19 @@
 
 					{{if $lbl_info1}}
 					<div class="panel">
-						<div class="section-subtitle-wrapper" role="tab" id="contact-edit-info">
+						<div class="section-subtitle-wrapper panel-heading" role="tab" id="contact-edit-info">
 							<h4>
 								<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#contact-edit-tools" href="#contact-edit-info-collapse" aria-expanded="false" aria-controls="contact-edit-info-collapse">
 									{{$lbl_info1}}
 								</a>
 							</h4>
 						</div>
-						<div id="contact-edit-info-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="contact-edit-info">
+						<div id="contact-edit-info-collapse" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="contact-edit-info">
 							<div class="section-content-tools-wrapper">
 
 								{{include file="field_textarea.tpl" field=$cinfo}}
 
-								<div class="form-group pull-right settings-submit-wrapper" >
+								<div class="pull-right settings-submit-wrapper" >
 									<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
 								</div>
 								<div class="clear"></div>

view/theme/frio/templates/event_head.tpl

@@ -1,9 +1,4 @@
 
-<link rel="stylesheet" type="text/css" href="{{$baseurl}}/view/asset/fullcalendar/dist/fullcalendar.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" />
-<link rel="stylesheet" type="text/css" href="{{$baseurl}}/view/asset/fullcalendar/dist/fullcalendar.print.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" media="print" />
-<link rel="stylesheet" type="text/css" href="view/theme/frio/css/mod_events.css?v={{$smarty.const.FRIENDICA_VERSION}}" />
-<script type="text/javascript" src="{{$baseurl}}/view/asset/moment/min/moment-with-locales.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
-<script type="text/javascript" src="{{$baseurl}}/view/asset/fullcalendar/dist/fullcalendar.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 <script type="text/javascript" src="view/theme/frio/js/mod_events.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 
 <script type="text/javascript">

view/theme/frio/templates/field_textarea.tpl

@@ -1,6 +1,7 @@
-
 	<div class="form-group field textarea">
+	{{if $field.1}}
 		<label for="id_{{$field.0}}">{{$field.1}}</label>
+	{{/if}}
 		<textarea class="form-control text-autosize" name="{{$field.0}}" id="id_{{$field.0}}" {{if $field.4}}{{$field.4 nofilter}}{{/if}} aria-describedby="{{$field.0}}_tip">{{$field.2}}</textarea>
 	{{if $field.3}}
 		<span class="help-block" id="{{$field.0}}_tip" role="tooltip">{{$field.3 nofilter}}</span>

view/theme/frio/templates/filebrowser.tpl

@@ -51,7 +51,7 @@
 		</div>
 
 		<div class="upload">
-			<button id="upload-{{$type}}">{{$upload}}</button>
+			<button id="upload-{{$type}}" type="button" class="btn btn-primary">{{$upload}}</button>
 		</div>
 	</div>
 

view/theme/frio/templates/head.tpl

@@ -25,14 +25,14 @@
 <link rel="stylesheet" href="view/theme/frio/frameworks/bootstrap-toggle/css/bootstrap-toggle.min.css?v={{$smarty.const.FRIENDICA_VERSION}}" type="text/css" media="screen"/>
 <link rel="stylesheet" href="view/theme/frio/font/open_sans/open-sans.css?v={{$smarty.const.FRIENDICA_VERSION}}" type="text/css" media="screen"/>
 
-{{foreach $stylesheets as $stylesheetUrl}}
-<link rel="stylesheet" href="{{$stylesheetUrl}}" type="text/css" media="screen" />
-{{/foreach}}
-
 {{* own css files *}}
 <link rel="stylesheet" href="view/theme/frio/css/hovercard.css?v={{$smarty.const.FRIENDICA_VERSION}}" type="text/css" media="screen"/>
 <link rel="stylesheet" href="view/theme/frio/css/font-awesome.custom.css?v={{$smarty.const.FRIENDICA_VERSION}}" type="text/css" media="screen"/>
 
+{{foreach $stylesheets as $stylesheetUrl => $media}}
+<link rel="stylesheet" href="{{$stylesheetUrl}}" type="text/css" media="{{$media}}" />
+{{/foreach}}
+
 <link rel="shortcut icon" href="{{$shortcut_icon}}" />
 <link rel="apple-touch-icon" href="{{$touch_icon}}"/>
 

view/theme/frio/templates/settings/display.tpl

@@ -44,9 +44,6 @@
 					{{/if}}
 
 					</div>
-					<div class="panel-footer">
-						<button type="submit" name="submit" class="btn btn-primary" value="{{$submit}}">{{$submit}}</button>
-					</div>
 				</div>
 			</div>
 

view/theme/frio/templates/theme_settings.tpl

@@ -1,9 +1,55 @@
 <script src="{{$baseurl}}/view/theme/quattro/jquery.tools.min.js?v={{$smarty.const.FRIENDICA_VERSION}}"></script>
 <script type="text/javascript" src="{{$baseurl}}/view/js/ajaxupload.js?v={{$smarty.const.FRIENDICA_VERSION}}" ></script>
 
-{{include file="field_select.tpl" field=$scheme}}
+<div class="form-group field select">
+	<label for="id_{{$scheme.0}}">{{$scheme.1}}</label>
+	<select name="{{$scheme.0}}" id="id_{{$scheme.0}}" class="form-control">
+		<option value="---" {{if '---' == $scheme.2}}selected="selected"{{/if}}>{{$custom}}</option>
+		<optgroup label="{{$accented}}">
+	{{foreach $scheme.3 as $value => $label}}
+			<option value="{{$value}}" {{if $value == $scheme.2}}selected="selected"{{/if}}>{{$label}}</option>
+	{{/foreach}}
+		</optgroup>
+		<optgroup label="{{$legacy}}">
+	{{foreach $scheme.4 as $value => $label}}
+			<option value="{{$value}}" {{if $value == $scheme.2}}selected="selected"{{/if}}>{{$label}}</option>
+	{{/foreach}}
+		</optgroup>
+	</select>
+</div>
 
-{{if $nav_bg}}{{include file="field_input.tpl" field=$share_string}}{{/if}}
+{{if $scheme_accent}}
+<div class="form-group">
+	<p><label>{{$scheme_accent.1}}</label></p>
+	<label class="radio-inline">
+		<input type="radio" name="{{$scheme_accent.0}}" value="{{$smarty.const.FRIO_SCHEME_ACCENT_BLUE}}" {{if $scheme_accent.2 == $smarty.const.FRIO_SCHEME_ACCENT_BLUE}} checked{{/if}}>
+		<span style="border-radius: 10px; background-color: {{$smarty.const.FRIO_SCHEME_ACCENT_BLUE}}; width: 20px; display: inline-block">&nbsp;</span>
+		{{$scheme_accent.3.blue}}
+	</label>
+	<label class="radio-inline">
+		<input type="radio" name="{{$scheme_accent.0}}" value="{{$smarty.const.FRIO_SCHEME_ACCENT_RED}}" {{if $scheme_accent.2 == $smarty.const.FRIO_SCHEME_ACCENT_RED}} checked{{/if}}>
+		<span style="border-radius: 10px; background-color: {{$smarty.const.FRIO_SCHEME_ACCENT_RED}}; width: 20px; display: inline-block">&nbsp;</span>
+		{{$scheme_accent.3.red}}
+	</label>
+	<label class="radio-inline">
+		<input type="radio" name="{{$scheme_accent.0}}" value="{{$smarty.const.FRIO_SCHEME_ACCENT_PURPLE}}" {{if $scheme_accent.2 == $smarty.const.FRIO_SCHEME_ACCENT_PURPLE}} checked{{/if}}>
+		<span style="border-radius: 10px; background-color: {{$smarty.const.FRIO_SCHEME_ACCENT_PURPLE}}; width: 20px; display: inline-block">&nbsp;</span>
+		{{$scheme_accent.3.purple}}
+	</label>
+	<label class="radio-inline">
+		<input type="radio" name="{{$scheme_accent.0}}" value="{{$smarty.const.FRIO_SCHEME_ACCENT_GREEN}}" {{if $scheme_accent.2 == $smarty.const.FRIO_SCHEME_ACCENT_GREEN}} checked{{/if}}>
+		<span style="border-radius: 10px; background-color: {{$smarty.const.FRIO_SCHEME_ACCENT_GREEN}}; width: 20px; display: inline-block">&nbsp;</span>
+		{{$scheme_accent.3.green}}
+	</label>
+	<label class="radio-inline">
+		<input type="radio" name="{{$scheme_accent.0}}" value="{{$smarty.const.FRIO_SCHEME_ACCENT_PINK}}" {{if $scheme_accent.2 == $smarty.const.FRIO_SCHEME_ACCENT_PINK}} checked{{/if}}>
+		<span style="border-radius: 10px; background-color: {{$smarty.const.FRIO_SCHEME_ACCENT_PINK}}; width: 20px; display: inline-block">&nbsp;</span>
+		{{$scheme_accent.3.pink}}
+	</label>
+</div>
+{{/if}}
+
+{{if $share_string}}{{include file="field_input.tpl" field=$share_string}}{{/if}}
 {{if $nav_bg}}{{include file="field_colorinput.tpl" field=$nav_bg}}{{/if}}
 {{if $nav_icon_color}}{{include file="field_colorinput.tpl" field=$nav_icon_color}}{{/if}}
 {{if $link_color}}{{include file="field_colorinput.tpl" field=$link_color}}{{/if}}
@@ -17,7 +63,7 @@
 
 	<div class="row">
 		<div class="col-xs-9">
-			<input type="range" class="form-control color" id="{{$contentbg_transp.0}}_range" min="0" max="100" step="1" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}.value = this.value" oninput="{{$contentbg_transp.0}}.value = this.value">
+			<input type="range" class="form-control" id="{{$contentbg_transp.0}}_range" min="0" max="100" step="1" value="{{$contentbg_transp.2}}" onchange="{{$contentbg_transp.0}}.value = this.value" oninput="{{$contentbg_transp.0}}.value = this.value">
 		</div>
 		<div class="col-xs-3">
 			<div class="input-group">
@@ -183,7 +229,7 @@
 	});
 </script>
 
-<div class="settings-submit-wrapper form-group pull-right">
+<div class="settings-submit-wrapper pull-right">
 	<button type="submit" value="{{$submit}}" class="settings-submit btn btn-primary" name="frio-settings-submit">{{$submit}}</button>
 </div>
 <div class="clearfix"></div>

view/theme/frio/theme.php

@@ -21,6 +21,12 @@ use Friendica\Model\Contact;
 use Friendica\Module;
 use Friendica\Util\Strings;
 
+const FRIO_SCHEME_ACCENT_BLUE   = '#1e87c2';
+const FRIO_SCHEME_ACCENT_RED    = '#b50404';
+const FRIO_SCHEME_ACCENT_PURPLE = '#a54bad';
+const FRIO_SCHEME_ACCENT_GREEN  = '#218f39';
+const FRIO_SCHEME_ACCENT_PINK   = '#d900a9';
+
 function frio_init(App $a)
 {
 	global $frio;
@@ -319,51 +325,3 @@ function frio_display_item(App $a, &$arr)
 	}
 	$arr['output']['subthread'] = $subthread;
 }
-
-/**
- * @param int|null $uid
- * @return string
- * @see \Friendica\Core\Theme::getBackgroundColor()
- */
-function frio_get_background_color(int $uid = null)
-{
-	$background_color = DI::config()->get('frio', 'background_color') ?: '#ededed';
-
-	if ($uid) {
-		$background_color = DI::pConfig()->get($uid, 'frio', 'background_color') ?: $background_color;
-	}
-
-	$scheme = DI::config()->get('frio', 'scheme', DI::config()->get('frio', 'schema'));
-	$scheme = Strings::sanitizeFilePathItem($scheme);
-
-	if ($scheme && ($scheme != '---') && file_exists('view/theme/frio/scheme/' . $scheme . '.php')) {
-		$schemefile = 'view/theme/frio/scheme/' . $scheme . '.php';
-		require_once $schemefile;
-	}
-
-	return $background_color;
-}
-
-/**
- * @param int|null $uid
- * @return string
- * @see \Friendica\Core\Theme::getThemeColor()
- */
-function frio_get_theme_color(int $uid = null)
-{
-	$nav_bg = DI::config()->get('frio', 'nav_bg') ?: '#708fa0';
-
-	if ($uid) {
-		$nav_bg = DI::pConfig()->get($uid, 'frio', 'background_color') ?: $nav_bg;
-	}
-
-	$scheme = DI::config()->get('frio', 'scheme', DI::config()->get('frio', 'schema'));
-	$scheme = Strings::sanitizeFilePathItem($scheme);
-
-	if ($scheme && ($scheme != '---') && file_exists('view/theme/frio/scheme/' . $scheme . '.php')) {
-		$schemefile = 'view/theme/frio/scheme/' . $scheme . '.php';
-		require_once $schemefile;
-	}
-
-	return $nav_bg;
-}