Homey Web App [CSS customization]

Apps
41

Thanks @Adrian_Rockall I’ve added the new css to the first posts.

1 Like
42

Wrapping of the flow names doens’t work anymore either, in your opening you have:

/* Make long flow names readable*/
.css-287q92-sc-ItemLabel {
    white-space: pre-wrap;
}

Which I believe should be altered to:

/* Make long flow names readable*/
.css-huzgua-sc-ItemLabel {
    white-space: pre-wrap;
}
2 Likes
43

Thanks @Martijn_Hoogenbosch I’ve added it to the earlier posts.

1 Like
44

If you include the following along with @Martijn_Hoogenbosch entries the row height will adjust to fit the text in:

.css-1lglkzi-sc-ItemDetails {
  height: auto;
  padding-top: 3px;
  padding-bottom: 3px;  
}

div.css-1yhvvkb-sc-ItemDetails {
  height: auto;
  padding-top: 3px;
  padding-bottom: 3px;  
}
3 Likes
45

I added the following:

.css-1b814yj-Button {
  width: 95%;
}

To make sure the ‘and’ column also has a ‘better’ size.

1 Like
46

This is my customization. I have a large screen. So plenty room for more columns. Also i like dark mode

image
image5092×2640 713 KB

1 Like
47

Please do share!

48

awesome!

49

Here is my css. It is still under development (like my.homey.app). Keep in mind that the app is still beta and things will change (and definitely brak this css). Also this is based on my 27" screen. If you have a smaller screen you get less columns. The other tabs are also restyled.

:root {
  --shadedbackground-color: ##ee;
  --textcolor: #000;
  --color-homeyname: #000;
  --background-color: #fff;
  --contextmenu-background-color: #444;
  --default-button-color: #aaa;
}

@media (prefers-color-scheme: dark) {
body {
    --color-white: #000;
    --color-mono-100: #ffffff;
    --color-mono-95: #FAFBFD;
    --color-mono-90: #F1F2F6;
    --color-mono-80: #e9eaee;
    --color-mono-70: #DDDEE2;
    --color-mono-60: #D1D2D5;
    --color-mono-50: #c4c5c8;
    --color-mono-40: #ACADB0;
    --color-mono-30: #939496;
    --color-mono-20: #7A7B7D;
    --color-mono-15: #626264;
    --color-mono-10: #49494A;
    --color-mono-05: #313132;
    --color-mono-02: rgb(255,255,255);
    --color-mono-01: #0C0C0C;
    --color-mono-0: #000;
    --color-black: #000000;
    --color-mono-o-02: rgba(255,255,255, 0.02);
    --color-mono-o-10: rgba(255,255,255, 0.1);
    --color-mono-o-50: rgba(255,255,255, 0.5);
    --color-white-o-50: rgba(0,0,0,0.5);
    --color-white-o-75: rgba(0,0,0,0.75);
    --color-white-o-100: rgba(0,0,0,1);
    --color-black-o-50: rgba(255,255,255,0.5);
    --color-ice-white: #121319;
    --color-night-black: #f6f7fb;
    --color-text: var(--color-mono-0);
    --color-text-light: var(--color-mono-0);
    --color-text-light-hover: var(--color-mono-50);
    --color-text-highlight: var(--color-blue);
    --color-text-invert: var(--color-mono-0);
    --color-text-invert-50: var(--color-white-o-50);
    --color-text-disabled: var(--color-mono-30);
    --color-text-inactive: var(--color-mono-20);
    --color-line-light: var(--color-mono-10);
  --color-background-hover: #999;
  --color-component: rgb(50,50,50);
  --shadedbackground-color: #fff;
  --color-body: #000;
  --textcolor: #fff;
  --button-color:#fff;
  --default-button-color: #fff;
  /*--color-mono-100: #000;      */
  --color-text: #000;
  --color-blue:#07f;
  --color-highlight: #ff0;
  --color-homeyname: #fff;
  --icon-color-dark:#fff;
  --color-icon-dark:#fff;
  --background-color: rgb(30,30,30);
  --contextmenu-background-color: #fff;
  background-color: var(--background-color);
  color: var(--textcolor);
}
}

