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

Merge pull request #4598 from joepavitt/header-styling

Browse Source 
Improve the appearance of the Node-RED primary header
This commit is contained in:
Nick O'Leary 2024-03-13 17:07:13 +00:00 committed by GitHub
commit 0853cd65b2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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 {
position: absolute;
top:40px; left:0; bottom: 0; right:0;
top: var(--red-ui-header-height); left:0; bottom: 0; right:0;
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-button-background-active: #121212;
$header-menu-color: #C7C7C7;
$header-accent: #d41313;
$header-menu-color: #eee;
$header-menu-color-disabled: #666;
$header-menu-heading-color: #fff;
$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;
left: 0;
width: 100%;
height: 40px;
height: var(--red-ui-header-height);
background: var(--red-ui-header-background);
box-sizing: border-box;
padding: 0px 0px 0px 20px;
color: var(--red-ui-header-menu-color);
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 {
float: left;
margin-top: 5px;
font-size: 30px;
line-height: 30px;
text-decoration: none;
@ -42,7 +46,7 @@
vertical-align: middle;
font-size: 16px !important;
&:not(:first-child) {
margin-left: 5px;
margin-left: 8px;
}
}
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 "sizes";
@import "variables";

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

@ -15,6 +15,7 @@
**/
@import "colors";
@import "sizes";
@import "variables";
@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};
// Header Height
--red-ui-header-height: #{$header-height};
// Main body text
--red-ui-primary-text-color: #{$primary-text-color};
// UI control label text
@ -240,6 +243,7 @@
--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-menu-color: #{$header-menu-color};
--red-ui-header-menu-color-disabled: #{$header-menu-color-disabled};