Jump to content
Sign in to follow this  
Sim

CSS. File for modules

Recommended Posts

H body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
padding: 4rem 0;
font-family: -system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

table {
width: 100%;
max-width: 50rem;

tr:nth-child(even) th {
color: #ccc;
font-weight: normal;
}

th,
td {
padding: 0.5rem 1rem;
}

th {
font-weight: normal;
border-top: thin dotted #ccc;
}

td {
font-size: 0.8rem;
font-weight: bold;
line-height: 1.4;
border-radius: 0.2rem;
transition: opacity 0.3s ease;
}

td > span {
font-size: 0.8em;
font-weight: normal;
display: block;
width: 100%;
}
}

.stage-earth {background-color: #FFA726};
.stage-mercury {background-color: #9CCC65};
.stage-venus {background-color: #FF8A65};
.stage-mars {background-color: #B3E5FC};
.stage-jupiter {background-color: #81D4FA};
.stage-saturn {background-color: #26C6DA};

If I use this css file for a module, is it going to apply to whole site. I think it will, so with that said, what is my easiest solution to fix so it wouldn't effect any other areas of the page.

Edit: and the stage- classes don't seem to work

<td colspan="4" rowspan="2" class="stage-saturn">Drinks</td>

To make things a bit stranger the stage-earth one works.

Screenshot_20201119-203542.png

Edited by Sim
  • Confused 1

Share this post


Link to post
Share on other sites

The markup is incorrect

add } before

tr:nth-child(even) th {

remove  } before

.stage-earth {

remove the ; after all the 

.stage-*

 

Edited by urbanmafia
  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...