mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
Fix long more-info toolbar title. (#1034)
Max 2-lines. Ellipsis overflow on supported browsers.
This commit is contained in:
parent
7be6d17b37
commit
d87d845dbc
@ -20,6 +20,18 @@
|
|||||||
more-info-controls, more-info-settings {
|
more-info-controls, more-info-settings {
|
||||||
--more-info-header-background: var(--secondary-background-color);
|
--more-info-header-background: var(--secondary-background-color);
|
||||||
--more-info-header-color: var(--primary-text-color);
|
--more-info-header-color: var(--primary-text-color);
|
||||||
|
--ha-more-info-app-toolbar-title: {
|
||||||
|
/* Design guideline states 24px, changed to 16 to align with state info */
|
||||||
|
margin-left: 16px;
|
||||||
|
line-height: 1.3em;
|
||||||
|
max-height: 2.6em;
|
||||||
|
overflow: hidden;
|
||||||
|
/* webkit and blink still support simple multiline text-overflow */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* overrule the ha-style-dialog max-height on small screens */
|
/* overrule the ha-style-dialog max-height on small screens */
|
||||||
|
@ -18,8 +18,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
app-toolbar [main-title] {
|
app-toolbar [main-title] {
|
||||||
/* Design guideline states 24px, changed to 16 to align with state info */
|
@apply --ha-more-info-app-toolbar-title;
|
||||||
margin-left: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
state-card-content {
|
state-card-content {
|
||||||
@ -38,7 +37,6 @@
|
|||||||
.main-title {
|
.main-title {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
line-height: 64px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,8 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
app-toolbar [main-title] {
|
app-toolbar [main-title] {
|
||||||
/* Design guideline states 24px, changed to 16 to align with more-info-controls */
|
@apply --ha-more-info-app-toolbar-title;
|
||||||
margin-left: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
app-toolbar paper-button {
|
app-toolbar paper-button {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user