.css-1yur33m-Base.e1smyq3q0,
.css-m338ur-DeviceTile-TopContainer.epcc9q43,
.css-1dpgz7t-Icon-Root.efypr2h0
.css-1py9yg8-tbody tr:hover,
.css-1py9yg8-tbody tr,
.css-1ip6r5q-DeviceCapabilityListItem-Label.e9o5z8t1,
.css-1pmd02-sc-Weather.e17mmtdn0,
.css-1ge3mo5-DeviceName.e8j0ho4 {
  color: var(--color-mono-100);
}

.css-y80g9p-Title.e1ngchep0,
.css-14a3rl8-Title, 
.css-1xqp3xf-Title, 
.css-1xqp3xf-Title,
.css-15fy0ar-body2-CardTitle,
.css-ujc80q-Button-Root.e8sxues1{
  color: var(--textcolor)
}
.css-1293549-Container.e12emes70 > span.css-1dpgz7t-Icon-Root.efypr2h0
{
  background-color: var(--color-mono-100);
}
.css-ujc80q-Button-Root.e8sxues1 {
  background-color: var(--color-blue);
}
.e1im01um4 {
  height: 22px;
}
.css-mes151-SearchField-Input {
  background-color: var(--button-color);
}
.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--button-color-text);
}
.css-15fy0ar-body2-CardTitle {
  font-weight: bold;
  font-size: 18px;
}
.css-1hu8qec-sc-Center {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.css-ppwutp-Section {
    margin: 0px;
}
section.css-ppwutp-Section.e1s1bn0i5 {
    width: 20%;
}
section.css-ppwutp-Section.e1s1bn0i5:last-of-type {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    flex: 1
}

.css-rrlt7p-Content.e1s1bn0i3 {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}
.flow-card {
  margin: 10px;
  font-size: 13px;
  height: 120px;
  width: 340px;
  box-shadow: unset;
  transition: unset;
}
.css-sib1sa-Nav-Container {
  font-size: 12px;
}
.css-y1785u-sc-ItemRoot  {
  height: fit-content;
}
.css-sotwb8-sc-ItemDetails {
  height: 22px;
}
.css-94pg0d-sc-ItemDetails:hover.eo5deeg4,
.css-huzgua-sc-ItemLabel eo5deeg4,
.css-sotwb8-sc-ItemDetails:hover, .css-94pg0d-sc-ItemDetails:hover {
  background-color: transparent;
  color:#fff;
}

.css-id2vso-sc-ItemDetails,
.css-94pg0d-sc-ItemDetails {
  height: 22px;
}
.css-fcjpfp-sc-StickyActions {
  padding-left: 40%;
  margin-left: -60px;
}
.css-1xqp3xf-Title {
  width: 100%;
}
.css-163q0dt-Root {
  width: 100%;
}
.css-18garvg-Textarea, .css-fcjpfp-sc-StickyActions  {
  background: transparent;
}
.css-glpvqg-Button-Root {
  background: var(--default-button-color);
}

.css-6mfsau-sc-Header e1csbp2v3 {
  width: 70%;
  max-width: 100%;
  height: 40px;
}
.css-18garvg-Textarea.e1vsakk20 {
  width: 70%;
  height: 40px;
  max-height: 40px;
  border: none;
  color: var(--textcolor);
  caret-color: var(--textcolor);
}
.css-a0trfj-Header-HomeyName.e1hl2b440 {
  color: var(--color-homeyname);
}
.css-utgxvx-Button.e1s1bn0i0 {
  margin-left: 10px;
  margin-right: 10px;
  width: 87%;

}
.css-6mfsau-sc-Header.e1csbp2v3 {
  margin: 0;
  border-bottom: 1px solid;
  padding: 0 10%;
  max-width: unset;
}
.css-oq2sid-Line.e1vsakk21 {
  display: none;
}
.css-pi077z-sc-Button.et9mcxt0 {
  color: var(--text-color);
  font-size: 16px;
}
.css-mes151-SearchField-Input:not([value=""]), .css-mes151-SearchField-Input:focus {
  color: var(--textcolor);
}
.css-h40jet-overlay {
  background-color: #fff;
  border-radius: var(--borderRadius-default);

}
.css-p2paa9-sc-Content {
  padding: calc( var(--su-root) * 3 ) calc( var(--su-root) * 3 );
}
.css-6mfsau-sc-Header.e1csbp2v3 {
    margin: 0 !important;
    border-bottom: 1px solid !important;
    padding: 0 10% !important;
    max-width: unset !important;
    position: fixed;
    z-index: 999;
    background-color: var(--background-color);
    top: 80px;
    opacity: 90%;
}
.css-1e8329n-Header-Container {
    display: flex;
    z-index: var(--zIndex-header);
    margin-top: 20px;
    margin-bottom: 20px;
    flex: 0 0 40px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    min-height: 0px;
}
.css-17owrf8-h3, .css-8uve29-DeviceTile-Header,
.css-1ulkaww-h1,
.css-9xi6tn-SectionTitle {
  color: var(--textcolor)
}
.css-9xi6tn-SectionTitle {
  background-color: var(--button-color-text);
}
.css-12u75a7-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
    background-color: var(--color-text)
}
.monaco-editor .margin
{
    background-color: #E5D9BD;
}

