Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update: Some UI changes for video player #128

Merged
merged 2 commits into from
May 19, 2017
Merged

Update: Some UI changes for video player #128

merged 2 commits into from
May 19, 2017

Conversation

bhh1988
Copy link
Contributor

@bhh1988 bhh1988 commented May 19, 2017

  1. Tabbing through settings menu no longer shows border over menu items
    (highlights instead). This is because borders/box-shadow/outline does
    not play well with table-rows on Safari and IE/Edge. Instead, we'll
    change background color.
  2. CC icon now changes background color to indicate that subtitles are
    on, instead of the previous white underline.
  3. Using overflow-y: auto so that scrollbar doesn't show on hover of
    settings menu in IE/Edge
  4. Using div instead of span for cc-text so I can size it, because using
    the span resulted in too short of a CC icon on IE/Edge.

.bp-media-controls-cc-icon-text {
background: $white;
border-radius: 3px;
background: rgba($black, .3); // Anything less than .3 looks too transparent on IE/Edge
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure if there are advantages/disadvantages over doing:

background: $black; opacity: .3;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

opacity affects the text inside too. We just want to affect the opacity of the background, so we do this instead.

.bp-media-settings-label {
color: $white;
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can combine these:
.bp-media-settings-label, .bp-media-settings-value { //styles that effect both }

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Bryan Huh and others added 2 commits May 19, 2017 14:03
1. Tabbing through settings menu no longer shows border over menu items
(highlights instead). This is because borders/box-shadow/outline does
not play well with table-rows on Safari and IE/Edge. Instead, we'll
change background color.
2. CC icon now changes background color to indicate that subtitles are
on, instead of the previous white underline.
3. Using overflow-y: auto so that scrollbar doesn't show on hover of
settings menu in IE/Edge
4. Using div instead of span for cc-text so I can size it, because using
the span resulted in too short of a CC icon on IE/Edge.
@bhh1988 bhh1988 merged commit 81802c1 into box:master May 19, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants