mirror of
https://github.com/CTalvio/Ultrachromic
synced 2026-01-15 13:52:53 -03:00
rounding fixes
This commit is contained in:
Casper Talvio
307
WIP.css
Normal file
307
WIP.css
Normal file
@@ -0,0 +1,307 @@
|
||||
/*From Mono*/
|
||||
/*Modified item status progress bar, play and item menu buttons*/
|
||||
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
|
||||
border-radius: 0px !important;
|
||||
background: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.itemProgressBar {
|
||||
height: 2000em;
|
||||
background: #0000;
|
||||
}
|
||||
.playbackProgress>div {
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
.transcodingProgress>div, .itemProgressBarForeground {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.innerCardFooter.fullInnerCardFooter.innerCardFooterClear {
|
||||
border-radius: 0px !important;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
/*Some themeing for the dashboard*/
|
||||
|
||||
#user_usage_report_table,
|
||||
.detailTable {
|
||||
background: rgba(0,0,0,.5);
|
||||
}
|
||||
.detailTableBodyRow-shaded {
|
||||
background: #0000 !important;
|
||||
}
|
||||
|
||||
.infoBanner {
|
||||
background: #101010;
|
||||
}
|
||||
.navMenuOptionText {
|
||||
margin-top: 0;
|
||||
}
|
||||
.backgroundProgress > div {
|
||||
background-color: #0000;
|
||||
}
|
||||
|
||||
.visualCardBox, .cardImageContainer {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
||||
background: rgba(120, 120, 120, 0.6);
|
||||
}
|
||||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.dashboardSection h3 {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.sessionCardFooter {
|
||||
border: none;
|
||||
}
|
||||
.paperList,
|
||||
.visualCardBox {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.listItem-border {
|
||||
border-color: rgba(255, 255, 255, 0) !important;
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid rgba(40, 40, 40, 0.8);
|
||||
border-radius: 0.4em;
|
||||
}
|
||||
|
||||
/*Color theming*/
|
||||
|
||||
/*Theme process progress ring*/
|
||||
.progressring-spiner {
|
||||
border-color: rgba(var(--accent));
|
||||
border-width: .35em;
|
||||
}
|
||||
.progressring {
|
||||
margin: .4em;
|
||||
}
|
||||
.progressring-bg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/*Theme user setting tab buttons*/
|
||||
div[data-role="controlgroup"] a.ui-btn-active {
|
||||
background: rgba(0, 0, 0, 0.5) !important;
|
||||
color: white !important;
|
||||
}
|
||||
a[data-role="button"]:hover {
|
||||
background: rgba(80, 80, 80, 0.8) !important;
|
||||
}
|
||||
|
||||
div[data-role=controlgroup] a[data-role=button]+a[data-role=button] {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/*Theme media player*/
|
||||
|
||||
.mdl-slider-background-lower {
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.mdl-slider::-ms-thumb {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
.iconOsdProgressInner {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
.videoOsdBottom {
|
||||
background: rgba(0,0,0,.7);
|
||||
}
|
||||
.skinHeader-withBackground.osdHeader {
|
||||
background: rgba(0,0,0,.7) !important;
|
||||
}
|
||||
|
||||
/*Theme buttons and cards*/
|
||||
|
||||
#itemDetailPage .button-link {color: inherit !important;}
|
||||
|
||||
/*From Kaleido*/
|
||||
/*Cosmetic fixes for quirks (drop down padding and dialogue hover rounding)*/
|
||||
.detailTrackSelect {
|
||||
padding-left: .2em !important;
|
||||
}
|
||||
@media all and (max-width: 100em){
|
||||
.detailTrackSelect {
|
||||
padding-left: .5em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.actionSheetMenuItem:hover {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.itemsContainer>.card>.cardBox {
|
||||
margin-left: 0.6em !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 131.25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(6.3vw - 1.2em) !important;
|
||||
height: calc(6.3vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 120em) and (max-width: 131.25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(6.4vw - 1.2em) !important;
|
||||
height: calc(6.4vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 100em) and (max-width: 120em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(7.6vw - 1.2em) !important;
|
||||
height: calc(7.6vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 87.5em) and (max-width: 100em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(9.3vw - 1.2em) !important;
|
||||
height: calc(9.3vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 75em) and (max-width: 87.5em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(10.5vw - 1.2em) !important;
|
||||
height: calc(10.5vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 50em) and (max-width: 75em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(15vw - 1.2em) !important;
|
||||
height: calc(15vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 43.75em) and (max-width: 50em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(20.1vw - 1.2em) !important;
|
||||
height: calc(20.1vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 25em) and (max-width: 43.75em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(31.2vw - 1.2em) !important;
|
||||
height: calc(31.2vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 25em){
|
||||
#castContent .cardScalable {
|
||||
width: calc(40vw - 1.2em) !important;
|
||||
height: calc(40vw - 1.2em) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*Style backdrop*/
|
||||
.backdropImage {
|
||||
filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
|
||||
}
|
||||
@media all and (max-width: 32em) {
|
||||
.itemBackdrop {
|
||||
filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
|
||||
}
|
||||
}
|
||||
|
||||
/*From Nova*/
|
||||
/*Various themeing*/
|
||||
#itemDetailPage .emby-select-withcolor {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.pageTitleWithDefaultLogo {
|
||||
background-image: url(../../jellyfin/web/assets/img/banner-dark.png);
|
||||
}
|
||||
|
||||
.backdropImage {
|
||||
filter: blur(22px) saturate(95%) contrast(15%) brightness(155%);
|
||||
}
|
||||
.infoBanner {
|
||||
color: #000;
|
||||
background: #eaeaea;
|
||||
}
|
||||
#indexPage .transcodingProgress > div, #indexPage .itemProgressBarForeground {
|
||||
background-color: rgba(var(--accent),0.35);
|
||||
}
|
||||
|
||||
/*Accenting*/
|
||||
|
||||
.ratingbutton-icon-withrating,
|
||||
.playstatebutton-icon-played {
|
||||
color: rgba(var(--accent)) !important;
|
||||
}
|
||||
|
||||
.countIndicator {
|
||||
background: rgba(var(--accent),0.8);
|
||||
}
|
||||
|
||||
.button-flat:hover {
|
||||
background: rgba(var(--accent),0.55);
|
||||
}
|
||||
.paper-icon-button-light:hover {
|
||||
background-color: rgba(var(--accent),0.55) !important;
|
||||
}
|
||||
|
||||
.raised,
|
||||
.fab,
|
||||
a[data-role="button"] {
|
||||
background: rgba(var(--accent), 0.8) !important;
|
||||
transition: all 0.2s !important;
|
||||
}
|
||||
|
||||
.raised.homeLibraryButton {
|
||||
box-shadow: none !important;
|
||||
border: solid 1px rgba(var(--accent),0) !important;
|
||||
}
|
||||
.cardOverlayContainer:hover,
|
||||
.dialog,
|
||||
.toast,
|
||||
.raised.homeLibraryButton:hover {
|
||||
box-shadow: none !important;
|
||||
border: solid 1px rgba(var(--accent),0.6) !important;
|
||||
}
|
||||
.cardOverlayContainer {
|
||||
border: solid 1px rgba(var(--accent),0.0) !important;
|
||||
}
|
||||
|
||||
.emby-checkbox:checked + span + .checkboxOutline,
|
||||
.emby-input:focus,
|
||||
.emby-textarea:focus,
|
||||
.emby-select-withcolor:focus,
|
||||
.itemSelectionPanel {
|
||||
background: rgba(var(--accent), 0.25) !important;
|
||||
}
|
||||
.checkboxIcon {
|
||||
color: rgba(var(--accent));
|
||||
}
|
||||
|
||||
/*Colors for loading spinner and other stuff*/
|
||||
.mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);}
|
||||
.mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);}
|
||||
.mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);}
|
||||
.mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);}
|
||||
|
||||
|
||||
.defaultCardBackground1 {
|
||||
background-color: rgba(var(--accent), .5);
|
||||
}
|
||||
.defaultCardBackground2 {
|
||||
background-color: rgba(var(--accent), .4);
|
||||
}
|
||||
.defaultCardBackground3 {
|
||||
background-color: rgba(var(--accent), .8);
|
||||
}
|
||||
.defaultCardBackground4 {
|
||||
background-color: rgba(var(--accent), .7);
|
||||
}
|
||||
.defaultCardBackground5 {
|
||||
background-color: rgba(var(--accent), .6);
|
||||
}
|
||||
Reference in New Issue
Block a user