Skip to content

Commit

Permalink
🖍 System UI updates (#30279)
Browse files Browse the repository at this point in the history 
* System UI adjustments.

* Update icons

* Revise css

* Remove extra whitespace.

* Remove extra whitespace.

* Importants.

* Fix css RTL targeting of EQ.

* Border-box for padding.
  • Loading branch information
@processprocess
processprocess committed Sep 18, 2020
1 parent 84d47a1 commit 32579ce
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 29 deletions.
61 changes: 33 additions & 28 deletions extensions/amp-story/1.0/amp-story-system-layer.css
View file
Expand Up @@ -18,20 +18,22 @@


.i-amphtml-story-system-layer {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent) !important;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), transparent) !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 56px !important; /* 6px progress bar + 48px icons + 2px margin */
opacity: 1 !important;
height: 54px !important;
z-index: 100000 !important;
box-sizing: border-box !important;
transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
pointer-events: none !important;
font-family: 'Roboto', sans-serif !important;
}

[desktop] .i-amphtml-story-system-layer {
height: 96px !important;
}

.i-amphtml-story-bookend-active.i-amphtml-story-system-layer {
opacity: 0.3 !important;
z-index: 1 !important;
Expand All @@ -52,10 +54,15 @@
}

.i-amphtml-story-system-layer-buttons {
margin-top: 8px; /* 6px progress bar + 2px margin */
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
padding-top: 6px !important;
box-sizing: border-box !important;
}

[desktop] .i-amphtml-story-system-layer-buttons {
padding: 8px 4px 0 !important;
}

.i-amphtml-story-button {
Expand All @@ -64,23 +71,20 @@
height: 48px !important;
width: 48px !important;
cursor: pointer !important;
border-radius: 50% !important;
border-width: 0 !important;
box-sizing: border-box !important;
position: relative !important;
border: none !important;
pointer-events: auto !important;

/* for svg backgrounds: */
background: center center no-repeat !important;
background-size: 30px 30px !important;
}

.i-amphtml-story-button:active {
/* TODO(alanorozco): do we want material ripple effect? */
background-color: rgba(0, 0, 0, 0.2) !important;
[desktop] .i-amphtml-story-button {
margin: 0 4px !important;
background-size: auto !important;
}

.i-amphtml-story-system-layer .i-amphtml-story-button {
float: left !important;
.i-amphtml-story-button:active {
background-color: rgba(0, 0, 0, 0.2) !important;
}

.i-amphtml-story-progress-bar {
Expand Down Expand Up @@ -215,7 +219,7 @@
.i-amphtml-story-mute-audio-control,
.i-amphtml-story-unmute-audio-control,
.i-amphtml-paused-display,
.i-amphtml-story-pause-control,
.i-amphtml-story-pause-control,
.i-amphtml-story-play-control,
.i-amphtml-story-mute-text,
.i-amphtml-story-unmute-sound-text,
Expand All @@ -233,7 +237,7 @@
display: block !important;
}

.i-amphtml-story-desktop-panels .i-amphtml-paused-display, .i-amphtml-story-desktop-fullbleed .i-amphtml-paused-display {
[desktop] .i-amphtml-paused-display {
display: block !important;
}

Expand All @@ -259,38 +263,40 @@
}

.i-amphtml-story-unmute-audio-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M7.4,6L6,7.4l5.3,5.3H6v6.7h4.4l5.6,5.6v-7.5l4.7,4.7c-0.7,0.6-1.6,1-2.5,1.3v2.3c1.5-0.3,2.9-1.1,4.1-2l2.3,2.3l1.4-1.4l-10-10L7.4,6z M23.2,18.9c0.4-0.9,0.6-1.9,0.6-2.9c0-3.5-2.3-6.5-5.6-7.5V6.3c4.5,1,7.8,5,7.8,9.7c0,1.7-0.4,3.2-1.1,4.6L23.2,18.9z M18.2,11.5C19.9,12.3,21,14,21,16c0,0.2,0,0.5-0.1,0.7L18.2,14V11.5z M13.7,9.4L16,7.1v4.6L13.7,9.4z"/></svg>') !important;
background-size: 28px 28px !important;
}

.i-amphtml-story-mute-audio-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M10.4,12.6L16,6.9v18.2l-5.6-5.7H6v-6.8H10.4z M21,16c0-2-1.1-3.8-2.8-4.6v9.2C19.9,19.8,21,18,21,16z M18.2,6v2.3c3.2,1,5.6,4,5.6,7.7c0,3.6-2.3,6.7-5.6,7.7V26c4.5-1,7.8-5.1,7.8-10C26,11.1,22.7,7,18.2,6z"/></svg>') !important;
background-size: 28px 28px !important;
}

.i-amphtml-story-pause-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M13.3,25.3H8V6.7h5.3V25.3z M18.7,25.3V6.7H24v18.7H18.7z"/></svg>') !important;
}

