From 42db5c489afe54176a47c436b3fa63f7099f22f8 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 30 Jul 2022 10:27:08 -0700 Subject: [PATCH] Restyle integration alert bar (#23579) --- sass/custom/_paulus.scss | 94 +++++++++++++++++++----------- source/_integrations/nest.markdown | 11 +++- source/_layouts/page.html | 12 +++- 3 files changed, 77 insertions(+), 40 deletions(-) diff --git a/sass/custom/_paulus.scss b/sass/custom/_paulus.scss index 26be359bce4..7ac6c619d7d 100644 --- a/sass/custom/_paulus.scss +++ b/sass/custom/_paulus.scss @@ -41,15 +41,37 @@ $primary-color: #049cdb; } } -.integration-alert { +.integration-alert-container { margin: -1em 0; - background-color: wheat; - padding: 4px; +} - a { - text-decoration: none !important; +a.integration-alert { + margin: 1em 0; + background-color: wheat; + padding: 8px; + text-decoration: none !important; + display: flex; + align-items: center; + color: black; + + svg { + width: 24px; + margin-right: 8px; } + .content { + flex: 1; + } + + .learn-more { + padding: 4px 6px; + border-radius: 2px; + font-size: .8em; + + &:hover { + background-color: rgba(0, 0, 0, .12); + } + } } @media only screen and (max-width: $menu-collapse) { @@ -136,6 +158,7 @@ $primary-color: #049cdb; box-shadow: none; border: 1px solid rgba(0, 0, 0, .12); border-radius: 4px; + h4 { margin: 0 0 8px !important; @@ -144,6 +167,7 @@ $primary-color: #049cdb; color: #000; } } + .links a { font-weight: 400; text-transform: none; @@ -186,12 +210,13 @@ $primary-color: #049cdb; background-color: lighten(#038fc7, 10%); } } + .events { padding: 16px; - + h3 { margin-top: 8px; - } + } .event { display: flex; @@ -199,28 +224,28 @@ $primary-color: #049cdb; align-items: center; text-decoration: none; color: inherit; - + .caption { padding: 0 12px; max-width: 450px; } - + .title { font-size: 20px; font-weight: 400; } - + .secondary { color: rgba(0, 0, 0, 0.54); font-size: 14px; font-weight: 500; } - + .subtitle { font-size: 12px; font-weight: initial; } - + img { width: 200px; height: 100%; @@ -282,9 +307,9 @@ $primary-color: #049cdb; } .sponsors-and-press { - margin-top:24px; + margin-top: 24px; } - + .sponsored-by { img { border: 0; @@ -293,10 +318,10 @@ $primary-color: #049cdb; margin: 15px; max-width: 40%; max-height: 80px; - } + } } - + .seen-press { img { @@ -324,10 +349,10 @@ $primary-color: #049cdb; } img { - width: 100%; - } + width: 100%; + } } - } +} // https://fortawesome.github.io/Font-Awesome/3.2.1/icons/ @@ -365,7 +390,7 @@ dt:hover a.title-link { margin-right: 10px; } - a > * { + a>* { vertical-align: middle; } } @@ -408,8 +433,8 @@ article.listing { box-shadow: none; } - & > table, - & > .entry-content > table { + &>table, + &>.entry-content>table { background-color: #f3fcf5; } @@ -431,7 +456,7 @@ article.listing { li { margin-bottom: 10px; - & > p:last-child { + &>p:last-child { margin-bottom: 0; } @@ -448,8 +473,7 @@ article.listing { } } - h1 { - } + h1 {} h2 { font-size: 1.5em; @@ -562,17 +586,19 @@ div.note { li.toc-entry { list-style-type: none; + li { list-style-type: circle; margin-left: 1em; } + ul { margin-left: 1em; } } } - } + } .brand-logo-container { text-align: center; @@ -594,7 +620,7 @@ lite-youtube { position: relative; display: block; padding-bottom: calc(100% / (16 / 9)); - background-color: rgba(0,0,0,.1); + background-color: rgba(0, 0, 0, .1); } lite-youtube::before { @@ -610,7 +636,8 @@ lite-youtube::before { // https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .videoWrapper { position: relative; - padding-bottom: 56.25%; /* 16:9 */ + padding-bottom: 56.25%; + /* 16:9 */ height: 0; margin-bottom: 25px; background: #000; @@ -773,10 +800,8 @@ code { hyphens: none; background-color: #fdfdfd; - background-image: linear-gradient( - transparent 50%, - rgba(69, 142, 209, 0.04) 50% - ); + background-image: linear-gradient(transparent 50%, + rgba(69, 142, 209, 0.04) 50%); background-size: 3em 3em; background-origin: content-box; background-attachment: local; @@ -812,6 +837,7 @@ code { } } } + footer { position: absolute; bottom: 0; @@ -829,6 +855,6 @@ a.my { :target { display: block; position: relative; - top: -100px; + top: -100px; visibility: hidden; -} \ No newline at end of file +} diff --git a/source/_integrations/nest.markdown b/source/_integrations/nest.markdown index e84290c8799..ac12be83ece 100644 --- a/source/_integrations/nest.markdown +++ b/source/_integrations/nest.markdown @@ -26,9 +26,14 @@ ha_platforms: ha_integration_type: integration --- -
-⚠️ Nest authentication is changing. Existing users click here to learn more -
+ + +
Existing users: Nest authentication is changing.
+
LEARN MORE
+ + The `nest` integration allows you to integrate your [Google Nest](https://store.google.com/us/category/connected_home?) devices in Home Assistant. This integration uses the [Smart Device Management](https://developers.google.com/nest/device-access/api) API and Google's Cloud Pubsub to efficiently listen for changes in device state or other events. See [Supported Devices](https://developers.google.com/nest/device-access/supported-devices) for all devices supported by the SDM API. diff --git a/source/_layouts/page.html b/source/_layouts/page.html index 7381c7161c2..7d320b83a06 100644 --- a/source/_layouts/page.html +++ b/source/_layouts/page.html @@ -20,8 +20,14 @@ layout: default {% endfor %} {% endfor %} {% if active_alert != "" %} -
- ⚠️ There is an active alert for this integration! +
+ + +
There is an active alert for this integration!
+
LEARN MORE
+
{% endif %} {% endif %} @@ -30,4 +36,4 @@ layout: default {{ content }} {% include feedback.html %} - \ No newline at end of file +