diff --git a/admin/css/debug-toolbar/_graphic-charter.scss b/admin/css/debug-toolbar/_graphic-charter.scss new file mode 100644 index 000000000000..9e88e7177551 --- /dev/null +++ b/admin/css/debug-toolbar/_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: #DFF0D8; +$m-orange: #FDC894; +$m-red: #EF9090; diff --git a/admin/css/debug-toolbar/_mixins.scss b/admin/css/debug-toolbar/_mixins.scss new file mode 100644 index 000000000000..c5bde5f5f6da --- /dev/null +++ b/admin/css/debug-toolbar/_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/admin/css/debug-toolbar/_settings.scss b/admin/css/debug-toolbar/_settings.scss new file mode 100644 index 000000000000..06a51de634bb --- /dev/null +++ b/admin/css/debug-toolbar/_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/admin/css/debug-toolbar/_theme-dark.scss b/admin/css/debug-toolbar/_theme-dark.scss new file mode 100644 index 000000000000..56d4a4bbbac3 --- /dev/null +++ b/admin/css/debug-toolbar/_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: $m-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/admin/css/debug-toolbar/_theme-light.scss b/admin/css/debug-toolbar/_theme-light.scss new file mode 100644 index 000000000000..744997a4080d --- /dev/null +++ b/admin/css/debug-toolbar/_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: $g-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/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss new file mode 100644 index 000000000000..50ba55afd097 --- /dev/null +++ b/admin/css/debug-toolbar/toolbar.scss @@ -0,0 +1,386 @@ +/* CodeIgniter 4 - Debug bar + ============================================================================ */ + +/* Forum: https://forum.codeigniter.com + * Github: https://github.com/codeigniter4/codeigniter4 + * Slack: https://codeigniterchat.slack.com + * Website: https://codeigniter.com + */ + + +// 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; +} 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 diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index f53b8fe41907..7a4c9c455078 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -1,407 +1,595 @@ +/* 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 { - 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; -} + 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 { - 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 { + 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; -} - -#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 { - padding: 0 6px; -} - -#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; -} + 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-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-view.show-view { + border: 1px solid; + margin: 4px; } -#debug-bar table.timeline td { - padding: 5px; -} +.debug-view-path { + font-family: monospace; + font-size: 12px; + letter-spacing: normal; + min-height: 16px; + padding: 2px; + text-align: left; } -#debug-bar table.timeline .timer { - position: absolute; - display: inline-block; - padding: 5px; - top: 40%; - border-radius: 4px; - background-color: #999; -} +.show-view .debug-view-path { + display: block !important; } -#debug-bar .route-params, -#debug-bar .route-params-item { - vertical-align: top; -} +@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 .route-params-item td:first-child { - padding-left: 1em; - text-align: right; - font-style: italic; -} +#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: 1px solid #dd4814; - margin: 4px; -} + border-color: #DD8615; } .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; - } -} + 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; } -/** -simple styles to replace inline styles - */ .debug-bar-width30 { - width: 30%; -} + width: 30%; } .debug-bar-width10 { - width: 10%; -} + width: 10%; } .debug-bar-width70p { - width: 70px; -} + width: 70px; } .debug-bar-width140p { - width: 140px; -} + width: 140px; } .debug-bar-width20e { - width: 20em; -} + width: 20em; } .debug-bar-width6r { - width: 6rem; -} + width: 6rem; } .debug-bar-ndisplay { - display: none; -} + display: none; } .debug-bar-alignRight { - text-align: right; -} + text-align: right; } .debug-bar-alignLeft { - text-align: left; -} + text-align: left; } .debug-bar-noverflow { - overflow: hidden; -} + overflow: hidden; } diff --git a/system/Debug/Toolbar/Views/toolbar.js b/system/Debug/Toolbar/Views/toolbar.js index b8d0e830e210..f146da429acd 100644 --- a/system/Debug/Toolbar/Views/toolbar.js +++ b/system/Debug/Toolbar/Views/toolbar.js @@ -4,18 +4,21 @@ 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'); ciDebugBar.createListeners(); ciDebugBar.setToolbarState(); ciDebugBar.setToolbarPosition(); + ciDebugBar.setToolbarTheme(); ciDebugBar.toggleViewsHints(); document.getElementById('debug-bar-link').addEventListener('click', ciDebugBar.toggleToolbar, true); @@ -504,6 +507,56 @@ 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.removeClass(ciDebugBar.toolbarContainer, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); + } + else if (ciDebugBar.readCookie('debug-bar-theme') === 'light') + { + ciDebugBar.removeClass(ciDebugBar.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); + } + + btnTheme.addEventListener('click', function () { + var theme = ciDebugBar.readCookie('debug-bar-theme'); + + if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) + { + // 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.toolbarContainer, 'dark'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'light'); + } + else + { + if (theme === 'dark') + { + ciDebugBar.createCookie('debug-bar-theme', 'light', 365); + 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.toolbarContainer, 'light'); + ciDebugBar.addClass(ciDebugBar.toolbarContainer, 'dark'); + } + } + }, true); + }, + + //-------------------------------------------------------------------- + /** * Helper to create a cookie. * diff --git a/system/Debug/Toolbar/Views/toolbar.tpl.php b/system/Debug/Toolbar/Views/toolbar.tpl.php index b746364eb33b..5f5d7c43a6f1 100644 --- a/system/Debug/Toolbar/Views/toolbar.tpl.php +++ b/system/Debug/Toolbar/Views/toolbar.tpl.php @@ -49,6 +49,7 @@
↕ + 🔅