This is an automated email from the ASF dual-hosted git repository. ilgrosso pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/syncope.git
commit fa1f9a9a0a0fc8c9e52892ccf063d0b441c8f23b Author: Matteo Tatoni <[email protected]> AuthorDate: Thu Aug 13 17:02:08 2026 +0200 [SYNCOPE-1989] fix dark-theme for Console (#1492) --- client/idm/console/pom.xml | 1 + .../META-INF/resources/css/_topology-theme.scss | 99 +++++ .../META-INF/resources/css/idmTopology.scss | 143 ------- .../resources/META-INF/resources/css/topology.scss | 349 +++++++++++++++++ .../syncope/client/console/topology/Topology.html | 3 +- .../client/console/topology/TopologyNodePanel.html | 2 +- .../META-INF/resources/ui-commons/css/_theme.scss | 434 +++++++++++++++++++++ .../ui-commons/css/{utils.scss => _utils.scss} | 0 .../resources/ui-commons/css/accessibility.scss | 9 +- .../META-INF/resources/ui-commons/css/batch.scss | 10 +- .../META-INF/resources/ui-commons/css/login.scss | 22 +- .../META-INF/resources/ui-commons/css/search.scss | 23 +- .../resources/ui-commons/css/syncopeUI.scss | 381 +++++++++--------- .../resources/ui-commons/css/topology.scss | 239 ------------ .../commons/markup/html/form/MultiFieldPanel.html | 2 +- .../ui/commons/panels/NotificationPanel.html | 10 +- .../syncope/client/console/panels/TogglePanel.html | 2 +- .../wicket/markup/html/form/MultiPanel.html | 2 +- 18 files changed, 1121 insertions(+), 610 deletions(-) diff --git a/client/idm/console/pom.xml b/client/idm/console/pom.xml index add44d1de7..72348fe845 100644 --- a/client/idm/console/pom.xml +++ b/client/idm/console/pom.xml @@ -69,6 +69,7 @@ under the License. <inherited>true</inherited> <configuration> <args> + <arg>--load-path=${rootpom.basedir}/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css</arg> <arg>${basedir}/src/main/resources/META-INF/resources/css:${project.build.outputDirectory}/META-INF/resources/css</arg> </args> </configuration> diff --git a/client/idm/console/src/main/resources/META-INF/resources/css/_topology-theme.scss b/client/idm/console/src/main/resources/META-INF/resources/css/_topology-theme.scss new file mode 100644 index 0000000000..3424abcabd --- /dev/null +++ b/client/idm/console/src/main/resources/META-INF/resources/css/_topology-theme.scss @@ -0,0 +1,99 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +:root { + /* + * Topology + */ + --topology-node-border: rgba(15, 23, 42, 0.14); + --topology-node-shadow: 0 10px 28px rgba(2, 6, 23, 0.10); + --topology-node-shadow-hover: 0 14px 34px rgba(2, 6, 23, 0.14); + + --topology-root-bg: rgba(22, 163, 74, 0.18); + --topology-cs-bg: rgba(14, 165, 233, 0.12); + --topology-conn-bg: rgba(139, 92, 246, 0.10); + --topology-conn-errored-bg: rgba(244, 63, 94, 0.18); + --topology-res-bg: rgba(245, 158, 11, 0.14); + + /* + * Topology toolbar + */ + --topology-toolbar-bg: rgba(255, 255, 255, 0.92); + --topology-toolbar-bg-hover: rgba(255, 255, 255, 0.98); + --topology-toolbar-border: rgba(15, 23, 42, 0.10); + --topology-toolbar-fg: rgba(15, 23, 42, 0.78); + --topology-toolbar-fg-hover: rgba(15, 23, 42, 0.92); + --topology-toolbar-shadow: 0 8px 18px rgba(2, 6, 23, 0.10); + --topology-toolbar-shadow-hover: 0 10px 22px rgba(2, 6, 23, 0.14); + --topology-focus-ring: rgba(14, 165, 233, 0.25); + + /* + * Topology labels + */ + --topology-label-bg: #fff; + --topology-label-color: #444; + --topology-label-border: #808080; + --topology-label-hover-bg: #5c96bc; + --topology-label-hover-color: #fff; + --topology-label-hover-border: #fff; + + /* + * Topology tooltip + */ + --topology-tooltip-bg: #eee; + --topology-tooltip-color: #000; + --topology-tooltip-border: #bbb; +} + +[data-bs-theme="dark"] { + /* + * Application background: #2B3035 + * + * Surfaces are deliberately lighter to maintain contrast. + */ + --topology-node-border: rgba(255, 255, 255, 0.22); + --topology-node-shadow: 0 10px 28px rgba(0, 0, 0, 0.38); + --topology-node-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.52); + + --topology-root-bg: rgba(55, 210, 115, 0.30); + --topology-cs-bg: rgba(70, 185, 235, 0.27); + --topology-conn-bg: rgba(160, 120, 245, 0.25); + --topology-conn-errored-bg: rgba(245, 90, 105, 0.36); + --topology-res-bg: rgba(255, 195, 65, 0.30); + + --topology-toolbar-bg: rgba(65, 71, 77, 0.96); + --topology-toolbar-bg-hover: rgba(78, 85, 92, 0.98); + --topology-toolbar-border: rgba(255, 255, 255, 0.18); + --topology-toolbar-fg: rgba(245, 247, 249, 0.90); + --topology-toolbar-fg-hover: #fff; + --topology-toolbar-shadow: 0 8px 18px rgba(0, 0, 0, 0.40); + --topology-toolbar-shadow-hover: 0 10px 22px rgba(0, 0, 0, 0.52); + --topology-focus-ring: rgba(80, 190, 240, 0.45); + + --topology-label-bg: #414950; + --topology-label-color: #f5f5f5; + --topology-label-border: #9aa3ab; + --topology-label-hover-bg: #5c9bc3; + --topology-label-hover-color: #fff; + --topology-label-hover-border: #d9e2e8; + + --topology-tooltip-bg: #4a525a; + --topology-tooltip-color: #fff; + --topology-tooltip-border: #aeb7bf; +} diff --git a/client/idm/console/src/main/resources/META-INF/resources/css/idmTopology.scss b/client/idm/console/src/main/resources/META-INF/resources/css/idmTopology.scss deleted file mode 100644 index 092f501d45..0000000000 --- a/client/idm/console/src/main/resources/META-INF/resources/css/idmTopology.scss +++ /dev/null @@ -1,143 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -:root { - --topology-node-border: rgba(15, 23, 42, 0.14); - --topology-node-shadow: 0 10px 28px rgba(2, 6, 23, 0.10); - --topology-node-shadow-hover: 0 14px 34px rgba(2, 6, 23, 0.14); - - --topology-toolbar-bg: rgba(255, 255, 255, 0.92); - --topology-toolbar-border: rgba(15, 23, 42, 0.10); - --topology-toolbar-fg: rgba(15, 23, 42, 0.78); - --topology-toolbar-fg-hover: rgba(15, 23, 42, 0.92); -} - -#zoom { - display: flex; - justify-content: flex-end; - align-items: center; - gap: 6px; - - ul.menu { - display: flex; - gap: 6px; - margin: 0; - padding: 0; - list-style: none; - } - - ul.menu > li { - margin: 0; - padding: 0; - } - - ul.menu > li > a.btn, - .topology-toolbar-btn { - appearance: none; - border: 1px solid var(--topology-toolbar-border); - background: var(--topology-toolbar-bg); - color: var(--topology-toolbar-fg); - border-radius: 999px; - padding: 6px 10px; - line-height: 1; - box-shadow: 0 8px 18px rgba(2, 6, 23, 0.10); - transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease; - } - - ul.menu > li > a.btn:hover, - .topology-toolbar-btn:hover { - color: var(--topology-toolbar-fg-hover); - background: rgba(255, 255, 255, 0.98); - box-shadow: 0 10px 22px rgba(2, 6, 23, 0.14); - transform: translateY(-1px); - text-decoration: none; - } - - ul.menu > li > a.btn:focus, - .topology-toolbar-btn:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25), 0 10px 22px rgba(2, 6, 23, 0.14); - } - - ul.menu > li > a.btn i, - .topology-toolbar-btn i { - font-size: 1.05rem; - padding-right: 0; - } -} - -#topology { - cursor: grab; -} - -#topology.topology-panning { - cursor: grabbing; -} - -#drawing .window { - opacity: 1; - border: 1px solid var(--topology-node-border); - box-shadow: var(--topology-node-shadow); - border-radius: 14px; - width: 200px; - min-height: 72px; - height: auto; - line-height: normal; - padding: 10px 12px; - - display: flex; - align-items: center; - justify-content: center; -} - -#drawing .window:hover { - box-shadow: var(--topology-node-shadow); -} - -#drawing .window[data-original-title]:hover::after { - content: none !important; - display: none !important; -} - -#drawing .window.topology_root { - background-color: rgba(22, 163, 74, 0.18); -} - -#drawing .window.topology_cs { - background-color: rgba(14, 165, 233, 0.12); -} - -#drawing .window.topology_conn { - background-color: rgba(139, 92, 246, 0.10); -} - -#drawing .window.topology_conn_errored { - background-color: rgba(244, 63, 94, 0.18); -} - -#drawing .window.topology_res { - background-color: rgba(245, 158, 11, 0.14); -} - -#drawing .window p { - font-weight: 700; - letter-spacing: 0.2px; - font-size: 1.25em; - line-height: 1.25; -} diff --git a/client/idm/console/src/main/resources/META-INF/resources/css/topology.scss b/client/idm/console/src/main/resources/META-INF/resources/css/topology.scss new file mode 100644 index 0000000000..52674d114b --- /dev/null +++ b/client/idm/console/src/main/resources/META-INF/resources/css/topology.scss @@ -0,0 +1,349 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +@import 'theme'; +@import 'topology-theme'; +@import 'utils'; + +.content-wrapper.accent-success { + overflow: hidden; +} + +/* + * Topology + */ + +#topology { + position: relative; + border: 0; + height: 780px; + overflow: hidden; + cursor: grab; +} + +#topology.topology-panning { + cursor: grabbing; +} + +#drawing { + height: 5000px; + width: 5000px; + display: block; + position: relative; + top: -2490px; + left: -2270px; +} + +/* + * Topology nodes + * + * IMPORTANT: + * position: absolute is required by jsPlumb. + */ +#drawing .window { + position: absolute; + + opacity: 1; + z-index: 20; + + width: 200px; + min-height: 72px; + height: auto; + + padding: 10px 12px; + + border: 1px solid var(--topology-node-border); + border-radius: 14px; + box-shadow: var(--topology-node-shadow); + + background-color: var(--topology-window-bg); + color: var(--topology-window-color); + + line-height: normal; + text-align: center; + + display: flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + + cursor: pointer; +} + +#drawing .window:hover { + box-shadow: var(--topology-node-shadow-hover); +} + +#drawing .window.topology_root { + background-color: var(--topology-root-bg); +} + +#drawing .window.topology_cs { + background-color: var(--topology-cs-bg); +} + +#drawing .window.topology_conn { + background-color: var(--topology-conn-bg); +} + +#drawing .window.topology_conn_errored { + background-color: var(--topology-conn-errored-bg); +} + +#drawing .window.topology_res { + background-color: var(--topology-res-bg); +} + +#drawing .window p { + margin: 0 !important; + + font-weight: 700; + letter-spacing: 0.2px; + font-size: 1.25em; + line-height: 1.25; +} + +/* + * Disable the old CSS tooltip because the topology + * already provides its own interaction. + */ +#drawing .window[data-original-title]:hover::after { + content: none !important; + display: none !important; +} + +/* + * jsPlumb + */ + +._jsPlumb_dragging { + z-index: 4000; +} + +#drawing ._jsPlumb_overlay.component.label, +.aLabel { + background-color: var(--topology-label-bg); + color: var(--topology-label-color); + border: 1px solid var(--topology-label-border); +} + +#drawing ._jsPlumb_overlay.component.label { + border-radius: 0.5em; + font-size: 0.8em; + opacity: 0.8; + padding: 0.5em; +} + +.aLabel { + padding: 0.4em; + + font: 12px sans-serif; + + z-index: 21; + opacity: 0.8; + filter: alpha(opacity = 80); + + cursor: pointer; + + &._jsPlumb_hover { + background-color: var(--topology-label-hover-bg); + color: var(--topology-label-hover-color); + border: 1px solid var(--topology-label-hover-border); + } +} + +/* + * Zoom toolbar + */ + +#zoom { + display: flex; + justify-content: flex-end; + align-items: center; + gap: 6px; + + ul.menu { + display: flex; + gap: 6px; + + margin: 0; + padding: 0; + + list-style: none; + } + + ul.menu > li { + margin: 0; + padding: 0; + } + + ul.menu > li > a.btn, + .topology-toolbar-btn { + appearance: none; + + border: 1px solid var(--topology-toolbar-border); + border-radius: 999px; + + background: var(--topology-toolbar-bg); + color: var(--topology-toolbar-fg); + + padding: 6px 10px; + + line-height: 1; + + box-shadow: var(--topology-toolbar-shadow); + + transition: transform 120ms ease, + box-shadow 120ms ease, + background 120ms ease, + color 120ms ease; + } + + ul.menu > li > a.btn:hover, + .topology-toolbar-btn:hover { + color: var(--topology-toolbar-fg-hover); + background: var(--topology-toolbar-bg-hover); + + box-shadow: var(--topology-toolbar-shadow-hover); + + transform: translateY(-1px); + + text-decoration: none; + } + + ul.menu > li > a.btn:focus, + .topology-toolbar-btn:focus { + outline: none; + + box-shadow: 0 0 0 3px var(--topology-focus-ring), + var(--topology-toolbar-shadow-hover); + } + + ul.menu > li > a.btn i, + .topology-toolbar-btn i { + font-size: 1.05rem; + padding-right: 0; + } + + ul.menu > li > a { + display: inline-block; + margin-left: 5px; + } +} + +/* + * Node actions + */ + +.node-action-link { + clear: both; + + display: block; + + height: 0; + + padding: 3px 8px 0 0; + + position: absolute; + right: 0; + top: 0; + + .fa { + font-size: 14px; + display: block !important; + } + + .dropdown-menu { + border-radius: 12px; + min-width: 50px; + width: 50px; + } +} + +/* + * Legacy topology tooltip + */ + +.window[data-original-title] { + &:hover::after { + border: 1px solid var(--topology-tooltip-border); + border-radius: 0.5em; + + padding: 5px 10px; + + background: var(--topology-tooltip-bg); + color: var(--topology-tooltip-color); + + content: attr(data-original-title); + + position: relative; + right: -5px; + top: -70px; + + white-space: nowrap; + text-align: center; + + height: 20px; + margin: 0; + } +} + +/* + * Miscellaneous + */ + +.checkbox { + margin-top: 15px; + margin-bottom: 15px; +} + +div.alert-widget > a > .badge { + font-size: 9px; + line-height: 0.9; + + padding: 2px 3px; + + position: absolute; + + text-align: center; + + margin-right: -13px; + top: 0; +} + +.card.card-outline { + margin-top: 20px; + margin-bottom: 0; +} + +.panel-group.box-group { + margin-bottom: 20px; +} + +.scrollable-tab-content { + padding-top: 20px; +} + +.conn-check-wrapper { + position: absolute; + top: 0; + right: 25px; + z-index: 1; +} diff --git a/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/Topology.html b/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/Topology.html index 4210527ae1..17ccca0022 100644 --- a/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/Topology.html +++ b/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/Topology.html @@ -21,8 +21,7 @@ under the License. <script type="text/javascript" src="webjars/jsplumb/${jsplumb.version}/js/jsPlumb-${jsplumb.version}-min.js"></script> <script type="text/javascript" src="webjars/jquery-cookie/${jquery-cookie.version}/jquery.cookie.js"></script> <script type="text/javascript" src="js/idmTopology.js"></script> - <link href="ui-commons/css/topology.css" rel="stylesheet"/> - <link href="css/idmTopology.css" rel="stylesheet"/> + <link href="css/topology.css" rel="stylesheet"/> <style type="text/css"> legend { diff --git a/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/TopologyNodePanel.html b/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/TopologyNodePanel.html index 70d08298fb..46d01f7d1b 100644 --- a/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/TopologyNodePanel.html +++ b/client/idm/console/src/main/resources/org/apache/syncope/client/console/topology/TopologyNodePanel.html @@ -18,6 +18,6 @@ under the License. --> <html xmlns="http://www.w3.org/1999/xhtml"; xmlns:wicket="http://wicket.apache.org";> <wicket:panel> - <p class="text-center text-primary" wicket:id="label"/> + <p class="text-center" wicket:id="label"/> </wicket:panel> </html> diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/_theme.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/_theme.scss new file mode 100644 index 0000000000..91bdebe4c5 --- /dev/null +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/_theme.scss @@ -0,0 +1,434 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +:root { + /* + * -------------------------------------------------------------------------- + * Universal colors + * -------------------------------------------------------------------------- + * + * These values do not change with the application theme. + * Use them when the color itself has a fixed meaning. + */ + + --color-white: #ffffff; + --color-black: #000000; + + --color-text-on-light: #333333; + --color-text-on-dark: #ffffff; + + --color-muted-on-light: #888888; + --color-muted-on-dark: #cccccc; + + /* + * -------------------------------------------------------------------------- + * Primitive palette + * -------------------------------------------------------------------------- + * + * Raw colors shared by semantic variables. + */ + + /* Neutral */ + --app-gray-050: #f7f7f7; + --app-gray-100: #f5f5f5; + --app-gray-150: #eeeeee; + --app-gray-200: #dee2e6; + --app-gray-250: #d2d6de; + --app-gray-300: #cccccc; + --app-gray-400: #949494; + --app-gray-500: #888888; + --app-gray-600: #555555; + --app-gray-700: #444444; + + /* Brand */ + --app-green-500: #28a745; + --app-green-700: #146c43; + + /* Semantic */ + --app-cyan-500: #17a2b8; + --app-blue-500: #0ea5e9; + --app-yellow-500: #ffc107; + --app-red-500: #dc3545; + --app-red-700: #e00000; + + /* Universal Color */ + --app-text-on-light: #333333; + --app-text-on-dark: #ffffff; + + /* + * -------------------------------------------------------------------------- + * Light theme + * -------------------------------------------------------------------------- + */ + + /* + * Backgrounds + */ + --app-bg: #ecf0f5; + --app-surface: var(--color-white); + --app-surface-secondary: var(--app-gray-050); + --app-surface-tertiary: var(--app-gray-100); + + /* + * Text + */ + --app-text: var(--color-text-on-light); + --app-text-secondary: var(--app-gray-500); + --app-text-muted: var(--app-gray-600); + --app-text-inverse: var(--color-text-on-dark); + + --app-text-link: var(--app-green-500); + --app-text-link-hover: var(--app-green-700); + + /* + * Borders + */ + --app-border: var(--app-gray-200); + --app-border-subtle: var(--app-gray-150); + --app-border-strong: var(--app-gray-250); + --app-border-input: var(--app-gray-300); + --app-border-focus: var(--app-green-500); + + /* + * Primary actions + */ + --app-primary: var(--app-green-500); + --app-primary-hover: var(--app-green-700); + --app-primary-contrast: var(--color-white); + + /* + * Semantic states + */ + --app-success: var(--app-cyan-500); + --app-success-contrast: var(--color-white); + + --app-danger: var(--app-red-500); + --app-danger-text: var(--app-red-700); + --app-danger-contrast: var(--color-white); + + --app-warning: var(--app-yellow-500); + --app-warning-contrast: var(--color-white); + + --app-info: var(--app-blue-500); + --app-info-contrast: var(--color-white); + + /* + * Inputs + */ + --app-input-bg: var(--color-white); + --app-input-addon-bg: var(--app-gray-150); + --app-input-border: var(--app-border-input); + --app-input-text: var(--app-text); + --app-input-placeholder: var(--app-text-secondary); + + /* + * Dropdowns / popovers / autocomplete + */ + --app-dropdown-bg: var(--app-surface); + --app-dropdown-text: var(--app-text); + --app-dropdown-border: var(--app-border); + + --app-popover-bg: var(--app-surface); + --app-popover-text: var(--app-text); + --app-popover-border: var(--app-border); + + /* + * Overlays + */ + --app-overlay: rgba(0, 0, 0, 0.30); + --app-overlay-strong: rgba(0, 0, 0, 0.55); + + /* + * Shadows + */ + --app-shadow: rgba(0, 0, 0, 0.25); + --app-shadow-strong: rgba(0, 0, 0, 0.75); + + /* + * Code / preformatted content + */ + --app-code-bg: var(--app-gray-100); + --app-code-text: var(--app-text); + --app-code-border: var(--app-gray-300); + + --app-code-deletion-bg: #ffdddd; + --app-code-deletion-border: #f1c0c0; + + --app-code-addition-bg: #dbffdb; + --app-code-addition-border: #c1e9c1; + + /* + * Notifications + */ + --app-notification-error-bg: rgba(255, 0, 0, 0.70); + --app-notification-error-text: var(--app-danger-text); + + --app-notification-success-bg: rgba(0, 153, 0, 0.70); + --app-notification-success-text: var(--color-white); + + /* + * Accessibility + */ + --app-accessibility-outline: var(--app-gray-400); + + /* + * Special / legacy components + */ + --app-disabled-bg: var(--app-gray-150); + --app-disabled-text: var(--app-text-secondary); + + --app-highlight: var(--app-danger-text); + + --app-selection-bg: var(--app-success); + --app-selection-text: var(--color-white); + + --app-tooltip-bg: var(--color-white); + --app-tooltip-text: var(--color-black); + --app-tooltip-border: var(--color-black); + + /* + * Sidebar / navigation + */ + --app-sidebar-bg: var(--app-surface); + --app-sidebar-text: var(--app-text); + --app-sidebar-link: var(--app-text-link); + --app-sidebar-link-hover: var(--app-text-link-hover); + + --app-navbar-text: var(--color-white); + --app-navbar-hover-bg: rgba(0, 0, 0, 0.15); + + /* + * Tables + */ + --app-table-active-bg: var(--app-success); + --app-table-active-text: var(--color-white); + + /* + * Cards / panels + */ + --app-card-bg: var(--app-surface); + --app-card-border: var(--app-border); + --app-panel-border: var(--app-border-strong); +} + + +/* + * ============================================================================ + * Dark theme + * ============================================================================ + */ + +[data-bs-theme="dark"] { + /* + * -------------------------------------------------------------------------- + * Backgrounds + * -------------------------------------------------------------------------- + */ + + --app-bg: #2b3035; + --app-surface: #41474d; + --app-surface-secondary: #484f56; + --app-surface-tertiary: #343a40; + + /* + * -------------------------------------------------------------------------- + * Text + * -------------------------------------------------------------------------- + */ + + --app-text: #f1f3f5; + --app-text-secondary: #b8c0c7; + --app-text-muted: #d0d5da; + --app-text-inverse: var(--color-black); + + --app-text-link: #45c76b; + --app-text-link-hover: #70d98b; + + /* + * -------------------------------------------------------------------------- + * Borders + * -------------------------------------------------------------------------- + */ + + --app-border: #68727b; + --app-border-subtle: #59636c; + --app-border-strong: #68727b; + --app-border-input: #68727b; + --app-border-focus: #45c76b; + + /* + * -------------------------------------------------------------------------- + * Primary actions + * -------------------------------------------------------------------------- + */ + + --app-primary: #45c76b; + --app-primary-hover: #70d98b; + --app-primary-contrast: var(--color-white); + + /* + * -------------------------------------------------------------------------- + * Semantic states + * -------------------------------------------------------------------------- + */ + + --app-success: #29b8d3; + --app-success-contrast: var(--color-white); + + --app-danger: #ed5864; + --app-danger-text: #ff858d; + --app-danger-contrast: var(--color-white); + + --app-warning: #ffc94d; + --app-warning-contrast: var(--color-black); + + --app-info: #50beef; + --app-info-contrast: var(--color-white); + + /* + * -------------------------------------------------------------------------- + * Inputs + * -------------------------------------------------------------------------- + */ + + --app-input-bg: #343a40; + --app-input-addon-bg: #4a5158; + --app-input-border: var(--app-border); + --app-input-text: var(--app-text); + --app-input-placeholder: var(--app-text-secondary); + + /* + * -------------------------------------------------------------------------- + * Dropdowns / popovers / autocomplete + * -------------------------------------------------------------------------- + */ + + --app-dropdown-bg: var(--app-surface); + --app-dropdown-text: var(--app-text); + --app-dropdown-border: var(--app-border); + + --app-popover-bg: var(--app-surface); + --app-popover-text: var(--app-text); + --app-popover-border: var(--app-border); + + /* + * -------------------------------------------------------------------------- + * Overlays + * -------------------------------------------------------------------------- + */ + + --app-overlay: rgba(0, 0, 0, 0.55); + --app-overlay-strong: rgba(0, 0, 0, 0.70); + + /* + * -------------------------------------------------------------------------- + * Shadows + * -------------------------------------------------------------------------- + */ + + --app-shadow: rgba(0, 0, 0, 0.45); + --app-shadow-strong: rgba(0, 0, 0, 0.80); + + /* + * -------------------------------------------------------------------------- + * Code / preformatted content + * -------------------------------------------------------------------------- + */ + + --app-code-bg: #343a40; + --app-code-text: var(--app-text); + --app-code-border: var(--app-border); + + --app-code-deletion-bg: rgba(220, 53, 69, 0.25); + --app-code-deletion-border: rgba(220, 53, 69, 0.55); + + --app-code-addition-bg: rgba(40, 167, 69, 0.25); + --app-code-addition-border: rgba(40, 167, 69, 0.55); + + /* + * -------------------------------------------------------------------------- + * Notifications + * -------------------------------------------------------------------------- + */ + + --app-notification-error-bg: rgba(255, 0, 0, 0.70); + --app-notification-error-text: var(--app-danger-text); + + --app-notification-success-bg: rgba(0, 153, 0, 0.70); + --app-notification-success-text: var(--color-white); + + /* + * -------------------------------------------------------------------------- + * Accessibility + * -------------------------------------------------------------------------- + */ + + --app-accessibility-outline: #949494; + + /* + * -------------------------------------------------------------------------- + * Special / legacy components + * -------------------------------------------------------------------------- + */ + + --app-disabled-bg: #41474d; + --app-disabled-text: var(--app-text-secondary); + + --app-highlight: var(--app-danger-text); + + --app-selection-bg: var(--app-success); + --app-selection-text: var(--color-white); + + --app-tooltip-bg: var(--app-surface); + --app-tooltip-text: var(--color-white); + --app-tooltip-border: var(--app-border); + + /* + * -------------------------------------------------------------------------- + * Sidebar / navigation + * -------------------------------------------------------------------------- + */ + + --app-sidebar-bg: var(--app-surface); + --app-sidebar-text: var(--app-text); + --app-sidebar-link: var(--app-text-link); + --app-sidebar-link-hover: var(--app-text-link-hover); + + --app-navbar-text: var(--color-white); + --app-navbar-hover-bg: rgba(0, 0, 0, 0.25); + + /* + * -------------------------------------------------------------------------- + * Tables + * -------------------------------------------------------------------------- + */ + + --app-table-active-bg: var(--app-success); + --app-table-active-text: var(--color-white); + + /* + * -------------------------------------------------------------------------- + * Cards / panels + * -------------------------------------------------------------------------- + */ + + --app-card-bg: var(--app-surface); + --app-card-border: var(--app-border); + --app-panel-border: var(--app-border); +} diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/utils.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/_utils.scss similarity index 100% rename from client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/utils.scss rename to client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/_utils.scss diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss index b9fc0c5678..8ce6a9a26d 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/accessibility.scss @@ -17,25 +17,26 @@ * under the License. */ +@import 'theme'; @import 'utils'; -$menu_outline_color: #949494; - .btn-accessibility { position: absolute; right: 0; font-size: 12px; padding: 15px 15px 0 0; + i { font-size: 30px; } + &:hover { cursor: pointer; } } .control-sidebar-menu a:focus { - outline: 1px $menu_outline_color solid; + outline: 1px var(--app-accessibility-outline) solid; } #change_contrast { @@ -56,4 +57,4 @@ $menu_outline_color: #949494; bottom: 12px; top: auto; } -} \ No newline at end of file +} diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/batch.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/batch.scss index 17823cbe99..9d7a0a7362 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/batch.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/batch.scss @@ -16,9 +16,13 @@ * specific language governing permissions and limitations * under the License. */ + +@import 'theme'; + .batch { display: inline-table; } + .batchCell { display: table-cell; vertical-align: middle; @@ -36,13 +40,13 @@ div#selectedObjects { table { border-collapse: collapse; td, th { - border: 1px solid #eee; - padding: .5em 10px; + border: 1px solid var(--app-border-subtle); + padding: 0.5em 10px; } } .circular-actions { padding: 3px; - margin: 10px 0px 5px 0px; + margin: 10px 0 5px 0; } } diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/login.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/login.scss index c794bceda1..1a96594074 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/login.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/login.scss @@ -17,32 +17,35 @@ * under the License. */ +@import 'theme'; @import 'utils'; body, html { height: 100% !important; + background-color: var(--app-bg); background-repeat: no-repeat; font-family: "Source Sans Pro",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'!important; } .card-container.card { width: 350px; - padding: 40px 40px; + padding: 40px; } /* * Card component */ .card { - background-color: #F7F7F7; + background-color: var(--app-card-bg); /* just in case there no content*/ + color: var(--app-text); padding: 20px 25px 30px; margin: 0 auto 25px; margin-top: 50px; /* shadows and rounded borders */ @include border_radius(2px); - @include shadow(0px 2px 2px rgba(0, 0, 0, 0.3)); + @include shadow(0 2px 2px var(--app-shadow)); } .login-logo { @@ -84,17 +87,8 @@ body, html { cursor: default; @include user_select(none); - &.btn-signin { - padding: 0px; - font-weight: 700; - font-size: 14px; - height: 36px; - @include border_radius(3px); - border: none; - @include transition(all, 0.218s, ease); - } - &.btn-sso { - padding: 0px; + &.btn-signin, &.btn-sso { + padding: 0; font-weight: 700; font-size: 14px; height: 36px; diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/search.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/search.scss index 961eb3415b..64f1068701 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/search.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/search.scss @@ -16,9 +16,12 @@ * specific language governing permissions and limitations * under the License. */ + +@import 'theme'; + .searchBox .col-xs-12 { - padding-left: 0px !important; - padding-right: 0px !important; + padding-left: 0 !important; + padding-right: 0 !important; } .clause { @@ -28,17 +31,17 @@ .operator { width: 65px !important; .checkbox { - margin: 0px !important; + margin: 0 !important; } } .field { line-height: 30px; float: left; - padding: 0 3px 0px 0px; + padding: 0 3px 0 0; display: inline-block !important; .toggle{ &.btn { - min-width: 59px + min-width: 59px; } } } @@ -75,13 +78,13 @@ } .action { float: left; - padding: 0px 7px 0px; + padding: 0 7px; } } .searchBox { .input-group-addon:last-child { - border: 1px solid #ccc !important; + border: 1px solid var(--app-input-border) !important; } .input-group { margin-top: 1px; @@ -89,19 +92,19 @@ } .custom-autocomplete-box li.selected { - background-color: #eee; + background-color: var(--app-surface-secondary); } .search-spinner { line-height: 23px !important; } -.search-spinner span{ +.search-spinner span { width: 70% !important; } .placeholder { min-width: 60px; - background: white !important; + background-color: var(--app-input-bg) !important; cursor: auto !important; } diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss index ee108e97a1..6ccb80110f 100644 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss +++ b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/syncopeUI.scss @@ -17,8 +17,13 @@ * under the License. */ +@import 'theme'; @import 'utils'; +[data-bs-theme=dark] .sidebar-wrapper { + background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important; +} + pre { @include white_space_pre_wrap; } @@ -29,7 +34,7 @@ body { #veil { display: none; - color: #28a745 !important; + color: var(--app-primary) !important; position: fixed; z-index: 99999; height: 2em; @@ -47,7 +52,7 @@ body { left: 0; width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.3); + background-color: var(--app-overlay); } /* :not(:required) hides these rules from IE9 and below */ @@ -61,14 +66,16 @@ body { border-radius: 0.5em; @include animation(spinner 2000ms infinite linear); - @include shadow(rgba(0, 0, 0, 0.75) 1.5em 0 0 0, - rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, - rgba(0, 0, 0, 0.75) 0 1.5em 0 0, - rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, - rgba(0, 0, 0, 0.5) -1.5em 0 0 0, - rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, - rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, - rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0); + @include shadow( + var(--app-shadow-strong) 1.5em 0 0 0, + var(--app-shadow-strong) 1.1em 1.1em 0 0, + var(--app-shadow-strong) 0 1.5em 0 0, + var(--app-shadow-strong) -1.1em 1.1em 0 0, + var(--app-shadow) -1.5em 0 0 0, + var(--app-shadow) -1.1em -1.1em 0 0, + var(--app-shadow-strong) 0 -1.5em 0 0, + var(--app-shadow-strong) 1.1em -1.1em 0 0 + ); } } } @@ -76,12 +83,12 @@ body { /* General ============================================================================= */ -.sidebar-brand{ +.sidebar-brand { border: none !important; - padding: 5px!important; + padding: 5px !important; } -.brand-image{ +.brand-image { max-height: 50px !important; } @@ -100,13 +107,13 @@ body { } .content-margin-layout { - margin: 0px 230px 0px 0px !important; + margin: 0 230px 0 0 !important; padding: 20px !important; } .admin-content-page { padding: 20px; - background: #ecf0f5; + background: var(--app-bg); } .realms { @@ -149,7 +156,7 @@ body { .block-footer { position: fixed !important; width: 100% !important; - bottom: 0px !important; + bottom: 0 !important; } .logo-pos { @@ -180,7 +187,7 @@ body { } .wicket-modal div.w_content_3 { - border: 1px solid #eee; + border: 1px solid var(--app-border-subtle); border-radius: 20px; padding: 5px; } @@ -191,7 +198,7 @@ body { position: relative; overflow-x: hidden; overflow-y: auto; - padding: 20px 20px 5px 20px; + padding: 20px 20px 5px; } .modal-body .tab-content .information { @@ -217,10 +224,9 @@ a.help { span { position: absolute; width: 19em; - color: #000000; - background: whitesmoke; - visibility: hidden; - border-radius: 0px; + color: var(--app-tooltip-text); + background: var(--app-tooltip-bg); + border-radius: 0; padding: 3px; &:after { position: absolute; @@ -236,36 +242,38 @@ a.help { top: 50%; margin-right: 4px; margin-top: -11px; - border: 1px solid black; + border: 1px solid var(--app-tooltip-border); z-index: 1000000; a { - color: #463; + color: var(--app-text-link); text-decoration: none; } } } a { - color: #28a745; + color: var(--app-text-link); text-decoration: none; } .nav-link { - color: #28a745; + color: var(--app-text-link); + &:hover, &:active, &:focus { - color: #146c43; + color: var(--app-text-link-hover); } } -.breadcrumb-item>a { - color: #28a745; +.breadcrumb-item > a { + color: var(--app-text-link); + &:hover, &:active, &:focus { - color: #146c43!important; + color: var(--app-text-link-hover) !important; } } a:hover, .nav-link:hover { - color: #146c43; + color: var(--app-text-link-hover); } .modal-open { @@ -281,7 +289,7 @@ a:hover, .nav-link:hover { } .modal { - background: rgba(0, 0, 0, 0) none repeat scroll 0 0; + background: transparent; z-index: 7000 !important; } @@ -296,7 +304,7 @@ a:hover, .nav-link:hover { height: 380px; overflow-y: auto; overflow-x: hidden; - padding: 50px 20px 50px 20px; + padding: 50px 20px; } .wizard-view .wizard-form { @@ -321,7 +329,7 @@ a:hover, .nav-link:hover { height: 95%; position: relative; } - padding: 0px 5px; + padding: 0 5px; } .wizard-form { @@ -332,7 +340,7 @@ a:hover, .nav-link:hover { height: 440px; overflow-y: auto; overflow-x: hidden; - padding: 0px; + padding: 0; } } @@ -344,7 +352,7 @@ a:hover, .nav-link:hover { } .wizard-buttons { - padding: 10px 0px 5px 0px; + padding: 10px 0 5px; position: absolute; bottom: 4px; width: 100%; @@ -379,18 +387,18 @@ a:hover, .nav-link:hover { } .navbar-light .navbar-nav .nav-link { - color: #ffffff; + color: var(--app-navbar-text); } .navbar-light .navbar-nav .nav-link:hover { - color: #ffffff; - background-color: #00000026; + color: var(--app-navbar-text); + background-color: var(--app-navbar-hover-bg); } span.overridable div.checkbox { float: right; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; label div div.toggle-group label { padding-left: 7px; } @@ -415,9 +423,9 @@ section#notifications .modal-lg { } .details-footer { - margin: 30px 0px 0px 0px; - border: 1px solid #EEE; - color: #888; + margin: 30px 0 0; + border: 1px solid var(--app-border-subtle); + color: var(--app-text-secondary); } th.checkGroupColumn { @@ -431,11 +439,12 @@ td.checkGroupColumn { } .badge-success { - background-color: #17a2b8; + background-color: var(--app-success); } -.text-bg-warning, .text-bg-warning>a { - color: #fff!important; +.text-bg-warning, +.text-bg-warning > a { + color: var(--app-warning-contrast) !important; } .pwstrengthProgress { @@ -448,17 +457,17 @@ td.checkGroupColumn { ============================================================================= */ .information { - margin: 30px 0px 0px 0px; - border: 1px solid #EEE; + margin: 30px 0 0; + border: 1px solid var(--app-border-subtle); font-size: 10px; - color: #888; + color: var(--app-text-secondary); display: inline-table; width: 100%; clear: both; float: none; position: absolute; bottom: -90px; - left: 0px; + left: 0; padding: 2px; } .infolabel { @@ -466,7 +475,7 @@ td.checkGroupColumn { float: left; width: 150px; font-weight: bold; - color: #888; + color: var(--app-text-secondary); } .infoleft { float: left; @@ -508,7 +517,7 @@ td.checkGroupColumn { display: none !important; } .box { - border-top: 0px !important; + border-top: 0 !important; } } @@ -519,13 +528,12 @@ td.checkGroupColumn { } .wicket-aa-container { - border-color: #eee; - box-shadow: none; + border-color: var(--app-border-subtle); background-clip: padding-box; - background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.15); + background-color: var(--app-dropdown-bg); + border: 1px solid var(--app-dropdown-border); border-radius: 4px; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); + box-shadow: 0 6px 12px var(--app-shadow); float: left; font-size: 14px; min-width: 160px; @@ -542,8 +550,8 @@ td.checkGroupColumn { ============================================================================= */ #startAt { - background-color: rgba(98, 98, 98, 0.98) !important; - color: #CCC; + background-color: var(--app-surface-secondary) !important; + color: var(--app-text) !important; right: 5px !important; top: 100px !important; min-width: 450px; @@ -556,9 +564,9 @@ td.checkGroupColumn { #startAtContainer { padding: 15px; input { - background-color: rgba(200, 200, 200, 0.6) !important; + background-color: var(--app-input-bg) !important; } - .input-group{ + .input-group { justify-content: space-between; } } @@ -572,8 +580,18 @@ td.checkGroupColumn { } .k-notification-error.k-group { - background: rgba(100%, 0%, 0%, 0.7); - color: red; + background: var(--app-notification-error-bg); + color: var(--app-notification-error-text); +} + +.k-notification { + padding: 0 !important; + border: none !important; + margin-top: 5px; +} + +.alert { + width: 100%; } .errorNotification { @@ -589,14 +607,14 @@ td.checkGroupColumn { } #message { float: right; - padding-left: 0px; + padding-left: 0; width: 85%; } } .k-notification-success.k-group { - background: rgba(0%, 60%, 0%, 0.7); - color: #fff; + background: var(--app-notification-success-bg); + color: var(--app-notification-success-text); } .successNotification { @@ -612,7 +630,7 @@ td.checkGroupColumn { } #message { float: right; - padding-left: 0px; + padding-left: 0; width: 85%; } } @@ -621,16 +639,16 @@ td.checkGroupColumn { ============================================================================= */ .actions > li > a { - padding: 5px 0px 5px 0px !important; + padding: 5px 0 !important; } div.listview-actions a { float: left; - padding: 5px 0px 5px 0px !important; + padding: 5px 0 !important; } .action a.btn { - padding: 0px; + padding: 0; } .btn-circle { @@ -641,7 +659,7 @@ div.listview-actions a { padding: 6px 0; text-align: center; width: 30px; - color: white !important; + color: var(--app-primary-contrast) !important; } .circular-actions a { @@ -653,30 +671,30 @@ div.listview-actions a { text-align: center; width: 30px; &.btn { - background-color: #28a745; - border-color: #28a745; - color: white !important; + background-color: var(--app-primary); + border-color: var(--app-primary); + color: var(--app-primary-contrast) !important; } } .btn-circle i, .circular-actions a i { - margin: 0px; + margin: 0; } .multipanel-btn-minus { - padding: 0px 0px 0px 6px; + padding: 0 0 0 6px; border: 0 none !important; } .multipanel-btn-plus { - padding: 15px 0px 8px 6px; + padding: 15px 0 8px 6px; border: 0 none !important; } .multipanel-box { padding: 5px; display: inline-table; - margin: 0px; + margin: 0; } /* Datatable @@ -686,16 +704,17 @@ div.listview-actions a { clear: both; } -.table.dataTable tbody tr.active td, .table.dataTable tbody tr.active th { - background-color: #17a2b8; - color: white; +.table.dataTable tbody tr.active td, +.table.dataTable tbody tr.active th { + background-color: var(--app-table-active-bg); + color: var(--app-table-active-text); } /* Result page ============================================================================= */ .attribute { - padding: 0px 4px 0px 4px; + padding: 0 4px; } @@ -712,7 +731,7 @@ div.listview-actions a { .left.page-header, .right.page-heade { padding-bottom: 9px; - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid var(--app-border); width: 50%; } @@ -720,35 +739,35 @@ div.listview-actions a { float: left; } -.right.page-header{ +.right.page-header { float: right; } .page-header { padding-bottom: 9px; - border-bottom: 1px solid #dee2e6; + border-bottom: 1px solid var(--app-border); } .page-link { - color: #28a745; + color: var(--app-text-link); &:hover, &:active, &:focus { - color: #28a745!important; + color: var(--app-text-link-hover) !important; } } -.active>.page-link,.page-link.active { - background-color: #28a745; - border-color: #28a745; - color: #fff; +.active > .page-link, .page-link.active { + background-color: var(--app-primary); + border-color: var(--app-primary); + color: var(--app-primary-contrast); &:hover, &:active, &:focus { - background-color: #28a745; - border-color: #28a745; - color: #fff; + background-color: var(--app-primary); + border-color: var(--app-primary); + color: var(--app-primary-contrast); } } span.highlight .attribute label { - color: red; + color: var(--app-highlight); } .navbar-nav > .user-menu > .dropdown-menu > li.user-header { @@ -758,38 +777,38 @@ span.highlight .attribute label { } .nav-tabs-custom > .nav-tabs > li.active { - border-top-color: #d2d6de !important; + border-top-color: var(--app-border-strong) !important; } .code-deletion { - background-color: #ffdddd; - border-color: #f1c0c0; + background-color: var(--app-code-deletion-bg); + border-color: var(--app-code-deletion-border); } .code-addition { - background-color: #dbffdb; - border-color: #c1e9c1; + background-color: var(--app-code-addition-bg); + border-color: var(--app-code-addition-border); } span.ui-spinner.ui-corner-all.ui-widget.ui-widget-content { - width:20%; + width: 20%; display: block; } -form.bs-example.bs-example-form span.ui-spinner.ui-corner-all.ui-widget.ui-widget-content{ - width:40%; +form.bs-example.bs-example-form span.ui-spinner.ui-corner-all.ui-widget.ui-widget-content { + width: 40%; } -div.panel-collapse.collapse.show span.ui-spinner.ui-corner-all.ui-widget.ui-widget-content{ +div.panel-collapse.collapse.show span.ui-spinner.ui-corner-all.ui-widget.ui-widget-content { width: 20%; } .ui-spinner-input:focus { - outline:0; + outline: 0; } -.ui-spinner-input{ - width:20%; +.ui-spinner-input { + width: 20%; } /* AjaxDateTimePicker @@ -804,10 +823,10 @@ div.panel-collapse.collapse.show span.ui-spinner.ui-corner-all.ui-widget.ui-widg } .k-datepicker input { - width: 0px !important; + width: 0 !important; } .k-timepicker input { - width: 0px !important; + width: 0 !important; } /* Parameters Details @@ -831,7 +850,7 @@ li.todoitem a { } .popover-content { - color: black; + color: var(--app-popover-text); } .form-palette { @@ -840,11 +859,7 @@ li.todoitem a { margin-left: 10px; } -i.fas.fa-backward { - font-size: 80%; -} - -i.fas.fa-forward{ +i.fas.fa-backward, i.fas.fa-forward { font-size: 80%; } @@ -860,7 +875,7 @@ div#userFilter { } #warning { margin: 1px 0 5px 8px; - color: #e00000; + color: var(--app-danger-text); font-size: 9px; } #check { @@ -885,7 +900,7 @@ div#userFilter { position: absolute; margin-left: 10px; text-align: center; - top: 0px; + top: 0; } i { position: absolute; @@ -900,17 +915,17 @@ div#userFilter { padding-right: 20px; .dropdown-menu > li { &.header { - background-color: #ffffff; - border-bottom: 1px solid #f4f4f4; + background-color: var(--app-dropdown-bg); + border-bottom: 1px solid var(--app-border-subtle); border-radius: 4px 4px 0 0; - color: #444444; + color: var(--app-dropdown-text); font-size: 14px; padding: 7px 10px; } &.footer > a { - background-color: #fff; + background-color: var(--app-dropdown-bg); border-radius: 0 0 4px 4px; - color: #444 !important; + color: var(--app-dropdown-text) !important; font-size: 12px; padding: 7px 10px; text-align: center; @@ -926,13 +941,13 @@ div#userFilter { ============================================================================= */ .transformersTogglePanel { - background-color: rgba(140, 140, 140, 0.99) !important; + background-color: var(--app-surface-secondary) !important; width: 1000px !important; } .transformersContainer { padding: 15px; input { - background-color: rgba(200, 200, 200, 0.6) !important; + background-color: var(--app-input-bg) !important; } #footer { clear: both; @@ -947,11 +962,11 @@ div#userFilter { } .itemTransformersContainer #body { select { - border: 1px solid #ccc !important; - background: rgba(240, 240, 240, 0.95) !important; + border: 1px solid var(--app-input-border) !important; + background: var(--app-input-bg) !important; } a { - color: #ccc !important; + color: var(--app-text-secondary) !important; cursor: pointer !important; } } @@ -960,12 +975,12 @@ div#userFilter { } /* FIREFOX FIX OF UGLY SELECT BOXES */ -@supports (-moz-appearance:none) { +@supports (-moz-appearance: none) { select { -webkit-appearance: none; -moz-appearance: none; appearance: none; - background: url(../img/dropdown.svg) right / 10px no-repeat #fff; + background: url(../img/dropdown.svg) right / 10px no-repeat var(--app-input-bg); background-position: calc(100% - 5px) center; padding-right: 10px; } @@ -995,7 +1010,7 @@ div#userFilter { .selectedEvents { display: inline-block; - margin: 10px 10px 0 10px; + margin: 10px; overflow-y: auto; } @@ -1043,7 +1058,7 @@ fieldset.input-group { .modal-content > div { &.modal-header, &.modal-footer { - background-color: #f0f0f0; + background: var(--app-bg); height: 64px; } } @@ -1058,24 +1073,23 @@ fieldset.input-group { } .background-footer { - background-color: #f0f0f0; display: block; height: 64px; margin-bottom: -15px; margin-left: -30px; margin-top: -25px; - width: 1300px; + width: 1215px; + border-radius: 0 0 8px 8px; + background: var(--app-bg); } .logviewer-btn { - padding: 0px 16px 20px 0px; + padding: 0 16px 20px 0; float: right; } -#editUserChangePassword { - > label { - color: #e00000; - } +#editUserChangePassword > label { + color: var(--app-danger-text); } div > li { list-style-type: none; @@ -1098,21 +1112,14 @@ th ul.menu { float: right; } -th ul.menu li { - display: inline-block; -} - +th ul.menu li, #inline-actions ul.menu li, #tablehandling ul.menu li, .listview-actions ul.menu li { display: inline-block; } -th ul.menu li a { - margin-left: 5px; - display: inline-block !important; -} - +th ul.menu li a, #inline-actions ul.menu li a, .listview-actions ul.menu li a, #tablehandling ul.menu li a { @@ -1136,13 +1143,13 @@ ul.menu { } .toggle-menu ul.menu li a { - padding: 0px; + padding: 0; text-align: left; - color: white !important; + color: var(--app-dark-text) !important; } div#tablehandling ul.menu li a { - padding: 0px !important; + padding: 0 !important; } .realm-choice #realm-choice-field { @@ -1151,7 +1158,7 @@ div#tablehandling ul.menu li a { } .realm-choice #realm-choice-folder { - color: #28a745; + color: var(--app-text-link); } .palette-scrollbar { @@ -1159,7 +1166,7 @@ div#tablehandling ul.menu li a { overflow: scroll; } -@-moz-document url-prefix(''){ +@-moz-document url-prefix('') { .palette-scrollbar { width: auto !important; } @@ -1171,16 +1178,16 @@ h3.card-title { } .card-title { - font-weight: bold!important; + font-weight: bold !important; } /* Form wrappers ============================================================================= */ .custom_content_wrapper { - background-color: #ffffff; + background-color: var(--app-surface); border-radius: 10px; - @include shadow(0px 0px 20px 1px rgba(0,0,0,0.75)); + @include shadow(0 0 20px 1px var(--app-shadow-strong)); } /* Utility classes @@ -1197,7 +1204,7 @@ h3.card-title { } label.btn.btn-warning.btn-xs.active.toggle-off { - color: white; + color: var(--app-warning-contrast); } div#ownership { @@ -1209,10 +1216,10 @@ pre { padding: 9.5px; margin: 0 0 10px; line-height: 1.42857143; - color: #333; + color: var(--app-code-text); word-break: break-all; - background-color: #f5f5f5; - border: 1px solid #ccc; + background-color: var(--app-code-bg); + border: 1px solid var(--app-code-border); border-radius: 4px; } @@ -1220,28 +1227,28 @@ pre { padding: 6px 12px; font-size: 16px; font-weight: 400; - color: #555; + color: var(--app-input-text); text-align: center; - background-color: #eee; - border: 1px solid #ccc; - border-radius: 4px!important; + background-color: var(--app-input-addon-bg); + border: 1px solid var(--app-input-border); + border-radius: 4px !important; } .input-group .input-group-addon { height: 38px; - border-color: #d2d6de; - background-color: #fff; + border-color: var(--app-input-border); + background-color: var(--app-input-bg); } .multipanel-box { padding: 5px; display: inline-table; - margin: 0px; + margin: 0; position: relative; border-radius: 3px; - background: #ffffff; - border-top: 3px solid #d2d6de; + background: var(--app-card-bg); + border-top: 3px solid var(--app-panel-border); width: 94%; - box-shadow: 0 1px 1px #d2d6de; + box-shadow: 0 1px 1px var(--app-shadow); } .multipanel-btn-minus.input-group-addon { @@ -1249,10 +1256,10 @@ pre { } .multipanel-btn-plus.input-group-addon { - background: white; + background: var(--app-surface); border: none; float: right; - margin-right:12px; + margin-right: 12px; } select.form-select { @@ -1265,7 +1272,10 @@ select.form-select { height: 2.35rem; } -.form-select-lg +.k-input-inner { + background: var(--app-bg); + color: var(--app-text) +} .text-right { text-align: right; @@ -1275,40 +1285,39 @@ select[name=rowsChooser] { padding: 0.375rem 0.25rem 0.375rem 0.45rem; } -.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { - color: #28a745; +.nav-tabs .nav-item.show .nav-link, +.nav-tabs .nav-link.active { + color: var(--app-text-link); } .nav-link > a { - color: #343a40; + color: var(--app-text); } .bg-green { - background-color: #28a745; + background-color: var(--app-primary); } .bg-red { - background-color: #dc3545!important; + background-color: var(--app-danger) !important; } .text-white { - color: white; + color: var(--app-text-inverse); } .elevation-4 { - box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)!important; + box-shadow: + 0 14px 28px var(--app-shadow), + 0 10px 10px var(--app-shadow) !important; } .bg-body-secondary { - background-color: #ffffff!important; -} - -.btn-close{ - background: transparent; + background-color: var(--app-surface) !important; } @media screen and (max-width: 500px) { - .realm-choice #realm-choice-field{ + .realm-choice #realm-choice-field { width: 100%; } .realm-choice { diff --git a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/topology.scss b/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/topology.scss deleted file mode 100644 index f435ed17bc..0000000000 --- a/client/idrepo/common-ui/src/main/resources/META-INF/resources/ui-commons/css/topology.scss +++ /dev/null @@ -1,239 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -@import 'utils'; - -.content-wrapper.accent-success{ - overflow: hidden; -} - -.window { - border: 1px solid #346789; - @include shadow(2px 2px 19px #aaa); - - -moz-border-radius: 0.5em; - border-radius: 0.5em; - opacity: 0.8; - filter: alpha(opacity = 80); - width: 140px; - height: 55px; - line-height: 5em; - text-align: center; - z-index: 20; - position: absolute; - background-color: #eeeeef; - color: black; - font-family: helvetica; - padding: 0.0em; - font-size: 0.9em; - vertical-align: middle; - cursor: pointer; -} - -.active-window { - @include shadow(2px 2px 8px rgb(0, 166, 90)); -} - -.inactive-window { - @include shadow(2px 2px 19px #aaa); -} - -.window p { - margin: 0px !important; - line-height: 1.5em; - font-size: 1.5em; - display: inline-table; -} - -.topology_root { - background-color: rgba(0, 170, 0, 0.4); -} - -.topology_cs { - background-color: rgba(0, 100, 0, 0.1); -} - -.topology_conn { - background-color: rgba(100, 200, 200, 0.08); -} - -.topology_conn_errored { - background-color:rgba(217,83,79,0.56); -} - -.topology_res { - background-color: rgba(250, 230, 0, 0.09); -} - -.window:hover { - @include shadow(2px 2px 19px #444); - - opacity: 0.6; - filter: alpha(opacity = 60); -} - -._jsPlumb_dragging { - z-index: 4000; -} - -#drawing ._jsPlumb_overlay.component.label { - background-color: white; - border: 1px solid #346789; - border-radius: 0.5em 0.5em 0.5em 0.5em; - color: black; - font-size: 0.8em; - opacity: 0.8; - padding: 0.5em; -} - -.aLabel { - background-color: white; - padding: 0.4em; - font: 12px sans-serif; - color: #444; - z-index: 21; - border: 1px dotted gray; - opacity: 0.8; - filter: alpha(opacity = 80); - cursor: pointer; - &._jsPlumb_hover { - background-color: #5C96BC; - color: white; - border: 1px solid white; - } -} - -.checkbox { - margin-top: 15px; - margin-bottom: 15px; -} - -#topology { - position: relative; - border: 0px; - height: 780px; - overflow: hidden; -} - -#drawing { - height: 5000px; - width: 5000px; - display: block; - position: relative; - top: -2490px; - left: -2270px; -} - -#zoom { - text-align: right; - width: 100%; - border: none; - background: none; - padding-top: 5px; - .btn { - padding: 0px; - } - .fa { - font-size: 2em; - padding-right: 5px; - } -} - -.node-action-link { - clear: both; - display: block; - height: 0px; - padding: 3px 8px 0px 0px; - position: absolute; - right: 0; - top: 0; - .fa { - font-size: 14px; - display: block !important; - } - .dropdown-menu { - border-radius: 12px; - min-width: 50px; - width: 50px; - } -} - -.window[data-original-title] { - &:hover::after { - border: 1px solid #BBB; - padding: 5px 10px; - background: #EEE; - content: attr(data-original-title); - position: relative; - right: -5px; - top: -70px; - white-space: nowrap; - text-align: center; - height: 20px; - margin: 0px; - border-radius: 0.5em; - } -} - -#zoom { - ul { - &.menu { - list-style-type: none; - margin: 0; - padding: 0; - li { - display: inline-block; - a { - display: inline-block; - margin-left: 5px; - } - } - } - } -} - -div.alert-widget > a > .badge { - font-size: 9px; - line-height: 0.9; - padding: 2px 3px; - position: absolute; - text-align: center; - margin-right:-13px; - top: 0px; -} - -.card.card-outline { - margin-top: 20px; - margin-bottom: 0px; -} - -.panel-group.box-group { - margin-bottom: 20px; -} - -.scrollable-tab-content{ - padding-top:20px; -} - -.conn-check-wrapper { - position: absolute; - top: 0; - right: 25px; - z-index: 1; -} diff --git a/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/markup/html/form/MultiFieldPanel.html b/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/markup/html/form/MultiFieldPanel.html index c6644e5d35..e114ee2303 100644 --- a/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/markup/html/form/MultiFieldPanel.html +++ b/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/markup/html/form/MultiFieldPanel.html @@ -31,7 +31,7 @@ under the License. <wicket:fragment wicket:id="noDataFragment"> <div class="input-group"> - <div class="form-control" style="background-color:#EEE"> + <div class="form-control"> <label wicket:id="field-label">[LABEL]</label> </div> <span wicket:id="panelPlus">[plus]</span> diff --git a/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/panels/NotificationPanel.html b/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/panels/NotificationPanel.html index 872de6e51f..3d6a13cd13 100644 --- a/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/panels/NotificationPanel.html +++ b/client/idrepo/common-ui/src/main/resources/org/apache/syncope/client/ui/commons/panels/NotificationPanel.html @@ -35,7 +35,7 @@ under the License. <script id="errorTemplate" type="text/x-kendo-template"> <div class="alert bg-danger alert-dismissible" style="margin-bottom: 0px; min-width: 370px"> - <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button">×</button> + <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button"></button> <h4><i class="icon fa fa-ban"></i> <wicket:message key="error"/>!</h4> #= message # </div> @@ -43,15 +43,15 @@ under the License. <script id="warningTemplate" type="text/x-kendo-template"> <div class="alert alert-warning alert-dismissible" style="margin-bottom: 0px; min-width: 370px"> - <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button">×</button> + <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button"></button> <h4><i class="icon fa fa-exclamation-triangle"></i> <wicket:message key="warning"/>!</h4> - #= message # + #= message # </div> </script> <script id="successTemplate" type="text/x-kendo-template"> <div class="alert alert-success alert-dismissible" style="margin-bottom: 0px; min-width: 370px"> - <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button">×</button> + <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button"></button> <h4><i class="icon fa fa-check"></i> <wicket:message key="success"/>!</h4> #= message # </div> @@ -59,7 +59,7 @@ under the License. <script id="infoTemplate" type="text/x-kendo-template"> <div class="alert alert-info alert-dismissible" style="margin-bottom: 0px; min-width: 370px"> - <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button">×</button> + <button aria-hidden="true" data-bs-dismiss="alert" class="close btn-close" type="button"></button> <h4><i class="icon fa fa-info-circle"></i> <wicket:message key="information"/></h4> #= message # </div> diff --git a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/panels/TogglePanel.html b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/panels/TogglePanel.html index 8b9e452517..045e483949 100644 --- a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/panels/TogglePanel.html +++ b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/panels/TogglePanel.html @@ -121,7 +121,7 @@ under the License. </div> <div class="close btn-close card-tools"> - <a wicket:id="close" href="#"><i class="fas fa-times"></i></a> + <a wicket:id="close" href="#"><i class="fas fa-times invisible"></i></a> </div> </div> <wicket:child/> diff --git a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/form/MultiPanel.html b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/form/MultiPanel.html index 2604c8c9f1..6cf93097ad 100644 --- a/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/form/MultiPanel.html +++ b/client/idrepo/console/src/main/resources/org/apache/syncope/client/console/wicket/markup/html/form/MultiPanel.html @@ -35,7 +35,7 @@ under the License. <wicket:fragment wicket:id="noDataFragment"> <div class="form-group"> - <div class="multipanel-box box input-group" style="background-color:#EEE"> + <div class="multipanel-box box input-group"> <label class="form-label" wicket:id="field-label">[LABEL]</label> </div> <span wicket:id="panelPlus" class="input-group-append input-group-text">[plus]</span>
