From 27cb9701aa38fcac45962c53ef853b42722051a6 Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 21:26:05 +0100 Subject: [PATCH 01/19] Add a "Sun" icon to switch to dark mode --- system/Debug/Toolbar/Views/toolbar.tpl.php | 1 + 1 file changed, 1 insertion(+) diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php index b746364eb33b..f228e61fe80f 100644 --- a/system/Debug/Toolbar/Views/toolbar.tpl.php +++ b/system/Debug/Toolbar/Views/toolbar.tpl.php @@ -49,6 +49,7 @@
↕ + ☀ From a08fd971b5de3ccd741425013c2abc76e95b2816 Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 21:29:01 +0100 Subject: [PATCH 02/19] Add a JS function to toggle the dark mode --- system/Debug/Toolbar/Views/toolbar.js | 32 +++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js index b8d0e830e210..70e18b0cc336 100644 --- a/system/Debug/Toolbar/Views/toolbar.js +++ b/system/Debug/Toolbar/Views/toolbar.js @@ -16,6 +16,7 @@ var ciDebugBar = { ciDebugBar.createListeners(); ciDebugBar.setToolbarState(); ciDebugBar.setToolbarPosition(); + ciDebugBar.setToolbarTheme(); ciDebugBar.toggleViewsHints(); document.getElementById('debug-bar-link').addEventListener('click', ciDebugBar.toggleToolbar, true); @@ -504,6 +505,37 @@ var ciDebugBar = { //-------------------------------------------------------------------- + setToolbarTheme: function () { + var btnTheme = document.getElementById('toolbar-theme'); + + if (ciDebugBar.readCookie('debug-bar-theme') === 'dark') + { + ciDebugBar.addClass(ciDebugBar.icon, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); + } + + btnTheme.addEventListener('click', function () { + var theme = ciDebugBar.readCookie('debug-bar-theme'); + + ciDebugBar.createCookie('debug-bar-theme', '', -1); + + if (!theme || theme === 'light') + { + ciDebugBar.createCookie('debug-bar-theme', 'dark', 365); + ciDebugBar.addClass(ciDebugBar.icon, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); + } + else + { + ciDebugBar.createCookie('debug-bar-theme', 'light', 365); + ciDebugBar.removeClass(ciDebugBar.icon, 'dark'); + ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); + } + }, true); + }, + + //-------------------------------------------------------------------- + /** * Helper to create a cookie. * From d05db8db84bbd462ab4c8bd9c86908396cf5a02b Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 21:31:49 +0100 Subject: [PATCH 03/19] Add the CSS styles for the dark theme --- system/Debug/Toolbar/Views/toolbar.css | 26 +++++++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index f53b8fe41907..6c04f29f1e85 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -80,7 +80,8 @@ z-index: 10000; } -#debug-bar #toolbar-position > a { +#debug-bar #toolbar-position > a, +#debug-bar #toolbar-theme > a { padding: 0 6px; } @@ -394,6 +395,10 @@ simple styles to replace inline styles display: none; } +.debug-bar-ntheme { + display: none; +} + .debug-bar-alignRight { text-align: right; } @@ -405,3 +410,22 @@ simple styles to replace inline styles .debug-bar-noverflow { overflow: hidden; } + +/** +dark theme + */ +.dark .tab, +.dark .toolbar { /* Invert colors */ + -webkit-filter: invert(88%); + filter: invert(88%); +} + +.dark .badge, +.dark #toolbar-position a, +.dark #toolbar-theme a, +.dark .toolbar h1, +.dark .current, +.dark tr[data-active="1"] { /* Cancel color invertion for some elements */ + -webkit-filter: invert(88%); + filter: invert(88%); +} From ade0488004b02231bfd2c6fcba7d1efc96d27a12 Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 21:33:07 +0100 Subject: [PATCH 04/19] Remove "unsightly" underlining on links with icons --- system/Debug/Toolbar/Views/toolbar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index 6c04f29f1e85..0c75112a84f1 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -83,6 +83,7 @@ #debug-bar #toolbar-position > a, #debug-bar #toolbar-theme > a { padding: 0 6px; + text-decoration: none; } #debug-icon.fixed-top, From 66a61cfc1d2ebf6bdac7318b1e2d5604275d92a7 Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 23:46:29 +0100 Subject: [PATCH 05/19] Add "prefers-color-scheme" support --- system/Debug/Toolbar/Views/toolbar.css | 28 +++++++++++++++++++++----- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index 0c75112a84f1..397cbad4ff2b 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -413,12 +413,12 @@ simple styles to replace inline styles } /** -dark theme +dark mode */ .dark .tab, .dark .toolbar { /* Invert colors */ - -webkit-filter: invert(88%); - filter: invert(88%); + -webkit-filter: invert(88%); + filter: invert(88%); } .dark .badge, @@ -426,7 +426,25 @@ dark theme .dark #toolbar-theme a, .dark .toolbar h1, .dark .current, -.dark tr[data-active="1"] { /* Cancel color invertion for some elements */ +.dark tr[data-active="1"] { /* Cancel colors inversion for some elements */ -webkit-filter: invert(88%); - filter: invert(88%); + filter: invert(88%); +} + +@media (prefers-color-scheme: dark) { + .tab, + .toolbar { + -webkit-filter: invert(88%); + filter: invert(88%); + } + + .badge, + #toolbar-position a, + #toolbar-theme a, + .toolbar h1, + .current, + tr[data-active="1"] { + -webkit-filter: invert(88%); + filter: invert(88%); + } } From c9f77d604fe36766d16a11d50da3d1ed75e5d1b0 Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 23:50:40 +0100 Subject: [PATCH 06/19] Add a way using CSS to force light mode --- system/Debug/Toolbar/Views/toolbar.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index 397cbad4ff2b..72420a8b519c 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -412,6 +412,25 @@ simple styles to replace inline styles overflow: hidden; } +/** +light mode (matches default css) + */ +.light .tab, +.light .toolbar { + -webkit-filter: invert(0%); + filter: invert(0%); +} + +.light .badge, +.light #toolbar-position a, +.light #toolbar-theme a, +.light .toolbar h1, +.light .current, +.light tr[data-active="1"] { + -webkit-filter: invert(0%); + filter: invert(0%); +} + /** dark mode */ From 0cea26e862dcfe0524e06de6f6acbd655d8e2d7a Mon Sep 17 00:00:00 2001 From: Little J Date: Wed, 8 Jan 2020 23:52:19 +0100 Subject: [PATCH 07/19] Improved JS to manage special cases with dark/light mode --- system/Debug/Toolbar/Views/toolbar.js | 39 ++++++++++++++++++++------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js index 70e18b0cc336..44926d243af4 100644 --- a/system/Debug/Toolbar/Views/toolbar.js +++ b/system/Debug/Toolbar/Views/toolbar.js @@ -507,29 +507,48 @@ var ciDebugBar = { setToolbarTheme: function () { var btnTheme = document.getElementById('toolbar-theme'); + var isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches; + var isLightMode = window.matchMedia("(prefers-color-scheme: light)").matches; + // If a cookie is set with a value, we force the color scheme if (ciDebugBar.readCookie('debug-bar-theme') === 'dark') { - ciDebugBar.addClass(ciDebugBar.icon, 'dark'); + ciDebugBar.removeClass(ciDebugBar.toolbar, 'light'); ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); } + else if (ciDebugBar.readCookie('debug-bar-theme') === 'light') + { + ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'light'); + } btnTheme.addEventListener('click', function () { var theme = ciDebugBar.readCookie('debug-bar-theme'); - ciDebugBar.createCookie('debug-bar-theme', '', -1); - - if (!theme || theme === 'light') + if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) { - ciDebugBar.createCookie('debug-bar-theme', 'dark', 365); - ciDebugBar.addClass(ciDebugBar.icon, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); + // If there is no cookie, and "prefers-color-scheme" is set to "dark" + // It means that the user wants to switch to light mode + ciDebugBar.createCookie('debug-bar-theme', 'light', 365); + ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'light'); } else { - ciDebugBar.createCookie('debug-bar-theme', 'light', 365); - ciDebugBar.removeClass(ciDebugBar.icon, 'dark'); - ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); + if (theme === 'dark') + { + ciDebugBar.createCookie('debug-bar-theme', 'light', 365); + ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'light'); + } + else + { + // In any other cases: if there is no cookie, or the cookie is set to + // "light", or the "prefers-color-scheme" is "light"... + ciDebugBar.createCookie('debug-bar-theme', 'dark', 365); + ciDebugBar.removeClass(ciDebugBar.toolbar, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); + } } }, true); }, From dc9ee7c0672a6d17fc49b1214b6f54b0792b000b Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 19 Jan 2020 13:29:39 +0100 Subject: [PATCH 08/19] Replace "Sun" by "Low contrast" unicode symbol --- system/Debug/Toolbar/Views/toolbar.tpl.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php index f228e61fe80f..5f5d7c43a6f1 100644 --- a/system/Debug/Toolbar/Views/toolbar.tpl.php +++ b/system/Debug/Toolbar/Views/toolbar.tpl.php @@ -49,7 +49,7 @@
↕ - ☀ + 🔅 From f8c2378c60ebcc35a4abafaff3323a3d5b93a911 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 19 Jan 2020 13:31:36 +0100 Subject: [PATCH 09/19] Reference the "toolbarContainer" --- system/Debug/Toolbar/Views/toolbar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js index 44926d243af4..bc68fe9fd022 100644 --- a/system/Debug/Toolbar/Views/toolbar.js +++ b/system/Debug/Toolbar/Views/toolbar.js @@ -4,12 +4,14 @@ var ciDebugBar = { + toolbarContainer : null, toolbar : null, icon : null, //-------------------------------------------------------------------- init : function () { + this.toolbarContainer = document.getElementById('toolbarContainer'); this.toolbar = document.getElementById('debug-bar'); this.icon = document.getElementById('debug-icon'); From 6dd252065420022d185a3a063c9eaf58627a2ca7 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 19 Jan 2020 13:32:56 +0100 Subject: [PATCH 10/19] Apply the theme to the "toolbarContainer" instead of the "toolbar" only --- system/Debug/Toolbar/Views/toolbar.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js index bc68fe9fd022..f146da429acd 100644 --- a/system/Debug/Toolbar/Views/toolbar.js +++ b/system/Debug/Toolbar/Views/toolbar.js @@ -515,13 +515,13 @@ var ciDebugBar = { // If a cookie is set with a value, we force the color scheme if (ciDebugBar.readCookie('debug-bar-theme') === 'dark') { - ciDebugBar.removeClass(ciDebugBar.toolbar, 'light'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); } else if (ciDebugBar.readCookie('debug-bar-theme') === 'light') { - ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'light'); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); } btnTheme.addEventListener('click', function () { @@ -532,24 +532,24 @@ var ciDebugBar = { // If there is no cookie, and "prefers-color-scheme" is set to "dark" // It means that the user wants to switch to light mode ciDebugBar.createCookie('debug-bar-theme', 'light', 365); - ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'light'); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); } else { if (theme === 'dark') { ciDebugBar.createCookie('debug-bar-theme', 'light', 365); - ciDebugBar.removeClass(ciDebugBar.toolbar, 'dark'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'light'); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); } else { // In any other cases: if there is no cookie, or the cookie is set to // "light", or the "prefers-color-scheme" is "light"... ciDebugBar.createCookie('debug-bar-theme', 'dark', 365); - ciDebugBar.removeClass(ciDebugBar.toolbar, 'light'); - ciDebugBar.addClass(ciDebugBar.toolbar, 'dark'); + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); } } }, true); From 0b6a00218f2388607d4867df4741562127729a4d Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 19 Jan 2020 13:34:28 +0100 Subject: [PATCH 11/19] Added the SASS version of the stylesheet --- .../Toolbar/Views/SASS/_graphic-charter.scss | 20 + system/Debug/Toolbar/Views/SASS/_mixins.scss | 13 + .../Debug/Toolbar/Views/SASS/_settings.scss | 8 + .../Debug/Toolbar/Views/SASS/_theme-dark.scss | 152 +++++++ .../Toolbar/Views/SASS/_theme-light.scss | 149 +++++++ system/Debug/Toolbar/Views/SASS/toolbar.scss | 396 ++++++++++++++++++ 6 files changed, 738 insertions(+) create mode 100644 system/Debug/Toolbar/Views/SASS/_graphic-charter.scss create mode 100644 system/Debug/Toolbar/Views/SASS/_mixins.scss create mode 100644 system/Debug/Toolbar/Views/SASS/_settings.scss create mode 100644 system/Debug/Toolbar/Views/SASS/_theme-dark.scss create mode 100644 system/Debug/Toolbar/Views/SASS/_theme-light.scss create mode 100644 system/Debug/Toolbar/Views/SASS/toolbar.scss diff --git a/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss b/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss new file mode 100644 index 000000000000..a37b0b29b080 --- /dev/null +++ b/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss @@ -0,0 +1,20 @@ +/* Colors + ============================================================================ */ + +/* Themes */ +$t-dark: #252525; +$t-light: #FFFFFF; + +/* Glossy colors */ +$g-blue: #5BC0DE; +$g-gray: #434343; +$g-green: #9ACE25; +$g-orange: #DD8615; +$g-red: #DD4814; + +/* Matt colors */ +$m-blue: #D8EAF0; +$m-gray: #DFDFDF; +$m-green: #5BC0DE; +$m-orange: #FDC894; +$m-red: #EF9090; diff --git a/system/Debug/Toolbar/Views/SASS/_mixins.scss b/system/Debug/Toolbar/Views/SASS/_mixins.scss new file mode 100644 index 000000000000..84b7bf2af585 --- /dev/null +++ b/system/Debug/Toolbar/Views/SASS/_mixins.scss @@ -0,0 +1,13 @@ +/* Mixins + ============================================================================ */ + +@mixin border-radius($radius) { + border-radius: $radius; + -moz-border-radius: $radius; + -webkit-border-radius: $radius; +} +@mixin box-shadow($left, $top, $radius, $color) { + box-shadow: $left $top $radius $color; + -moz-box-shadow: $left $top $radius $color; + -webkit-box-shadow: $left $top $radius $color; +} diff --git a/system/Debug/Toolbar/Views/SASS/_settings.scss b/system/Debug/Toolbar/Views/SASS/_settings.scss new file mode 100644 index 000000000000..6b84bf2a5683 --- /dev/null +++ b/system/Debug/Toolbar/Views/SASS/_settings.scss @@ -0,0 +1,8 @@ +/* Font + ============================================================================ */ + +/* Standard "sans-serif" font stack used by Github */ +$base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + +/* Default size, all other styles are based on this size */ +$base-size: 16px; diff --git a/system/Debug/Toolbar/Views/SASS/_theme-dark.scss b/system/Debug/Toolbar/Views/SASS/_theme-dark.scss new file mode 100644 index 000000000000..4cef7e52eae1 --- /dev/null +++ b/system/Debug/Toolbar/Views/SASS/_theme-dark.scss @@ -0,0 +1,152 @@ +/* Imports + ============================================================================ */ + +/* The "box-shadow" mixin uses colors */ +@import '_mixins'; + +/* Graphic charter */ +@import '_graphic-charter'; + + +/* Debug Icon + ============================================================================ */ + +#debug-icon { + background-color: $t-dark; + @include box-shadow(0, 0, 4px, $m-gray); + a:active, a:link, a:visited { + color: $g-orange; + } +} + + +/* Debug Bar + ============================================================================ */ + +#debug-bar { + background-color: $t-dark; + color: $m-gray; + + /* Reset to prevent conflict with other CSS files */ + h1, + h2, + h3, + p, + a, + button, + table, + thead, + tr, + td, + button, + .toolbar { + background-color: transparent; + color: $m-gray; + } + + /* Buttons */ + button { + background-color: $t-dark; + } + + /* Tables */ + table { + strong { + color: $m-orange; + } + tbody tr { + &:hover { + background-color: $g-gray; + } + &.current { + background-color: $m-orange; + td { + color: $t-dark; + } + &:hover td { + background-color: $g-red; + color: $t-light; + } + } + } + } + + /* The toolbar */ + .toolbar { + background-color: $g-gray; + @include box-shadow(0, 0, 4px, $g-gray); + img { + filter: brightness(0) invert(1); + } + } + + /* Fixed top */ + &.fixed-top { + & .toolbar { + @include box-shadow(0, 0, 4px, $g-gray); + } + .tab { + @include box-shadow(0, 1px, 4px, $g-gray); + } + } + + /* "Muted" elements */ + .muted { + color: $g-gray; + td { + color: $g-gray; + } + &:hover td { + color: $m-gray; + } + } + + /* The toolbar preferences */ + #toolbar-position, + #toolbar-theme, { + filter: brightness(0) invert(0.6); + } + + /* The toolbar menus */ + .ci-label { + &.active { + background-color: $t-dark; + } + &:hover { + background-color: $t-dark; + } + .badge { + background-color: $g-blue; + color: $m-gray; + } + } + + /* The tabs container */ + .tab { + background-color: $t-dark; + @include box-shadow(0, -1px, 4px, $g-gray); + } + + /* The "Timeline" tab */ + .timeline { + th, + td { + border-color: $g-gray; + } + .timer { + background-color: $g-orange; + } + } +} + + +/* Debug View + ============================================================================ */ + +.debug-view.show-view { + border-color: $g-orange; +} +.debug-view-path { + background-color: $m-orange; + color: $g-gray; +} diff --git a/system/Debug/Toolbar/Views/SASS/_theme-light.scss b/system/Debug/Toolbar/Views/SASS/_theme-light.scss new file mode 100644 index 000000000000..07618099ab9e --- /dev/null +++ b/system/Debug/Toolbar/Views/SASS/_theme-light.scss @@ -0,0 +1,149 @@ +/* Imports + ============================================================================ */ + +/* The "box-shadow" mixin uses colors */ +@import '_mixins'; + +/* Graphic charter */ +@import '_graphic-charter'; + + +/* Debug Icon + ============================================================================ */ + +#debug-icon { + background-color: $t-light; + @include box-shadow(0, 0, 4px, $m-gray); + a:active, a:link, a:visited { + color: $g-orange; + } +} + + +/* Debug Bar + ============================================================================ */ + +#debug-bar { + background-color: $t-light; + color: $g-gray; + + /* Reset to prevent conflict with other CSS files */ + h1, + h2, + h3, + p, + a, + button, + table, + thead, + tr, + td, + button, + .toolbar { + background-color: transparent; + color: $g-gray; + } + + /* Buttons */ + button { + background-color: $t-light; + } + + /* Tables */ + table { + strong { + color: $m-orange; + } + tbody tr { + &:hover { + background-color: $m-gray; + } + &.current { + background-color: $m-orange; + &:hover td { + background-color: $g-red; + color: $t-light; + } + } + } + } + + /* The toolbar */ + .toolbar { + background-color: $t-light; + @include box-shadow(0, 0, 4px, $m-gray); + img { + filter: brightness(0) invert(0.4); + } + } + + /* Fixed top */ + &.fixed-top { + & .toolbar { + @include box-shadow(0, 0, 4px, $m-gray); + } + .tab { + @include box-shadow(0, 1px, 4px, $m-gray); + } + } + + /* "Muted" elements */ + .muted { + color: $m-gray; + td { + color: $m-gray; + } + &:hover td { + color: $g-gray; + } + } + + /* The toolbar preferences */ + #toolbar-position, + #toolbar-theme, { + filter: brightness(0) invert(0.6); + } + + /* The toolbar menus */ + .ci-label { + &.active { + background-color: $m-gray; + } + &:hover { + background-color: $m-gray; + } + .badge { + background-color: $g-blue; + color: $t-light; + } + } + + /* The tabs container */ + .tab { + background-color: $t-light; + @include box-shadow(0, -1px, 4px, $m-gray); + } + + /* The "Timeline" tab */ + .timeline { + th, + td { + border-color: $m-gray; + } + .timer { + background-color: $g-orange; + } + } +} + + +/* Debug View + ============================================================================ */ + +.debug-view.show-view { + border-color: $g-orange; +} +.debug-view-path { + background-color: $m-orange; + color: $g-gray; +} diff --git a/system/Debug/Toolbar/Views/SASS/toolbar.scss b/system/Debug/Toolbar/Views/SASS/toolbar.scss new file mode 100644 index 000000000000..907c1b578edb --- /dev/null +++ b/system/Debug/Toolbar/Views/SASS/toolbar.scss @@ -0,0 +1,396 @@ +/* CodeIgniter 4 - Debug bar + ============================================================================ */ + +/* Forum: https://forum.codeigniter.com + * Github: https://github.com/codeigniter4/codeigniter4 + * Slack: https://codeigniterchat.slack.com + * Website: https://codeigniter.com + */ + + +/* Guide to generate the CSS file + ============================================================================ */ + +/* 1. Open the Terminal + * 2. Install SASS: https://sass-lang.com/install + * 3. Go to the SASS folder: "cd system/Debug/Toolbar/Views/SASS" + * 4. Generate the CSS file: "sass --no-cache --scss --sourcemap=none --style=compressed toolbar.scss ../toolbar.css" + */ + + +/* Imports + ============================================================================ */ + +@import '_mixins'; +@import '_settings'; + + +/* Debug Icon + ============================================================================ */ + +#debug-icon { + /* Position */ + bottom: 0; + position: fixed; + right: 0; + z-index: 10000; + + /* Size */ + height: 36px; + width: 36px; + + /* Spacing */ + margin: 0px; + padding: 0px; + + /* Content */ + clear: both; + text-align: center; + a svg { + margin: 8px; + max-width: 20px; + max-height: 20px; + } + &.fixed-top { + bottom: auto; + top: 0; + } + .debug-bar-ndisplay { + display: none; + } +} + + +/* Debug Bar + ============================================================================ */ + +#debug-bar { + /* Position */ + bottom: 0; + left: 0; + position: fixed; + right: 0; + z-index: 10000; + + /* Size */ + height: 36px; + + /* Spacing */ + line-height: 36px; + + /* Typography */ + font-family: $base-font; + font-size: $base-size; + font-weight: 400; + + /* General elements*/ + h1 { + bottom: 0; + display: inline-block; + font-size: $base-size - 2; + font-weight: normal; + margin: 0 16px 0 0; + padding: 0; + position: absolute; + right: 30px; + text-align: left; + top: 0; + } + h2 { + font-size: $base-size; + margin: 0; + padding: 5px 0 10px 0; + span { + font-size: 13px; + } + } + h3 { + font-size: $base-size - 4; + font-weight: 200; + margin: 0 0 0 10px; + padding: 0; + text-transform: uppercase; + } + p { + font-size: $base-size - 4; + margin: 0 0 0 15px; + padding: 0; + } + a { + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + button { + border: 1px solid; + @include border-radius(4px); + cursor: pointer; + line-height: 15px; + &:hover { + text-decoration: underline; + } + } + table { + border-collapse: collapse; + font-size: $base-size - 2; + line-height: normal; + margin: 5px 10px 15px 10px; // Tables indentation + width: calc(100% - 10px); // Make sure it still fits the container, even with the margins + strong { + font-weight: 500; + } + th { + display: table-cell; + font-weight: 600; + padding-bottom: 0.7em; + text-align: left; + } + tr { + border: none; + } + td { + border: none; + display: table-cell; + margin: 0; + text-align: left; + &:first-child { + max-width: 20%; + &.narrow { + width: 7em; + } + } + } + } + + /* The toolbar */ + .toolbar { + display: block; + overflow: hidden; + overflow-y: auto; + padding: 0 12px 0 12px; /* give room for OS X scrollbar */ + white-space: nowrap; + z-index: 10000; + } + + /* Fixed top */ + &.fixed-top { + bottom: auto; + top: 0; + .tab { + bottom: auto; + top: 36px; + } + } + + /* The toolbar preferences */ + #toolbar-position, + #toolbar-theme { + a { + float: left; + padding: 0 6px; + &:hover { + text-decoration: none; + } + } + } + + /* The "Open/Close" toggle */ + #debug-bar-link { + bottom: 0; + display: inline-block; + font-size: $base-size; + line-height: 36px; + padding: 6px; + position: absolute; + right: 10px; + top: 0; + width: 24px; + } + + /* The toolbar menus */ + .ci-label { + display: inline-block; + font-size: $base-size - 2; + vertical-align: baseline; + &:hover { + cursor: pointer; + } + a { + color: inherit; + display: block; + letter-spacing: normal; + padding: 0 10px; + text-decoration: none; + } + + /* The toolbar icons */ + img { + clear: left; + display: inline-block; + float: left; + margin: 6px 3px 6px 0; + } + + /* The toolbar notification badges */ + .badge { + @include border-radius(12px); + display: inline-block; + font-size: 75%; + font-weight: bold; + line-height: 12px; + margin-left: 5px; + padding: 2px 5px; + text-align: center; + vertical-align: baseline; + white-space: nowrap; + } + } + + /* The tabs container */ + .tab { + bottom: 35px; + display: none; + left: 0; + max-height: 62%; + overflow: hidden; + overflow-y: auto; + padding: 1em 2em; + position: fixed; + right: 0; + z-index: 9999; + } + + /* The "Timeline" tab */ + .timeline { + margin-left: 0; + width: 100%; + th { + border-left: 1px solid; + font-size: $base-size - 4; + font-weight: 200; + padding: 5px 5px 10px 5px; + position: relative; + text-align: left; + &:first-child { + border-left: 0; + } + } + td { + border-left: 1px solid; + padding: 5px; + position: relative; + &:first-child { + border-left: 0; + } + } + .timer { + @include border-radius(4px); + display: inline-block; + padding: 5px; + position: absolute; + top: 30%; + } + } + + /* The "Routes" tab */ + .route-params, + .route-params-item { + vertical-align: top; + + td:first-child { + font-style: italic; + padding-left: 1em; + text-align: right; + } + } +} + + +/* Debug View + ============================================================================ */ + +.debug-view.show-view { + border: 1px solid; + margin: 4px; +} + +.debug-view-path { + font-family: monospace; + font-size: $base-size - 4; + letter-spacing: normal; + min-height: 16px; + padding: 2px; + text-align: left; +} + +.show-view .debug-view-path { + display: block !important; +} + + +/* Responsive design + ============================================================================ */ + +@media screen and (max-width: 1024px) { + .hide-sm { + display: none !important; + } +} + + +/* Themes + ============================================================================ */ + +/* Default theme is "Light" */ +@import '_theme-light'; + +/* If the browser supports "prefers-color-scheme" and the scheme is "Dark" */ +@media (prefers-color-scheme: dark) { + @import '_theme-dark'; +} + +/* If we force the "Dark" theme */ +#toolbarContainer.dark { + @import '_theme-dark'; +} + +/* If we force the "Light" theme */ +#toolbarContainer.light { + @import '_theme-light'; +} + + +/* Layout helpers + ============================================================================ */ + +.debug-bar-width30 { + width: 30%; +} +.debug-bar-width10 { + width: 10%; +} +.debug-bar-width70p { + width: 70px; +} +.debug-bar-width140p { + width: 140px; +} +.debug-bar-width20e { + width: 20em; +} +.debug-bar-width6r { + width: 6rem; +} +.debug-bar-ndisplay { + display: none; +} +.debug-bar-alignRight { + text-align: right; +} +.debug-bar-alignLeft { + text-align: left; +} +.debug-bar-noverflow { + overflow: hidden; +} From 25b651a52af7591a7449ac3004135d1010f0296a Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 19 Jan 2020 13:36:05 +0100 Subject: [PATCH 12/19] Added the compiled and compressed CSS --- system/Debug/Toolbar/Views/toolbar.css | 470 +------------------------ 1 file changed, 1 insertion(+), 469 deletions(-) diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index 72420a8b519c..38857fcb6c7a 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -1,469 +1 @@ -#debug-icon { - position: fixed; - bottom: 0; - right: 0; - width: 36px; - height: 36px; - background: #fff; - border: 1px solid #ddd; - margin: 0px; - z-index: 10000; - box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1); - clear: both; - text-align: center; -} - -#debug-icon a svg { - margin: 4px; - max-width: 26px; - max-height: 26px; -} - -#debug-bar a:active, #debug-bar a:link, #debug-bar a:visited { - color: #dd4814; -} - -#debug-bar { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 16px; - font-weight: 400; - line-height: 36px; - background: #fff; - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 36px; - z-index: 10000; -} - -#debug-bar pre { - line-height: normal; -} - -#debug-bar h1, -#debug-bar h2, -#debug-bar h3 { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #666; - line-height: 1.5; -} - -#debug-bar p { - font-size: 12px; - margin: 0 0 10px 20px; - padding: 0; -} - -#debug-bar a { - text-decoration: none; -} - -#debug-bar a:hover { - text-decoration: underline; - text-decoration-color: #4e4a4a; -} - -#debug-bar .muted, -#debug-bar .muted td { - color: #bbb; -} - -#debug-bar .toolbar { - display: block; - background: inherit; - overflow: hidden; - overflow-y: auto; - white-space: nowrap; - box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1); - padding: 0 12px 0 12px; /* give room for OS X scrollbar */ - z-index: 10000; -} - -#debug-bar #toolbar-position > a, -#debug-bar #toolbar-theme > a { - padding: 0 6px; - text-decoration: none; -} - -#debug-icon.fixed-top, -#debug-bar.fixed-top { - top: 0; - bottom: auto; -} - -#debug-icon.fixed-top, -#debug-bar.fixed-top .toolbar { - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -} - -#debug-bar h1 { - font-size: 16px; - line-height: 36px; - font-weight: 500; - margin: 0 16px 0 0; - padding: 0; - text-align: left; - display: inline-block; - position: absolute; - right: 30px; - top: 0; - bottom: 0; -} - -#debug-bar-link { - padding: 6px; - position: absolute; - display: inline-block; - top: 0; - bottom: 0; - right: 10px; - font-size: 16px; - line-height: 36px; - width: 24px; -} - -#debug-bar h2 { - font-size: 16px; - font-weight: 500; - margin: 0; - padding: 0; -} - -#debug-bar h2 span { - font-size: 13px; -} - -#debug-bar h3 { - text-transform: uppercase; - font-size: 11px; - font-weight: 200; - margin-left: 10pt; -} - -#debug-bar span.ci-label { - display: inline-block; - font-size: 14px; - line-height: 36px; - vertical-align: baseline; -} - -#debug-bar span.ci-label img { - display: inline-block; - margin: 6px 3px 6px 0; - float: left; - clear: left; -} - -#debug-bar span.ci-label .badge { - display: inline-block; - padding: 3px 6px; - font-size: 75%; - font-weight: 500; - line-height: 1; - color: #fff; - text-align: center; - white-space: nowrap; - vertical-align: baseline; - border-radius: 10rem; - background-color: #5bc0de; - margin-left: 0.5em; -} - -#debug-bar span.ci-label .badge.active { - background-color: red; -} - -#debug-bar button { - border: 1px solid #ddd; - background-color: #fff; - cursor: pointer; - border-radius: 4px; - color: #333; -} - -#debug-bar button:hover { - background-color: #eaeaea; -} - -#debug-bar tr[data-active="1"] { - background-color: #dff0d8; -} - -#debug-bar tr[data-active="1"]:hover { - background-color: #a7d499; -} - -#debug-bar tr.current { - background-color: #FDC894; -} - -#debug-bar tr.current:hover { - background-color: #DD4814; -} - -#debug-bar table strong { - font-weight: 500; - color: rgba(0, 0, 0, 0.3); -} - -#debug-bar .ci-label { - text-shadow: none; -} - -#debug-bar .ci-label:hover { - background-color: #eaeaea; - cursor: pointer; -} - -#debug-bar .ci-label a { - display: block; - padding: 0 10px; - color: inherit; - text-decoration: none; - letter-spacing: normal; -} - -#debug-bar .ci-label.active { - background-color: #eaeaea; - border-color: #bbb; -} - -#debug-bar .tab { - display: none; - background: inherit; - padding: 1em 2em; - border: solid #ddd; - border-width: 1px 0; - position: fixed; - bottom: 35px; - left: 0; - right: 0; - z-index: 9999; - box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1); - overflow: hidden; - overflow-y: auto; - max-height: 62%; -} - -#debug-bar.fixed-top .tab { - top: 36px; - bottom: auto; - box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -} - -#debug-bar table { - margin: 0 0 10px 20px; - font-size: 0.9rem; - border-collapse: collapse; - width: 100%; -} - -#debug-bar td, -#debug-bar th { - display: table-cell; - text-align: left; -} - -#debug-bar tr { - border: none; -} - -#debug-bar td { - border: none; - padding: 0 10px 0 5px; - margin: 0; -} - -#debug-bar th { - padding-bottom: 0.7em; -} - -#debug-bar tr td:first-child { - max-width: 20%; -} - -#debug-bar tr td:first-child.narrow { - width: 7em; -} - -#debug-bar tr:hover { - background-color: #f3f3f3; -} - -#debug-bar table.timeline { - width: 100%; - margin-left: 0; -} - -#debug-bar table.timeline th { - font-size: 0.7em; - font-weight: 200; - text-align: left; - padding-bottom: 1em; -} - -#debug-bar table.timeline td, -#debug-bar table.timeline th { - border-left: 1px solid #ddd; - padding: 0 1em; - position: relative; -} - -#debug-bar table.timeline tr td:first-child, -#debug-bar table.timeline tr th:first-child { - border-left: 0; - padding-left: 0; -} - -#debug-bar table.timeline td { - padding: 5px; -} - -#debug-bar table.timeline .timer { - position: absolute; - display: inline-block; - padding: 5px; - top: 40%; - border-radius: 4px; - background-color: #999; -} - -#debug-bar .route-params, -#debug-bar .route-params-item { - vertical-align: top; -} - -#debug-bar .route-params-item td:first-child { - padding-left: 1em; - text-align: right; - font-style: italic; -} - -.debug-view.show-view { - border: 1px solid #dd4814; - margin: 4px; -} - -.debug-view-path { - background-color: #fdc894; - color: #000; - padding: 2px; - font-family: monospace; - font-size: 11px; - min-height: 16px; - text-align: left; -} - -.show-view .debug-view-path { - display: block !important; -} - -@media screen and (max-width: 748px) { - .hide-sm { - display: none !important; - } -} - -/** -simple styles to replace inline styles - */ -.debug-bar-width30 { - width: 30%; -} - -.debug-bar-width10 { - width: 10%; -} - -.debug-bar-width70p { - width: 70px; -} - -.debug-bar-width140p { - width: 140px; -} - -.debug-bar-width20e { - width: 20em; -} - -.debug-bar-width6r { - width: 6rem; -} - -.debug-bar-ndisplay { - display: none; -} - -.debug-bar-ntheme { - display: none; -} - -.debug-bar-alignRight { - text-align: right; -} - -.debug-bar-alignLeft { - text-align: left; -} - -.debug-bar-noverflow { - overflow: hidden; -} - -/** -light mode (matches default css) - */ -.light .tab, -.light .toolbar { - -webkit-filter: invert(0%); - filter: invert(0%); -} - -.light .badge, -.light #toolbar-position a, -.light #toolbar-theme a, -.light .toolbar h1, -.light .current, -.light tr[data-active="1"] { - -webkit-filter: invert(0%); - filter: invert(0%); -} - -/** -dark mode - */ -.dark .tab, -.dark .toolbar { /* Invert colors */ - -webkit-filter: invert(88%); - filter: invert(88%); -} - -.dark .badge, -.dark #toolbar-position a, -.dark #toolbar-theme a, -.dark .toolbar h1, -.dark .current, -.dark tr[data-active="1"] { /* Cancel colors inversion for some elements */ - -webkit-filter: invert(88%); - filter: invert(88%); -} - -@media (prefers-color-scheme: dark) { - .tab, - .toolbar { - -webkit-filter: invert(88%); - filter: invert(88%); - } - - .badge, - #toolbar-position a, - #toolbar-theme a, - .toolbar h1, - .current, - tr[data-active="1"] { - -webkit-filter: invert(88%); - filter: invert(88%); - } -} +#debug-icon{bottom:0;position:fixed;right:0;z-index:10000;height:36px;width:36px;margin:0px;padding:0px;clear:both;text-align:center}#debug-icon a svg{margin:8px;max-width:20px;max-height:20px}#debug-icon.fixed-top{bottom:auto;top:0}#debug-icon .debug-bar-ndisplay{display:none}#debug-bar{bottom:0;left:0;position:fixed;right:0;z-index:10000;height:36px;line-height:36px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;font-weight:400}#debug-bar h1{bottom:0;display:inline-block;font-size:14px;font-weight:normal;margin:0 16px 0 0;padding:0;position:absolute;right:30px;text-align:left;top:0}#debug-bar h2{font-size:16px;margin:0;padding:5px 0 10px 0}#debug-bar h2 span{font-size:13px}#debug-bar h3{font-size:12px;font-weight:200;margin:0 0 0 10px;padding:0;text-transform:uppercase}#debug-bar p{font-size:12px;margin:0 0 0 15px;padding:0}#debug-bar a{text-decoration:none}#debug-bar a:hover{text-decoration:underline}#debug-bar button{border:1px solid;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;cursor:pointer;line-height:15px}#debug-bar button:hover{text-decoration:underline}#debug-bar table{border-collapse:collapse;font-size:14px;line-height:normal;margin:5px 10px 15px 10px;width:calc(100% - 10px)}#debug-bar table strong{font-weight:500}#debug-bar table th{display:table-cell;font-weight:600;padding-bottom:0.7em;text-align:left}#debug-bar table tr{border:none}#debug-bar table td{border:none;display:table-cell;margin:0;text-align:left}#debug-bar table td:first-child{max-width:20%}#debug-bar table td:first-child.narrow{width:7em}#debug-bar .toolbar{display:block;overflow:hidden;overflow-y:auto;padding:0 12px 0 12px;white-space:nowrap;z-index:10000}#debug-bar.fixed-top{bottom:auto;top:0}#debug-bar.fixed-top .tab{bottom:auto;top:36px}#debug-bar #toolbar-position a,#debug-bar #toolbar-theme a{float:left;padding:0 6px}#debug-bar #toolbar-position a:hover,#debug-bar #toolbar-theme a:hover{text-decoration:none}#debug-bar #debug-bar-link{bottom:0;display:inline-block;font-size:16px;line-height:36px;padding:6px;position:absolute;right:10px;top:0;width:24px}#debug-bar .ci-label{display:inline-block;font-size:14px;vertical-align:baseline}#debug-bar .ci-label:hover{cursor:pointer}#debug-bar .ci-label a{color:inherit;display:block;letter-spacing:normal;padding:0 10px;text-decoration:none}#debug-bar .ci-label img{clear:left;display:inline-block;float:left;margin:6px 3px 6px 0}#debug-bar .ci-label .badge{border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;display:inline-block;font-size:75%;font-weight:bold;line-height:12px;margin-left:5px;padding:2px 5px;text-align:center;vertical-align:baseline;white-space:nowrap}#debug-bar .tab{bottom:35px;display:none;left:0;max-height:62%;overflow:hidden;overflow-y:auto;padding:1em 2em;position:fixed;right:0;z-index:9999}#debug-bar .timeline{margin-left:0;width:100%}#debug-bar .timeline th{border-left:1px solid;font-size:12px;font-weight:200;padding:5px 5px 10px 5px;position:relative;text-align:left}#debug-bar .timeline th:first-child{border-left:0}#debug-bar .timeline td{border-left:1px solid;padding:5px;position:relative}#debug-bar .timeline td:first-child{border-left:0}#debug-bar .timeline .timer{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;display:inline-block;padding:5px;position:absolute;top:30%}#debug-bar .route-params,#debug-bar .route-params-item{vertical-align:top}#debug-bar .route-params td:first-child,#debug-bar .route-params-item td:first-child{font-style:italic;padding-left:1em;text-align:right}.debug-view.show-view{border:1px solid;margin:4px}.debug-view-path{font-family:monospace;font-size:12px;letter-spacing:normal;min-height:16px;padding:2px;text-align:left}.show-view .debug-view-path{display:block !important}@media screen and (max-width: 1024px){.hide-sm{display:none !important}}#debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#fff;color:#434343}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#434343}#debug-bar button{background-color:#fff}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#DFDFDF}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#debug-bar .muted{color:#DFDFDF}#debug-bar .muted td{color:#DFDFDF}#debug-bar .muted:hover td{color:#434343}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#DFDFDF}#debug-bar .ci-label:hover{background-color:#DFDFDF}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#DFDFDF}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}@media (prefers-color-scheme: dark){#debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#252525;color:#DFDFDF}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#debug-bar button{background-color:#252525}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#434343}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current td{color:#252525}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar .toolbar img{filter:brightness(0) invert(1)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#debug-bar .muted{color:#434343}#debug-bar .muted td{color:#434343}#debug-bar .muted:hover td{color:#DFDFDF}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#252525}#debug-bar .ci-label:hover{background-color:#252525}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#434343}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}}#toolbarContainer.dark #debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.dark #debug-icon a:active,#toolbarContainer.dark #debug-icon a:link,#toolbarContainer.dark #debug-icon a:visited{color:#DD8615}#toolbarContainer.dark #debug-bar{background-color:#252525;color:#DFDFDF}#toolbarContainer.dark #debug-bar h1,#toolbarContainer.dark #debug-bar h2,#toolbarContainer.dark #debug-bar h3,#toolbarContainer.dark #debug-bar p,#toolbarContainer.dark #debug-bar a,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar table,#toolbarContainer.dark #debug-bar thead,#toolbarContainer.dark #debug-bar tr,#toolbarContainer.dark #debug-bar td,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#toolbarContainer.dark #debug-bar button{background-color:#252525}#toolbarContainer.dark #debug-bar table strong{color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr:hover{background-color:#434343}#toolbarContainer.dark #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr.current td{color:#252525}#toolbarContainer.dark #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.dark #debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar .toolbar img{filter:brightness(0) invert(1)}#toolbarContainer.dark #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#toolbarContainer.dark #debug-bar .muted{color:#434343}#toolbarContainer.dark #debug-bar .muted td{color:#434343}#toolbarContainer.dark #debug-bar .muted:hover td{color:#DFDFDF}#toolbarContainer.dark #debug-bar #toolbar-position,#toolbarContainer.dark #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.dark #debug-bar .ci-label.active{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label:hover{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#toolbarContainer.dark #debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#toolbarContainer.dark #debug-bar .timeline th,#toolbarContainer.dark #debug-bar .timeline td{border-color:#434343}#toolbarContainer.dark #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.dark .debug-view.show-view{border-color:#DD8615}#toolbarContainer.dark .debug-view-path{background-color:#FDC894;color:#434343}#toolbarContainer.light #debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-icon a:active,#toolbarContainer.light #debug-icon a:link,#toolbarContainer.light #debug-icon a:visited{color:#DD8615}#toolbarContainer.light #debug-bar{background-color:#fff;color:#434343}#toolbarContainer.light #debug-bar h1,#toolbarContainer.light #debug-bar h2,#toolbarContainer.light #debug-bar h3,#toolbarContainer.light #debug-bar p,#toolbarContainer.light #debug-bar a,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar table,#toolbarContainer.light #debug-bar thead,#toolbarContainer.light #debug-bar tr,#toolbarContainer.light #debug-bar td,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar .toolbar{background-color:transparent;color:#434343}#toolbarContainer.light #debug-bar button{background-color:#fff}#toolbarContainer.light #debug-bar table strong{color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.light #debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#toolbarContainer.light #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .muted{color:#DFDFDF}#toolbarContainer.light #debug-bar .muted td{color:#DFDFDF}#toolbarContainer.light #debug-bar .muted:hover td{color:#434343}#toolbarContainer.light #debug-bar #toolbar-position,#toolbarContainer.light #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.light #debug-bar .ci-label.active{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#toolbarContainer.light #debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .timeline th,#toolbarContainer.light #debug-bar .timeline td{border-color:#DFDFDF}#toolbarContainer.light #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.light .debug-view.show-view{border-color:#DD8615}#toolbarContainer.light .debug-view-path{background-color:#FDC894;color:#434343}.debug-bar-width30{width:30%}.debug-bar-width10{width:10%}.debug-bar-width70p{width:70px}.debug-bar-width140p{width:140px}.debug-bar-width20e{width:20em}.debug-bar-width6r{width:6rem}.debug-bar-ndisplay{display:none}.debug-bar-alignRight{text-align:right}.debug-bar-alignLeft{text-align:left}.debug-bar-noverflow{overflow:hidden} From bd6186f4f4f1d2fb05bbeb4a0c8306288fac1f49 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 2 Feb 2020 06:51:13 +0100 Subject: [PATCH 13/19] Changed color for .muted elements --- system/Debug/Toolbar/Views/SASS/_theme-dark.scss | 2 +- system/Debug/Toolbar/Views/SASS/_theme-light.scss | 2 +- system/Debug/Toolbar/Views/toolbar.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/system/Debug/Toolbar/Views/SASS/_theme-dark.scss b/system/Debug/Toolbar/Views/SASS/_theme-dark.scss index 4cef7e52eae1..161c5a7bc25b 100644 --- a/system/Debug/Toolbar/Views/SASS/_theme-dark.scss +++ b/system/Debug/Toolbar/Views/SASS/_theme-dark.scss @@ -92,7 +92,7 @@ /* "Muted" elements */ .muted { - color: $g-gray; + color: $m-gray; td { color: $g-gray; } diff --git a/system/Debug/Toolbar/Views/SASS/_theme-light.scss b/system/Debug/Toolbar/Views/SASS/_theme-light.scss index 07618099ab9e..d6ed13f0ab9e 100644 --- a/system/Debug/Toolbar/Views/SASS/_theme-light.scss +++ b/system/Debug/Toolbar/Views/SASS/_theme-light.scss @@ -89,7 +89,7 @@ /* "Muted" elements */ .muted { - color: $m-gray; + color: $g-gray; td { color: $m-gray; } diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index 38857fcb6c7a..093c62c19314 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -1 +1 @@ -#debug-icon{bottom:0;position:fixed;right:0;z-index:10000;height:36px;width:36px;margin:0px;padding:0px;clear:both;text-align:center}#debug-icon a svg{margin:8px;max-width:20px;max-height:20px}#debug-icon.fixed-top{bottom:auto;top:0}#debug-icon .debug-bar-ndisplay{display:none}#debug-bar{bottom:0;left:0;position:fixed;right:0;z-index:10000;height:36px;line-height:36px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;font-weight:400}#debug-bar h1{bottom:0;display:inline-block;font-size:14px;font-weight:normal;margin:0 16px 0 0;padding:0;position:absolute;right:30px;text-align:left;top:0}#debug-bar h2{font-size:16px;margin:0;padding:5px 0 10px 0}#debug-bar h2 span{font-size:13px}#debug-bar h3{font-size:12px;font-weight:200;margin:0 0 0 10px;padding:0;text-transform:uppercase}#debug-bar p{font-size:12px;margin:0 0 0 15px;padding:0}#debug-bar a{text-decoration:none}#debug-bar a:hover{text-decoration:underline}#debug-bar button{border:1px solid;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;cursor:pointer;line-height:15px}#debug-bar button:hover{text-decoration:underline}#debug-bar table{border-collapse:collapse;font-size:14px;line-height:normal;margin:5px 10px 15px 10px;width:calc(100% - 10px)}#debug-bar table strong{font-weight:500}#debug-bar table th{display:table-cell;font-weight:600;padding-bottom:0.7em;text-align:left}#debug-bar table tr{border:none}#debug-bar table td{border:none;display:table-cell;margin:0;text-align:left}#debug-bar table td:first-child{max-width:20%}#debug-bar table td:first-child.narrow{width:7em}#debug-bar .toolbar{display:block;overflow:hidden;overflow-y:auto;padding:0 12px 0 12px;white-space:nowrap;z-index:10000}#debug-bar.fixed-top{bottom:auto;top:0}#debug-bar.fixed-top .tab{bottom:auto;top:36px}#debug-bar #toolbar-position a,#debug-bar #toolbar-theme a{float:left;padding:0 6px}#debug-bar #toolbar-position a:hover,#debug-bar #toolbar-theme a:hover{text-decoration:none}#debug-bar #debug-bar-link{bottom:0;display:inline-block;font-size:16px;line-height:36px;padding:6px;position:absolute;right:10px;top:0;width:24px}#debug-bar .ci-label{display:inline-block;font-size:14px;vertical-align:baseline}#debug-bar .ci-label:hover{cursor:pointer}#debug-bar .ci-label a{color:inherit;display:block;letter-spacing:normal;padding:0 10px;text-decoration:none}#debug-bar .ci-label img{clear:left;display:inline-block;float:left;margin:6px 3px 6px 0}#debug-bar .ci-label .badge{border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;display:inline-block;font-size:75%;font-weight:bold;line-height:12px;margin-left:5px;padding:2px 5px;text-align:center;vertical-align:baseline;white-space:nowrap}#debug-bar .tab{bottom:35px;display:none;left:0;max-height:62%;overflow:hidden;overflow-y:auto;padding:1em 2em;position:fixed;right:0;z-index:9999}#debug-bar .timeline{margin-left:0;width:100%}#debug-bar .timeline th{border-left:1px solid;font-size:12px;font-weight:200;padding:5px 5px 10px 5px;position:relative;text-align:left}#debug-bar .timeline th:first-child{border-left:0}#debug-bar .timeline td{border-left:1px solid;padding:5px;position:relative}#debug-bar .timeline td:first-child{border-left:0}#debug-bar .timeline .timer{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;display:inline-block;padding:5px;position:absolute;top:30%}#debug-bar .route-params,#debug-bar .route-params-item{vertical-align:top}#debug-bar .route-params td:first-child,#debug-bar .route-params-item td:first-child{font-style:italic;padding-left:1em;text-align:right}.debug-view.show-view{border:1px solid;margin:4px}.debug-view-path{font-family:monospace;font-size:12px;letter-spacing:normal;min-height:16px;padding:2px;text-align:left}.show-view .debug-view-path{display:block !important}@media screen and (max-width: 1024px){.hide-sm{display:none !important}}#debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#fff;color:#434343}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#434343}#debug-bar button{background-color:#fff}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#DFDFDF}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#debug-bar .muted{color:#DFDFDF}#debug-bar .muted td{color:#DFDFDF}#debug-bar .muted:hover td{color:#434343}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#DFDFDF}#debug-bar .ci-label:hover{background-color:#DFDFDF}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#DFDFDF}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}@media (prefers-color-scheme: dark){#debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#252525;color:#DFDFDF}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#debug-bar button{background-color:#252525}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#434343}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current td{color:#252525}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar .toolbar img{filter:brightness(0) invert(1)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#debug-bar .muted{color:#434343}#debug-bar .muted td{color:#434343}#debug-bar .muted:hover td{color:#DFDFDF}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#252525}#debug-bar .ci-label:hover{background-color:#252525}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#434343}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}}#toolbarContainer.dark #debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.dark #debug-icon a:active,#toolbarContainer.dark #debug-icon a:link,#toolbarContainer.dark #debug-icon a:visited{color:#DD8615}#toolbarContainer.dark #debug-bar{background-color:#252525;color:#DFDFDF}#toolbarContainer.dark #debug-bar h1,#toolbarContainer.dark #debug-bar h2,#toolbarContainer.dark #debug-bar h3,#toolbarContainer.dark #debug-bar p,#toolbarContainer.dark #debug-bar a,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar table,#toolbarContainer.dark #debug-bar thead,#toolbarContainer.dark #debug-bar tr,#toolbarContainer.dark #debug-bar td,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#toolbarContainer.dark #debug-bar button{background-color:#252525}#toolbarContainer.dark #debug-bar table strong{color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr:hover{background-color:#434343}#toolbarContainer.dark #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr.current td{color:#252525}#toolbarContainer.dark #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.dark #debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar .toolbar img{filter:brightness(0) invert(1)}#toolbarContainer.dark #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#toolbarContainer.dark #debug-bar .muted{color:#434343}#toolbarContainer.dark #debug-bar .muted td{color:#434343}#toolbarContainer.dark #debug-bar .muted:hover td{color:#DFDFDF}#toolbarContainer.dark #debug-bar #toolbar-position,#toolbarContainer.dark #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.dark #debug-bar .ci-label.active{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label:hover{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#toolbarContainer.dark #debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#toolbarContainer.dark #debug-bar .timeline th,#toolbarContainer.dark #debug-bar .timeline td{border-color:#434343}#toolbarContainer.dark #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.dark .debug-view.show-view{border-color:#DD8615}#toolbarContainer.dark .debug-view-path{background-color:#FDC894;color:#434343}#toolbarContainer.light #debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-icon a:active,#toolbarContainer.light #debug-icon a:link,#toolbarContainer.light #debug-icon a:visited{color:#DD8615}#toolbarContainer.light #debug-bar{background-color:#fff;color:#434343}#toolbarContainer.light #debug-bar h1,#toolbarContainer.light #debug-bar h2,#toolbarContainer.light #debug-bar h3,#toolbarContainer.light #debug-bar p,#toolbarContainer.light #debug-bar a,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar table,#toolbarContainer.light #debug-bar thead,#toolbarContainer.light #debug-bar tr,#toolbarContainer.light #debug-bar td,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar .toolbar{background-color:transparent;color:#434343}#toolbarContainer.light #debug-bar button{background-color:#fff}#toolbarContainer.light #debug-bar table strong{color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.light #debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#toolbarContainer.light #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .muted{color:#DFDFDF}#toolbarContainer.light #debug-bar .muted td{color:#DFDFDF}#toolbarContainer.light #debug-bar .muted:hover td{color:#434343}#toolbarContainer.light #debug-bar #toolbar-position,#toolbarContainer.light #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.light #debug-bar .ci-label.active{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#toolbarContainer.light #debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .timeline th,#toolbarContainer.light #debug-bar .timeline td{border-color:#DFDFDF}#toolbarContainer.light #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.light .debug-view.show-view{border-color:#DD8615}#toolbarContainer.light .debug-view-path{background-color:#FDC894;color:#434343}.debug-bar-width30{width:30%}.debug-bar-width10{width:10%}.debug-bar-width70p{width:70px}.debug-bar-width140p{width:140px}.debug-bar-width20e{width:20em}.debug-bar-width6r{width:6rem}.debug-bar-ndisplay{display:none}.debug-bar-alignRight{text-align:right}.debug-bar-alignLeft{text-align:left}.debug-bar-noverflow{overflow:hidden} +#debug-icon{bottom:0;position:fixed;right:0;z-index:10000;height:36px;width:36px;margin:0px;padding:0px;clear:both;text-align:center}#debug-icon a svg{margin:8px;max-width:20px;max-height:20px}#debug-icon.fixed-top{bottom:auto;top:0}#debug-icon .debug-bar-ndisplay{display:none}#debug-bar{bottom:0;left:0;position:fixed;right:0;z-index:10000;height:36px;line-height:36px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;font-weight:400}#debug-bar h1{bottom:0;display:inline-block;font-size:14px;font-weight:normal;margin:0 16px 0 0;padding:0;position:absolute;right:30px;text-align:left;top:0}#debug-bar h2{font-size:16px;margin:0;padding:5px 0 10px 0}#debug-bar h2 span{font-size:13px}#debug-bar h3{font-size:12px;font-weight:200;margin:0 0 0 10px;padding:0;text-transform:uppercase}#debug-bar p{font-size:12px;margin:0 0 0 15px;padding:0}#debug-bar a{text-decoration:none}#debug-bar a:hover{text-decoration:underline}#debug-bar button{border:1px solid;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;cursor:pointer;line-height:15px}#debug-bar button:hover{text-decoration:underline}#debug-bar table{border-collapse:collapse;font-size:14px;line-height:normal;margin:5px 10px 15px 10px;width:calc(100% - 10px)}#debug-bar table strong{font-weight:500}#debug-bar table th{display:table-cell;font-weight:600;padding-bottom:0.7em;text-align:left}#debug-bar table tr{border:none}#debug-bar table td{border:none;display:table-cell;margin:0;text-align:left}#debug-bar table td:first-child{max-width:20%}#debug-bar table td:first-child.narrow{width:7em}#debug-bar .toolbar{display:block;overflow:hidden;overflow-y:auto;padding:0 12px 0 12px;white-space:nowrap;z-index:10000}#debug-bar.fixed-top{bottom:auto;top:0}#debug-bar.fixed-top .tab{bottom:auto;top:36px}#debug-bar #toolbar-position a,#debug-bar #toolbar-theme a{float:left;padding:0 6px}#debug-bar #toolbar-position a:hover,#debug-bar #toolbar-theme a:hover{text-decoration:none}#debug-bar #debug-bar-link{bottom:0;display:inline-block;font-size:16px;line-height:36px;padding:6px;position:absolute;right:10px;top:0;width:24px}#debug-bar .ci-label{display:inline-block;font-size:14px;vertical-align:baseline}#debug-bar .ci-label:hover{cursor:pointer}#debug-bar .ci-label a{color:inherit;display:block;letter-spacing:normal;padding:0 10px;text-decoration:none}#debug-bar .ci-label img{clear:left;display:inline-block;float:left;margin:6px 3px 6px 0}#debug-bar .ci-label .badge{border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;display:inline-block;font-size:75%;font-weight:bold;line-height:12px;margin-left:5px;padding:2px 5px;text-align:center;vertical-align:baseline;white-space:nowrap}#debug-bar .tab{bottom:35px;display:none;left:0;max-height:62%;overflow:hidden;overflow-y:auto;padding:1em 2em;position:fixed;right:0;z-index:9999}#debug-bar .timeline{margin-left:0;width:100%}#debug-bar .timeline th{border-left:1px solid;font-size:12px;font-weight:200;padding:5px 5px 10px 5px;position:relative;text-align:left}#debug-bar .timeline th:first-child{border-left:0}#debug-bar .timeline td{border-left:1px solid;padding:5px;position:relative}#debug-bar .timeline td:first-child{border-left:0}#debug-bar .timeline .timer{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;display:inline-block;padding:5px;position:absolute;top:30%}#debug-bar .route-params,#debug-bar .route-params-item{vertical-align:top}#debug-bar .route-params td:first-child,#debug-bar .route-params-item td:first-child{font-style:italic;padding-left:1em;text-align:right}.debug-view.show-view{border:1px solid;margin:4px}.debug-view-path{font-family:monospace;font-size:12px;letter-spacing:normal;min-height:16px;padding:2px;text-align:left}.show-view .debug-view-path{display:block !important}@media screen and (max-width: 1024px){.hide-sm{display:none !important}}#debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#fff;color:#434343}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#434343}#debug-bar button{background-color:#fff}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#DFDFDF}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#debug-bar .muted{color:#434343}#debug-bar .muted td{color:#DFDFDF}#debug-bar .muted:hover td{color:#434343}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#DFDFDF}#debug-bar .ci-label:hover{background-color:#DFDFDF}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#DFDFDF}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}@media (prefers-color-scheme: dark){#debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#252525;color:#DFDFDF}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#debug-bar button{background-color:#252525}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#434343}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current td{color:#252525}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar .toolbar img{filter:brightness(0) invert(1)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#debug-bar .muted{color:#DFDFDF}#debug-bar .muted td{color:#434343}#debug-bar .muted:hover td{color:#DFDFDF}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#252525}#debug-bar .ci-label:hover{background-color:#252525}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#434343}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}}#toolbarContainer.dark #debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.dark #debug-icon a:active,#toolbarContainer.dark #debug-icon a:link,#toolbarContainer.dark #debug-icon a:visited{color:#DD8615}#toolbarContainer.dark #debug-bar{background-color:#252525;color:#DFDFDF}#toolbarContainer.dark #debug-bar h1,#toolbarContainer.dark #debug-bar h2,#toolbarContainer.dark #debug-bar h3,#toolbarContainer.dark #debug-bar p,#toolbarContainer.dark #debug-bar a,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar table,#toolbarContainer.dark #debug-bar thead,#toolbarContainer.dark #debug-bar tr,#toolbarContainer.dark #debug-bar td,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#toolbarContainer.dark #debug-bar button{background-color:#252525}#toolbarContainer.dark #debug-bar table strong{color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr:hover{background-color:#434343}#toolbarContainer.dark #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr.current td{color:#252525}#toolbarContainer.dark #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.dark #debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar .toolbar img{filter:brightness(0) invert(1)}#toolbarContainer.dark #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#toolbarContainer.dark #debug-bar .muted{color:#DFDFDF}#toolbarContainer.dark #debug-bar .muted td{color:#434343}#toolbarContainer.dark #debug-bar .muted:hover td{color:#DFDFDF}#toolbarContainer.dark #debug-bar #toolbar-position,#toolbarContainer.dark #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.dark #debug-bar .ci-label.active{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label:hover{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#toolbarContainer.dark #debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#toolbarContainer.dark #debug-bar .timeline th,#toolbarContainer.dark #debug-bar .timeline td{border-color:#434343}#toolbarContainer.dark #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.dark .debug-view.show-view{border-color:#DD8615}#toolbarContainer.dark .debug-view-path{background-color:#FDC894;color:#434343}#toolbarContainer.light #debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-icon a:active,#toolbarContainer.light #debug-icon a:link,#toolbarContainer.light #debug-icon a:visited{color:#DD8615}#toolbarContainer.light #debug-bar{background-color:#fff;color:#434343}#toolbarContainer.light #debug-bar h1,#toolbarContainer.light #debug-bar h2,#toolbarContainer.light #debug-bar h3,#toolbarContainer.light #debug-bar p,#toolbarContainer.light #debug-bar a,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar table,#toolbarContainer.light #debug-bar thead,#toolbarContainer.light #debug-bar tr,#toolbarContainer.light #debug-bar td,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar .toolbar{background-color:transparent;color:#434343}#toolbarContainer.light #debug-bar button{background-color:#fff}#toolbarContainer.light #debug-bar table strong{color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.light #debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#toolbarContainer.light #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .muted{color:#434343}#toolbarContainer.light #debug-bar .muted td{color:#DFDFDF}#toolbarContainer.light #debug-bar .muted:hover td{color:#434343}#toolbarContainer.light #debug-bar #toolbar-position,#toolbarContainer.light #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.light #debug-bar .ci-label.active{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#toolbarContainer.light #debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .timeline th,#toolbarContainer.light #debug-bar .timeline td{border-color:#DFDFDF}#toolbarContainer.light #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.light .debug-view.show-view{border-color:#DD8615}#toolbarContainer.light .debug-view-path{background-color:#FDC894;color:#434343}.debug-bar-width30{width:30%}.debug-bar-width10{width:10%}.debug-bar-width70p{width:70px}.debug-bar-width140p{width:140px}.debug-bar-width20e{width:20em}.debug-bar-width6r{width:6rem}.debug-bar-ndisplay{display:none}.debug-bar-alignRight{text-align:right}.debug-bar-alignLeft{text-align:left}.debug-bar-noverflow{overflow:hidden} From 1add9091192c99e35999d38b1319b9f97817ac18 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 2 Feb 2020 07:13:19 +0100 Subject: [PATCH 14/19] SASS commenting style changed so it doesn't mess up with the final css --- .../Toolbar/Views/SASS/_graphic-charter.scss | 10 +-- system/Debug/Toolbar/Views/SASS/_mixins.scss | 4 +- .../Debug/Toolbar/Views/SASS/_settings.scss | 8 +- .../Debug/Toolbar/Views/SASS/_theme-dark.scss | 40 ++++----- .../Toolbar/Views/SASS/_theme-light.scss | 40 ++++----- system/Debug/Toolbar/Views/SASS/toolbar.scss | 87 +++++++++---------- 6 files changed, 94 insertions(+), 95 deletions(-) diff --git a/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss b/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss index a37b0b29b080..c23c3bc3c54c 100644 --- a/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss +++ b/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss @@ -1,18 +1,18 @@ -/* Colors - ============================================================================ */ +// COLORS +// ========================================================================== */ -/* Themes */ +// Themes $t-dark: #252525; $t-light: #FFFFFF; -/* Glossy colors */ +// Glossy colors $g-blue: #5BC0DE; $g-gray: #434343; $g-green: #9ACE25; $g-orange: #DD8615; $g-red: #DD4814; -/* Matt colors */ +// Matt colors $m-blue: #D8EAF0; $m-gray: #DFDFDF; $m-green: #5BC0DE; diff --git a/system/Debug/Toolbar/Views/SASS/_mixins.scss b/system/Debug/Toolbar/Views/SASS/_mixins.scss index 84b7bf2af585..c5bde5f5f6da 100644 --- a/system/Debug/Toolbar/Views/SASS/_mixins.scss +++ b/system/Debug/Toolbar/Views/SASS/_mixins.scss @@ -1,5 +1,5 @@ -/* Mixins - ============================================================================ */ +// MIXINS +// ========================================================================== */ @mixin border-radius($radius) { border-radius: $radius; diff --git a/system/Debug/Toolbar/Views/SASS/_settings.scss b/system/Debug/Toolbar/Views/SASS/_settings.scss index 6b84bf2a5683..06a51de634bb 100644 --- a/system/Debug/Toolbar/Views/SASS/_settings.scss +++ b/system/Debug/Toolbar/Views/SASS/_settings.scss @@ -1,8 +1,8 @@ -/* Font - ============================================================================ */ +// FONT +// ========================================================================== */ -/* Standard "sans-serif" font stack used by Github */ +// Standard "sans-serif" font stack used by Github $base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; -/* Default size, all other styles are based on this size */ +// Default size, all other styles are based on this size $base-size: 16px; diff --git a/system/Debug/Toolbar/Views/SASS/_theme-dark.scss b/system/Debug/Toolbar/Views/SASS/_theme-dark.scss index 161c5a7bc25b..56d4a4bbbac3 100644 --- a/system/Debug/Toolbar/Views/SASS/_theme-dark.scss +++ b/system/Debug/Toolbar/Views/SASS/_theme-dark.scss @@ -1,15 +1,15 @@ -/* Imports - ============================================================================ */ +// IMPORTS +// ========================================================================== */ -/* The "box-shadow" mixin uses colors */ +// The "box-shadow" mixin uses colors @import '_mixins'; -/* Graphic charter */ +// Graphic charter @import '_graphic-charter'; -/* Debug Icon - ============================================================================ */ +// DEBUG ICON +// ========================================================================== */ #debug-icon { background-color: $t-dark; @@ -20,14 +20,14 @@ } -/* Debug Bar - ============================================================================ */ +// DEBUG BAR +// ========================================================================== */ #debug-bar { background-color: $t-dark; color: $m-gray; - /* Reset to prevent conflict with other CSS files */ + // Reset to prevent conflict with other CSS files h1, h2, h3, @@ -44,12 +44,12 @@ color: $m-gray; } - /* Buttons */ + // Buttons button { background-color: $t-dark; } - /* Tables */ + // Tables table { strong { color: $m-orange; @@ -71,7 +71,7 @@ } } - /* The toolbar */ + // The toolbar .toolbar { background-color: $g-gray; @include box-shadow(0, 0, 4px, $g-gray); @@ -80,7 +80,7 @@ } } - /* Fixed top */ + // Fixed top &.fixed-top { & .toolbar { @include box-shadow(0, 0, 4px, $g-gray); @@ -90,7 +90,7 @@ } } - /* "Muted" elements */ + // "Muted" elements .muted { color: $m-gray; td { @@ -101,13 +101,13 @@ } } - /* The toolbar preferences */ + // The toolbar preferences #toolbar-position, #toolbar-theme, { filter: brightness(0) invert(0.6); } - /* The toolbar menus */ + // The toolbar menus .ci-label { &.active { background-color: $t-dark; @@ -121,13 +121,13 @@ } } - /* The tabs container */ + // The tabs container .tab { background-color: $t-dark; @include box-shadow(0, -1px, 4px, $g-gray); } - /* The "Timeline" tab */ + // The "Timeline" tab .timeline { th, td { @@ -140,8 +140,8 @@ } -/* Debug View - ============================================================================ */ +// DEBUG VIEW +// ========================================================================== */ .debug-view.show-view { border-color: $g-orange; diff --git a/system/Debug/Toolbar/Views/SASS/_theme-light.scss b/system/Debug/Toolbar/Views/SASS/_theme-light.scss index d6ed13f0ab9e..744997a4080d 100644 --- a/system/Debug/Toolbar/Views/SASS/_theme-light.scss +++ b/system/Debug/Toolbar/Views/SASS/_theme-light.scss @@ -1,15 +1,15 @@ -/* Imports - ============================================================================ */ +// IMPORTS +// ========================================================================== */ -/* The "box-shadow" mixin uses colors */ +// The "box-shadow" mixin uses colors @import '_mixins'; -/* Graphic charter */ +// Graphic charter @import '_graphic-charter'; -/* Debug Icon - ============================================================================ */ +// DEBUG ICON +// ========================================================================== */ #debug-icon { background-color: $t-light; @@ -20,14 +20,14 @@ } -/* Debug Bar - ============================================================================ */ +// DEBUG BAR +// ========================================================================== */ #debug-bar { background-color: $t-light; color: $g-gray; - /* Reset to prevent conflict with other CSS files */ + // Reset to prevent conflict with other CSS files */ h1, h2, h3, @@ -44,12 +44,12 @@ color: $g-gray; } - /* Buttons */ + // Buttons button { background-color: $t-light; } - /* Tables */ + // Tables table { strong { color: $m-orange; @@ -68,7 +68,7 @@ } } - /* The toolbar */ + // The toolbar .toolbar { background-color: $t-light; @include box-shadow(0, 0, 4px, $m-gray); @@ -77,7 +77,7 @@ } } - /* Fixed top */ + // Fixed top &.fixed-top { & .toolbar { @include box-shadow(0, 0, 4px, $m-gray); @@ -87,7 +87,7 @@ } } - /* "Muted" elements */ + // "Muted" elements .muted { color: $g-gray; td { @@ -98,13 +98,13 @@ } } - /* The toolbar preferences */ + // The toolbar preferences #toolbar-position, #toolbar-theme, { filter: brightness(0) invert(0.6); } - /* The toolbar menus */ + // The toolbar menus .ci-label { &.active { background-color: $m-gray; @@ -118,13 +118,13 @@ } } - /* The tabs container */ + // The tabs container .tab { background-color: $t-light; @include box-shadow(0, -1px, 4px, $m-gray); } - /* The "Timeline" tab */ + // The "Timeline" tab .timeline { th, td { @@ -137,8 +137,8 @@ } -/* Debug View - ============================================================================ */ +// DEBUG VIEW +// ========================================================================== */ .debug-view.show-view { border-color: $g-orange; diff --git a/system/Debug/Toolbar/Views/SASS/toolbar.scss b/system/Debug/Toolbar/Views/SASS/toolbar.scss index 907c1b578edb..191e98b2db36 100644 --- a/system/Debug/Toolbar/Views/SASS/toolbar.scss +++ b/system/Debug/Toolbar/Views/SASS/toolbar.scss @@ -8,42 +8,41 @@ */ -/* Guide to generate the CSS file - ============================================================================ */ +// GUIDE TO GENERATE THE CSS FILE +// ========================================================================== */ -/* 1. Open the Terminal - * 2. Install SASS: https://sass-lang.com/install - * 3. Go to the SASS folder: "cd system/Debug/Toolbar/Views/SASS" - * 4. Generate the CSS file: "sass --no-cache --scss --sourcemap=none --style=compressed toolbar.scss ../toolbar.css" - */ +// 1. Open the Terminal +// 2. Install SASS: https://sass-lang.com/install +// 3. Go to the SASS folder: "cd system/Debug/Toolbar/Views/SASS" +// 4. Generate the CSS file: "sass --no-cache --scss --sourcemap=none --style=compressed toolbar.scss ../toolbar.css" -/* Imports - ============================================================================ */ +// IMPORTS +// ========================================================================== */ @import '_mixins'; @import '_settings'; -/* Debug Icon - ============================================================================ */ +// DEBUG ICON +// ========================================================================== */ #debug-icon { - /* Position */ + // Position bottom: 0; position: fixed; right: 0; z-index: 10000; - /* Size */ + // Size height: 36px; width: 36px; - /* Spacing */ + // Spacing margin: 0px; padding: 0px; - /* Content */ + // Content clear: both; text-align: center; a svg { @@ -61,29 +60,29 @@ } -/* Debug Bar - ============================================================================ */ +// DEBUG BAR +// ========================================================================== */ #debug-bar { - /* Position */ + // Position bottom: 0; left: 0; position: fixed; right: 0; z-index: 10000; - /* Size */ + // Size height: 36px; - /* Spacing */ + // Spacing line-height: 36px; - /* Typography */ + // Typography font-family: $base-font; font-size: $base-size; font-weight: 400; - /* General elements*/ + // General elements h1 { bottom: 0; display: inline-block; @@ -163,7 +162,7 @@ } } - /* The toolbar */ + // The toolbar .toolbar { display: block; overflow: hidden; @@ -173,7 +172,7 @@ z-index: 10000; } - /* Fixed top */ + // Fixed top &.fixed-top { bottom: auto; top: 0; @@ -183,7 +182,7 @@ } } - /* The toolbar preferences */ + // The toolbar preferences #toolbar-position, #toolbar-theme { a { @@ -195,7 +194,7 @@ } } - /* The "Open/Close" toggle */ + // The "Open/Close" toggle #debug-bar-link { bottom: 0; display: inline-block; @@ -208,7 +207,7 @@ width: 24px; } - /* The toolbar menus */ + // The toolbar menus .ci-label { display: inline-block; font-size: $base-size - 2; @@ -224,7 +223,7 @@ text-decoration: none; } - /* The toolbar icons */ + // The toolbar icons img { clear: left; display: inline-block; @@ -232,7 +231,7 @@ margin: 6px 3px 6px 0; } - /* The toolbar notification badges */ + // The toolbar notification badges .badge { @include border-radius(12px); display: inline-block; @@ -247,7 +246,7 @@ } } - /* The tabs container */ + // The tabs container .tab { bottom: 35px; display: none; @@ -261,7 +260,7 @@ z-index: 9999; } - /* The "Timeline" tab */ + // The "Timeline" tab .timeline { margin-left: 0; width: 100%; @@ -293,7 +292,7 @@ } } - /* The "Routes" tab */ + // The "Routes" tab .route-params, .route-params-item { vertical-align: top; @@ -307,8 +306,8 @@ } -/* Debug View - ============================================================================ */ +// DEBUG VIEW +// ========================================================================== */ .debug-view.show-view { border: 1px solid; @@ -329,8 +328,8 @@ } -/* Responsive design - ============================================================================ */ +// RESPONSIVE DESIGN +// ========================================================================== */ @media screen and (max-width: 1024px) { .hide-sm { @@ -339,30 +338,30 @@ } -/* Themes - ============================================================================ */ +// THEMES +// ========================================================================== */ -/* Default theme is "Light" */ +// Default theme is "Light" @import '_theme-light'; -/* If the browser supports "prefers-color-scheme" and the scheme is "Dark" */ +// If the browser supports "prefers-color-scheme" and the scheme is "Dark" @media (prefers-color-scheme: dark) { @import '_theme-dark'; } -/* If we force the "Dark" theme */ +// If we force the "Dark" theme #toolbarContainer.dark { @import '_theme-dark'; } -/* If we force the "Light" theme */ +// If we force the "Light" theme #toolbarContainer.light { @import '_theme-light'; } -/* Layout helpers - ============================================================================ */ +// LAYOUT HELPERS +// ========================================================================== */ .debug-bar-width30 { width: 30%; From 9f70a0ccfe8d98e3efe81c43564ac1ded5d54495 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 2 Feb 2020 07:13:53 +0100 Subject: [PATCH 15/19] New uncompressed version of the CSS --- system/Debug/Toolbar/Views/toolbar.css | 596 ++++++++++++++++++++++++- 1 file changed, 595 insertions(+), 1 deletion(-) diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index 093c62c19314..7a4c9c455078 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -1 +1,595 @@ -#debug-icon{bottom:0;position:fixed;right:0;z-index:10000;height:36px;width:36px;margin:0px;padding:0px;clear:both;text-align:center}#debug-icon a svg{margin:8px;max-width:20px;max-height:20px}#debug-icon.fixed-top{bottom:auto;top:0}#debug-icon .debug-bar-ndisplay{display:none}#debug-bar{bottom:0;left:0;position:fixed;right:0;z-index:10000;height:36px;line-height:36px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;font-weight:400}#debug-bar h1{bottom:0;display:inline-block;font-size:14px;font-weight:normal;margin:0 16px 0 0;padding:0;position:absolute;right:30px;text-align:left;top:0}#debug-bar h2{font-size:16px;margin:0;padding:5px 0 10px 0}#debug-bar h2 span{font-size:13px}#debug-bar h3{font-size:12px;font-weight:200;margin:0 0 0 10px;padding:0;text-transform:uppercase}#debug-bar p{font-size:12px;margin:0 0 0 15px;padding:0}#debug-bar a{text-decoration:none}#debug-bar a:hover{text-decoration:underline}#debug-bar button{border:1px solid;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;cursor:pointer;line-height:15px}#debug-bar button:hover{text-decoration:underline}#debug-bar table{border-collapse:collapse;font-size:14px;line-height:normal;margin:5px 10px 15px 10px;width:calc(100% - 10px)}#debug-bar table strong{font-weight:500}#debug-bar table th{display:table-cell;font-weight:600;padding-bottom:0.7em;text-align:left}#debug-bar table tr{border:none}#debug-bar table td{border:none;display:table-cell;margin:0;text-align:left}#debug-bar table td:first-child{max-width:20%}#debug-bar table td:first-child.narrow{width:7em}#debug-bar .toolbar{display:block;overflow:hidden;overflow-y:auto;padding:0 12px 0 12px;white-space:nowrap;z-index:10000}#debug-bar.fixed-top{bottom:auto;top:0}#debug-bar.fixed-top .tab{bottom:auto;top:36px}#debug-bar #toolbar-position a,#debug-bar #toolbar-theme a{float:left;padding:0 6px}#debug-bar #toolbar-position a:hover,#debug-bar #toolbar-theme a:hover{text-decoration:none}#debug-bar #debug-bar-link{bottom:0;display:inline-block;font-size:16px;line-height:36px;padding:6px;position:absolute;right:10px;top:0;width:24px}#debug-bar .ci-label{display:inline-block;font-size:14px;vertical-align:baseline}#debug-bar .ci-label:hover{cursor:pointer}#debug-bar .ci-label a{color:inherit;display:block;letter-spacing:normal;padding:0 10px;text-decoration:none}#debug-bar .ci-label img{clear:left;display:inline-block;float:left;margin:6px 3px 6px 0}#debug-bar .ci-label .badge{border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;display:inline-block;font-size:75%;font-weight:bold;line-height:12px;margin-left:5px;padding:2px 5px;text-align:center;vertical-align:baseline;white-space:nowrap}#debug-bar .tab{bottom:35px;display:none;left:0;max-height:62%;overflow:hidden;overflow-y:auto;padding:1em 2em;position:fixed;right:0;z-index:9999}#debug-bar .timeline{margin-left:0;width:100%}#debug-bar .timeline th{border-left:1px solid;font-size:12px;font-weight:200;padding:5px 5px 10px 5px;position:relative;text-align:left}#debug-bar .timeline th:first-child{border-left:0}#debug-bar .timeline td{border-left:1px solid;padding:5px;position:relative}#debug-bar .timeline td:first-child{border-left:0}#debug-bar .timeline .timer{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;display:inline-block;padding:5px;position:absolute;top:30%}#debug-bar .route-params,#debug-bar .route-params-item{vertical-align:top}#debug-bar .route-params td:first-child,#debug-bar .route-params-item td:first-child{font-style:italic;padding-left:1em;text-align:right}.debug-view.show-view{border:1px solid;margin:4px}.debug-view-path{font-family:monospace;font-size:12px;letter-spacing:normal;min-height:16px;padding:2px;text-align:left}.show-view .debug-view-path{display:block !important}@media screen and (max-width: 1024px){.hide-sm{display:none !important}}#debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#fff;color:#434343}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#434343}#debug-bar button{background-color:#fff}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#DFDFDF}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#debug-bar .muted{color:#434343}#debug-bar .muted td{color:#DFDFDF}#debug-bar .muted:hover td{color:#434343}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#DFDFDF}#debug-bar .ci-label:hover{background-color:#DFDFDF}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#DFDFDF}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}@media (prefers-color-scheme: dark){#debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#debug-icon a:active,#debug-icon a:link,#debug-icon a:visited{color:#DD8615}#debug-bar{background-color:#252525;color:#DFDFDF}#debug-bar h1,#debug-bar h2,#debug-bar h3,#debug-bar p,#debug-bar a,#debug-bar button,#debug-bar table,#debug-bar thead,#debug-bar tr,#debug-bar td,#debug-bar button,#debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#debug-bar button{background-color:#252525}#debug-bar table strong{color:#FDC894}#debug-bar table tbody tr:hover{background-color:#434343}#debug-bar table tbody tr.current{background-color:#FDC894}#debug-bar table tbody tr.current td{color:#252525}#debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar .toolbar img{filter:brightness(0) invert(1)}#debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#debug-bar .muted{color:#DFDFDF}#debug-bar .muted td{color:#434343}#debug-bar .muted:hover td{color:#DFDFDF}#debug-bar #toolbar-position,#debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#debug-bar .ci-label.active{background-color:#252525}#debug-bar .ci-label:hover{background-color:#252525}#debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#debug-bar .timeline th,#debug-bar .timeline td{border-color:#434343}#debug-bar .timeline .timer{background-color:#DD8615}.debug-view.show-view{border-color:#DD8615}.debug-view-path{background-color:#FDC894;color:#434343}}#toolbarContainer.dark #debug-icon{background-color:#252525;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.dark #debug-icon a:active,#toolbarContainer.dark #debug-icon a:link,#toolbarContainer.dark #debug-icon a:visited{color:#DD8615}#toolbarContainer.dark #debug-bar{background-color:#252525;color:#DFDFDF}#toolbarContainer.dark #debug-bar h1,#toolbarContainer.dark #debug-bar h2,#toolbarContainer.dark #debug-bar h3,#toolbarContainer.dark #debug-bar p,#toolbarContainer.dark #debug-bar a,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar table,#toolbarContainer.dark #debug-bar thead,#toolbarContainer.dark #debug-bar tr,#toolbarContainer.dark #debug-bar td,#toolbarContainer.dark #debug-bar button,#toolbarContainer.dark #debug-bar .toolbar{background-color:transparent;color:#DFDFDF}#toolbarContainer.dark #debug-bar button{background-color:#252525}#toolbarContainer.dark #debug-bar table strong{color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr:hover{background-color:#434343}#toolbarContainer.dark #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.dark #debug-bar table tbody tr.current td{color:#252525}#toolbarContainer.dark #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.dark #debug-bar .toolbar{background-color:#434343;box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar .toolbar img{filter:brightness(0) invert(1)}#toolbarContainer.dark #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #434343;-moz-box-shadow:0 0 4px #434343;-webkit-box-shadow:0 0 4px #434343}#toolbarContainer.dark #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #434343;-moz-box-shadow:0 1px 4px #434343;-webkit-box-shadow:0 1px 4px #434343}#toolbarContainer.dark #debug-bar .muted{color:#DFDFDF}#toolbarContainer.dark #debug-bar .muted td{color:#434343}#toolbarContainer.dark #debug-bar .muted:hover td{color:#DFDFDF}#toolbarContainer.dark #debug-bar #toolbar-position,#toolbarContainer.dark #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.dark #debug-bar .ci-label.active{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label:hover{background-color:#252525}#toolbarContainer.dark #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#DFDFDF}#toolbarContainer.dark #debug-bar .tab{background-color:#252525;box-shadow:0 -1px 4px #434343;-moz-box-shadow:0 -1px 4px #434343;-webkit-box-shadow:0 -1px 4px #434343}#toolbarContainer.dark #debug-bar .timeline th,#toolbarContainer.dark #debug-bar .timeline td{border-color:#434343}#toolbarContainer.dark #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.dark .debug-view.show-view{border-color:#DD8615}#toolbarContainer.dark .debug-view-path{background-color:#FDC894;color:#434343}#toolbarContainer.light #debug-icon{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-icon a:active,#toolbarContainer.light #debug-icon a:link,#toolbarContainer.light #debug-icon a:visited{color:#DD8615}#toolbarContainer.light #debug-bar{background-color:#fff;color:#434343}#toolbarContainer.light #debug-bar h1,#toolbarContainer.light #debug-bar h2,#toolbarContainer.light #debug-bar h3,#toolbarContainer.light #debug-bar p,#toolbarContainer.light #debug-bar a,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar table,#toolbarContainer.light #debug-bar thead,#toolbarContainer.light #debug-bar tr,#toolbarContainer.light #debug-bar td,#toolbarContainer.light #debug-bar button,#toolbarContainer.light #debug-bar .toolbar{background-color:transparent;color:#434343}#toolbarContainer.light #debug-bar button{background-color:#fff}#toolbarContainer.light #debug-bar table strong{color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar table tbody tr.current{background-color:#FDC894}#toolbarContainer.light #debug-bar table tbody tr.current:hover td{background-color:#DD4814;color:#fff}#toolbarContainer.light #debug-bar .toolbar{background-color:#fff;box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar .toolbar img{filter:brightness(0) invert(0.4)}#toolbarContainer.light #debug-bar.fixed-top .toolbar{box-shadow:0 0 4px #DFDFDF;-moz-box-shadow:0 0 4px #DFDFDF;-webkit-box-shadow:0 0 4px #DFDFDF}#toolbarContainer.light #debug-bar.fixed-top .tab{box-shadow:0 1px 4px #DFDFDF;-moz-box-shadow:0 1px 4px #DFDFDF;-webkit-box-shadow:0 1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .muted{color:#434343}#toolbarContainer.light #debug-bar .muted td{color:#DFDFDF}#toolbarContainer.light #debug-bar .muted:hover td{color:#434343}#toolbarContainer.light #debug-bar #toolbar-position,#toolbarContainer.light #debug-bar #toolbar-theme{filter:brightness(0) invert(0.6)}#toolbarContainer.light #debug-bar .ci-label.active{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label:hover{background-color:#DFDFDF}#toolbarContainer.light #debug-bar .ci-label .badge{background-color:#5BC0DE;color:#fff}#toolbarContainer.light #debug-bar .tab{background-color:#fff;box-shadow:0 -1px 4px #DFDFDF;-moz-box-shadow:0 -1px 4px #DFDFDF;-webkit-box-shadow:0 -1px 4px #DFDFDF}#toolbarContainer.light #debug-bar .timeline th,#toolbarContainer.light #debug-bar .timeline td{border-color:#DFDFDF}#toolbarContainer.light #debug-bar .timeline .timer{background-color:#DD8615}#toolbarContainer.light .debug-view.show-view{border-color:#DD8615}#toolbarContainer.light .debug-view-path{background-color:#FDC894;color:#434343}.debug-bar-width30{width:30%}.debug-bar-width10{width:10%}.debug-bar-width70p{width:70px}.debug-bar-width140p{width:140px}.debug-bar-width20e{width:20em}.debug-bar-width6r{width:6rem}.debug-bar-ndisplay{display:none}.debug-bar-alignRight{text-align:right}.debug-bar-alignLeft{text-align:left}.debug-bar-noverflow{overflow:hidden} +/* CodeIgniter 4 - Debug bar + ============================================================================ */ +/* Forum: https://forum.codeigniter.com + * Github: https://github.com/codeigniter4/codeigniter4 + * Slack: https://codeigniterchat.slack.com + * Website: https://codeigniter.com + */ +#debug-icon { + bottom: 0; + position: fixed; + right: 0; + z-index: 10000; + height: 36px; + width: 36px; + margin: 0px; + padding: 0px; + clear: both; + text-align: center; } + #debug-icon a svg { + margin: 8px; + max-width: 20px; + max-height: 20px; } + #debug-icon.fixed-top { + bottom: auto; + top: 0; } + #debug-icon .debug-bar-ndisplay { + display: none; } + +#debug-bar { + bottom: 0; + left: 0; + position: fixed; + right: 0; + z-index: 10000; + height: 36px; + line-height: 36px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + font-size: 16px; + font-weight: 400; } + #debug-bar h1 { + bottom: 0; + display: inline-block; + font-size: 14px; + font-weight: normal; + margin: 0 16px 0 0; + padding: 0; + position: absolute; + right: 30px; + text-align: left; + top: 0; } + #debug-bar h2 { + font-size: 16px; + margin: 0; + padding: 5px 0 10px 0; } + #debug-bar h2 span { + font-size: 13px; } + #debug-bar h3 { + font-size: 12px; + font-weight: 200; + margin: 0 0 0 10px; + padding: 0; + text-transform: uppercase; } + #debug-bar p { + font-size: 12px; + margin: 0 0 0 15px; + padding: 0; } + #debug-bar a { + text-decoration: none; } + #debug-bar a:hover { + text-decoration: underline; } + #debug-bar button { + border: 1px solid; + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + cursor: pointer; + line-height: 15px; } + #debug-bar button:hover { + text-decoration: underline; } + #debug-bar table { + border-collapse: collapse; + font-size: 14px; + line-height: normal; + margin: 5px 10px 15px 10px; + width: calc(100% - 10px); } + #debug-bar table strong { + font-weight: 500; } + #debug-bar table th { + display: table-cell; + font-weight: 600; + padding-bottom: 0.7em; + text-align: left; } + #debug-bar table tr { + border: none; } + #debug-bar table td { + border: none; + display: table-cell; + margin: 0; + text-align: left; } + #debug-bar table td:first-child { + max-width: 20%; } + #debug-bar table td:first-child.narrow { + width: 7em; } + #debug-bar .toolbar { + display: block; + overflow: hidden; + overflow-y: auto; + padding: 0 12px 0 12px; + /* give room for OS X scrollbar */ + white-space: nowrap; + z-index: 10000; } + #debug-bar.fixed-top { + bottom: auto; + top: 0; } + #debug-bar.fixed-top .tab { + bottom: auto; + top: 36px; } + #debug-bar #toolbar-position a, + #debug-bar #toolbar-theme a { + float: left; + padding: 0 6px; } + #debug-bar #toolbar-position a:hover, + #debug-bar #toolbar-theme a:hover { + text-decoration: none; } + #debug-bar #debug-bar-link { + bottom: 0; + display: inline-block; + font-size: 16px; + line-height: 36px; + padding: 6px; + position: absolute; + right: 10px; + top: 0; + width: 24px; } + #debug-bar .ci-label { + display: inline-block; + font-size: 14px; + vertical-align: baseline; } + #debug-bar .ci-label:hover { + cursor: pointer; } + #debug-bar .ci-label a { + color: inherit; + display: block; + letter-spacing: normal; + padding: 0 10px; + text-decoration: none; } + #debug-bar .ci-label img { + clear: left; + display: inline-block; + float: left; + margin: 6px 3px 6px 0; } + #debug-bar .ci-label .badge { + border-radius: 12px; + -moz-border-radius: 12px; + -webkit-border-radius: 12px; + display: inline-block; + font-size: 75%; + font-weight: bold; + line-height: 12px; + margin-left: 5px; + padding: 2px 5px; + text-align: center; + vertical-align: baseline; + white-space: nowrap; } + #debug-bar .tab { + bottom: 35px; + display: none; + left: 0; + max-height: 62%; + overflow: hidden; + overflow-y: auto; + padding: 1em 2em; + position: fixed; + right: 0; + z-index: 9999; } + #debug-bar .timeline { + margin-left: 0; + width: 100%; } + #debug-bar .timeline th { + border-left: 1px solid; + font-size: 12px; + font-weight: 200; + padding: 5px 5px 10px 5px; + position: relative; + text-align: left; } + #debug-bar .timeline th:first-child { + border-left: 0; } + #debug-bar .timeline td { + border-left: 1px solid; + padding: 5px; + position: relative; } + #debug-bar .timeline td:first-child { + border-left: 0; } + #debug-bar .timeline .timer { + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + display: inline-block; + padding: 5px; + position: absolute; + top: 30%; } + #debug-bar .route-params, + #debug-bar .route-params-item { + vertical-align: top; } + #debug-bar .route-params td:first-child, + #debug-bar .route-params-item td:first-child { + font-style: italic; + padding-left: 1em; + text-align: right; } + +.debug-view.show-view { + border: 1px solid; + margin: 4px; } + +.debug-view-path { + font-family: monospace; + font-size: 12px; + letter-spacing: normal; + min-height: 16px; + padding: 2px; + text-align: left; } + +.show-view .debug-view-path { + display: block !important; } + +@media screen and (max-width: 1024px) { + .hide-sm { + display: none !important; } } +#debug-icon { + background-color: #FFFFFF; + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #debug-icon a:active, #debug-icon a:link, #debug-icon a:visited { + color: #DD8615; } + +#debug-bar { + background-color: #FFFFFF; + color: #434343; } + #debug-bar h1, + #debug-bar h2, + #debug-bar h3, + #debug-bar p, + #debug-bar a, + #debug-bar button, + #debug-bar table, + #debug-bar thead, + #debug-bar tr, + #debug-bar td, + #debug-bar button, + #debug-bar .toolbar { + background-color: transparent; + color: #434343; } + #debug-bar button { + background-color: #FFFFFF; } + #debug-bar table strong { + color: #FDC894; } + #debug-bar table tbody tr:hover { + background-color: #DFDFDF; } + #debug-bar table tbody tr.current { + background-color: #FDC894; } + #debug-bar table tbody tr.current:hover td { + background-color: #DD4814; + color: #FFFFFF; } + #debug-bar .toolbar { + background-color: #FFFFFF; + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #debug-bar .toolbar img { + filter: brightness(0) invert(0.4); } + #debug-bar.fixed-top .toolbar { + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #debug-bar.fixed-top .tab { + box-shadow: 0 1px 4px #DFDFDF; + -moz-box-shadow: 0 1px 4px #DFDFDF; + -webkit-box-shadow: 0 1px 4px #DFDFDF; } + #debug-bar .muted { + color: #434343; } + #debug-bar .muted td { + color: #DFDFDF; } + #debug-bar .muted:hover td { + color: #434343; } + #debug-bar #toolbar-position, + #debug-bar #toolbar-theme { + filter: brightness(0) invert(0.6); } + #debug-bar .ci-label.active { + background-color: #DFDFDF; } + #debug-bar .ci-label:hover { + background-color: #DFDFDF; } + #debug-bar .ci-label .badge { + background-color: #5BC0DE; + color: #FFFFFF; } + #debug-bar .tab { + background-color: #FFFFFF; + box-shadow: 0 -1px 4px #DFDFDF; + -moz-box-shadow: 0 -1px 4px #DFDFDF; + -webkit-box-shadow: 0 -1px 4px #DFDFDF; } + #debug-bar .timeline th, + #debug-bar .timeline td { + border-color: #DFDFDF; } + #debug-bar .timeline .timer { + background-color: #DD8615; } + +.debug-view.show-view { + border-color: #DD8615; } + +.debug-view-path { + background-color: #FDC894; + color: #434343; } + +@media (prefers-color-scheme: dark) { + #debug-icon { + background-color: #252525; + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #debug-icon a:active, #debug-icon a:link, #debug-icon a:visited { + color: #DD8615; } + + #debug-bar { + background-color: #252525; + color: #DFDFDF; } + #debug-bar h1, + #debug-bar h2, + #debug-bar h3, + #debug-bar p, + #debug-bar a, + #debug-bar button, + #debug-bar table, + #debug-bar thead, + #debug-bar tr, + #debug-bar td, + #debug-bar button, + #debug-bar .toolbar { + background-color: transparent; + color: #DFDFDF; } + #debug-bar button { + background-color: #252525; } + #debug-bar table strong { + color: #FDC894; } + #debug-bar table tbody tr:hover { + background-color: #434343; } + #debug-bar table tbody tr.current { + background-color: #FDC894; } + #debug-bar table tbody tr.current td { + color: #252525; } + #debug-bar table tbody tr.current:hover td { + background-color: #DD4814; + color: #FFFFFF; } + #debug-bar .toolbar { + background-color: #434343; + box-shadow: 0 0 4px #434343; + -moz-box-shadow: 0 0 4px #434343; + -webkit-box-shadow: 0 0 4px #434343; } + #debug-bar .toolbar img { + filter: brightness(0) invert(1); } + #debug-bar.fixed-top .toolbar { + box-shadow: 0 0 4px #434343; + -moz-box-shadow: 0 0 4px #434343; + -webkit-box-shadow: 0 0 4px #434343; } + #debug-bar.fixed-top .tab { + box-shadow: 0 1px 4px #434343; + -moz-box-shadow: 0 1px 4px #434343; + -webkit-box-shadow: 0 1px 4px #434343; } + #debug-bar .muted { + color: #DFDFDF; } + #debug-bar .muted td { + color: #434343; } + #debug-bar .muted:hover td { + color: #DFDFDF; } + #debug-bar #toolbar-position, + #debug-bar #toolbar-theme { + filter: brightness(0) invert(0.6); } + #debug-bar .ci-label.active { + background-color: #252525; } + #debug-bar .ci-label:hover { + background-color: #252525; } + #debug-bar .ci-label .badge { + background-color: #5BC0DE; + color: #DFDFDF; } + #debug-bar .tab { + background-color: #252525; + box-shadow: 0 -1px 4px #434343; + -moz-box-shadow: 0 -1px 4px #434343; + -webkit-box-shadow: 0 -1px 4px #434343; } + #debug-bar .timeline th, + #debug-bar .timeline td { + border-color: #434343; } + #debug-bar .timeline .timer { + background-color: #DD8615; } + + .debug-view.show-view { + border-color: #DD8615; } + + .debug-view-path { + background-color: #FDC894; + color: #434343; } } +#toolbarContainer.dark #debug-icon { + background-color: #252525; + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #toolbarContainer.dark #debug-icon a:active, #toolbarContainer.dark #debug-icon a:link, #toolbarContainer.dark #debug-icon a:visited { + color: #DD8615; } +#toolbarContainer.dark #debug-bar { + background-color: #252525; + color: #DFDFDF; } + #toolbarContainer.dark #debug-bar h1, + #toolbarContainer.dark #debug-bar h2, + #toolbarContainer.dark #debug-bar h3, + #toolbarContainer.dark #debug-bar p, + #toolbarContainer.dark #debug-bar a, + #toolbarContainer.dark #debug-bar button, + #toolbarContainer.dark #debug-bar table, + #toolbarContainer.dark #debug-bar thead, + #toolbarContainer.dark #debug-bar tr, + #toolbarContainer.dark #debug-bar td, + #toolbarContainer.dark #debug-bar button, + #toolbarContainer.dark #debug-bar .toolbar { + background-color: transparent; + color: #DFDFDF; } + #toolbarContainer.dark #debug-bar button { + background-color: #252525; } + #toolbarContainer.dark #debug-bar table strong { + color: #FDC894; } + #toolbarContainer.dark #debug-bar table tbody tr:hover { + background-color: #434343; } + #toolbarContainer.dark #debug-bar table tbody tr.current { + background-color: #FDC894; } + #toolbarContainer.dark #debug-bar table tbody tr.current td { + color: #252525; } + #toolbarContainer.dark #debug-bar table tbody tr.current:hover td { + background-color: #DD4814; + color: #FFFFFF; } + #toolbarContainer.dark #debug-bar .toolbar { + background-color: #434343; + box-shadow: 0 0 4px #434343; + -moz-box-shadow: 0 0 4px #434343; + -webkit-box-shadow: 0 0 4px #434343; } + #toolbarContainer.dark #debug-bar .toolbar img { + filter: brightness(0) invert(1); } + #toolbarContainer.dark #debug-bar.fixed-top .toolbar { + box-shadow: 0 0 4px #434343; + -moz-box-shadow: 0 0 4px #434343; + -webkit-box-shadow: 0 0 4px #434343; } + #toolbarContainer.dark #debug-bar.fixed-top .tab { + box-shadow: 0 1px 4px #434343; + -moz-box-shadow: 0 1px 4px #434343; + -webkit-box-shadow: 0 1px 4px #434343; } + #toolbarContainer.dark #debug-bar .muted { + color: #DFDFDF; } + #toolbarContainer.dark #debug-bar .muted td { + color: #434343; } + #toolbarContainer.dark #debug-bar .muted:hover td { + color: #DFDFDF; } + #toolbarContainer.dark #debug-bar #toolbar-position, + #toolbarContainer.dark #debug-bar #toolbar-theme { + filter: brightness(0) invert(0.6); } + #toolbarContainer.dark #debug-bar .ci-label.active { + background-color: #252525; } + #toolbarContainer.dark #debug-bar .ci-label:hover { + background-color: #252525; } + #toolbarContainer.dark #debug-bar .ci-label .badge { + background-color: #5BC0DE; + color: #DFDFDF; } + #toolbarContainer.dark #debug-bar .tab { + background-color: #252525; + box-shadow: 0 -1px 4px #434343; + -moz-box-shadow: 0 -1px 4px #434343; + -webkit-box-shadow: 0 -1px 4px #434343; } + #toolbarContainer.dark #debug-bar .timeline th, + #toolbarContainer.dark #debug-bar .timeline td { + border-color: #434343; } + #toolbarContainer.dark #debug-bar .timeline .timer { + background-color: #DD8615; } +#toolbarContainer.dark .debug-view.show-view { + border-color: #DD8615; } +#toolbarContainer.dark .debug-view-path { + background-color: #FDC894; + color: #434343; } + +#toolbarContainer.light #debug-icon { + background-color: #FFFFFF; + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #toolbarContainer.light #debug-icon a:active, #toolbarContainer.light #debug-icon a:link, #toolbarContainer.light #debug-icon a:visited { + color: #DD8615; } +#toolbarContainer.light #debug-bar { + background-color: #FFFFFF; + color: #434343; } + #toolbarContainer.light #debug-bar h1, + #toolbarContainer.light #debug-bar h2, + #toolbarContainer.light #debug-bar h3, + #toolbarContainer.light #debug-bar p, + #toolbarContainer.light #debug-bar a, + #toolbarContainer.light #debug-bar button, + #toolbarContainer.light #debug-bar table, + #toolbarContainer.light #debug-bar thead, + #toolbarContainer.light #debug-bar tr, + #toolbarContainer.light #debug-bar td, + #toolbarContainer.light #debug-bar button, + #toolbarContainer.light #debug-bar .toolbar { + background-color: transparent; + color: #434343; } + #toolbarContainer.light #debug-bar button { + background-color: #FFFFFF; } + #toolbarContainer.light #debug-bar table strong { + color: #FDC894; } + #toolbarContainer.light #debug-bar table tbody tr:hover { + background-color: #DFDFDF; } + #toolbarContainer.light #debug-bar table tbody tr.current { + background-color: #FDC894; } + #toolbarContainer.light #debug-bar table tbody tr.current:hover td { + background-color: #DD4814; + color: #FFFFFF; } + #toolbarContainer.light #debug-bar .toolbar { + background-color: #FFFFFF; + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #toolbarContainer.light #debug-bar .toolbar img { + filter: brightness(0) invert(0.4); } + #toolbarContainer.light #debug-bar.fixed-top .toolbar { + box-shadow: 0 0 4px #DFDFDF; + -moz-box-shadow: 0 0 4px #DFDFDF; + -webkit-box-shadow: 0 0 4px #DFDFDF; } + #toolbarContainer.light #debug-bar.fixed-top .tab { + box-shadow: 0 1px 4px #DFDFDF; + -moz-box-shadow: 0 1px 4px #DFDFDF; + -webkit-box-shadow: 0 1px 4px #DFDFDF; } + #toolbarContainer.light #debug-bar .muted { + color: #434343; } + #toolbarContainer.light #debug-bar .muted td { + color: #DFDFDF; } + #toolbarContainer.light #debug-bar .muted:hover td { + color: #434343; } + #toolbarContainer.light #debug-bar #toolbar-position, + #toolbarContainer.light #debug-bar #toolbar-theme { + filter: brightness(0) invert(0.6); } + #toolbarContainer.light #debug-bar .ci-label.active { + background-color: #DFDFDF; } + #toolbarContainer.light #debug-bar .ci-label:hover { + background-color: #DFDFDF; } + #toolbarContainer.light #debug-bar .ci-label .badge { + background-color: #5BC0DE; + color: #FFFFFF; } + #toolbarContainer.light #debug-bar .tab { + background-color: #FFFFFF; + box-shadow: 0 -1px 4px #DFDFDF; + -moz-box-shadow: 0 -1px 4px #DFDFDF; + -webkit-box-shadow: 0 -1px 4px #DFDFDF; } + #toolbarContainer.light #debug-bar .timeline th, + #toolbarContainer.light #debug-bar .timeline td { + border-color: #DFDFDF; } + #toolbarContainer.light #debug-bar .timeline .timer { + background-color: #DD8615; } +#toolbarContainer.light .debug-view.show-view { + border-color: #DD8615; } +#toolbarContainer.light .debug-view-path { + background-color: #FDC894; + color: #434343; } + +.debug-bar-width30 { + width: 30%; } + +.debug-bar-width10 { + width: 10%; } + +.debug-bar-width70p { + width: 70px; } + +.debug-bar-width140p { + width: 140px; } + +.debug-bar-width20e { + width: 20em; } + +.debug-bar-width6r { + width: 6rem; } + +.debug-bar-ndisplay { + display: none; } + +.debug-bar-alignRight { + text-align: right; } + +.debug-bar-alignLeft { + text-align: left; } + +.debug-bar-noverflow { + overflow: hidden; } From 3bd15d1e3b56afc98b5968ffb6bb520dcb58b579 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 2 Feb 2020 08:31:03 +0100 Subject: [PATCH 16/19] Updated instructions to generate the CSS file --- system/Debug/Toolbar/Views/SASS/toolbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/system/Debug/Toolbar/Views/SASS/toolbar.scss b/system/Debug/Toolbar/Views/SASS/toolbar.scss index 191e98b2db36..8a00de27267f 100644 --- a/system/Debug/Toolbar/Views/SASS/toolbar.scss +++ b/system/Debug/Toolbar/Views/SASS/toolbar.scss @@ -14,7 +14,7 @@ // 1. Open the Terminal // 2. Install SASS: https://sass-lang.com/install // 3. Go to the SASS folder: "cd system/Debug/Toolbar/Views/SASS" -// 4. Generate the CSS file: "sass --no-cache --scss --sourcemap=none --style=compressed toolbar.scss ../toolbar.css" +// 4. Generate the CSS file: "sass --no-cache --scss --sourcemap=none toolbar.scss ../toolbar.css" // IMPORTS From 86f79690926cd6d20bbeea4dbdb08764bcd9a7a3 Mon Sep 17 00:00:00 2001 From: Little J Date: Sun, 2 Feb 2020 15:46:29 +0100 Subject: [PATCH 17/19] Fixed the "Matt Green" color --- system/Debug/Toolbar/Views/SASS/_graphic-charter.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss b/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss index c23c3bc3c54c..9e88e7177551 100644 --- a/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss +++ b/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss @@ -15,6 +15,6 @@ $g-red: #DD4814; // Matt colors $m-blue: #D8EAF0; $m-gray: #DFDFDF; -$m-green: #5BC0DE; +$m-green: #DFF0D8; $m-orange: #FDC894; $m-red: #EF9090; From 426fdb25946ae8248101aa7ae07bfbce0809d981 Mon Sep 17 00:00:00 2001 From: Little J Date: Sat, 22 Feb 2020 17:22:34 +0100 Subject: [PATCH 18/19] Moved SASS files from "system/Debug/Toolbar/Views/SASS" to "admin/css/debug-toolbar" --- .../Views/SASS => admin/css/debug-toolbar}/_graphic-charter.scss | 0 .../Toolbar/Views/SASS => admin/css/debug-toolbar}/_mixins.scss | 0 .../Toolbar/Views/SASS => admin/css/debug-toolbar}/_settings.scss | 0 .../Views/SASS => admin/css/debug-toolbar}/_theme-dark.scss | 0 .../Views/SASS => admin/css/debug-toolbar}/_theme-light.scss | 0 .../Toolbar/Views/SASS => admin/css/debug-toolbar}/toolbar.scss | 0 6 files changed, 0 insertions(+), 0 deletions(-) rename {system/Debug/Toolbar/Views/SASS => admin/css/debug-toolbar}/_graphic-charter.scss (100%) rename {system/Debug/Toolbar/Views/SASS => admin/css/debug-toolbar}/_mixins.scss (100%) rename {system/Debug/Toolbar/Views/SASS => admin/css/debug-toolbar}/_settings.scss (100%) rename {system/Debug/Toolbar/Views/SASS => admin/css/debug-toolbar}/_theme-dark.scss (100%) rename {system/Debug/Toolbar/Views/SASS => admin/css/debug-toolbar}/_theme-light.scss (100%) rename {system/Debug/Toolbar/Views/SASS => admin/css/debug-toolbar}/toolbar.scss (100%) diff --git a/system/Debug/Toolbar/Views/SASS/_graphic-charter.scss b/admin/css/debug-toolbar/_graphic-charter.scss similarity index 100% rename from system/Debug/Toolbar/Views/SASS/_graphic-charter.scss rename to admin/css/debug-toolbar/_graphic-charter.scss diff --git a/system/Debug/Toolbar/Views/SASS/_mixins.scss b/admin/css/debug-toolbar/_mixins.scss similarity index 100% rename from system/Debug/Toolbar/Views/SASS/_mixins.scss rename to admin/css/debug-toolbar/_mixins.scss diff --git a/system/Debug/Toolbar/Views/SASS/_settings.scss b/admin/css/debug-toolbar/_settings.scss similarity index 100% rename from system/Debug/Toolbar/Views/SASS/_settings.scss rename to admin/css/debug-toolbar/_settings.scss diff --git a/system/Debug/Toolbar/Views/SASS/_theme-dark.scss b/admin/css/debug-toolbar/_theme-dark.scss similarity index 100% rename from system/Debug/Toolbar/Views/SASS/_theme-dark.scss rename to admin/css/debug-toolbar/_theme-dark.scss diff --git a/system/Debug/Toolbar/Views/SASS/_theme-light.scss b/admin/css/debug-toolbar/_theme-light.scss similarity index 100% rename from system/Debug/Toolbar/Views/SASS/_theme-light.scss rename to admin/css/debug-toolbar/_theme-light.scss diff --git a/system/Debug/Toolbar/Views/SASS/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss similarity index 100% rename from system/Debug/Toolbar/Views/SASS/toolbar.scss rename to admin/css/debug-toolbar/toolbar.scss From 3b6171bf596c0d1d48ad07469dae16d2ef79c073 Mon Sep 17 00:00:00 2001 From: Little J Date: Sat, 22 Feb 2020 17:59:24 +0100 Subject: [PATCH 19/19] Moved instructions from the SASS file to "contributinng/css.rst" --- admin/css/debug-toolbar/toolbar.scss | 9 --------- contributing/README.rst | 7 ++++--- contributing/css.rst | 21 +++++++++++++++++++++ 3 files changed, 25 insertions(+), 12 deletions(-) create mode 100644 contributing/css.rst diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss index 8a00de27267f..50ba55afd097 100644 --- a/admin/css/debug-toolbar/toolbar.scss +++ b/admin/css/debug-toolbar/toolbar.scss @@ -8,15 +8,6 @@ */ -// GUIDE TO GENERATE THE CSS FILE -// ========================================================================== */ - -// 1. Open the Terminal -// 2. Install SASS: https://sass-lang.com/install -// 3. Go to the SASS folder: "cd system/Debug/Toolbar/Views/SASS" -// 4. Generate the CSS file: "sass --no-cache --scss --sourcemap=none toolbar.scss ../toolbar.css" - - // IMPORTS // ========================================================================== */ diff --git a/contributing/README.rst b/contributing/README.rst index 2712b322cc64..b5539f8a8ae1 100644 --- a/contributing/README.rst +++ b/contributing/README.rst @@ -5,6 +5,7 @@ Contributing to CodeIgniter - `Contribution guidelines <./guidelines.rst>`_ - `Contribution workflow <./workflow.rst>`_ - `Contribution signing <./signing.rst>`_ +- `Contribution CSS <./css.rst>`_ - `Framework internals <./internals.rst>`_ - `CodeIgniter documentation <./documentation.rst>`_ - `PHP Style Guide <./styleguide.rst>`_ @@ -54,7 +55,7 @@ If you've found a critical vulnerability, we'd be happy to credit you in our Tips for a Good Issue Report **************************** -Use a descriptive subject line (eg parser library chokes on commas) rather than +Use a descriptive subject line (eg parser library chokes on commas) rather than a vague one (eg. your code broke). Address a single issue in a report. @@ -65,7 +66,7 @@ Explain what you expected to happen, and what did happen. Include error messages and stacktrace, if any. Include short code segments if they help to explain. -Use a pastebin or dropbox facility to include longer segments of code or +Use a pastebin or dropbox facility to include longer segments of code or screenshots - do not include them in the issue report itself. This means setting a reasonable expiry for those, until the issue is resolved or closed. @@ -73,5 +74,5 @@ If you know how to fix the issue, you can do so in your own fork & branch, and s The issue report information above should be part of that. If your issue report can describe the steps to reproduce the problem, that is great. -If you can include a unit test that reproduces the problem, that is even better, +If you can include a unit test that reproduces the problem, that is even better, as it gives whoever is fixing it a clearer target! diff --git a/contributing/css.rst b/contributing/css.rst new file mode 100644 index 000000000000..88c163e09a7b --- /dev/null +++ b/contributing/css.rst @@ -0,0 +1,21 @@ +================ +Contribution CSS +================ + +CodeIgniter uses SASS to generate the debug toolbar's CSS. Therefore, you +will need to install it first. You can find further instructions on the +official website: https://sass-lang.com/install + +Compile SASS files +================== + +Open your terminal, and navigate to CodeIgniter's root folder. To generate +the CSS file, use the following command: ``sass --no-cache --sourcemap=none admin/css/debug-toolbar/toolbar.scss system/Debug/Toolbar/Views/toolbar.css`` + +Details: +- ``--no-cache`` is a parameter defined to disable SASS cache, this prevents + a "cache" folder from being created +- ``--sourcemap=none`` is a parameter which prevents soucemap files from + being generated +- ``admin/css/debug-toolbar/toolbar.scss`` is the SASS source +- ``system/Debug/Toolbar/Views/toolbar.css`` is he CSS destination