frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve the appearance of the Node-RED primary header

Browse Source
This commit is contained in:
Joe Pavitt 2024-03-08 10:51:25 +00:00
parent 29e9def314
commit 84a76909e2
7 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node_modules/@node-red/editor-client/src/sass/base.scss vendored
View File

@ -38,7 +38,7 @@ body {
} }
#red-ui-main-container { #red-ui-main-container {
position: absolute; position: absolute;
top:40px; left:0; bottom: 0; right:0; top: var(--red-ui-header-height); left:0; bottom: 0; right:0;
overflow:hidden; overflow:hidden;
} }

3
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -259,7 +259,8 @@ $deploy-button-background-disabled-hover: #555;
$header-background: #000; $header-background: #000;
$header-button-background-active: #121212; $header-button-background-active: #121212;
$header-menu-color: #C7C7C7; $header-accent: #d41313;
$header-menu-color: #eee;
$header-menu-color-disabled: #666; $header-menu-color-disabled: #666;
$header-menu-heading-color: #fff; $header-menu-heading-color: #fff;
$header-menu-sublabel-color: #aeaeae; $header-menu-sublabel-color: #aeaeae;

10
packages/node_modules/@node-red/editor-client/src/sass/header.scss vendored
View File

@ -23,16 +23,20 @@
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 40px; height: var(--red-ui-header-height);
background: var(--red-ui-header-background); background: var(--red-ui-header-background);
box-sizing: border-box; box-sizing: border-box;
padding: 0px 0px 0px 20px; padding: 0px 0px 0px 20px;
color: var(--red-ui-header-menu-color); color: var(--red-ui-header-menu-color);
font-size: 14px; font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--red-ui-header-accent);
padding-top: 2px;
span.red-ui-header-logo { span.red-ui-header-logo {
float: left; float: left;
margin-top: 5px;
font-size: 30px; font-size: 30px;
line-height: 30px; line-height: 30px;
text-decoration: none; text-decoration: none;
@ -42,7 +46,7 @@
vertical-align: middle; vertical-align: middle;
font-size: 16px !important; font-size: 16px !important;
&:not(:first-child) { &:not(:first-child) {
margin-left: 5px; margin-left: 8px;
} }
} }
img { img {

17
packages/node_modules/@node-red/editor-client/src/sass/sizes.scss vendored Normal file
View File

@ -0,0 +1,17 @@
/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed 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.
**/
$header-height: 48px;

1
packages/node_modules/@node-red/editor-client/src/sass/style-custom-theme.scss vendored
View File

@ -15,4 +15,5 @@
**/ **/
@import "colors"; @import "colors";
@import "sizes";
@import "variables"; @import "variables";

1
packages/node_modules/@node-red/editor-client/src/sass/style.scss vendored
View File

@ -15,6 +15,7 @@
**/ **/
@import "colors"; @import "colors";
@import "sizes";
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";

4
packages/node_modules/@node-red/editor-client/src/sass/variables.scss vendored
View File

@ -16,6 +16,9 @@
--red-ui-shadow: #{$shadow}; --red-ui-shadow: #{$shadow};
// Header Height
--red-ui-header-height: #{$header-height};
// Main body text // Main body text
--red-ui-primary-text-color: #{$primary-text-color}; --red-ui-primary-text-color: #{$primary-text-color};
// UI control label text // UI control label text
@ -240,6 +243,7 @@
--red-ui-header-background: #{$header-background}; --red-ui-header-background: #{$header-background};
--red-ui-header-accent: #{$header-accent};
--red-ui-header-button-background-active: #{$header-button-background-active}; --red-ui-header-button-background-active: #{$header-button-background-active};
--red-ui-header-menu-color: #{$header-menu-color}; --red-ui-header-menu-color: #{$header-menu-color};
--red-ui-header-menu-color-disabled: #{$header-menu-color-disabled}; --red-ui-header-menu-color-disabled: #{$header-menu-color-disabled};