Kdots style work
- Get CSS minify working - Further darkmode work
This commit is contained in:
parent
7559ae4f21
commit
076694187c
81
Gruntfile.js
81
Gruntfile.js
|
@ -40,28 +40,14 @@ module.exports = function (grunt) {
|
|||
pixelegg: {
|
||||
files: {
|
||||
"pixelegg/css/pixelegg.min.css": [
|
||||
"node_modules/flatpickr/dist/themes/light.css",
|
||||
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
|
||||
"vendor/bower-asset/diff2html/dist/diff2html.css",
|
||||
"vendor/bower-asset/cropper/dist/cropper.min.css",
|
||||
"api/templates/default/css/flags.css",
|
||||
"api/templates/default/css/htmlarea.css",
|
||||
"api/templates/default/etemplate2.css",
|
||||
"pixelegg/css/pixelegg.css",
|
||||
"api/templates/default/print.css",
|
||||
"pixelegg/print.css"
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/pixelegg.min.css"
|
||||
],
|
||||
"pixelegg/css/mobile.min.css": [
|
||||
"node_modules/flatpickr/dist/themes/light.css",
|
||||
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
|
||||
"vendor/bower-asset/diff2html/dist/diff2html.css",
|
||||
"vendor/bower-asset/cropper/dist/cropper.min.css",
|
||||
"api/templates/default/css/flags.css",
|
||||
"api/templates/default/css/htmlarea.css",
|
||||
"api/templates/default/etemplate2.css",
|
||||
"pixelegg/css/mobile.css",
|
||||
"api/templates/default/print.css",
|
||||
"pixelegg/print.css"
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/mobile.min.css"
|
||||
],
|
||||
"pixelegg/mobile/fw_mobile.min.css": [
|
||||
"node_modules/flatpickr/dist/themes/light.css",
|
||||
|
@ -76,28 +62,44 @@ module.exports = function (grunt) {
|
|||
"pixelegg/print.css"
|
||||
],
|
||||
"pixelegg/css/monochrome.min.css": [
|
||||
"node_modules/flatpickr/dist/themes/light.css",
|
||||
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
|
||||
"vendor/bower-asset/diff2html/dist/diff2html.css",
|
||||
"vendor/bower-asset/cropper/dist/cropper.min.css",
|
||||
"api/templates/default/css/flags.css",
|
||||
"api/templates/default/css/htmlarea.css",
|
||||
"api/templates/default/etemplate2.css",
|
||||
"pixelegg/css/monochrome.css",
|
||||
"api/templates/default/print.css",
|
||||
"pixelegg/print.css"
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/monochrome.min.css"
|
||||
],
|
||||
"pixelegg/css/modern.min.css": [
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/pixelegg.min.css"
|
||||
],
|
||||
"pixelegg/css/0.min.css": [
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/pixelegg.min.css"
|
||||
],
|
||||
"pixelegg/css/1.min.css": [
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/pixelegg.min.css"
|
||||
],
|
||||
"pixelegg/css/2.min.css": [
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/pixelegg.min.css"
|
||||
],
|
||||
"pixelegg/css/3.min.css": [
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/light.css",
|
||||
"node_modules/@shoelace-style/shoelace/dist/themes/dark.css",
|
||||
"pixelegg/css/pixelegg.min.css"
|
||||
]
|
||||
}
|
||||
},
|
||||
kdots: {
|
||||
files: {
|
||||
"kdots/css/kdots.min.css": [
|
||||
"node_modules/flatpickr/dist/themes/light.css",
|
||||
"api/js/egw_action/test/skins/dhtmlxmenu_egw.css",
|
||||
"vendor/bower-asset/diff2html/dist/diff2html.css",
|
||||
"vendor/bower-asset/cropper/dist/cropper.min.css",
|
||||
"api/templates/default/css/flags.css",
|
||||
"api/templates/default/css/htmlarea.css",
|
||||
"api/templates/default/etemplate2.css",
|
||||
"pixelegg/css/pixelegg.css",
|
||||
"api/templates/default/print.css",
|
||||
"pixelegg/print.css"
|
||||
"kdots/css/kdots.css",
|
||||
"api/templates/default/print.css"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
@ -108,7 +110,8 @@ module.exports = function (grunt) {
|
|||
"*/Gruntfile.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
terser: null
|
||||
});
|
||||
// Load plugin for css minification
|
||||
grunt.loadNpmTasks("grunt-contrib-cssmin");
|
||||
|
|
|
@ -1,35 +0,0 @@
|
|||
html[data-darkmode="1"] body {
|
||||
background-color: black;
|
||||
color: var(--sl-color-neutral-700);
|
||||
|
||||
/*** HEADER ***/
|
||||
#egw_fw_topmenu_info_items {
|
||||
#topmenu_info_timer:before {
|
||||
filter:initial;
|
||||
}
|
||||
}
|
||||
|
||||
/*** APPLICATION ***/
|
||||
|
||||
egw-app {
|
||||
--application-header-text-color: var(--sl-color-neutral-700);
|
||||
}
|
||||
|
||||
/*** End APPLICATION ***/
|
||||
|
||||
/*** WIDGETS ***/
|
||||
/* This should mostly go away with webcomponents */
|
||||
|
||||
.et2_container {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
|
||||
background-color: var(--sl-input-background-color);
|
||||
}
|
||||
.nextmatch_sortheader {
|
||||
color: #96bcd9;
|
||||
}
|
||||
|
||||
/** End WIDGETS **/
|
||||
}
|
|
@ -1,12 +1,44 @@
|
|||
/**
|
||||
* kDots main styles
|
||||
*
|
||||
* Note that light / dark colors should go in framework_light.less & framework_dark.less
|
||||
* Note that light / dark colors should go in kdots_light.less & kdots_dark.less
|
||||
*/
|
||||
/** Theme customisations **/
|
||||
html[data-darkmode="1"] body {
|
||||
:root,
|
||||
:host,
|
||||
html,
|
||||
.sl-theme-light {
|
||||
/*
|
||||
color token generator using #0053c9
|
||||
https://codepen.io/claviska/full/QWveRgL
|
||||
*/
|
||||
--sl-color-primary-50: #f7fafd;
|
||||
--sl-color-primary-100: #e4edf9;
|
||||
--sl-color-primary-200: #d0dff5;
|
||||
--sl-color-primary-300: #bad0f0;
|
||||
--sl-color-primary-400: #9cbcea;
|
||||
--sl-color-primary-500: #75a2e2;
|
||||
--sl-color-primary-600: #4984d8;
|
||||
--sl-color-primary-700: #2169d0;
|
||||
--sl-color-primary-800: #0051c5;
|
||||
--sl-color-primary-900: #003a8d;
|
||||
--sl-color-primary-950: #002458;
|
||||
}
|
||||
html[data-darkmode="1"],
|
||||
.sl-theme-dark {
|
||||
background-color: black;
|
||||
color: var(--sl-color-neutral-700);
|
||||
--sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
|
||||
--sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
|
||||
--sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
|
||||
--sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
|
||||
--sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
|
||||
--sl-color-primary-500: var(--primary-color);
|
||||
--sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
|
||||
--sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
|
||||
--sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
|
||||
--sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
|
||||
--sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
|
||||
/*** HEADER ***/
|
||||
/*** APPLICATION ***/
|
||||
/*** End APPLICATION ***/
|
||||
|
@ -14,20 +46,26 @@ html[data-darkmode="1"] body {
|
|||
/* This should mostly go away with webcomponents */
|
||||
/** End WIDGETS **/
|
||||
}
|
||||
html[data-darkmode="1"] body #egw_fw_topmenu_info_items #topmenu_info_timer:before {
|
||||
html[data-darkmode="1"] #egw_fw_topmenu_info_items #topmenu_info_timer:before,
|
||||
.sl-theme-dark #egw_fw_topmenu_info_items #topmenu_info_timer:before {
|
||||
filter: initial;
|
||||
}
|
||||
html[data-darkmode="1"] body egw-app {
|
||||
html[data-darkmode="1"] egw-app,
|
||||
.sl-theme-dark egw-app {
|
||||
--application-header-text-color: var(--sl-color-neutral-700);
|
||||
}
|
||||
html[data-darkmode="1"] body .et2_container {
|
||||
html[data-darkmode="1"] .et2_container,
|
||||
.sl-theme-dark .et2_container {
|
||||
background-color: initial;
|
||||
}
|
||||
html[data-darkmode="1"] body .dialogFooterToolbar et2-button::part(base):not(:hover),
|
||||
html[data-darkmode="1"] body et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
|
||||
html[data-darkmode="1"] .dialogFooterToolbar et2-button::part(base):not(:hover),
|
||||
.sl-theme-dark .dialogFooterToolbar et2-button::part(base):not(:hover),
|
||||
html[data-darkmode="1"] et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover),
|
||||
.sl-theme-dark et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
|
||||
background-color: var(--sl-input-background-color);
|
||||
}
|
||||
html[data-darkmode="1"] body .nextmatch_sortheader {
|
||||
html[data-darkmode="1"] .nextmatch_sortheader,
|
||||
.sl-theme-dark .nextmatch_sortheader {
|
||||
color: #96bcd9;
|
||||
}
|
||||
/** End theme customisations **/
|
||||
|
@ -163,7 +201,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../../../timesheet/templates/default/images/navbar.svg);
|
||||
background-image: url(../../timesheet/templates/default/images/navbar.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px;
|
||||
background-position: center center;
|
||||
|
@ -174,7 +212,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
|
|||
}
|
||||
#egw_fw_topmenu_info_items #topmenu_info_quick_add span#quick_add {
|
||||
display: block;
|
||||
background-image: url(../../../api/templates/default/images/add.svg);
|
||||
background-image: url(../../api/templates/default/images/add.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 24px;
|
||||
background-position: center;
|
||||
|
@ -223,7 +261,7 @@ egw-framework#egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_header {
|
|||
width: 1em;
|
||||
}
|
||||
#egw_fw_topmenu_info_items button#topmenu_info_search {
|
||||
background-image: url(../../../api/templates/default/images/topmenu_items/search.svg);
|
||||
background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
|
||||
}
|
||||
#topmenu_info_print_title {
|
||||
background-image: url(../../../api/templates/default/images/print.svg);
|
||||
|
@ -354,7 +392,7 @@ div.et2_nextmatch .egwGridView_outer thead > tr th.optcol span.selectcols {
|
|||
height: 9px;
|
||||
padding: 4px 14px 0 2px;
|
||||
margin-top: 4px;
|
||||
background-image: url(../../../api/templates/default/images/selectcols.svg);
|
||||
background-image: url(../../api/templates/default/images/selectcols.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 10px;
|
||||
display: inline-block;
|
|
@ -1,12 +1,13 @@
|
|||
/**
|
||||
* kDots main styles
|
||||
*
|
||||
* Note that light / dark colors should go in framework_light.less & framework_dark.less
|
||||
* Note that light / dark colors should go in kdots_light.less & kdots_dark.less
|
||||
*/
|
||||
|
||||
|
||||
/** Theme customisations **/
|
||||
@import "./framework_dark.less";
|
||||
@import "./less/light.less";
|
||||
@import "./less/dark.less";
|
||||
/** End theme customisations **/
|
||||
|
||||
html, body {
|
||||
|
@ -164,7 +165,7 @@ egw-framework#egw_fw_basecontainer {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../../../timesheet/templates/default/images/navbar.svg);
|
||||
background-image: url(../../timesheet/templates/default/images/navbar.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px;
|
||||
background-position: center center;
|
||||
|
@ -177,7 +178,7 @@ egw-framework#egw_fw_basecontainer {
|
|||
|
||||
span#quick_add {
|
||||
display: block;
|
||||
background-image: url(../../../api/templates/default/images/add.svg);
|
||||
background-image: url(../../api/templates/default/images/add.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 24px;
|
||||
background-position: center;
|
||||
|
@ -236,7 +237,7 @@ egw-framework#egw_fw_basecontainer {
|
|||
}
|
||||
}
|
||||
button#topmenu_info_search {
|
||||
background-image: url(../../../api/templates/default/images/topmenu_items/search.svg);
|
||||
background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -383,7 +384,7 @@ div.et2_nextmatch {
|
|||
height: 9px;
|
||||
padding: 4px 14px 0 2px;
|
||||
margin-top: 4px;
|
||||
background-image: url(../../../api/templates/default/images/selectcols.svg);
|
||||
background-image: url(../../api/templates/default/images/selectcols.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px 10px;
|
||||
display: inline-block;
|
|
@ -0,0 +1,47 @@
|
|||
html[data-darkmode="1"], .sl-theme-dark {
|
||||
background-color: black;
|
||||
color: var(--sl-color-neutral-700);
|
||||
|
||||
--sl-color-primary-950: hsl(from var(--primary-color) h s calc(l + 18));
|
||||
--sl-color-primary-900: hsl(from var(--primary-color) h s calc(l + 16));
|
||||
--sl-color-primary-800: hsl(from var(--primary-color) h s calc(l + 12));
|
||||
--sl-color-primary-700: hsl(from var(--primary-color) h s calc(l + 8));
|
||||
--sl-color-primary-600: hsl(from var(--primary-color) h s calc(l + 4));
|
||||
--sl-color-primary-500: var(--primary-color);
|
||||
--sl-color-primary-400: hsl(from var(--primary-color) h s calc(l - 4));
|
||||
--sl-color-primary-300: hsl(from var(--primary-color) h s calc(l - 8));
|
||||
--sl-color-primary-200: hsl(from var(--primary-color) h s calc(l - 12));
|
||||
--sl-color-primary-100: hsl(from var(--primary-color) h s calc(l - 16));
|
||||
--sl-color-primary-50: hsl(from var(--primary-color) h s calc(l - 18));
|
||||
|
||||
/*** HEADER ***/
|
||||
#egw_fw_topmenu_info_items {
|
||||
#topmenu_info_timer:before {
|
||||
filter:initial;
|
||||
}
|
||||
}
|
||||
|
||||
/*** APPLICATION ***/
|
||||
|
||||
egw-app {
|
||||
--application-header-text-color: var(--sl-color-neutral-700);
|
||||
}
|
||||
|
||||
/*** End APPLICATION ***/
|
||||
|
||||
/*** WIDGETS ***/
|
||||
/* This should mostly go away with webcomponents */
|
||||
|
||||
.et2_container {
|
||||
background-color: initial;
|
||||
}
|
||||
|
||||
.dialogFooterToolbar et2-button::part(base):not(:hover), et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
|
||||
background-color: var(--sl-input-background-color);
|
||||
}
|
||||
.nextmatch_sortheader {
|
||||
color: #96bcd9;
|
||||
}
|
||||
|
||||
/** End WIDGETS **/
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
:root, :host, html, .sl-theme-light {
|
||||
/*
|
||||
color token generator using #0053c9
|
||||
https://codepen.io/claviska/full/QWveRgL
|
||||
*/
|
||||
--sl-color-primary-50: rgb(247 250 253);
|
||||
--sl-color-primary-100: rgb(228 237 249);
|
||||
--sl-color-primary-200: rgb(208 223 245);
|
||||
--sl-color-primary-300: rgb(186 208 240);
|
||||
--sl-color-primary-400: rgb(156 188 234);
|
||||
--sl-color-primary-500: rgb(117 162 226);
|
||||
--sl-color-primary-600: rgb(73 132 216);
|
||||
--sl-color-primary-700: rgb(33 105 208);
|
||||
--sl-color-primary-800: rgb(0 81 197);
|
||||
--sl-color-primary-900: rgb(0 58 141);
|
||||
--sl-color-primary-950: rgb(0 36 88);
|
||||
|
||||
}
|
|
@ -17,7 +17,6 @@
|
|||
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css">
|
||||
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css">
|
||||
<script src="{webserver_url}/api/js/offline/offline.min.js"></script>
|
||||
<link rel="stylesheet" href="{webserver_url}/kdots/assets/styles/framework.css">
|
||||
{css_file}
|
||||
<style type="text/css">
|
||||
{app_css}
|
||||
|
|
|
@ -28,6 +28,8 @@ class kdots_framework extends Api\Framework\Ajax
|
|||
*/
|
||||
protected function _get_header(array $extra = array())
|
||||
{
|
||||
self::includeCSS('/kdots/assets/styles/kdots.css');
|
||||
|
||||
// Skip making a mess for iframe apps, they're on their own
|
||||
if($extra['check-framework'] == true)
|
||||
{
|
||||
|
@ -36,7 +38,7 @@ class kdots_framework extends Api\Framework\Ajax
|
|||
}
|
||||
$data = parent::_get_header($extra);
|
||||
|
||||
$data['theme'] .= $data['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : '';
|
||||
$data['theme'] .= $GLOBALS['egw_info']['user']['preferences']['common']['darkmode'] ? 'data-darkmode="1" class="sl-theme-dark"' : '';
|
||||
unset($data['darkmode']);
|
||||
|
||||
if($extra['navbar-apps'])
|
||||
|
|
|
@ -69,7 +69,6 @@ export class EgwDarkmodeToggle extends LitElement
|
|||
document.documentElement.setAttribute("data-darkmode", "0");
|
||||
}
|
||||
// Set class for Shoelace
|
||||
document.documentElement.classList.toggle("sl-theme-dark", this.darkmode);
|
||||
this.requestUpdate("darkmode")
|
||||
this.updateComplete.then(() =>
|
||||
{
|
||||
|
|
|
@ -20,11 +20,6 @@ $GLOBALS['egw_info']['template']['kdots']['maintainer'] = array(
|
|||
$GLOBALS['egw_info']['template']['kdots']['description'] = "WIP framework of EGroupware.";
|
||||
$GLOBALS['egw_info']['template']['kdots']['windowed'] = true;
|
||||
|
||||
// specify (different) labels for default themes
|
||||
$GLOBALS['egw_info']['template']['kdots']['themes'] = array(
|
||||
'default' => 'Standard'
|
||||
);
|
||||
|
||||
// Dependencies for this template to work
|
||||
$GLOBALS['egw_info']['template']['kdots']['depends'][] = array(
|
||||
'appname' => 'api',
|
||||
|
|
|
@ -14,6 +14,8 @@
|
|||
<link rel="manifest" href="{webserver_url}/manifest.json"/>
|
||||
<link rel="icon" href="{img_icon}" type="image/x-ico" />
|
||||
<link rel="shortcut icon" href="{img_shortcut}" />
|
||||
<link rel="stylesheet" href="{webserver_url}/node_modules/@shoelace-style/shoelace/dist/themes/light.css"/>
|
||||
<link rel="stylesheet" href="{webserver_url}/node_modules/@shoelace-style/shoelace/dist/themes/dark.css"/>
|
||||
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-theme-slide.css">
|
||||
<link rel="stylesheet" href="{webserver_url}/api/js/offline/themes/offline-language-{lang_code}.css">
|
||||
<script src="{webserver_url}/api/js/offline/offline.min.js"></script>
|
||||
|
|
|
@ -78,7 +78,7 @@ foreach(Bundle::all() as $name => $files)
|
|||
$cssmin =& $config['cssmin'];
|
||||
$GLOBALS['egw_info']['flags']['currentapp'] = '*grunt*'; // to not find any app.css files
|
||||
$GLOBALS['egw_info']['server']['debug_minify'] = 'True'; // otherwise we would only get minified file
|
||||
foreach(array('pixelegg','jdots')/*array_keys(Framework::list_templates())*/ as $template)
|
||||
foreach(array('pixelegg', 'jdots', 'kdots')/*array_keys(Framework::list_templates())*/ as $template)
|
||||
{
|
||||
$GLOBALS['egw_info']['server']['template_set'] = $template;
|
||||
$tpl = Framework::factory();
|
||||
|
|
Loading…
Reference in New Issue