Jump to content

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;

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.


Edited by Sim
  • Confused 1
Link to comment
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.

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.

  • Create New...