holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP darkmode theme: Implement darkmode switch for mobile view

Browse Source
This commit is contained in:
Hadi Nategh 2020-12-17 17:19:48 +01:00
parent 8910983c8e
commit 467a9cad42
11 changed files with 735 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
api/src/Framework.php
View File

@ -1205,7 +1205,7 @@ abstract class Framework extends Framework\Extra
} }
// array of topmenu preferences items (orders of the items matter) // array of topmenu preferences items (orders of the items matter)
$topmenu_preferences = ['prefs', 'acl', 'cats', 'security']; $topmenu_preferences = ['darkmode','prefs', 'acl', 'cats', 'security'];
// set topmenu preferences items // set topmenu preferences items
if($GLOBALS['egw_info']['user']['apps']['preferences']) if($GLOBALS['egw_info']['user']['apps']['preferences'])
@ -1236,7 +1236,7 @@ abstract class Framework extends Framework\Extra
// set topmenu info items // set topmenu info items
foreach ($topmenu_info_items as $id => $content) foreach ($topmenu_info_items as $id => $content)
{ {
if (!$content || (in_array($id, ['search', 'quick_add', 'update']) && (Header\UserAgent::mobile() || $GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'fw_mobile'))) if (!$content || (in_array($id, ['search', 'quick_add', 'update', 'darkmode']) && (Header\UserAgent::mobile() || $GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'fw_mobile')))
{ {
continue; continue;
} }
@ -1257,6 +1257,9 @@ abstract class Framework extends Framework\Extra
static $memberships=null; static $memberships=null;
if (!isset($memberships)) $memberships = $GLOBALS['egw']->accounts->memberships($GLOBALS['egw_info']['user']['account_id'], true); if (!isset($memberships)) $memberships = $GLOBALS['egw']->accounts->memberships($GLOBALS['egw_info']['user']['account_id'], true);
static $types = array( static $types = array(
'darkmode' => array(
'title' => 'Darkmode'
),
'prefs' => array( 'prefs' => array(
'title' => 'Preferences', 'title' => 'Preferences',
'hook' => 'settings', 'hook' => 'settings',
@ -1310,7 +1313,17 @@ abstract class Framework extends Framework\Extra
)); ));
} }
break; break;
case 'darkmode':
if ((Header\UserAgent::mobile() || $GLOBALS['egw_info']['user']['preferences']['common']['theme'] == 'fw_mobile'))
{
$this->_add_topmenu_item(array(
'id' => 'darkmode',
'name' => 'preferences',
'title' => lang($types[$type]['title']),
'url' => "javascript:framework.toggle_darkmode()",
));
}
break;
default: default:
$this->_add_topmenu_item(array( $this->_add_topmenu_item(array(
'id' => $type, 'id' => $type,

147
pixelegg/css/mobile.css
View File

@ -35,6 +35,113 @@
* Would be a lot better to include their css files and only overwrite * Would be a lot better to include their css files and only overwrite
* neccesarry settings * neccesarry settings
*/ */
/**
* EGroupware: Darkmode theme
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi Nategh <hn@egroupware.org>
* @package pixelegg
* @version $Id$
*/
/**
* DARK THEME
*/
@media all {
html[data-darkmode='1'] {
background: #000;
position: fixed;
filter: invert(1) hue-rotate(180deg);
}
html[data-darkmode='1'] img,
html[data-darkmode='1'] #blueimp-gallery,
html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active {
filter: invert(1) hue-rotate(180deg) !important;
}
html[data-darkmode='1'] div.dhtmlxMenu_egw_SubLevelArea_Polygon,
html[data-darkmode='1'] .egw_tooltip,
html[data-darkmode='1'] body .egw_message_wrapper,
html[data-darkmode='1'] #egw_fw_header #egw_fw_topmenu,
html[data-darkmode='1'] .ui-dialog,
html[data-darkmode='1'] .box_shadow {
box-shadow: 0px 0px 2px 2px #666666;
-moz-box-shadow: 0px 0px 2px 2px #666666;
-webkit-box-shadow: 0px 0px 2px 2px #666666;
-khtml-box-shadow: 0px 0px 2px 2px #666666;
}
html[data-darkmode='1'] #calendar_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #calendar_sidebox_header {
border-color: #ff9dca !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #calendar-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ff9dca !important;
}
html[data-darkmode='1'] #addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #addressbook_sidebox_header {
border-color: #aadaff !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #addressbook-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #aadaff !important;
}
html[data-darkmode='1'] #infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #infolog_sidebox_header {
border-color: #ffccff !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ffccff !important;
}
html[data-darkmode='1'] #timesheet_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #timesheet_sidebox_header {
border-color: #ffdbff !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #timesheet-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ffdbff !important;
}
html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #mail_sidebox_header {
border-color: #5db9ec !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #5db9ec !important;
}
html[data-darkmode='1'] #projectmanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #projectmanager_sidebox_header {
border-color: #487b7b !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #projectmanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #487b7b !important;
}
html[data-darkmode='1'] #resources_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #resources_sidebox_header {
border-color: #aee0e0 !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #resources-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #aee0e0 !important;
}
html[data-darkmode='1'] #admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #admin_sidebox_header {
border-color: #cccccc !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #admin-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #cccccc !important;
}
html[data-darkmode='1'] #filemanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #filemanager_sidebox_header {
border-color: #ac4500 !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #filemanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ac4500 !important;
}
html[data-darkmode='1'] #bookmarks_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #bookmarks_sidebox_header {
border-color: #cc6633 !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #bookmarks-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #cc6633 !important;
}
}
/** /**
* Styles for etemplate2 widgets * Styles for etemplate2 widgets
* Überschreibt egroupware/etemplate/templates/default/etemplate2.css * Überschreibt egroupware/etemplate/templates/default/etemplate2.css
@ -1362,20 +1469,20 @@ span.ui-icon-search {
box-shadow: -2px 1px 9px 3px #B4B4B4; box-shadow: -2px 1px 9px 3px #B4B4B4;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-dialog-buttonpane {
padding-left: .8em; padding-left: 0.8em;
padding-right: .8em; padding-right: 0.8em;
padding-top: 0.7em; padding-top: 0.7em;
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding-left: .8em; padding-left: 0.8em;
padding-right: .8em; padding-right: 0.8em;
font-size: 12pt; font-size: 12pt;
border: none; border: none;
font-weight: normal; font-weight: normal;
background: white; background: white;
} }
.ui-dialog .ui-dialog-titlebar-close { .ui-dialog .ui-dialog-titlebar-close {
right: .8em; right: 0.8em;
} }
.ui-widget-content { .ui-widget-content {
border: 1px solid #B4B4B4; border: 1px solid #B4B4B4;
@ -4319,6 +4426,7 @@ td.message span.message {
cursor: pointer; cursor: pointer;
background-repeat: repeat-x; background-repeat: repeat-x;
height: 100%; height: 100%;
max-width: 200px;
} }
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv { #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute; position: absolute;
@ -4511,6 +4619,14 @@ td.message span.message {
color: #000000; color: #000000;
padding-top: 0; padding-top: 0;
line-height: 33px; line-height: 33px;
height: 33px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 10px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active h1:hover {
padding-left: 35px;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover {
background-image: url(../images/reload.png); background-image: url(../images/reload.png);
@ -5053,6 +5169,7 @@ td.message span.message {
right: 0px; right: 0px;
z-index: 1000; z-index: 1000;
background-color: #fbfbfb; background-color: #fbfbfb;
/*darkmode*/
/*Notification*/ /*Notification*/
/*Search button*/ /*Search button*/
/*current user info*/ /*current user info*/
@ -5144,6 +5261,18 @@ td.message span.message {
height: 45px; height: 45px;
display: inline-block; display: inline-block;
} }
#egw_fw_topmenu_info_items #topmenu_info_darkmode span {
background-image: url(../images/darkmode_off.svg);
width: 45px;
height: 45px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
}
#egw_fw_topmenu_info_items #topmenu_info_darkmode span.darkmode_on {
background-image: url(../images/darkmode_on.svg);
filter: invert(1) hue-rotate(180deg);
}
#egw_fw_topmenu_info_items #topmenu_info_notifications { #egw_fw_topmenu_info_items #topmenu_info_notifications {
line-height: 45px; line-height: 45px;
text-align: center; text-align: center;
@ -5764,7 +5893,7 @@ table.egwGridView_grid tbody tr.th:hover {
} }
table.egwGridView_grid tbody tr.selected { table.egwGridView_grid tbody tr.selected {
background-image: none; background-image: none;
background-color: rgba(102, 153, 204, 0.7); background-color: rgba(102, 153, 204, 0.7) !important;
} }
table.egwGridView_grid tbody td { table.egwGridView_grid tbody td {
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
@ -6156,7 +6285,7 @@ a.textSidebox {
} }
} }
.egw-loading-prompt-container::before { .egw-loading-prompt-container::before {
opacity: .3; opacity: 0.3;
content: ""; content: "";
background-color: #aaaaaa; background-color: #aaaaaa;
width: 100%; width: 100%;
@ -6235,7 +6364,7 @@ a.textSidebox {
z-index: 999; z-index: 999;
width: 100px; width: 100px;
border-radius: 5px; border-radius: 5px;
border: solid 10px #679FD2; border: solid 10px #679FD2;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
/** /**
@ -6786,7 +6915,7 @@ span.egw_tutorial_title {
background-color: #B4B4B4; background-color: #B4B4B4;
} }
body #egw_fw_sidebar.avatarSubmenu { body #egw_fw_sidebar.avatarSubmenu {
top: 280px; top: 325px;
} }
body #egw_fw_sidebar #egw_fw_sidemenu { body #egw_fw_sidebar #egw_fw_sidemenu {
position: absolute; position: absolute;

2
pixelegg/css/mobile.less
View File

@ -440,7 +440,7 @@
//# SIDEBAR # //# SIDEBAR #
//# # //# #
//################### //###################
#egw_fw_sidebar.avatarSubmenu {top:280px;} #egw_fw_sidebar.avatarSubmenu {top:325px;}
#egw_fw_sidebar{ #egw_fw_sidebar{
//SIDE AREA //SIDE AREA
#egw_fw_sidemenu { #egw_fw_sidemenu {

505
pixelegg/css/monochrome.css
View File

File diff suppressed because it is too large Load Diff

1
pixelegg/css/monochrome.less
View File

@ -24,6 +24,7 @@
* Would be a lot better to include their css files and only overwrite * Would be a lot better to include their css files and only overwrite
* neccesarry settings * neccesarry settings
*/ */
@import "../less/darkmode.less";
@import "../less/etemplate2.less"; @import "../less/etemplate2.less";
// print ausgabe // print ausgabe
@import "../less/print.less"; @import "../less/print.less";

21
pixelegg/css/pixelegg.css
View File

@ -36,13 +36,16 @@
* neccesarry settings * neccesarry settings
*/ */
/** /**
* Styles for etemplate2 widgets * EGroupware: Darkmode theme
* Überschreibt egroupware/etemplate/templates/default/etemplate2.css
* *
* @version: 1 * Please do NOT change css-files directly, instead change less-files and compile them!
* Stefan Reinhardt *
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi Nategh <hn@egroupware.org>
* @package pixelegg
* @version $Id$
*/ */
/*@import (less) "../../api/templates/default/etemplate2.css";*/
/** /**
* DARK THEME * DARK THEME
*/ */
@ -139,6 +142,14 @@
border-top-color: #cc6633 !important; border-top-color: #cc6633 !important;
} }
} }
/**
* Styles for etemplate2 widgets
* Überschreibt egroupware/etemplate/templates/default/etemplate2.css
*
* @version: 1
* Stefan Reinhardt
*/
/*@import (less) "../../api/templates/default/etemplate2.css";*/
@media all { @media all {
/** /**
* Top level * Top level

22
pixelegg/js/fw_mobile.js
View File

@ -1033,6 +1033,28 @@
{ {
_widget.header.delete_action.hide(); _widget.header.delete_action.hide();
} }
},
/**
*
* @param node
*/
toggle_darkmode: function()
{
let node = document.getElementById('topmenu_darkmode');
let state = node.classList.contains('darkmode_on');
egw.set_preference('common', 'darkmode',state?'0':'1');
this._setDarkMode(state?'0':'1');
if (state == 1)
{
node.classList.remove('darkmode_on');
node.title = egw.lang('light mode');
}
else
{
node.classList.add('darkmode_on');
node.title = egw.lang('dark mode');
}
} }
}); });

