omnidevZero / YouTubeRedux

Browser extension that focuses on restoring old YouTube layout within Polymer design (modern layout).
175 stars 11 forks source link

CSS for older style player play/pause bezel #177

Open TorutheRedFox opened 1 year ago

TorutheRedFox commented 1 year ago
.ytp-bezel {
    display: block;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    background: rgba(0,0,0,0.5);
    border-radius: 3px;
}

.ytp-bezel {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    zoom: 1;
    -moz-transition: background-color .3s ease-in-out,background-image .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out,background-image .3s ease-in-out;
    transition: background-color .3s ease-in-out,background-image .3s ease-in-out;
}

.ytp-bezel-icon > svg {
    display: none;
}

.ytp-bezel[aria-label="Pause"] > .ytp-bezel-icon {
    margin: 18px 20px;
    width: 5px;
    height: 23px;
    border-right: 8.5px solid #fff;
    border-left: 8.5px solid #fff;
}

.ytp-bezel[aria-label="Play"] > .ytp-bezel-icon {
    margin: 18px 20px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 23px solid white;
}