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)
$topmenu_preferences = ['prefs', 'acl', 'cats', 'security'];
$topmenu_preferences = ['darkmode','prefs', 'acl', 'cats', 'security'];
// set topmenu preferences items
if($GLOBALS['egw_info']['user']['apps']['preferences'])
@ -1236,7 +1236,7 @@ abstract class Framework extends Framework\Extra
// set topmenu info items
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;
}
@ -1257,6 +1257,9 @@ abstract class Framework extends Framework\Extra
static $memberships=null;
if (!isset($memberships)) $memberships = $GLOBALS['egw']->accounts->memberships($GLOBALS['egw_info']['user']['account_id'], true);
static $types = array(
'darkmode' => array(
'title' => 'Darkmode'
),
'prefs' => array(
'title' => 'Preferences',
'hook' => 'settings',
@ -1310,7 +1313,17 @@ abstract class Framework extends Framework\Extra
));
}
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:
$this->_add_topmenu_item(array(
'id' => $type,

145
pixelegg/css/mobile.css
View File

@ -35,6 +35,113 @@
* Would be a lot better to include their css files and only overwrite
* 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
* Überschreibt egroupware/etemplate/templates/default/etemplate2.css
@ -1362,20 +1469,20 @@ span.ui-icon-search {
box-shadow: -2px 1px 9px 3px #B4B4B4;
}
.ui-dialog .ui-dialog-buttonpane {
padding-left: .8em;
padding-right: .8em;
padding-left: 0.8em;
padding-right: 0.8em;
padding-top: 0.7em;
}
.ui-dialog .ui-dialog-titlebar {
padding-left: .8em;
padding-right: .8em;
padding-left: 0.8em;
padding-right: 0.8em;
font-size: 12pt;
border: none;
font-weight: normal;
background: white;
}
.ui-dialog .ui-dialog-titlebar-close {
right: .8em;
right: 0.8em;
}
.ui-widget-content {
border: 1px solid #B4B4B4;
@ -4319,6 +4426,7 @@ td.message span.message {
cursor: pointer;
background-repeat: repeat-x;
height: 100%;
max-width: 200px;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute;
@ -4511,6 +4619,14 @@ td.message span.message {
color: #000000;
padding-top: 0;
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 {
background-image: url(../images/reload.png);
@ -5053,6 +5169,7 @@ td.message span.message {
right: 0px;
z-index: 1000;
background-color: #fbfbfb;
/*darkmode*/
/*Notification*/
/*Search button*/
/*current user info*/
@ -5144,6 +5261,18 @@ td.message span.message {
height: 45px;
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 {
line-height: 45px;
text-align: center;
@ -5764,7 +5893,7 @@ table.egwGridView_grid tbody tr.th:hover {
}
table.egwGridView_grid tbody tr.selected {
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 {
border-bottom: 1px solid #E6E6E6;
@ -6156,7 +6285,7 @@ a.textSidebox {
}
}
.egw-loading-prompt-container::before {
opacity: .3;
opacity: 0.3;
content: "";
background-color: #aaaaaa;
width: 100%;
@ -6786,7 +6915,7 @@ span.egw_tutorial_title {
background-color: #B4B4B4;
}
body #egw_fw_sidebar.avatarSubmenu {
top: 280px;
top: 325px;
}
body #egw_fw_sidebar #egw_fw_sidemenu {
position: absolute;

2
pixelegg/css/mobile.less
View File

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

503
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
* neccesarry settings
*/
@import "../less/darkmode.less";
@import "../less/etemplate2.less";
// print ausgabe
@import "../less/print.less";

21
pixelegg/css/pixelegg.css
View File

@ -36,13 +36,16 @@
* neccesarry settings
*/
/**
* Styles for etemplate2 widgets
* Überschreibt egroupware/etemplate/templates/default/etemplate2.css
* EGroupware: Darkmode theme
*
* @version: 1
* Stefan Reinhardt
* 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$
*/
/*@import (less) "../../api/templates/default/etemplate2.css";*/
/**
* DARK THEME
*/
@ -139,6 +142,14 @@
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 {
/**
* Top level

22
pixelegg/js/fw_mobile.js
View File

@ -1033,6 +1033,28 @@
{
_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 (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 {

155
pixelegg/mobile/fw_mobile.css
View File

@ -9,6 +9,113 @@
* @package pixelegg
* @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
*
@ -1373,20 +1480,20 @@ span.ui-icon-search {
box-shadow: -2px 1px 9px 3px #B4B4B4;
}
.ui-dialog .ui-dialog-buttonpane {
padding-left: .8em;
padding-right: .8em;
padding-left: 0.8em;
padding-right: 0.8em;
padding-top: 0.7em;
}
.ui-dialog .ui-dialog-titlebar {
padding-left: .8em;
padding-right: .8em;
padding-left: 0.8em;
padding-right: 0.8em;
font-size: 12pt;
border: none;
font-weight: normal;
background: white;
}
.ui-dialog .ui-dialog-titlebar-close {
right: .8em;
right: 0.8em;
}
.ui-widget-content {
border: 1px solid #B4B4B4;
@ -4330,6 +4437,7 @@ td.message span.message {
cursor: pointer;
background-repeat: repeat-x;
height: 100%;
max-width: 200px;
}
#egw_fw_main #egw_fw_tabs .egw_fw_ui_tabs_header .egw_fw_ui_tab_header .notifyTabDiv {
position: absolute;
@ -4522,6 +4630,14 @@ td.message span.message {
color: #000000;
padding-top: 0;
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 {
background-image: url(../images/reload.png);
@ -5064,6 +5180,7 @@ td.message span.message {
right: 0px;
z-index: 1000;
background-color: #fbfbfb;
/*darkmode*/
/*Notification*/
/*Search button*/
/*current user info*/
@ -5155,6 +5272,18 @@ td.message span.message {
height: 45px;
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 {
line-height: 45px;
text-align: center;
@ -5775,7 +5904,7 @@ table.egwGridView_grid tbody tr.th:hover {
}
table.egwGridView_grid tbody tr.selected {
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 {
border-bottom: 1px solid #E6E6E6;
@ -6167,7 +6296,7 @@ a.textSidebox {
}
}
.egw-loading-prompt-container::before {
opacity: .3;
opacity: 0.3;
content: "";
background-color: #aaaaaa;
width: 100%;
@ -6797,7 +6926,7 @@ span.egw_tutorial_title {
background-color: #B4B4B4;
}
body #egw_fw_sidebar.avatarSubmenu {
top: 280px;
top: 325px;
}
body #egw_fw_sidebar #egw_fw_sidemenu {
position: absolute;
@ -7777,6 +7906,9 @@ form[id^="ranking-"] .dialogHeadbar {
body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items ul {
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 {
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 {
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 {
background-image: url(../images/topmenu_items/mobile/menu_active.svg);
}

10
pixelegg/mobile/fw_mobile.less
View File

@ -9,7 +9,7 @@
* @package pixelegg
* @version $Id$
*/
@import "../less/darkmode.less";
@import "../css/mobile.less";
@import (reference) "../less/def_mobile.less";
@import "../less/app_colors.less";
@ -491,6 +491,14 @@
a#topmenu_search {
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);
}
}
}
}