monaco-editor, .monaco-editor .inputarea.ime-input {
    background-color: #F5EACD;
}
.css-some1b,
.css-117q3uw-sc-Editor,
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input  {
  background-color: #F5EACD;
  
}
div.view-lines {
  padding-left: 0px;
  left:4px;
}
.monaco-editor .inputarea {
  border: none;
}
.current-line {
  background-color:#FFFACD;
  border: none;
}
.monaco-editor .view-overlays {
  padding-left: 0px;
  left: 4px;
}
.view-overlays div, .cigr,.cigra {
    padding-left: 0px;
    left:0px;
}

.css-1jzbmsj-FlowCardHint-Icon.e5jasbj1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-1yj6fto-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-1yv6hw9-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-1ck9etg-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: black;
}
.css-ujc80q-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-gfqu3y-BorderWrapper.e1syuo1q1 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.e1nu42g81 > span.css-1dpgz7t-Icon-Root.efypr2h0, 
.css-e0b41j-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-19e7a1o-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0,
.css-qswy13-CardIcon.e1nu42g86 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
    background-color: white;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: #0b0;
}
.css-os8dre-RoundWrapper {
  background-color: unset;
}
.css-os8dre-RoundWrapper.e1syuo1q0 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: white;
}

.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0,
.e1nu42g81 {
  opacity: unset;
  transform: rotate(-90deg);
  background-color: transparent;
}
.css-8zfs37-sc-ItemContextMenuButton,
.css-8zfs37-sc-ItemContextMenuButton.eo5deeg1 {
  visibility: hidden;
}

.css-19ku62l-sc-ItemContextMenuButton.eo5deeg1 {
  transform: rotate(-90deg);
  visibility: visible;
}
.css-4d1u4p-ActionButton:hover,
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0:hover,
.e1nu42g81:hover {
  transform: rotate(-90deg);
  opacity: 0.5;
  
}
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0 {
  background-color: var(--color-mono-100);
}
.css-uf4jfm-sc-Extension.e1im01um6 {
  color: var(--color-mono-30);;
}
.css-1jzbmsj-FlowCardHint-Icon {
  background-color:white;
  border-radius: 6px;
  padding:0;
  margin-left: 4px;
  transform: translateY(-10px);
  border: 1px solid #fff;

}
.css-oz5z5j-ZoneActivity.e1mg4iro0
{
  color: var(--color-mono-20);
}
.css-19rj6pl-IndicatorLightContainer {
  background-color: rgba(255,255,0,1);
}
.css-fplr7v-DeviceTile-Root[value="false"] {
  opacity: 0.15;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--color-mono-0);
}
.css-tyf752-Base.e1smyq3q0 {
  background-color: var(--color-mono-20);
}
.css-l7bkth-h2.e1cp72ro3,
.css-l9bkth-h2.e1cp72ro3,
.css-1m5m9vt-body1.e1cp72ro1 {
  color: var(--color-mono-20);
}
button[disabled] {
  background-color:var(--color-mono-30);;
}
.css-utgxvx-Button.e1s1bn0i0:hover,
.css-glpvqg-Button-Root.e8sxues1:hover,
.css-glpvqg-Button-Root.e8sxues1:hover {
    color: var(--color-text-light);
    background-color: var(--color-mono-95);  
    transform: scale(1.01);
}
.css-ujc80q-Button-Root.e8sxues1 {
  color: var(--color-mono-100);
  background-color: var(--color-blue);  
  transform: scale(1.01);
  opacity: 0.8;
}
.css-1e2ljcw-Unit.e1b4rrb93,
.css-d9fda6-SectionSubTitle.e1sgjjj32 {
  color: var(--color-mono-15)
}
3 Likes
50

