Skip to content

Commit

Permalink
Merge pull request #120 from The0x539/svg-inner-corner
Browse files Browse the repository at this point in the history 
Replace border-based inner corners with SVGs
  • Loading branch information
@th3jesta
th3jesta authored Oct 14, 2024
2 parents 2d433a1 + 343ae77 commit ea3da10
Showing 1 changed file with 69 additions and 88 deletions.
157 changes: 69 additions & 88 deletions themes/lcars.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,23 +318,14 @@
/* Common Header Styles */
/* ----------------------------------------------- */
ha-card:is(.header-left, .header-right, .header-contained, .header-open) {
background: var(--lcars-card-top-color); /* used for the inner corner */
background: none;
text-transform: uppercase;
--primary-text-color: var(--lcars-text-gray);
border-radius: 0;
border-top: var(--lcars-horizontal-border) solid var(--lcars-card-top-color);
border-inline: 0px solid var(--lcars-card-top-color);
& > * {
background: black;
}
& > ha-ripple {
background: unset;
z-index: 10;
}
&.type-markdown,
& > ha-markdown.no-header {
padding-block: 0px !important;
Expand Down Expand Up @@ -370,25 +361,13 @@
ha-card.header-contained {
border-top-left-radius: var(--ha-card-border-radius);
border-left-width: var(--lcars-vertical-border);
& > ha-markdown,
&.type-thermostat > .title,
&.type-custom-html-card > div {
border-top-left-radius: var(--lcars-inner-radius);
}
}
/* ----------------Border on right---------------- */
ha-card.header-right,
ha-card.header-contained {
border-top-right-radius: var(--ha-card-border-radius);
border-right-width: var(--lcars-vertical-border);
& > ha-markdown.no-header,
&.type-thermostat > .title,
&.type-custom-html-card > div {
border-top-right-radius: var(--lcars-inner-radius);
}
}
/* =============================================== */
Expand All @@ -399,7 +378,7 @@
/* Common Middle Styles */
/* ----------------------------------------------- */
ha-card:is(.middle-left, .middle-right, .middle-contained, .middle-blank) {
background: black;
background: none;
text-transform: uppercase;
--primary-text-color: var(--lcars-text-gray);
border-radius: 0px;
Expand Down Expand Up @@ -451,28 +430,21 @@
/* Common Footer Styles */
/* ----------------------------------------------- */
ha-card:is(.footer-left, .footer-right, .footer-contained, .footer-open) {
background: var(--lcars-card-bottom-color); /* colors the inner corner */
background: none;
text-transform: uppercase;
--primary-text-color: var(--lcars-text-gray) !important;
margin-top: unset;
overflow: visible; /* fixes an aliasing bug with the inner corners on some cards for some reason */
border-radius: 0px;
border-bottom: var(--lcars-horizontal-border) solid var(--lcars-card-bottom-color);
border-inline: 0px solid var(--lcars-card-bottom-color);
& > * {
background: black;
}
& > ha-ripple {
background: unset;
z-index: 10;
}
& > span {
width: 100%;
margin-top: 0px;
padding-top: 80px;
padding-inline: 0;
}
& > #states {
Expand All @@ -493,16 +465,16 @@
}
&.type-thermostat {
border-bottom: 0px !important;
border-bottom-width: 0.01px;
& > .container {
width: 100%;
}
& > hui-card-features {
margin-top: 12px;
padding-top: 12px;
--primary-text-color: black;
background: none;
background: var(--lcars-card-bottom-color);
}
}
Expand Down Expand Up @@ -581,31 +553,9 @@
border-left-width: var(--lcars-vertical-border);
/* position: relative; */
& > span,
& > img,
& > .entities,
& > #states,
& > ha-markdown,
& > .content,
& > ha-state-icon,
& > .info,
&.type-thermostat > .container,
&.type-media-control .color-block,
&.type-media-control .no-img,
&.type-media-control .image,
&.type-custom-weather-card .variations,
&.type-custom-html-card > div,
&.type-custom-battery-state-card > div,
&.type-entity .footer {
border-bottom-left-radius: var(--lcars-inner-radius);
}
& > span {
padding-left: 0px;
}
& > img {
padding-left: 6px;
border-bottom-left-radius: var(--lcars-inner-radius);
}
& .type-custom-html-card > div {
Expand All @@ -619,37 +569,70 @@
border-bottom-right-radius: var(--ha-card-border-radius);
border-right-width: var(--lcars-vertical-border);
& > span,
& > img,
& > .entities,
& > #states,
& > ha-markdown,
& > .content,
& > ha-state-icon,
& > .info,
&.type-thermostat > .container,
&.type-media-control .color-block,
&.type-media-control .no-img,
&.type-media-control .image,
&.type-custom-weather-card .variations,
&.type-custom-html-card > div,
&.type-custom-battery-state-card > div,
&.type-entity .footer {
& > img {
padding-right: 6px;
border-bottom-right-radius: var(--lcars-inner-radius);
}
}
& > span {
padding-right: 0px;
}
/* ================================================*/
/* INNER CORNERS */
/* ================================================*/
& > img {
padding-right: 6px;
}
ha-card::before,
ha-card::after,
ha-card.type-thermostat > hui-card-features::before,
ha-card.type-thermostat > hui-card-features::after {
position: absolute;
width: var(--lcars-inner-radius);
height: var(--lcars-inner-radius);
mask-size: var(--lcars-inner-radius);
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"> <path d="m 0,0 v 10 A 10,10 0 0 1 10,0" fill="black" /> </svg>');
scale: var(--corner-scale-x, 1) var(--corner-scale-y, 1);
z-index: 1;
}
/* top left & bottom left */
ha-card::before {
left: 0;
}
/* top right & bottom right */
ha-card::after {
right: 0;
--corner-scale-x: -1;
}
/* -------------Border on neither side------------ */
ha-card.footer-open > span {
padding-inline: 0px;
/* top left & top right */
ha-card:is(.header-left, .header-contained)::before,
ha-card:is(.header-right, .header-contained)::after {
content: '';
background: var(--lcars-card-top-color);
top: 0;
}
/* bottom left & bottom right */
ha-card:is(.footer-left, .footer-contained)::before,
ha-card:is(.footer-right, .footer-contained)::after,
ha-card.type-thermostat:is(.footer-left, .footer-contained) > hui-card-features::before,
ha-card.type-thermostat:is(.footer-right, .footer-contained) > hui-card-features::after {
content: '';
background: var(--lcars-card-bottom-color);
bottom: 0;
--corner-scale-y: -1;
}
/* thermostat-specific fixes */
ha-card.type-thermostat > hui-card-features::before {
top: calc(-1 * var(--lcars-inner-radius));
left: 0;
}
ha-card.type-thermostat > hui-card-features::after {
top: calc(-1 * var(--lcars-inner-radius));
right: 0;
--corner-scale-x: -1;
}
/* =============================================== */
Expand Down Expand Up @@ -1152,10 +1135,8 @@
ha-card.type-custom-mushroom-select-card > * {
--mdc-shape-small: 0px;
}
ha-card.type-custom-mushroom-select-card,
ha-card.type-custom-mushroom-lock-card,
ha-card.type-custom-mushroom-number-card {
border-radius: 22px !important;
ha-card[class*=type-custom-mushroom-]:has(.actions):not(.header-left, .header-right, .header-contained, .footer-left, .footer-right, .footer-contained) {
border-radius: 22px;
}
ha-card.type-custom-mushroom-number-card > * {
--control-border-radius: 0px !important;
Expand Down

0 comments on commit ea3da10

Please sign in to comment.