mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-22 14:41:29 +01:00
WIP darkmode theme: Implement darkmode switch for mobile view
This commit is contained in:
Hadi Nategh
parent
8910983c8e
commit
467a9cad42
@ -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,
|
||||
|
||||
@ -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%;
|
||||
@ -6235,7 +6364,7 @@ a.textSidebox {
|
||||
z-index: 999;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
border: solid 10px #679FD2;
|
||||
border: solid 10px #679FD2;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/**
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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";
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
67
pixelegg/less/darkmode.less
Normal 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;}
|
||||
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
|
||||
@ -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%;
|
||||
@ -6246,7 +6375,7 @@ a.textSidebox {
|
||||
z-index: 999;
|
||||
width: 100px;
|
||||
border-radius: 5px;
|
||||
border: solid 10px #679FD2;
|
||||
border: solid 10px #679FD2;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
/**
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user