I am trying to create a basic CSS template for a project. It needs to support both a light and dark mode.
In the html, the body tag has data-layout-color attribute. I have some toggles that allow switching between light and dark, and it is updating this attribute. In my CSS sheet, I use the attribute selector for background color, and it works! Now I need to be able to set other elements color based on the light/dark mode, but that's not working as the individual element doesn't have the attribute. I don't want to add data-layout-color to everything, and then have to update it all with my js. Any suggestions?
HTML:
<body ng-controller="myApp" data-layout-color="dark" data-layout="topnav">
<button type="button" class="btn btn-primary">PRESS ME!</button>
</body>
CSS:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
}
.btn-primary[data-layout-color="light" {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
.btn-primary[data-layout-color="dark" {
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
You could write your selectors such that the attribute selector remains on body:
/* primary button under a "light" layout parent */
[data-layout-color="light"] .btn-primary {
color: var(--my-white-light);
background-color: var(--my-primary-light);
border-color: var(--my-primary-light);
}
But I think a better idea would be to change the custom property values so you don't need the theme-specific selectors on child elements in the first place:
[data-layout-color="dark"] {
--button-color-bg: white;
--button-color-fg: black;
}
[data-layout-color="light"] {
--button-color-bg: black;
--button-color-fg: white;
}
.btn-primary {
background-color: var(--button-color-bg);
color: var(--button-color-fg);
display: inline-block;
padding: 0.25em 1em;
border: 1px solid grey;
margin: 0.5em;
}
<div data-layout-color="dark">
<div class="btn-primary">Dark Body</div>
</div>
<div data-layout-color="light">
<div class="btn-primary">Light Body</div>
</div>
With plain css you can write it like this
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
}
body[data-layout-color="dark"] .btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
}
body[data-layout-color="dark"] .btn-primary a{
text-decoration: underline overline #FF3028;
}
I suggest you use scss though. It will make your life easier. If you'r using visualstudio code just download Live sass complier and click watch sass in the bottom right corner.
Using scss you would write it like this:
body[data-layout-color="dark"]{
background-color: var(--my-body-dark-bg);
.btn-primary{
color: var(--my-white-dark);
background-color: var(--my-primary-dark);
border-color: var(--my-primary-dark);
a{
text-decoration: underline overline #FF3028;
}
}
.btn-secondary{
color: var(--my-white-dark-secondary);
background-color: var(--my-primary-dark-secondary);
border-color: var(--my-primary-dark-secondary);
}
p{
color: var(--my-white-dark);
}
}
body[data-layout-color="light"]{
background-color: var(--my-body-light-bg);
/*etc etc*/
}
Related
I have the following radio button from angular material, and I want to apply some CSS when it has been selected, but the CSS is not working, and I do not know why
however, the :hover works perfectly fine
I have provided both HTML and CSS
could you please help me with this?
.things {
&:focus {
background-color: red;
}
&:hover {
.thing-name {
color: #9c27b0;
}
}
}
<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
<span class="thing-details">
<img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
<h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
</span>
</mat-radio-button>
I just figured it out.
the following code will both hide the circle of the radio button and changes the color of another element on its selection
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
span .thing-name {
border: 1px solid #ffffff !important;
background-color: #28a745 !important;
}
}
// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
border: none;
width: 0;
}
I want to give a different color to the element if either of the two conditions exists.
Here is the code:
.btn-link{
color: $color-black;
margin: 0;
&:hover{
color: $color-light-blue;
}
&:not(.collapsed){
color: $color-light-blue;
}
}
Everything is good, but it will be better if you can combine the two selectors
I already tried:
&:hover&:not(.collapsed){
color: $color-light-blue;
}
But only the hover is identified
Same way as you do in CSS:
&:hover, &:not(.collapsed) {
color: $color-light-blue;
}
This sets the color only if the element is in a hover state or doesn't have the class collapsed.
You can put a comma between the two combining selectors, like this: &:hover, &:not(.collapsed) {
Full example:
HTML:
<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>
CSS:
$color-black: black;
$color-light-blue: lightblue;
.btn-link {
color: $color-black;
margin: 0;
&:hover, &:not(.collapsed) {
color: $color-light-blue;
}
}
JSfiddle.
Sorry, no StackSnippet. We still can't handle SCSS here!
You can try this simple change your code
/*SCSS*/
$color-light-blue : red;
.btn-link {
&:hover:not(.collapsed) {
color: $color-light-blue;
}
}
/*compiled CSS*/
.btn-link:hover:not(.collapsed) {
color: red;
}
<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>
Sometimes I see two entries for the CSS 'color' attribute active on a single element, even when one has !important. The one without !important is taking precedence though, as it should (I am trying to force the element to color: white). See screenshot:
Thanks!
UPDATE: added html markup
<div class="x-button x-button-back x-layout-box-item x-stretched" id="quit-button" style="width: auto !important;">
<span class="x-badge" style="display: none;"></span>
<span class="x-button-icon x-hidden" id="ext-element-1109"></span>
<span class="x-button-label" style="" id="ext-element-1110">Quit</span>
</div>
.peacekeepers-edition is set on the first element inside the body, #playview is a distant descendent.
Regardless of the specificity of the rule all proprieties from the CSSOM will appear in the inspector rule view. The fact that the "color:#ccffff" is not crossed/underline is just an inspector bug.
BTW, you overqualified your selectors: .preacekeepers-edition #playview will have a specificity of 1|1|0|, that is way more that you should have. Adding !important will make things hard to manage later.
I'm making some assumptions about your markup (because you haven't provided any), but I think it's fairly safe to say that this is your issue.
Assuming your markup is something like this...
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Your first selector targets the button element...
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
but your second selector targets an element that is a descendant of your button...
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #ccccff;
}
Your !important rule is irrelevant because your selectors are targeting different elements.
Easy fix; add this line after line 769...
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #fff;
}
Broken example...
body {
background: #1a1a1a;
}
button {
padding: 15px;
font-size: 30px;
background: green;
}
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #ccccff;
}
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
Working example...
body {
background: #1a1a1a;
}
button {
padding: 15px;
font-size: 30px;
background: green;
}
.peace-keepers-edition #playview .x-button-back {
color: #FFF !important;
}
.peace-keepers-edition #playview .x-button-back .x-button-icon {
color: #fff;
}
<div class="peace-keepers-edition">
<div id="playview">
<button class="x-button-back">
<i class="x-button-icon">icon</i>
</button>
</div>
</div>
I would like to make it so that all of my tags look plain when they show up on the screen also after I visit them or if I hover over them. I put all of my divs in a wrapper and tried to refer to them but it didn't seem to work. I don't really need the wrapper if I could just refer to everything using a:hover ... that would be fine.
here is my HTML
<div id="wrapper">
<div id="settings_button">
<span class="settings_text">
Settings
</span>
</div>
<div id="posts_button">
<span class="one_bar_text">
Posts
</span>
</div>
<a href="#" alt="posts">
<div id="posts_button_dark">
<span class="one_bar_text">
Posts
</span>
</div>
</a>
<div id="profile_button">
<span class="one_bar_text">
Profile
</span>
</div>
<div id="profile_button_dark">
<span class="one_bar_text">
Profile
</span>
</div>
</div>
Below is my CSS
#wrapper a:link {
color: none;
text-transform: none;
}
#wrapper a:visited {
color: none;
}
#wrapper a:hover {
color: none;
text-transform: none;
}
I will be making most of my divs into links i just haven't yet. and i would like to avoid having to reference each div's tag on my CSS page
so i changed my CSS to this
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none;
}
a:hover {
color: none;
text-transform: none;
}
but the link is still being underlined on hover over
a {
color: black;
text-decoration: none;
}
This is highly questionable, but it addresses the question you asked. You don’t need any fancy selectors, since any setting in a page style sheet that applies to an element will override browser defaults.
You just need to set an explicitly color (or use inherit, but IE does not support it), and to kill underlining, you need to set text-decoration, not text-transform.
You should use either links or buttons, not <divs>.
If you do decide to go with the current markup:
div[id*=button] {
...
}
If you decide to sober up (seriously, don't use divs!)
Just a or button will do.
a {
color: red;
}
Will color all links in red.
Note that it will catch all links, as in in the content area, the nav, the footer. Everywhere.
a{
color:#fff;
}
Is this what you meant?
Just use a
a:link {
color: none;
text-transform: none;
}
a:visited {
color: none; }
a:hover {
color: none;
text-transform: none; }
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}