From bb63702f69e493e3501e6c393ec526e2ea632f8b Mon Sep 17 00:00:00 2001 From: Alex Schmitz Date: Mon, 5 Jul 2021 09:24:42 +0200 Subject: [PATCH 1/3] Add toolbar timer styles to sass files. --- admin/css/debug-toolbar/toolbar.scss | 53 ++++++++++++++++++++++++++ system/Debug/Toolbar/Views/toolbar.css | 36 ++++++++--------- 2 files changed, 71 insertions(+), 18 deletions(-) diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss index 8669d0ac12ff..d06731db6ffe 100644 --- a/admin/css/debug-toolbar/toolbar.scss +++ b/admin/css/debug-toolbar/toolbar.scss @@ -326,6 +326,23 @@ &:first-child { border-left: 0; + max-width: none; + } + + &.child-container { + padding: 0px; + + .timeline { + margin: 0px; + + td { + &:first-child { + &:not(.child-container) { + padding-left: calc(5px + 10px * var(--level)); + } + } + } + } } } @@ -336,6 +353,42 @@ position: absolute; top: 30%; } + + .timeline-parent{ + cursor: pointer; + + td { + &:first-child { + nav { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+") no-repeat scroll 0 0/15px 75px transparent; + background-position: 0 25%; + display: inline-block; + height: 15px; + width: 15px; + margin-right: 3px; + vertical-align: middle; + } + } + } + } + + .timeline-parent-open { + background-color: #DFDFDF; + + td { + &:first-child { + nav { + background-position: 0 75%; + } + } + } + } + + .child-row { + &:hover { + background: transparent; + } + } } // The "Routes" tab diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index bc8b4ac44ef7..bd080de2b1c8 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -186,22 +186,6 @@ #debug-bar .timeline { margin-left: 0; width: 100%; } - #debug-bar .timeline tr.timeline-parent { - cursor: pointer; } - #debug-bar .timeline tr.timeline-parent td:first-child nav { - background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+") no-repeat scroll 0 0/15px 75px transparent; - background-position: 0 25%; - display: inline-block; - height: 15px; - width: 15px; - margin-right: 3px; - vertical-align: middle; } - #debug-bar .timeline tr.timeline-parent.timeline-parent-open td:first-child nav { - background-position: 0 75%; } - #debug-bar .timeline tr.timeline-parent.timeline-parent-open { - background-color: #DFDFDF; } - #debug-bar .timeline tr.child-row:hover { - background: transparent; } #debug-bar .timeline th { border-left: 1px solid; font-size: 12px; @@ -220,9 +204,9 @@ max-width: none; } #debug-bar .timeline td.child-container { padding: 0px; } - #debug-bar .timeline td.child-container .timeline{ + #debug-bar .timeline td.child-container .timeline { margin: 0px; } - #debug-bar .timeline td.child-container td:first-child:not(.child-container){ + #debug-bar .timeline td.child-container .timeline td:first-child:not(.child-container) { padding-left: calc(5px + 10px * var(--level)); } #debug-bar .timeline .timer { border-radius: 4px; @@ -232,6 +216,22 @@ padding: 5px; position: absolute; top: 30%; } + #debug-bar .timeline .timeline-parent { + cursor: pointer; } + #debug-bar .timeline .timeline-parent td:first-child nav { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+") no-repeat scroll 0 0/15px 75px transparent; + background-position: 0 25%; + display: inline-block; + height: 15px; + width: 15px; + margin-right: 3px; + vertical-align: middle; } + #debug-bar .timeline .timeline-parent-open { + background-color: #DFDFDF; } + #debug-bar .timeline .timeline-parent-open td:first-child nav { + background-position: 0 75%; } + #debug-bar .timeline .child-row:hover { + background: transparent; } #debug-bar .route-params, #debug-bar .route-params-item { vertical-align: top; } From 9d8ea6fbd5f53323ca3d92e496f39ba9c9c1167e Mon Sep 17 00:00:00 2001 From: Alex Schmitz Date: Wed, 7 Jul 2021 13:21:55 +0200 Subject: [PATCH 2/3] Unify scss styling and switch to spaces. --- admin/css/debug-toolbar/_graphic-charter.scss | 18 +- admin/css/debug-toolbar/_mixins.scss | 13 +- admin/css/debug-toolbar/_theme-dark.scss | 257 +++--- admin/css/debug-toolbar/_theme-light.scss | 250 +++--- admin/css/debug-toolbar/toolbar.scss | 838 +++++++++--------- system/Debug/Toolbar/Views/toolbar.css | 23 +- 6 files changed, 718 insertions(+), 681 deletions(-) diff --git a/admin/css/debug-toolbar/_graphic-charter.scss b/admin/css/debug-toolbar/_graphic-charter.scss index 9e88e7177551..522f07f6e255 100644 --- a/admin/css/debug-toolbar/_graphic-charter.scss +++ b/admin/css/debug-toolbar/_graphic-charter.scss @@ -2,19 +2,19 @@ // ========================================================================== */ // Themes -$t-dark: #252525; +$t-dark: #252525; $t-light: #FFFFFF; // Glossy colors -$g-blue: #5BC0DE; -$g-gray: #434343; -$g-green: #9ACE25; +$g-blue: #5BC0DE; +$g-gray: #434343; +$g-green: #9ACE25; $g-orange: #DD8615; -$g-red: #DD4814; +$g-red: #DD4814; // Matt colors -$m-blue: #D8EAF0; -$m-gray: #DFDFDF; -$m-green: #DFF0D8; +$m-blue: #D8EAF0; +$m-gray: #DFDFDF; +$m-green: #DFF0D8; $m-orange: #FDC894; -$m-red: #EF9090; +$m-red: #EF9090; diff --git a/admin/css/debug-toolbar/_mixins.scss b/admin/css/debug-toolbar/_mixins.scss index c5bde5f5f6da..69af2b67c475 100644 --- a/admin/css/debug-toolbar/_mixins.scss +++ b/admin/css/debug-toolbar/_mixins.scss @@ -2,12 +2,13 @@ // ========================================================================== */ @mixin border-radius($radius) { - border-radius: $radius; - -moz-border-radius: $radius; - -webkit-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; + 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/_theme-dark.scss b/admin/css/debug-toolbar/_theme-dark.scss index 56d4a4bbbac3..b41e8fb086af 100644 --- a/admin/css/debug-toolbar/_theme-dark.scss +++ b/admin/css/debug-toolbar/_theme-dark.scss @@ -12,11 +12,14 @@ // ========================================================================== */ #debug-icon { - background-color: $t-dark; - @include box-shadow(0, 0, 4px, $m-gray); - a:active, a:link, a:visited { - color: $g-orange; - } + background-color: $t-dark; + @include box-shadow(0, 0, 4px, $m-gray); + + a:active, + a:link, + a:visited { + color: $g-orange; + } } @@ -24,119 +27,130 @@ // ========================================================================== */ #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; - } - } + 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; + } + } } @@ -144,9 +158,10 @@ // ========================================================================== */ .debug-view.show-view { - border-color: $g-orange; + border-color: $g-orange; } + .debug-view-path { - background-color: $m-orange; - color: $g-gray; + 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 index 744997a4080d..7148cd4c4f6f 100644 --- a/admin/css/debug-toolbar/_theme-light.scss +++ b/admin/css/debug-toolbar/_theme-light.scss @@ -12,11 +12,14 @@ // ========================================================================== */ #debug-icon { - background-color: $t-light; - @include box-shadow(0, 0, 4px, $m-gray); - a:active, a:link, a:visited { - color: $g-orange; - } + background-color: $t-light; + @include box-shadow(0, 0, 4px, $m-gray); + + a:active, + a:link, + a:visited { + color: $g-orange; + } } @@ -24,116 +27,126 @@ // ========================================================================== */ #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; - } - } + 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; + } + } } @@ -141,9 +154,10 @@ // ========================================================================== */ .debug-view.show-view { - border-color: $g-orange; + border-color: $g-orange; } + .debug-view-path { - background-color: $m-orange; - color: $g-gray; + background-color: $m-orange; + color: $g-gray; } diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss index d06731db6ffe..0f07005ad9ab 100644 --- a/admin/css/debug-toolbar/toolbar.scss +++ b/admin/css/debug-toolbar/toolbar.scss @@ -1,8 +1,8 @@ /*! CodeIgniter 4 - Debug bar * ============================================================================ - * Forum: https://forum.codeigniter.com - * Github: https://github.com/codeigniter4/codeigniter4 - * Slack: https://codeigniterchat.slack.com + * Forum: https://forum.codeigniter.com + * Github: https://github.com/codeigniter4/codeigniter4 + * Slack: https://codeigniterchat.slack.com * Website: https://codeigniter.com */ @@ -17,38 +17,38 @@ // ========================================================================== */ #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; - } + // 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; + } } @@ -56,352 +56,352 @@ // ========================================================================== */ #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; - - svg { - width: 16px; - margin-right: 5px; - } - } - - 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; - } - } - } - } - - td[data-debugbar-route] { - form { - display: none; - } - - &:hover { - form { - display: block; - } - - &>div { - display: none; - } - } - - input[type=text] { - padding: 2px; - } - } - - // The toolbar - .toolbar { - display: flex; - 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; - display: inline-flex; - vertical-align: top; - - &: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-flex; - font-size: $base-size - 2; - // vertical-align: baseline; - - &:hover { - cursor: pointer; - } - - a { - color: inherit; - display: flex; - letter-spacing: normal; - padding: 0 10px; - text-decoration: none; - align-items: center; - } - - // The toolbar icons - img { - // clear: left; - // display: inline-block; - // float: left; - margin: 6px 3px 6px 0; - width: 16px !important; - } - - // 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; - max-width: none; - } - - &.child-container { - padding: 0px; - - .timeline { - margin: 0px; - - td { - &:first-child { - &:not(.child-container) { - padding-left: calc(5px + 10px * var(--level)); - } - } - } - } - } - } - - .timer { - @include border-radius(4px); - display: inline-block; - padding: 5px; - position: absolute; - top: 30%; - } - - .timeline-parent{ - cursor: pointer; - - td { - &:first-child { - nav { - background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+") no-repeat scroll 0 0/15px 75px transparent; - background-position: 0 25%; - display: inline-block; - height: 15px; - width: 15px; - margin-right: 3px; - vertical-align: middle; - } - } - } - } - - .timeline-parent-open { - background-color: #DFDFDF; - - td { - &:first-child { - nav { - background-position: 0 75%; - } - } - } - } - - .child-row { - &:hover { - background: transparent; - } - } - } - - // The "Routes" tab - .route-params, - .route-params-item { - vertical-align: top; - - td:first-child { - font-style: italic; - padding-left: 1em; - text-align: right; - } - } + // 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; + + svg { + width: 16px; + margin-right: 5px; + } + } + + 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; + + // Tables indentation + margin: 5px 10px 15px 10px; + + // Make sure it still fits the container, even with the margins + width: calc(100% - 10px); + + 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; + } + } + } + } + + td[data-debugbar-route] { + form { + display: none; + } + + &:hover { + form { + display: block; + } + + &>div { + display: none; + } + } + + input[type=text] { + padding: 2px; + } + } + + // The toolbar + .toolbar { + display: flex; + 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 { + padding: 0 6px; + display: inline-flex; + vertical-align: top; + + &: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-flex; + font-size: $base-size - 2; + + &:hover { + cursor: pointer; + } + + a { + color: inherit; + display: flex; + letter-spacing: normal; + padding: 0 10px; + text-decoration: none; + align-items: center; + } + + // The toolbar icons + img { + margin: 6px 3px 6px 0; + width: 16px !important; + } + + // 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; + max-width: none; + } + + &.child-container { + padding: 0px; + + .timeline { + margin: 0px; + + td { + &:first-child { + &:not(.child-container) { + padding-left: calc(5px + 10px * var(--level)); + } + } + } + } + } + } + + .timer { + @include border-radius(4px); + display: inline-block; + padding: 5px; + position: absolute; + top: 30%; + } + + .timeline-parent { + cursor: pointer; + + td { + &:first-child { + nav { + background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAxNTAiPjxwYXRoIGQ9Ik02IDdoMThsLTkgMTV6bTAgMzBoMThsLTkgMTV6bTAgNDVoMThsLTktMTV6bTAgMzBoMThsLTktMTV6bTAgMTJsMTggMThtLTE4IDBsMTgtMTgiIGZpbGw9IiM1NTUiLz48cGF0aCBkPSJNNiAxMjZsMTggMThtLTE4IDBsMTgtMTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjNTU1Ii8+PC9zdmc+") no-repeat scroll 0 0/15px 75px transparent; + background-position: 0 25%; + display: inline-block; + height: 15px; + width: 15px; + margin-right: 3px; + vertical-align: middle; + } + } + } + } + + .timeline-parent-open { + background-color: #DFDFDF; + + td { + &:first-child { + nav { + background-position: 0 75%; + } + } + } + } + + .child-row { + &:hover { + background: transparent; + } + } + } + + // The "Routes" tab + .route-params, + .route-params-item { + vertical-align: top; + + td:first-child { + font-style: italic; + padding-left: 1em; + text-align: right; + } + } } @@ -409,21 +409,21 @@ // ========================================================================== */ .debug-view.show-view { - border: 1px solid; - margin: 4px; + 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; + 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; + display: block !important; } @@ -431,17 +431,17 @@ // ========================================================================== */ @media screen and (max-width: 1024px) { - #debug-bar { - .ci-label { - img { - margin: unset - } - } - } - - .hide-sm { - display: none !important; - } + #debug-bar { + .ci-label { + img { + margin: unset + } + } + } + + .hide-sm { + display: none !important; + } } @@ -453,22 +453,22 @@ // If the browser supports "prefers-color-scheme" and the scheme is "Dark" @media (prefers-color-scheme: dark) { - @import '_theme-dark'; + @import '_theme-dark'; } // If we force the "Dark" theme #toolbarContainer.dark { - @import '_theme-dark'; + @import '_theme-dark'; - td[data-debugbar-route] input[type=text] { - background: #000; - color: #fff; - } + td[data-debugbar-route] input[type=text] { + background: #000; + color: #fff; + } } // If we force the "Light" theme #toolbarContainer.light { - @import '_theme-light'; + @import '_theme-light'; } @@ -476,41 +476,41 @@ // ========================================================================== */ .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; -} \ No newline at end of file + overflow: hidden; +} diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index bd080de2b1c8..f42cd2089027 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -1,8 +1,8 @@ /*! CodeIgniter 4 - Debug bar * ============================================================================ - * Forum: https://forum.codeigniter.com - * Github: https://github.com/codeigniter4/codeigniter4 - * Slack: https://codeigniterchat.slack.com + * Forum: https://forum.codeigniter.com + * Github: https://github.com/codeigniter4/codeigniter4 + * Slack: https://codeigniterchat.slack.com * Website: https://codeigniter.com */ #debug-icon { @@ -117,7 +117,6 @@ 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 { @@ -267,7 +266,9 @@ 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 { + #debug-icon a:active, + #debug-icon a:link, + #debug-icon a:visited { color: #DD8615; } #debug-bar { @@ -353,7 +354,9 @@ 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 { + #debug-icon a:active, + #debug-icon a:link, + #debug-icon a:visited { color: #DD8615; } #debug-bar { background-color: #252525; @@ -437,7 +440,9 @@ 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 { + #toolbarContainer.dark #debug-icon a:active, + #toolbarContainer.dark #debug-icon a:link, + #toolbarContainer.dark #debug-icon a:visited { color: #DD8615; } #toolbarContainer.dark #debug-bar { @@ -528,7 +533,9 @@ 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 { + #toolbarContainer.light #debug-icon a:active, + #toolbarContainer.light #debug-icon a:link, + #toolbarContainer.light #debug-icon a:visited { color: #DD8615; } #toolbarContainer.light #debug-bar { From f0bae59b0cfcedf4af880fd091f7c3d085f4e30f Mon Sep 17 00:00:00 2001 From: Alex Schmitz Date: Wed, 7 Jul 2021 19:41:05 +0200 Subject: [PATCH 3/3] Replace file header. --- admin/css/debug-toolbar/toolbar.scss | 13 +++++++------ system/Debug/Toolbar/Views/toolbar.css | 13 +++++++------ 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/admin/css/debug-toolbar/toolbar.scss b/admin/css/debug-toolbar/toolbar.scss index 0f07005ad9ab..c73510182ac7 100644 --- a/admin/css/debug-toolbar/toolbar.scss +++ b/admin/css/debug-toolbar/toolbar.scss @@ -1,9 +1,10 @@ -/*! CodeIgniter 4 - Debug bar - * ============================================================================ - * Forum: https://forum.codeigniter.com - * Github: https://github.com/codeigniter4/codeigniter4 - * Slack: https://codeigniterchat.slack.com - * Website: https://codeigniter.com +/** + * This file is part of the CodeIgniter 4 framework. + * + * (c) CodeIgniter Foundation + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. */ // IMPORTS diff --git a/system/Debug/Toolbar/Views/toolbar.css b/system/Debug/Toolbar/Views/toolbar.css index f42cd2089027..34b686385fd7 100644 --- a/system/Debug/Toolbar/Views/toolbar.css +++ b/system/Debug/Toolbar/Views/toolbar.css @@ -1,9 +1,10 @@ -/*! CodeIgniter 4 - Debug bar - * ============================================================================ - * Forum: https://forum.codeigniter.com - * Github: https://github.com/codeigniter4/codeigniter4 - * Slack: https://codeigniterchat.slack.com - * Website: https://codeigniter.com +/** + * This file is part of the CodeIgniter 4 framework. + * + * (c) CodeIgniter Foundation + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. */ #debug-icon { bottom: 0;