notificationFx.css

[Ray]

So I have a dilemma that I don’t quite know how to solve
currently in my custom.css . I have the settings for the alert module which uses the notificationFx.css. And it works perfectly.

.ns-box {        
  background-color: rgba(0, 0, 0, 0.5);
  padding: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
  z-index: 1;
  font-size: 70%;
  position: relative;
  display: table;
  word-wrap: break-word;
  max-width: 100%;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--color-text-dimmed);
}
.ns-box .dimmed {     
    color: #00FFFF;
}
.ns-box .normal {     
    color: #ffffff;
}
.ns-box .bright {     
    color: #00FF00;
}

The problem is my new module MMM-StopwatchTimer uses exactly the same alert notificationFx.css
I don’t want to have the same settings the same colors. How do I fix this problem

Any help would be appreciated

[sdetweil]

@ray I think if u add the modulename as the start of each class, that will override the general case

alert .ns-box {…

}

note the space between alert and .ns-box

repeat for all the classes that apply

[Ray]

@sdetweil I think I tried that but I’ll try again

[Ray]

@sdetweil when I added it to the 1st 1 it worked
but when I added to the other 3 everything is in black and white now

.alert .ns-box  {        /*ns-box is for Alert. It displays notifications for other modules.*/
  background-color: rgba(0, 0, 0, 0.5);
  padding: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
  z-index: 1;
  font-size: 70%;
  position: relative;
  display: table;
  word-wrap: break-word;
  max-width: 100%;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--color-text-dimmed);
}
.alert .ns-box .dimmed {     /* Header MagicMirror */
    color: #00FFFF;
}
.alert .ns-box .normal {     /* */
    color: #ffffff;
}
.alert .ns-box .bright {     /* Welcome start was successful */
    color: #00FF00;
}

is it because I have
dimmed
normal
bright
should there be a – there instead of . Maybe

I should’ve included these in my 1st reply sorry

[sdetweil]

@ray
. (dot) means class
no dot means html element (li, ul, div, span…)

that should have worked

this

.alert .ns-box .normal

means ALL the .normal classes, INSIDE .ns-box classes , inside .alert classes

[Ray]

@sdetweil said in notificationFx.css:

.alert .ns-box .normal

If I set it up just like this. It works
but the 3 items below my new module will use them, which I do not want

.alert .ns-box {        /*ns-box is for Alert. It displays notifications for other modules.*/
  background-color: rgba(0, 0, 0, 0.5);
  padding: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
  z-index: 1;
  font-size: 70%;
  position: relative;
  display: table;
  word-wrap: break-word;
  max-width: 100%;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--color-text-dimmed);
}
.ns-alert .dimmed {     /* Header MagicMirror */
    color: #00FFFF;
}
.ns-box .normal {     /* */
    color: #ffffff;
}
.ns-box .bright {     /* Welcome start was successful */
    color: #00FF00;
}

if I set it up like this. Everything is black and white. except for the box it will be black and the text will be white

.alert .ns-box {        /*ns-box is for Alert. It displays notifications for other modules.*/
  background-color: rgba(0, 0, 0, 0.5);
  padding: 17px;
  line-height: 1.4;
  margin-bottom: 10px;
  z-index: 1;
  font-size: 70%;
  position: relative;
  display: table;
  word-wrap: break-word;
  max-width: 100%;
  border-width: 1px;
  border-radius: 5px;
  border-style: solid;
  border-color: var(--color-text-dimmed);
}
.alert .ns-box .dimmed {     /* Header MagicMirror */
    color: #00FFFF;
}
.alert .ns-box .normal {     /* */
    color: #ffffff;
}
.alert .ns-box .bright {     /* Welcome start was successful */
    color: #00FF00;
}

I cannot see what I’m doing wrong here

[sdetweil]

@ray said in notificationFx.css:

If I set it up just like this. It works

but ALL the custom classes need .alert in front

only use for alert

sorry, didn’t scroll down

open the developers window, ctrl-shift-i, select the elements tab, click the pointer top left and navigate to the content in the left pane, and you will see the classes tree on the right… top is closest to the module, bottom is more global

[Ray]

@sdetweil yes I just did that I sent you a copy of it