Skip to content

Commit

Permalink
Some fine styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@maziggy
maziggy committed Nov 2, 2024
1 parent 0d10c4a commit 0e52779
Showing 1 changed file with 137 additions and 137 deletions.
274 changes: 137 additions & 137 deletions dist/ppfdChart.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,142 +18,142 @@ class PPFDCustomCard extends LitElement {
}

// Define styles
static styles = css`
ha-card {
padding: 20px;
box-sizing: border-box;
}
.main-container {
display: flex;
align-items: center;
width: 100%;
color: #ffffff;
background-color: #2c2c2e;
border-radius: 12px;
padding: 20px;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
position: relative;
box-sizing: border-box;
}
.main-container::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 20px;
border: 2px solid rgba(100, 100, 255, 0.5);
pointer-events: none;
box-sizing: border-box;
}
.update-container {
font-size: 0.8em;
color: #ccc;
padding-right: 15px;
flex-shrink: 0;
min-width: 90px;
text-align: left;
}
.chart-container {
text-align: center;
position: relative;
width: 100%;
padding: 0 10px;
margin: 0 auto;
box-sizing: border-box;
}
.section-names {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0.9em;
color: #ffffff;
padding: 0 10px;
box-sizing: border-box;
position: relative;
}
.section-seeding {
flex: 1;
text-align: left;
padding-left: 5%;
}
.section-vegetation {
position: absolute;
left: 54%; /* Adjusted to center between 600 and 800 */
transform: translateX(-50%);
font-size: 0.9em;
color: #ffffff;
}
.section-flowering {
flex: 1;
text-align: right;
padding-right: 5%;
}
.chart-bar {
width: 100%;
height: 40px;
position: relative;
background: linear-gradient(to right, rgba(0, 9, 255, 1), rgba(4, 219, 190, 1), rgba(11, 230, 91, 1), rgba(255, 179, 0, 1), rgba(255, 3, 3, 1));
border-radius: 20px;
overflow: hidden;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
margin-bottom: 15px;
}
.separator {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #333;
opacity: 0.7;
z-index: 10;
}
.separator:nth-child(1) { left: calc((600 - 100) / 1100 * 100%); } /* Position at 600 */
.separator:nth-child(2) { left: calc((800 - 100) / 1100 * 100%); } /* Position at 800 */
.marker {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background: radial-gradient(circle at center, #f1c40f 0%, #f39c12 70%);
color: #222;
font-weight: bold;
font-size: 0.9em;
border: 3px solid rgba(255, 235, 59, 0.8);
border-radius: 50%;
box-shadow: 0 0 12px rgba(255, 223, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.3);
transform: translateX(-50%);
text-align: center;
}
.scales {
position: relative;
font-size: 0.8em;
color: #ffffff;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding-top: 5px;
}
.scale-tick {
position: absolute;
width: 1px;
height: 10px;
background-color: #ffffff;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.scale-tick-label {
position: absolute;
transform: translateX(-50%);
margin-top: 4px;
font-size: 0.75em;
color: #ccc;
}
static styles = css`
ha-card {
padding: 15px; /* Reduced padding */
box-sizing: border-box;
}
.main-container {
display: flex;
align-items: center;
width: 100%;
color: #ffffff;
background-color: #2c2c2e;
border-radius: 10px;
padding: 10px 10px; /* Reduced top and bottom padding */
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
position: relative;
box-sizing: border-box;
}
.main-container::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 16px;
border: 2px solid rgba(100, 100, 255, 0.5);
pointer-events: none;
box-sizing: border-box;
}
.update-container {
font-size: 0.8em;
color: #ccc;
padding-right: 10px;
flex-shrink: 0;
min-width: 90px;
text-align: left;
}
.chart-container {
text-align: center;
position: relative;
width: 100%;
padding: 0 10px;
margin: 0 auto;
box-sizing: border-box;
}
.section-names {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0.9em;
color: #ffffff;
padding: 0 10px;
box-sizing: border-box;
position: relative;
}
.section-seeding {
flex: 1;
text-align: left;
padding-left: 5%;
}
.section-vegetation {
position: absolute;
left: 54%;
transform: translateX(-50%);
font-size: 0.9em;
color: #ffffff;
}
.section-flowering {
flex: 1;
text-align: right;
padding-right: 5%;
}
.chart-bar {
width: 100%;
height: 40px;
position: relative;
background: linear-gradient(to right, rgba(0, 9, 255, 1), rgba(4, 219, 190, 1), rgba(11, 230, 91, 1), rgba(255, 179, 0, 1), rgba(255, 3, 3, 1));
border-radius: 20px;
overflow: hidden;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}
.separator {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #333;
opacity: 0.7;
z-index: 10;
}
.separator:nth-child(1) { left: calc((600 - 100) / 1100 * 100%); }
.separator:nth-child(2) { left: calc((800 - 100) / 1100 * 100%); }
.marker {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
background: radial-gradient(circle at center, #f1c40f 0%, #f39c12 70%);
color: #222;
font-weight: bold;
font-size: 0.9em;
border: 3px solid rgba(255, 235, 59, 0.8);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 223, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.3);
transform: translateX(-50%);
text-align: center;
}
.scales {
position: relative;
font-size: 0.8em;
color: #ffffff;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding-top: 4px;
}
.scale-tick {
position: absolute;
width: 1px;
height: 10px;
background-color: #ffffff;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.scale-tick-label {
position: absolute;
transform: translateX(-50%);
margin-top: 2px;
font-size: 0.7em;
color: #ccc;
}
`;

setConfig(config) {
Expand Down Expand Up @@ -251,7 +251,7 @@ class PPFDCustomCard extends LitElement {
<div class="main-container">
<div class="update-container">
<div><a href="https://github.com/maziggy/ppfdChart/" target=_blank style="text-decoration: none; color: inherit;"><u><b>ppfdChart</u></b></a></div>
<div><br>Last Updated:<br><span id="update-time">Just now</span></div>
<div><br>Last Changed:<br><span id="update-time">Just now</span></div>
<div><br>PPFD in µmol/m²s</div>
</div>
<div class="chart-container">
Expand Down

0 comments on commit 0e52779

Please sign in to comment.