And how did you manage to get the black theme? Is that a browser theme?

51

Yes, my browser is in dark mode. On windows you have to set windows in dark mode

2 Likes
52

Last question, in your screenshot I can clearly see the correct icons, when I add your CSS the icons are blank, bit weird if you ask me.

image
image693×158 5.62 KB

53

I will look into this, this evening. I must have missed some classes

54

I have modified the css a little. Not everything is correct but things will break when Athom deploys a new version.

If you like this darkmode theme but don’t want windows in dark mode, you can remove the
@media query around the body block starting at line 10 and ending at line 68 (but keep body block)

   :root {
  --shadedbackground-color: ##ee;
  --textcolor: #000;
  --color-homeyname: #000;
  --background-color: #fff;
  --contextmenu-background-color: #444;
  --default-button-color: #aaa;
}

@media (prefers-color-scheme: dark) {
body {
    --color-line:#5a5a5a;
    --input-border:var(--color-line);
    --color-white: #000;
    --color-mono-100: #ffffff;
    --color-mono-95: #FAFBFD;
    --color-mono-90: #F1F2F6;
    --color-mono-80: #e9eaee;
    --color-mono-70: #DDDEE2;
    --color-mono-60: #D1D2D5;
    --color-mono-50: #c4c5c8;
    --color-mono-40: #ACADB0;
    --color-mono-30: #939496;
    --color-mono-20: #7A7B7D;
    --color-mono-15: #626264;
    --color-mono-10: #49494A;
    --color-mono-05: #313132;
    --color-mono-02: rgb(255,255,255);
    --color-mono-01: #0C0C0C;
    --color-mono-0: #000;
    --color-black: #000000;
    --color-mono-o-02: rgba(255,255,255, 0.02);
    --color-mono-o-10: rgba(255,255,255, 0.1);
    --color-mono-o-50: rgba(255,255,255, 0.5);
    --color-white-o-50: rgba(0,0,0,0.5);
    --color-white-o-75: rgba(0,0,0,0.75);
    --color-white-o-100: rgba(0,0,0,1);
    --color-black-o-50: rgba(255,255,255,0.5);
    --color-ice-white: #121319;
    --color-night-black: #f6f7fb;
    --color-text: var(--color-mono-0);
    --color-text-light: var(--color-mono-0);
    --color-text-light-hover: var(--color-mono-50);
    --color-text-highlight: var(--color-blue);
    --color-text-invert: var(--color-mono-0);
    --color-text-invert-50: var(--color-white-o-50);
    --color-text-disabled: var(--color-mono-30);
    --color-text-inactive: var(--color-mono-20);
    --color-line-light: var(--color-mono-10);
  --color-background-hover: #999;
  --color-component: rgb(50,50,50);
  --shadedbackground-color: #fff;
  --color-body: #000;
  --textcolor: #fff;
  --button-color:#fff;
  --default-button-color: #fff;
  --color-text: #000;
  --color-blue:#07f;
  --color-highlight: #ff0;
  --color-homeyname: #fff;
  --icon-color-dark:#fff;
  --color-icon-dark:#fff;
  --background-color: rgb(30,30,30);
  --contextmenu-background-color: #fff;
  background-color: var(--background-color);
  color: var(--textcolor);
}
}
.css-2ld8rn-SearchField-Input,
.css-1yur33m-Base.e1smyq3q0,
.css-m338ur-DeviceTile-TopContainer.epcc9q43,
.css-1dpgz7t-Icon-Root.efypr2h0
.css-1py9yg8-tbody tr:hover,
.css-1py9yg8-tbody tr,
.css-1ip6r5q-DeviceCapabilityListItem-Label.e9o5z8t1,
.css-1pmd02-sc-Weather.e17mmtdn0,
.css-1ge3mo5-DeviceName.e8j0ho4 {
  color: var(--color-mono-100);
}
.css-y80g9p-Title.e1ngchep0,
.css-14a3rl8-Title, 
.css-1xqp3xf-Title, 
.css-1xqp3xf-Title,
.css-15fy0ar-body2-CardTitle,
.css-ujc80q-Button-Root.e8sxues1{
  color: var(--textcolor)
}
.css-1293549-Container.e12emes70 > span.css-1dpgz7t-Icon-Root.efypr2h0
{
  background-color: var(--color-mono-100);
}
.css-ujc80q-Button-Root.e8sxues1 {
  background-color: var(--color-blue);
}
.e1im01um4 {
  height: 22px;
}
.css-mes151-SearchField-Input {
  background-color: var(--button-color);
}
.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--button-color-text);
}
.css-15fy0ar-body2-CardTitle {
  font-weight: bold;
  font-size: 18px;
}
.css-1hu8qec-sc-Center {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.css-ppwutp-Section {
    margin: 0px;
}
section.css-ppwutp-Section.e1s1bn0i5 {
    width: 20%;
}
section.css-ppwutp-Section.e1s1bn0i5:last-of-type {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    height: fit-content;
    flex: 1
}

.css-rrlt7p-Content.e1s1bn0i3 {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}
.flow-card {
  margin: 10px;
  font-size: 13px;
  height: 120px;
  width: 340px;
  box-shadow: unset;
  transition: unset;
}
.css-sib1sa-Nav-Container {
  font-size: 12px;
}
.css-y1785u-sc-ItemRoot  {
  height: fit-content;
}
.css-sotwb8-sc-ItemDetails {
  height: 22px;
}
.css-94pg0d-sc-ItemDetails:hover.eo5deeg4,
.css-huzgua-sc-ItemLabel eo5deeg4,
.css-sotwb8-sc-ItemDetails:hover, .css-94pg0d-sc-ItemDetails:hover {
  background-color: transparent;
  color:#fff;
}

.css-id2vso-sc-ItemDetails,
.css-94pg0d-sc-ItemDetails {
  height: 22px;
}
.css-fcjpfp-sc-StickyActions {
  padding-left: 40%;
  margin-left: -60px;
}
.css-1xqp3xf-Title {
  width: 100%;
}
.css-163q0dt-Root {
  width: 100%;
}
.css-18garvg-Textarea, .css-fcjpfp-sc-StickyActions  {
  background: transparent;
}
.css-glpvqg-Button-Root {
  background: var(--default-button-color);
}

.css-6mfsau-sc-Header e1csbp2v3 {
  width: 70%;
  max-width: 100%;
  height: 40px;
}
.css-18garvg-Textarea.e1vsakk20 {
  width: 70%;
  height: 40px;
  max-height: 40px;
  border: none;
  color: var(--textcolor);
  caret-color: var(--textcolor);
}
.css-a0trfj-Header-HomeyName.e1hl2b440 {
  color: var(--color-homeyname);
}
.css-utgxvx-Button.e1s1bn0i0 {
  margin-left: 10px;
  margin-right: 10px;
  width: 87%;

}
.css-6mfsau-sc-Header.e1csbp2v3 {
  margin: 0;
  border-bottom: 1px solid;
  padding: 0 10%;
  max-width: unset;
}
.css-oq2sid-Line.e1vsakk21 {
  display: none;
}
.css-pi077z-sc-Button.et9mcxt0 {
  color: var(--text-color);
  font-size: 16px;
}
.css-mes151-SearchField-Input:not([value=""]), .css-mes151-SearchField-Input:focus {
  color: var(--textcolor);
}
.css-h40jet-overlay {
  background-color: #fff;
  border-radius: var(--borderRadius-default);

}
.css-p2paa9-sc-Content {
  padding: calc( var(--su-root) * 3 ) calc( var(--su-root) * 3 );
}
.css-6mfsau-sc-Header.e1csbp2v3 {
    margin: 0 !important;
    border-bottom: 1px solid !important;
    padding: 0 10% !important;
    max-width: unset !important;
    position: fixed;
    z-index: 999;
    background-color: var(--background-color);
    top: 80px;
    opacity: 90%;
}
.css-1e8329n-Header-Container {
    display: flex;
    z-index: var(--zIndex-header);
    margin-top: 20px;
    margin-bottom: 20px;
    flex: 0 0 40px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    min-height: 0px;
}
.css-17owrf8-h3, .css-8uve29-DeviceTile-Header,
.css-1ulkaww-h1,
.css-9xi6tn-SectionTitle {
  color: var(--textcolor)
}
.css-9xi6tn-SectionTitle {
  background-color: var(--button-color-text);
}
.css-12u75a7-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
    background-color: var(--color-text)
}
.monaco-editor .margin
{
    background-color: #E5D9BD;
}

