Homey Flow for Web - three Column view [CSS customization]

[ktd]

This also work with the beta/dev of the new Microsoft Edge that are built on Chromium.
Thanks for sharing the methode and CSS @Dijker.

[Le_Cactus]

Ow? How? Please elaborate on how you got that to work , I would like that too
TIA

[ArnoP]

Did you read the first topic in this thread?

[Le_Cactus]

Of course… I was reffering to the CSS hack in Edge Beta version

[ArnoP]

I don’t use Edge a lot let alone the Beta of it, but since it’s based on Chromium it might just support the same plugins as Chrome and other Chromium based browsers do…

[ktd]

In the beta version of Edge you can download extensions from Chrome web store so you can download and install Stylebot and then just copy & paste the code from the first post.

[Le_Cactus]

Thanks, didn’t know that. Thanks

[Manney]

Hi, Danee?!

I really like the appearance of your dark version but some text is displayed in dark color and hard to read.

Do you know where to change that?

Thanks in advance!

[DaneedeKruyff]

I’ll have to look into that, will let you know when I find it.

Think this will fix that:

.FlowCard>.Content>.TitleFormatted>.Text>.TextNode {
	color: #ccc;    
}

[Manney]

Thanks, that helps a lot!

And do you know what the parameter for the “title” of the card is?

In this case the “Aanwezigheid”

[DaneedeKruyff]

Think that would be

.FlowCard>.Content>.Owner {
	color: #ccc;
}

[Manney]

Danee, you’re the man!!

Thanks !!!

[Manney]

As we keep on tweaking.

Is there any code to adjust the flow tree color (activated and deactivated)?

Oh yeah, and selected.

[Techniman]

The thing i’m really missing is a way to see the current variables/tags and their values,
does anyone if it is possible to copy this small button to the top bar?
(like it used to be in the old flow editor)

[tb1962]

A bit late, but for those that are interested i have changed the look&feel of the HomeyScript editor.
It is quick&dirty but if you like you can play with it and modify.

CSS:

.hs-console {
border: none;

}

.hs-console-header {
background: #444;
box-shadow: none;
}

.hs-console-inner .hs-scrollbar {
backkground: 222;
}

.hs-editors-wrap {
background: #171717;
border: none;
}

.hs-files {
background: #222;
}

.hs-header {
background: #222;
}

.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input {
background-color: #171717;
}

.monaco-scrollable-element {
background: #171717;
}

body {
background: #222;
}

.hs-actions {
background: #222;
border: none;
}

.hs-editor {
transition: unset;
}

.hs-editor .hs-console {
height: 40%;
}

.hs-editor .hs-console-inner {
background: #171717;
}

.hs-editor .hs-monaco {
bottom: 40%;
}

.hs-file {
font-size: 12px;
}

.hs-header, .hs-sidebar, .hs-console {
background: #222;
}

.hs-sidebar {
overflow: hidden;
width: 350px;
}

.monaco-editor .view-overlays .current-line {
border: 1px solid #282828;
background: #282828;
}

.monaco-editor .lines-content .cigr {
opacity: 0.45
;
}

.monaco-editor .lines-content .cigr:nth-of-type(1) {
background-color: #cc99ff;
}

.monaco-editor .lines-content .cigr:nth-of-type(2) {
background-color: #ffcccc;
}

.monaco-editor .lines-content .cigr:nth-of-type(3) {
background-color: #99ff66;
}

.monaco-editor .lines-content .cigr:nth-of-type(4) {
background-color: #66ffff;
}

.monaco-editor .lines-content .cigr:nth-of-type(5) {
background-color: #ffff66;
}

.monaco-editor .lines-content .cigr:nth-of-type(6) {
background-color: #0099cc;
}

.monaco-editor .lines-content .cigr:nth-of-type(7) {
background-color: #ff6600;
}

.monaco-editor .lines-content .cigr:nth-of-type(8) {
background-color: #00cc99;
}

.monaco-editor .lines-content .cigr:nth-of-type(9) {
background-color: #0066ff;
}

.monaco-editor .lines-content .cigr:nth-of-type(10) {
background-color: #00cc00;
}

.mtk7 {
color: #444;
}

.hs-sidebar:before {
background: #333;
}

.hs-file.hs-active {
border-top-color: #333;
border-bottom-color: #333;
margin-right: 0px;
background: #333;
}

[tb1962]

@Fire69, I meant by this the visual sequence

[M_a_r_c_o]

The CSS for the flow editor gives me a white screen now, in firefox and chrome on the Mac.
Something is changed

[Tomm]

Yep, same problem here…

[Robert_Zwetsloot]

??? no problemo in Chrome overhere: Versie 86.0.4240.198 (Officiële build) (64-bits), stylebot v3, a change is unlikely or?

[M_a_r_c_o]

Nope, here with same versions on OSX version 10.14.6 only a white screen!

2020-11-18_20-44-32|690x291