67
pixelegg/less/darkmode.less Normal file
View File

@ -0,0 +1,67 @@
/**
* EGroupware: Darkmode theme
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi Nategh <hn@egroupware.org>
* @package pixelegg
* @version $Id$
*/
/**
* DARK THEME
*/
@media all {
html[data-darkmode='1']
{
background: #000;
position: fixed; // ATM Firefox doesn't like filter:invert on none fixed html
filter: invert(1) hue-rotate(180deg);
img, #blueimp-gallery,
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active {
filter: invert(1) hue-rotate(180deg) !important;
}
div.dhtmlxMenu_egw_SubLevelArea_Polygon,.egw_tooltip,
body .egw_message_wrapper,#egw_fw_header #egw_fw_topmenu,.ui-dialog, .box_shadow,
{
box-shadow: 0px 0px 2px 2px #666666;
-moz-box-shadow: 0px 0px 2px 2px #666666;
-webkit-box-shadow: 0px 0px 2px 2px #666666;
-khtml-box-shadow: 0px 0px 2px 2px #666666;
}
//Calendar
#calendar_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#calendar_sidebox_header {border-color:#ff9dca !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #calendar-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ff9dca !important;}
//Addressbook
#addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#addressbook_sidebox_header {border-color:#aadaff !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #addressbook-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#aadaff !important;}
//Infolog
#infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#infolog_sidebox_header {border-color:#ffccff !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ffccff !important;}
//Timesheet
#timesheet_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#timesheet_sidebox_header {border-color:#ffdbff !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #timesheet-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ffdbff !important;}
//Mail
#mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#mail_sidebox_header {border-color:#5db9ec!important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#5db9ec !important;}
//ProjectManager
#projectmanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#projectmanager_sidebox_header {border-color:#487b7b !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #projectmanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#487b7b !important;}
//Resources
#resources_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#resources_sidebox_header {border-color:#aee0e0 !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #resources-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#aee0e0 !important;}
//Admin
#admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#admin_sidebox_header {border-color:#cccccc !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #admin-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#cccccc !important;}
//Filemamanger
#filemanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#filemanager_sidebox_header {border-color:#ac4500 !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #filemanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ac4500 !important;}
//Bookmarks
#bookmarks_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#bookmarks_sidebox_header {border-color:#cc6633 !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #bookmarks-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#cc6633 !important;}
}
}

