Plex Dark Small Static Control Bar のソースコード

Plex Dark Small Static Control Bar

Keeps a small control bar always on screen during playback, dark color
右端で折り返す
/* ==UserStyle==
@name           Plex Dark Small Static Control Bar
@namespace      imadedis
@author         imadedis
@description    Keeps a small control bar always on screen during playback, dark color
@version        0.0.4
@license        MIT
==/UserStyle== */
@-moz-document url-prefix("https://app.plex.tv/"), url-prefix("https://app.plex.tv"), regexp("https?://.*:32400/.*"), regexp(".*:32400/.*"){

/* static controlbar */
[class^='AudioVideoFullPlayer-bottomBar'] {
    bottom: 0px !important;
    height: 25px !important;
    transform: translateY(0px) !important;
}

/* controlbar */
[class^='ControlsContainer-controlsContainer'] {
    height: 100%;
    padding-top: 0%;
}    
    
[class^='PlayerControls-volumeSlider'] {
    height: 65%;
    bottom: unset;
}

div[class*='VerticalSlider-track'] {
    width: 3px;}

[class^='PlayerControlsMetadata'] {
    display: inline-flex;
    align-items: baseline;
    }

    [class^='MetadataPosterTitle-singleLineTitle'] {
padding-right: 10px;
}

[class^='PlayerControls-buttonGroupCenter'] {
    margin: 0;
}

[class^='Player-miniPlayerContainer']>div {
    bottom: 0px !important;
}    
    
/* move subtitles */

.libjass-subs,
libjass-subs:active {
    height: 100% !important;
}

/* move subtitles (optional) */

/*
.Subtitles-measure-3cYuWS {}
    top: -10% !important; 
*/


/* color controlbar*/
[class^='PlayerIconButton'] {
    background-color: transparent;
}

[class^='BottomBar-bottomBar'] {
    background-color: transparent;
}
    
div[class^='SeekBar-seekBarBuffer'] {
    background-color: rgba(194, 194, 194, 0.4);
}

div[class^='SeekBar-seekBarFill'] {
    background-color: rgba(255, 255, 255, .4);
}

div[class^='VolumeSlider-fill'] {
    background-color: #C3C3C3;
}

/* color AudioVideoFullPlayer-videoTopBar-LTn8L6 */
    
div[class*='AudioVideoFullPlayer-videoTopBar'] {
    background-color: transparent;
}    
    
/* color PlayPauseOverlay-playCircle-1xl6BG PlayButton-playCircle */    
    
svg[class^='Play'] {
    background-color: transparent !important;
    border-color: #C3C3C3 !important;
    box-shadow: none !important;
}

/* options container */

div[class*='AudioVideoStripeContainer-container'] {
    bottom: 0% !important;
/*     background-color: transparent;  */
}

[class*='IconButton-isActive'] {
    color:grey !important;
}

[class*='isSelected'] {
    color:white;
    border-color:white;
}

div[class*='selectedIcon'] {
    color:white !important;
}
}