From 135400b7a2f61b2b026174b84258fab067ebcf1a Mon Sep 17 00:00:00 2001 From: Steve Orvell Date: Fri, 11 Oct 2013 12:55:32 -0700 Subject: [PATCH] modernize you-tube app --- youtube/index.html | 5 +-- youtube/src/css/yt-app.css | 57 ++++++++++------------------- youtube/src/elements.html | 14 ++++++++ youtube/src/yt-app.html | 65 ++++++++++++++++------------------ youtube/src/yt-videopanel.html | 42 ---------------------- 5 files changed, 66 insertions(+), 117 deletions(-) create mode 100644 youtube/src/elements.html delete mode 100644 youtube/src/yt-videopanel.html diff --git a/youtube/index.html b/youtube/index.html index 9657f6f..4b5b31d 100644 --- a/youtube/index.html +++ b/youtube/index.html @@ -11,9 +11,10 @@ YouTube + - - + + diff --git a/youtube/src/css/yt-app.css b/youtube/src/css/yt-app.css index cecf28f..4765041 100644 --- a/youtube/src/css/yt-app.css +++ b/youtube/src/css/yt-app.css @@ -3,28 +3,25 @@ * Use of this source code is governed by a BSD-style * license that can be found in the LICENSE file. */ -#panels { - -webkit-box-flex: 1; - -webkit-flex: 1; - flex: 1; - min-height: 0; - -webkit-user-select: none; +@host { + :scope { + font-family: 'Helvetica Neue', Helvetica, Arial, 'open sans', sans-serif; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } } -#panels > * { +[main] { + position: absolute !important; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: white; + overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.5); background: white; } -#videoPanel { - display: -webkit-box; - display: -webkit-flex; - display: flex; - -webkit-box-orient: vertical; - -webkit-flex-flow: column; - flex-direction: column; -} - #listPanel { width: 360px; display: -webkit-box; @@ -38,30 +35,11 @@ color: white; } -#listPanel.narrow-layout { - left: 0; - right: 60px; - width: auto; -} - -#morePanel { - right: 0; - left: auto; - width: 200px; - padding: 20px; - color: #EBEBEB; - background: #333; -} - -.list { +#list { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; display: block; - /* - TODO(sorvell): styling changes due to tabIndex=-1 on panels - must isolate. Use max-height to avoid scrolling being compeltely broken. - */ max-height: 100%; min-height: 0; overflow: auto; @@ -73,7 +51,8 @@ input { -webkit-flex: 1; flex: 1; -webkit-appearance: none; - background: whitesmoke; + color: white; + background-color: transparent; opacity: 0.8; font-size: 18px; padding: 0 16px; @@ -95,6 +74,6 @@ input { cursor: pointer; } -.item.selected { - background-color: #777; +.item.polymer-selected { + background-color: #000; } diff --git a/youtube/src/elements.html b/youtube/src/elements.html new file mode 100644 index 0000000..e53558d --- /dev/null +++ b/youtube/src/elements.html @@ -0,0 +1,14 @@ + + + + + + + + \ No newline at end of file diff --git a/youtube/src/yt-app.html b/youtube/src/yt-app.html index 01371d9..7e4d95c 100644 --- a/youtube/src/yt-app.html +++ b/youtube/src/yt-app.html @@ -5,50 +5,47 @@ * license that can be found in the LICENSE file. */ --> - - - - - - - - - - + + diff --git a/youtube/src/yt-videopanel.html b/youtube/src/yt-videopanel.html deleted file mode 100644 index 6500021..0000000 --- a/youtube/src/yt-videopanel.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - -