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

@DaneedeKruyff could it be that drag and drop (moving a card to ELSE) is not working when you apply this custom CSS? It all works fine here except that apparently, but I could be doing something wrong too maybe.

I have the first + Block + Black and everything works in Chrome on Windows.

Try a long press/Click before moving…

1 Like

Awesome! Thanks @Dijker that ‘long press’ did the trick. Guess I was indeed doing something wrong, being a bit impatient and hasty :wink:

Enhanced the dark mode a bit

body {
    background: -webkit-linear-gradient(55deg,#050005,#404040 50%,#505050);
}

.FlowCard {
    background: -webkit-linear-gradient(55deg,#060006,#505050 30%,#605050);
}

.FlowCard>.Content>.Delay, 
.FlowCard>.Content>.Duration, 
.FlowCard>.Content>.Title>.Text {
 	color: white;   
}
.FlowCardArgument {
    color: white;
}

.AddCard.Visible>.Inner {
    background: -webkit-linear-gradient(55deg,#070007,#606060 70%,#605050);
}

input.SearchInput {
    background: -webkit-linear-gradient(55deg,#403030,#606060 80%,#040004);
}

.AddCard>.Inner>.Search>.SearchInput {
    color: white;
}
6 Likes

A new feature got added :+1:

You can now see the number of times a flow was triggered by hovering your mouse over the flow name. This number represents the times the flow was triggered since the update to V2 or since it was created (on V2).
Flows started by using the Test button are not counted.

2 Likes

Follow the instructions on that page and paste the code below

const fixFlowApp = document.createElement("style");

fixFlowApp.innerText = `
  body {
    background: -webkit-linear-gradient(55deg,#050005,#404040 50%,#505050);
}

.FlowCard {
    background: -webkit-linear-gradient(55deg,#060006,#505050 30%,#605050);
}

.FlowCard>.Content>.Delay, 
.FlowCard>.Content>.Duration, 
.FlowCard>.Content>.Title>.Text {
 	color: white;   
}
.FlowCardArgument {
    color: white;
}

.AddCard.Visible>.Inner {
    background: -webkit-linear-gradient(55deg,#070007,#606060 70%,#605050);
}

input.SearchInput {
    background: -webkit-linear-gradient(55deg,#403030,#606060 80%,#040004);
}

.AddCard>.Inner>.Search>.SearchInput {
    color: white;
}

body {
    zoom: .5;
}

.FlowInner {
    display: flex;
    flex-wrap: wrap;
}
.FlowInner > input {
    flex: 0 0 100%;
}
.FlowTypeGroup {
    flex: 1;
    padding-bottom: 70px;
    position: relative;
}
.FoldersItemInner .Icon {
    flex: 0 0 20px;
}
`;

document.head.appendChild(fixFlowApp);

completion();

3 Likes

Nice.

Fantastic. Thanks!

Little addition for the dark theme so the dialog to add a card is also dark

.AddCard.Visible>.Inner {
    background: -webkit-linear-gradient(55deg,#070007,#606060 70%,#605050);
}

input.SearchInput {
    background: -webkit-linear-gradient(55deg,#403030,#606060 80%,#040004);
}

.AddCard>.Inner>.Search>.SearchInput {
    color: white;
}

Before

After
image

2 Likes

Great! I will switch to the dark mode. Beautiful!

Is there any way to accomplish this in Safari??

Great!

Small request :wink:
Would it be possible to make the enabled / disabled flows esier to identify? I find it difficut to see the difference, especially if a flow is selected.

Thanks!

Hi Ernst,

Just play around with this value to see what suits you best

.FlowFolder.Disabled>.FoldersItem>.FoldersItemInner>.Title {
    opacity: .2;
}
3 Likes

Yippee!

use stylish if you want for chrome!

For the people who hate the telephone simulator in the app settings of the Homey developer page.
Here the chrome css, tested with stylebot extension for the transformation into a tablet :grinning:
https://developer.athom.com/tools/app-settings

/* Make all elements invisible to hide the simulator selector */

.Page.PageToolsSettings {
    visibility: hidden;
}

/* But still show the phone itself and flexible resize and realign */

.Page.PageToolsSettings .Simulator {
    visibility: visible;
    width: 150%;
    margin-left: -50%;
}

/* Finetune the layout of the screen */

.Page.PageToolsSettings .Simulator .SimulatorInner {
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}

/* Now the phone is a tablet :) */

12 Likes

That is nice! Thank you!

Thanks for the enhancements, guys. Bought a new second Homey today that was already 2.0. Must say this is awesome and makes re-creating my flows so much easier. :+1::clap::facepunch:

So was it new and therefor was 2.0 ofc or was it 2nd hand with 2.0 on it??

2nd hand early 2016 model (purchase date nov 2018) and already 2.0 on it. So it’s running next to my 1.5 now to make sure everything is/stays running while moving to 2.0.

1 Like