monaco-editor, .monaco-editor .inputarea.ime-input {
    background-color: #F5EACD;
}
.css-some1b,
.css-117q3uw-sc-Editor,
.monaco-editor, .monaco-editor-background, .monaco-editor .inputarea.ime-input  {
  background-color: #F5EACD;
  
}
div.view-lines {
  padding-left: 0px;
  left:4px;
}
.monaco-editor .inputarea {
  border: none;
}
.current-line {
  background-color:#FFFACD;
  border: none;
}
.monaco-editor .view-overlays {
  padding-left: 0px;
  left: 4px;
}
.view-overlays div, .cigr,.cigra {
    padding-left: 0px;
    left:0px;
}

.css-1troxg2-sc-IconWrapper,
.css-1pbk2nf-CardIcon.e1nu42g86 {
  background-color: var(--color-mono-20);
}

.css-1ru0ags-sc-Heading,
.css-bj5rw5-ArgumentBase,
.css-bj5rw5-ArgumentBase,
.css-a4os0a-body2-sc-CardTitle {
  color: var(--color-mono-100)
}
.css-1gm55sn-sc-IconWrapper > span:first-of-type,
.css-1ew1tjp-sc-CardIcon > span:first-of-type,
.css-1oyvl1c-sc-IconWrapper > span:first-of-type,
.css-1cyeuzb-sc-IconWrapper > span:first-of-type,
.css-1l6izd9-sc-IconWrapper > span:first-of-type,
.css-1rl3tat-sc-IconWrapper > span:first-of-type,
.css-1b44zfx-CardIcon > span:first-of-type,
.css-psqvu2-sc-CardIcon > span:first-of-type,
.css-d4oq54-sc-IconWrapper > span:first-of-type,
.css-zru3em-sc-IconWrapper > span:first-of-type,
.css-1kn59xg-sc-IconWrapper > span:first-of-type,
.css-1troxg2-sc-IconWrapper > span:first-of-type,
.css-1171vma-sc-CardIcon > span:first-of-type,
.css-1badi50-CardIcon > span:first-of-type,
.css-1pbk2nf-CardIcon > span:first-of-type,
.css-1jzbmsj-FlowCardHint-Icon.e5jasbj1 > span:first-of-type,
.css-1yj6fto-CardIcon > span:first-of-type,
.css-1yv6hw9-CardIcon > span:first-of-type,
.css-1ck9etg-CardIcon > span:first-of-type {
  background-color: black;
}
.css-1psktj1-sc-CardIcon > span:first-of-type,
.css-1utjvo4-sc-IconWrapper > span:first-of-type,
.css-mb7rd8-sc-CardIcon > span:first-of-type,
.css-1gxhbu4-sc-IconWrapper > span:first-of-type,
.css-h3555p-sc-IconWrapper > span:first-of-type,
.css-64uawx-sc-CardIcon > span:first-of-type,
.css-1yvfyp7-sc-IconWrapper > span:first-of-type,
.css-1jxfsgp-sc-CardIcon > span:first-of-type,
.css-42u0cj-sc-IconWrapper > span:first-of-type,
.css-s77mou-sc-IconWrapper > span:first-of-type,
.css-vzdp8n-sc-CardIcon > span:first-of-type,
.css-1xct97i-sc-IconWrapper > span:first-of-type,
.css-uubfww-sc-IconWrapper > span:first-of-type,
.css-emsjvp-sc-IconWrapper > span:first-of-type,
.css-1v9un48-sc-CardIcon > span:first-of-type,
.css-2ew1tjp-sc-CardIcon > span:first-of-type,
.css-1qlxmu0-ArgumentBase.ekk9fzm0,
.css-onw83h-CardIcon > span:first-of-type,
.css-onw83h-IconWrapper > span:first-of-type,
.css-u7w57-sc-IconWrapper > span:first-of-type,
.css-19i8b2z-sc-IconWrapper > span:first-of-type,
.css-12yp2rj-CardIcon > span:first-of-type,
.css-18m61nk-CardIcon > span:first-of-type,
.css-nns3x8-CardIcon > span:first-of-type,
.css-8q1vlr-CardIcon > span:first-of-type,
.css-1i4ezcc-CardIcon > span:first-of-type,
.css-eli0cn-CardIcon > span:first-of-type,
.css-ujc80q-Button-Root.e8sxues1 > span:first-of-type,
.css-gfqu3y-BorderWrapper.e1syuo1q1 > span:first-of-type,
.e1nu42g81 > span.css-1dpgz7t-Icon-Root.efypr2h0, 
.css-e0b41j-CardIcon > span:first-of-type,
.css-19e7a1o-CardIcon > span:first-of-type,
.css-qswy13-CardIcon > span:first-of-type {
    background-color: white;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: #0b0;
}
.css-os8dre-RoundWrapper {
  background-color: unset;
}
.css-os8dre-RoundWrapper.e1syuo1q0 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: white;
}