54
pixelegg/less/etemplate2.less
View File

@ -10,60 +10,6 @@
@import (reference) "./def_buttons.less"; @import (reference) "./def_buttons.less";
/*@import (less) "../../api/templates/default/etemplate2.css";*/ /*@import (less) "../../api/templates/default/etemplate2.css";*/
/**
* DARK THEME
*/
@media all {
html[data-darkmode='1'] {
background: #000;
position: fixed; // ATM Firefox doesn't like filter:invert on none fixed html
filter: invert(1) hue-rotate(180deg);
img, #blueimp-gallery,
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active {
filter: invert(1) hue-rotate(180deg) !important;
}
div.dhtmlxMenu_egw_SubLevelArea_Polygon,.egw_tooltip,
body .egw_message_wrapper,#egw_fw_header #egw_fw_topmenu,.ui-dialog, .box_shadow,
{
box-shadow: 0px 0px 2px 2px #666666;
-moz-box-shadow: 0px 0px 2px 2px #666666;
-webkit-box-shadow: 0px 0px 2px 2px #666666;
-khtml-box-shadow: 0px 0px 2px 2px #666666;
}
//Calendar
#calendar_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#calendar_sidebox_header {border-color:#ff9dca !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #calendar-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ff9dca !important;}
//Addressbook
#addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#addressbook_sidebox_header {border-color:#aadaff !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #addressbook-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#aadaff !important;}
//Infolog
#infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#infolog_sidebox_header {border-color:#ffccff !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ffccff !important;}
//Timesheet
#timesheet_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#timesheet_sidebox_header {border-color:#ffdbff !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #timesheet-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ffdbff !important;}
//Mail
#mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#mail_sidebox_header {border-color:#5db9ec!important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#5db9ec !important;}
//ProjectManager
#projectmanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#projectmanager_sidebox_header {border-color:#487b7b !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #projectmanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#487b7b !important;}
//Resources
#resources_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#resources_sidebox_header {border-color:#aee0e0 !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #resources-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#aee0e0 !important;}
//Admin
#admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#admin_sidebox_header {border-color:#cccccc !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #admin-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#cccccc !important;}
//Filemamanger
#filemanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#filemanager_sidebox_header {border-color:#ac4500 !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #filemanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#ac4500 !important;}
//Bookmarks
#bookmarks_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,#bookmarks_sidebox_header {border-color:#cc6633 !important;}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #bookmarks-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {border-top-color:#cc6633 !important;}
}
}
@media all { @media all {

157
pixelegg/mobile/fw_mobile.css
View File

@ -9,6 +9,113 @@
* @package pixelegg * @package pixelegg
* @version $Id$ * @version $Id$
*/ */
/**
* EGroupware: Darkmode theme
*
* Please do NOT change css-files directly, instead change less-files and compile them!
*
* @link http://www.egroupware.org
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @author Hadi Nategh <hn@egroupware.org>
* @package pixelegg
* @version $Id$
*/
/**
* DARK THEME
*/
@media all {
html[data-darkmode='1'] {
background: #000;
position: fixed;
filter: invert(1) hue-rotate(180deg);
}
html[data-darkmode='1'] img,
html[data-darkmode='1'] #blueimp-gallery,
html[data-darkmode='1'] #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_content .egw_fw_ui_category_active {
filter: invert(1) hue-rotate(180deg) !important;
}
html[data-darkmode='1'] div.dhtmlxMenu_egw_SubLevelArea_Polygon,
html[data-darkmode='1'] .egw_tooltip,
html[data-darkmode='1'] body .egw_message_wrapper,
html[data-darkmode='1'] #egw_fw_header #egw_fw_topmenu,
html[data-darkmode='1'] .ui-dialog,
html[data-darkmode='1'] .box_shadow {
box-shadow: 0px 0px 2px 2px #666666;
-moz-box-shadow: 0px 0px 2px 2px #666666;
-webkit-box-shadow: 0px 0px 2px 2px #666666;
-khtml-box-shadow: 0px 0px 2px 2px #666666;
}
html[data-darkmode='1'] #calendar_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #calendar_sidebox_header {
border-color: #ff9dca !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #calendar-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ff9dca !important;
}
html[data-darkmode='1'] #addressbook_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #addressbook_sidebox_header {
border-color: #aadaff !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #addressbook-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #aadaff !important;
}
html[data-darkmode='1'] #infolog_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #infolog_sidebox_header {
border-color: #ffccff !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #infolog-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ffccff !important;
}
html[data-darkmode='1'] #timesheet_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #timesheet_sidebox_header {
border-color: #ffdbff !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #timesheet-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ffdbff !important;
}
html[data-darkmode='1'] #mail_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #mail_sidebox_header {
border-color: #5db9ec !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #mail-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #5db9ec !important;
}
html[data-darkmode='1'] #projectmanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #projectmanager_sidebox_header {
border-color: #487b7b !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #projectmanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #487b7b !important;
}
html[data-darkmode='1'] #resources_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #resources_sidebox_header {
border-color: #aee0e0 !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #resources-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #aee0e0 !important;
}
html[data-darkmode='1'] #admin_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #admin_sidebox_header {
border-color: #cccccc !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #admin-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #cccccc !important;
}
html[data-darkmode='1'] #filemanager_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #filemanager_sidebox_header {
border-color: #ac4500 !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #filemanager-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #ac4500 !important;
}
html[data-darkmode='1'] #bookmarks_sidebox_header.egw_fw_ui_sidemenu_entry_header_active,
html[data-darkmode='1'] #bookmarks_sidebox_header {
border-color: #cc6633 !important;
}
html[data-darkmode='1'] #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header #bookmarks-egw_fw_ui_tab_header.egw_fw_ui_tab_header_active {
border-top-color: #cc6633 !important;
}
}
/** /**
* EGroupware: Stylite Pixelegg template - mobile theme * EGroupware: Stylite Pixelegg template - mobile theme
* *
@ -1373,20 +1480,20 @@ span.ui-icon-search {
box-shadow: -2px 1px 9px 3px #B4B4B4; box-shadow: -2px 1px 9px 3px #B4B4B4;
} }
.ui-dialog .ui-dialog-buttonpane { .ui-dialog .ui-dialog-buttonpane {
padding-left: .8em; padding-left: 0.8em;
padding-right: .8em; padding-right: 0.8em;
padding-top: 0.7em; padding-top: 0.7em;
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding-left: .8em; padding-left: 0.8em;
padding-right: .8em; padding-right: 0.8em;
font-size: 12pt; font-size: 12pt;
border: none; border: none;
font-weight: normal; font-weight: normal;
background: white; background: white;
} }
.ui-dialog .ui-dialog-titlebar-close { .ui-dialog .ui-dialog-titlebar-close {
right: .8em; right: 0.8em;
} }
.ui-widget-content { .ui-widget-content {
border: 1px solid #B4B4B4; border: 1px solid #B4B4B4;
@ -4330,6 +4437,7 @@ td.message span.message {
cursor: pointer; cursor: pointer;
background-repeat: repeat-x; background-repeat: repeat-x;
height: 100%; height: 100%;
max-width: 200px;
} }
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv { #egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute; position: absolute;
@ -4522,6 +4630,14 @@ td.message span.message {
color: #000000; color: #000000;
padding-top: 0; padding-top: 0;
line-height: 33px; line-height: 33px;
height: 33px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 10px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active h1:hover {
padding-left: 35px;
} }
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover { #egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header_active:hover {
background-image: url(../images/reload.png); background-image: url(../images/reload.png);
@ -5064,6 +5180,7 @@ td.message span.message {
right: 0px; right: 0px;
z-index: 1000; z-index: 1000;
background-color: #fbfbfb; background-color: #fbfbfb;
/*darkmode*/
/*Notification*/ /*Notification*/
/*Search button*/ /*Search button*/
/*current user info*/ /*current user info*/
@ -5155,6 +5272,18 @@ td.message span.message {
height: 45px; height: 45px;
display: inline-block; display: inline-block;
} }
#egw_fw_topmenu_info_items #topmenu_info_darkmode span {
background-image: url(../images/darkmode_off.svg);
width: 45px;
height: 45px;
display: inline-block;
background-position: center;
background-repeat: no-repeat;
}
#egw_fw_topmenu_info_items #topmenu_info_darkmode span.darkmode_on {
background-image: url(../images/darkmode_on.svg);
filter: invert(1) hue-rotate(180deg);
}
#egw_fw_topmenu_info_items #topmenu_info_notifications { #egw_fw_topmenu_info_items #topmenu_info_notifications {
line-height: 45px; line-height: 45px;
text-align: center; text-align: center;
@ -5775,7 +5904,7 @@ table.egwGridView_grid tbody tr.th:hover {
} }
table.egwGridView_grid tbody tr.selected { table.egwGridView_grid tbody tr.selected {
background-image: none; background-image: none;
background-color: rgba(102, 153, 204, 0.7); background-color: rgba(102, 153, 204, 0.7) !important;
} }
table.egwGridView_grid tbody td { table.egwGridView_grid tbody td {
border-bottom: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6;
@ -6167,7 +6296,7 @@ a.textSidebox {
} }
} }
.egw-loading-prompt-container::before { .egw-loading-prompt-container::before {
opacity: .3; opacity: 0.3;
content: ""; content: "";
background-color: #aaaaaa; background-color: #aaaaaa;
width: 100%; width: 100%;
@ -6246,7 +6375,7 @@ a.textSidebox {
z-index: 999; z-index: 999;
width: 100px; width: 100px;
border-radius: 5px; border-radius: 5px;
border: solid 10px #679FD2; border: solid 10px #679FD2;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
/** /**
@ -6797,7 +6926,7 @@ span.egw_tutorial_title {
background-color: #B4B4B4; background-color: #B4B4B4;
} }
body #egw_fw_sidebar.avatarSubmenu { body #egw_fw_sidebar.avatarSubmenu {
top: 280px; top: 325px;
} }
body #egw_fw_sidebar #egw_fw_sidemenu { body #egw_fw_sidebar #egw_fw_sidemenu {
position: absolute; position: absolute;
@ -7777,6 +7906,9 @@ form[id^="ranking-"] .dialogHeadbar {
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul { body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul {
border-left: 6px solid silver; border-left: 6px solid silver;
} }
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li {
/*darkmode*/
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_logout { body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_logout {
background-image: url(../images/logout.svg); background-image: url(../images/logout.svg);
} }
@ -7798,6 +7930,13 @@ form[id^="ranking-"] .dialogHeadbar {
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_search { body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_search {
background-image: url(../images/search.svg); background-image: url(../images/search.svg);
} }
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_darkmode {
background-image: url(../images/darkmode_off.svg);
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul li a#topmenu_darkmode.darkmode_on {
background-image: url(../images/darkmode_on.svg);
filter: invert(1) hue-rotate(180deg);
}
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_menu { body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_menu {
background-image: url(../images/topmenu_items/mobile/menu_active.svg); background-image: url(../images/topmenu_items/mobile/menu_active.svg);
} }

10
pixelegg/mobile/fw_mobile.less
View File

@ -9,7 +9,7 @@
* @package pixelegg * @package pixelegg
* @version $Id$ * @version $Id$
*/ */
@import "../less/darkmode.less";
@import "../css/mobile.less"; @import "../css/mobile.less";
@import (reference) "../less/def_mobile.less"; @import (reference) "../less/def_mobile.less";
@import "../less/app_colors.less"; @import "../less/app_colors.less";
@ -491,6 +491,14 @@
a#topmenu_search { a#topmenu_search {
background-image: url(../images/search.svg); background-image: url(../images/search.svg);
} }
/*darkmode*/
a#topmenu_darkmode {
background-image: url(../images/darkmode_off.svg);
}
a#topmenu_darkmode.darkmode_on {
background-image: url(../images/darkmode_on.svg);
filter:invert(1) hue-rotate(180deg);
}
} }
} }
} }