.i-amphtml-story-play-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M23.5211 16.335L9 25.67V7L23.5211 16.335Z"/></svg>') !important;
}

.i-amphtml-story-sidebar-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') !important;
}

.i-amphtml-story-share-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/></svg>') !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 32 32" fill="#FFFFFF"><path d="M20,20.8c0.5-0.5,1.2-0.8,2-0.8c1.7,0,3,1.3,3,3s-1.3,3-3,3s-3-1.3-3-3c0-0.2,0-0.5,0.1-0.7l-7-4.1c-0.5,0.5-1.2,0.8-2,0.8c-1.7,0-3-1.3-3-3s1.3-3,3-3c0.8,0,1.5,0.3,2,0.8l7-4.1C19,9.5,19,9.2,19,9c0-1.7,1.3-3,3-3s3,1.3,3,3s-1.3,3-3,3c-0.8,0-1.5-0.3-2-0.8l-7,4.1c0,0.2,0.1,0.5,0.1,0.7s0,0.5-0.1,0.7L20,20.8z M23,9c0-0.5-0.5-1-1-1s-1,0.5-1,1s0.5,1,1,1S23,9.5,23,9z M10,17c-0.5,0-1-0.5-1-1s0.5-1,1-1s1,0.5,1,1S10.5,17,10,17z M21,23c0,0.5,0.5,1,1,1s1-0.5,1-1s-0.5-1-1-1S21,22.5,21,23z" fill-rule="evenodd"/></svg>') !important;
}

[ios] .i-amphtml-story-share-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M16 5l-1.42 1.42-1.59-1.59V16h-1.98V4.83L9.42 6.42 8 5l4-4 4 4zm4 5v11c0 1.1-.9 2-2 2H6c-1.11 0-2-.9-2-2V10c0-1.11.89-2 2-2h3v2H6v11h12V10h-3V8h3c1.1 0 2 .89 2 2z"/></svg>') !important;
/** Visual hack to make the icon looks aligned. */
background-position-y: calc(50% - 2px) !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path fill="white" d="M15.6665 4.58329L14.3648 5.88496L12.9073 4.42746V14.6666H11.0923V4.42746L9.63484 5.88496L8.33317 4.58329L11.9998 0.916626L15.6665 4.58329ZM19.3332 9.16663V19.25C19.3332 20.2583 18.5082 21.0833 17.4998 21.0833H6.49984C5.48234 21.0833 4.6665 20.2583 4.6665 19.25V9.16663C4.6665 8.14913 5.48234 7.33329 6.49984 7.33329H9.24984V9.16663H6.49984V19.25H17.4998V9.16663H14.7498V7.33329H17.4998C18.5082 7.33329 19.3332 8.14913 19.3332 9.16663Z"/></svg>') !important;
background-size: auto !important;
}

.i-amphtml-story-info-control {
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 48 48" fill="#FFFFFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z"/></svg>') !important;
background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M11.1,7.3h1.9v1.9h-1.9V7.3z M11.1,11.1h1.9v5.7h-1.9V11.1z M12,2.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S17.2,2.5,12,2.5z M12,19.6c-4.2,0-7.6-3.4-7.6-7.6S7.8,4.4,12,4.4s7.6,3.4,7.6,7.6S16.2,19.6,12,19.6z"/></svg>') !important;
display: none !important;
background-size: auto !important;
}

.i-amphtml-story-has-new-page-notification-container {
Expand Down Expand Up @@ -398,8 +404,7 @@
transform-origin: right !important;
}

.i-amphtml-story-desktop-panels .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar,
.i-amphtml-story-desktop-fullbleed .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
[desktop] .i-amphtml-progress-bar-overflow .i-amphtml-story-page-progress-bar {
width: 3px !important;
}

Expand Down
3 changes: 3 additions & 0 deletions extensions/amp-story/1.0/amp-story-system-layer.js
View file
Expand Up @@ -731,12 +731,15 @@ export class SystemLayer {

shadowRoot.classList.remove('i-amphtml-story-desktop-fullbleed');
shadowRoot.classList.remove('i-amphtml-story-desktop-panels');
shadowRoot.removeAttribute('desktop');

switch (uiState) {
case UIType.DESKTOP_PANELS:
shadowRoot.setAttribute('desktop', '');
shadowRoot.classList.add('i-amphtml-story-desktop-panels');
break;
case UIType.DESKTOP_FULLBLEED:
shadowRoot.setAttribute('desktop', '');
shadowRoot.classList.add('i-amphtml-story-desktop-fullbleed');
break;
}
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-story/1.0/amp-story.css
View file
Expand Up @@ -664,7 +664,7 @@ amp-story .amp-video-eq,
bottom: 12px !important;
}

[dir=rtl]amp-story .amp-video-eq,
[dir=rtl] amp-story .amp-video-eq,
[dir=rtl] .i-amphtml-story-spinner {
left: 12px !important;
right: auto !important;
Expand Down

0 comments on commit 32579ce

Please sign in to comment.