.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0,
.e1nu42g81 {
  opacity: unset;
  transform: rotate(-90deg);
  background-color: transparent;
}
.css-8zfs37-sc-ItemContextMenuButton,
.css-8zfs37-sc-ItemContextMenuButton.eo5deeg1 {
  visibility: hidden;
}

.css-19ku62l-sc-ItemContextMenuButton.eo5deeg1 {
  transform: rotate(-90deg);
  visibility: visible;
}
.css-4d1u4p-ActionButton:hover,
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0:hover,
.e1nu42g81:hover {
  transform: rotate(-90deg);
  opacity: 0.5;
  
}
.eozj5ct2.css-1l95172-Icon-Root-MoreButtonIcon.efypr2h0 {
  background-color: var(--color-mono-100);
}
.css-uf4jfm-sc-Extension.e1im01um6 {
  color: var(--color-mono-30);;
}
.css-1jzbmsj-FlowCardHint-Icon {
  background-color:white;
  border-radius: 6px;
  padding:0;
  margin-left: 4px;
  transform: translateY(-10px);
  border: 1px solid #fff;

}
.css-oz5z5j-ZoneActivity.e1mg4iro0
{
  color: var(--color-mono-20);
}
.css-19rj6pl-IndicatorLightContainer {
  background-color: rgba(255,255,0,1);
}
.css-fplr7v-DeviceTile-Root[value="false"] {
  opacity: 0.15;
}
.css-glpvqg-Button-Root.e8sxues1 > span.css-1dpgz7t-Icon-Root.efypr2h0 {
  background-color: var(--color-mono-0);
}
.css-tyf752-Base.e1smyq3q0 {
  background-color: var(--color-mono-20);
}
.css-l7bkth-h2.e1cp72ro3,
.css-l9bkth-h2.e1cp72ro3,
.css-1m5m9vt-body1.e1cp72ro1 {
  color: var(--color-mono-20);
}
button[disabled] {
  background-color:var(--color-mono-30);;
}
.css-utgxvx-Button.e1s1bn0i0:hover,
.css-glpvqg-Button-Root.e8sxues1:hover,
.css-glpvqg-Button-Root.e8sxues1:hover {
    color: var(--color-text-light);
    background-color: var(--color-mono-95);  
    transform: scale(1.01);
}
.css-ujc80q-Button-Root.e8sxues1 {
  color: var(--color-mono-100);
  background-color: var(--color-blue);  
  transform: scale(1.01);
  opacity: 0.8;
}
.css-1e2ljcw-Unit.e1b4rrb93,
.css-d9fda6-SectionSubTitle.e1sgjjj32 {
  color: var(--color-mono-15)
}
.css-gxn0rm-sc-Header {
  background-color: var(--color-mono-10);  
}

.css-ujc80q-Button-Root.e8sxues1 > .css-1ly55jo-value.e19mul4b0 {
  background-color:transparent;
  color: white;
}
1 Like
55

Please use the </> (when having the code selected) button! when posting such long code next time (it will put it in a nice box), for now I have done it for you to keep the topic clean.
You’ve done it before with ```, so you know how it can work (too).

1 Like
56

Ok, thanx

57

And it’s gone again. Is there also a way to make this more reliable? Every new version of the app changes the whole layout.

58

Nope, Athom could making it a lot user friendly when they stop changing the names/ids, but they know that, cause… well they know what users want. :wink:

59

Do i miss something here?

/* Show flows in landscape */
.css-14scrpd {
    width: 100%;
  display: flex;    
}
.css-1ab8s7t {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-2gc5z4  {
  width: 95%;
}

.css-1iuu5lg {
  width: 82%;
}
60

Added 2 more Classes and added it to the opening post(s), thanks!

2 Likes