mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix no-descending-specificity (CSS)

Browse source
This commit is contained in:
MrTimscampi 2020-01-19 14:29:41 +01:00
parent ba8b34cd56
commit eef526df2c
13 changed files with 209 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/assets/css/dashboard.css
View file

@ -49,8 +49,9 @@ progress[aria-valuenow]:before {
@media all and (min-width:50em) {
.type-interior>.ui-panel-content-wrap>div[data-role=content],
.type-interior>div[data-role=content] {
.type-interior>div[data-role=content],
.type-interior>.ui-panel-content-wrap>div[data-role=content]
{
padding-right: 0;
padding-left: 0;
padding-top: 0;
@ -74,6 +75,22 @@ progress[aria-valuenow]:before {
height: 4em
}
a[data-role=button] {
background: #292929 !important;
background-clip: padding-box;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-webkit-background-clip: padding-box;
cursor: pointer !important;
font-family: inherit !important;
font-weight: 500 !important;
margin: 0 .25em !important;
display: inline-block;
padding: .8em 1em;
text-align: center;
text-decoration: none !important;
}
div[data-role=controlgroup] a[data-role=button] {
display: inline-block !important;
margin: 0 !important;
@ -107,6 +124,24 @@ div[data-role=controlgroup] a.ui-btn-active {
color: #292929 !important
}
.sessionAppInfo img {
max-width: 40px;
max-height: 40px;
margin-right: 8px;
}
.appLinks img {
height: 36px
}
.wizardContent h2 img {
height: 2.5em;
vertical-align: middle;
margin-right: .5em;
position: relative;
top: -.3em
}
.header .imageLink {
display: inline-block
}
@ -167,6 +202,18 @@ div[data-role=controlgroup] a.ui-btn-active {
flex-grow: 1
}
.sessionNowPlayingContent {
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.activeSession:not(.playingSession) .sessionNowPlayingContent {
display: none
}
@ -213,15 +260,6 @@ div[data-role=controlgroup] a.ui-btn-active {
}
}
.premiumBanner img {
position: absolute;
text-align: right;
top: 0;
right: 0;
width: 4.4em;
height: 4.4em
}
.wizardContent {
max-width: 62em;
padding: .5em 2em 1em;
@ -237,14 +275,6 @@ div[data-role=controlgroup] a.ui-btn-active {
max-width: 100%
}
.wizardContent h2 img {
height: 2.5em;
vertical-align: middle;
margin-right: .5em;
position: relative;
top: -.3em
}
.scheduledTaskPaperIconItem {
outline: 0 !important
}
@ -296,18 +326,6 @@ div[data-role=controlgroup] a.ui-btn-active {
margin: 0
}
.sessionNowPlayingContent {
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.sessionNowPlayingInnerContent {
position: absolute;
top: 0;
@ -340,12 +358,6 @@ div[data-role=controlgroup] a.ui-btn-active {
padding: 0.8em 0.5em;
}
.sessionAppInfo img {
max-width: 40px;
max-height: 40px;
margin-right: 8px;
}
.sessionNowPlayingTime {
flex-shrink: 0;
align-self: flex-end;
@ -357,6 +369,13 @@ div[data-role=controlgroup] a.ui-btn-active {
white-space: nowrap;
}
.playbackProgress,
.transcodingProgress {
margin: 0px;
width: 100%;
background: transparent !important;
}
.activeSession .playbackProgress,
.activeSession .transcodingProgress {
position: absolute;
@ -367,13 +386,6 @@ div[data-role=controlgroup] a.ui-btn-active {
width: 100%;
}
.playbackProgress,
.transcodingProgress {
margin: 0px;
width: 100%;
background: transparent !important;
}
.playbackProgress > div {
z-index: 1000;
background-color: #00a4dc;
@ -412,26 +424,6 @@ div[data-role=controlgroup] a.ui-btn-active {
margin-left: 5px
}
.appLinks img {
height: 36px
}
a[data-role=button] {
background: #292929 !important;
background-clip: padding-box;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-webkit-background-clip: padding-box;
cursor: pointer !important;
font-family: inherit !important;
font-weight: 500 !important;
margin: 0 .25em !important;
display: inline-block;
padding: .8em 1em;
text-align: center;
text-decoration: none !important;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0);

65
src/assets/css/librarybrowser.css
View file

@ -84,6 +84,22 @@
display: none
}
.headerLeft,
.headerRight {
justify-content: center;
}
.headerRight {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
.noHeaderRight .headerRight,
.noHomeButtonHeader .headerHomeButton {
display: none !important
@ -164,17 +180,6 @@
width: 100%
}
.headerRight {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
.selectedMediaFolder {
background-color: #f2f2f2 !important
}
@ -358,6 +363,11 @@
margin: 0 0 .25em
}
.listTopPaging,
.viewControls {
display: inline-block
}
.viewControls+.listTopPaging {
margin-left: .5em !important
}
@ -445,15 +455,6 @@
bottom: .75em
}
.layout-mobile .detailPagePrimaryContainer {
display: block;
position: relative;
}
.layout-tv .detailPagePrimaryContainer {
position: relative;
}
.detailPagePrimaryContainer {
display: flex;
align-items: center;
@ -464,6 +465,15 @@
z-index: 2;
}
.layout-mobile .detailPagePrimaryContainer {
display: block;
position: relative;
}
.layout-tv .detailPagePrimaryContainer {
position: relative;
}
.infoWrapper {
flex: 1 0 0;
}
@ -483,11 +493,6 @@
padding-right: 2%;
}
.layout-mobile .detailImageContainer,
.layout-tv .detailImageContainer {
position: relative;
}
.detailImageContainer {
margin: 1.25em 0;
position: sticky;
@ -496,6 +501,11 @@
width: 22.786458333333332vw;
}
.layout-mobile .detailImageContainer,
.layout-tv .detailImageContainer {
position: relative;
}
.detailPagePrimaryContent {
position: relative;
-webkit-box-flex: 1;
@ -741,11 +751,6 @@
}
}
.listTopPaging,
.viewControls {
display: inline-block
}
@media all and (max-width:50em) {
.editorMenuLink {
display: none

52
src/components/cardbuilder/card.css
View file

@ -1,12 +1,12 @@
button {
-webkit-border-fit: border !important;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
button {
-webkit-border-fit: border !important;
}
.card {
border: 0;
font-size: inherit !important;
@ -87,6 +87,11 @@ button {
contain: style;
}
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card.show-focus:not(.show-animation) .cardBox {
margin: .4em;
}
@ -96,11 +101,6 @@ button {
border: .5em solid transparent;
}
.card.show-animation .cardBox {
will-change: transform;
transition: transform 200ms ease-out;
}
.card.show-animation:focus > .cardBox {
transform: scale(1.18, 1.18);
}
@ -298,6 +298,23 @@ button {
padding-top: .24em;
}
.textActionButton {
border: 0 !important;
background: transparent;
padding: 0 !important;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none !important;
color: inherit;
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
.textActionButton:hover {
text-decoration: underline;
}
.cardText > .textActionButton {
width: 100%;
overflow: hidden;
@ -337,23 +354,6 @@ button {
text-align: center;
}
.textActionButton {
border: 0 !important;
background: transparent;
padding: 0 !important;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
outline: none !important;
color: inherit;
vertical-align: middle;
font-family: inherit;
font-size: inherit;
}
.textActionButton:hover {
text-decoration: underline;
}
.cardImageIcon {
font-size: 5em;
color: inherit;

8
src/components/guide/guide.css
View file

@ -123,6 +123,10 @@
width: 2.0833333333333333333333333333333%;
}
.programCell, .guide-channelHeaderCell {
outline: none !important;
}
.guide-channelHeaderCell, .guide-channelTimeslotHeader {
padding: 0 !important;
cursor: pointer;
@ -362,10 +366,6 @@
contain: layout style paint;
}
.programCell, .guide-channelHeaderCell {
outline: none !important;
}
.timerIcon, .seriesTimerIcon {
color: #cc3333 !important;
}

10
src/components/listview/listview.css
View file

@ -85,6 +85,11 @@
justify-content: center;
}
.listItem, .listItemBody, .listItemMediaInfo {
display: flex;
contain: layout style;
}
.layout-tv .listItemBody {
padding: .35em .75em;
}
@ -241,11 +246,6 @@
align-items: center;
}
.listItem, .listItemBody, .listItemMediaInfo {
display: flex;
contain: layout style;
}
.listItem-bottomoverview {
font-size: 88%;
margin-bottom: 1em;

26
src/components/loading/loading.css
View file

@ -345,19 +345,6 @@
}
}
.mdl-spinner__circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.mdl-spinner__circle-clipper .mdl-spinner__circle {
width: 200%;
}
.mdl-spinner__circle {
box-sizing: border-box;
height: 100%;
@ -375,6 +362,19 @@
left: 0;
}
.mdl-spinner__circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit;
}
.mdl-spinner__circle-clipper .mdl-spinner__circle {
width: 200%;
}
.mdl-spinner__circleLeft {
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);

8
src/elements/emby-select/emby-select.css
View file

@ -25,6 +25,10 @@
appearance: none;
}
.emby-select::-moz-focus-inner {
border: 0;
}
.selectContainer-inline > .emby-select {
padding: .3em 1.9em .3em .5em;
font-size: inherit;
@ -35,10 +39,6 @@
padding-right: 0;
}
.emby-select::-moz-focus-inner {
border: 0;
}
.emby-select-focusscale {
transition: transform 180ms ease-out !important;
-webkit-transform-origin: center center;

10
src/themes/appletv/theme.css
View file

@ -280,6 +280,11 @@ html {
border-color: #fff;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
@ -294,11 +299,6 @@ html {
color: #fff
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.itemProgressBarForeground-recording {
background-color: #CB272A
}

18
src/themes/blueradiance/theme.css
View file

@ -290,15 +290,15 @@ html {
border-color: #fff;
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.itemProgressBarForeground-recording {
background-color: #CB272A
}
@ -437,11 +437,6 @@ html {
border-color: #00a4dc !important
}
.layout-desktop ::-webkit-scrollbar {
width: 1em;
height: 1em
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}
@ -450,6 +445,11 @@ html {
background-color: #3b3b3b
}
.layout-desktop ::-webkit-scrollbar {
width: 1em;
height: 1em
}
::-webkit-scrollbar-thumb:horizontal,
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 2px;

18
src/themes/dark/theme.css
View file

@ -264,15 +264,15 @@ html {
border-color: #fff;
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.itemProgressBarForeground-recording {
background-color: #CB272A
}
@ -407,11 +407,6 @@ html {
border-color: #00a4dc !important
}
.layout-desktop ::-webkit-scrollbar {
width: 1em;
height: 1em
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}
@ -420,6 +415,11 @@ html {
background-color: #3b3b3b
}
.layout-desktop ::-webkit-scrollbar {
width: 1em;
height: 1em
}
::-webkit-scrollbar-thumb:horizontal,
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 2px;

10
src/themes/light/theme.css
View file

@ -273,6 +273,11 @@ html {
border-color: #000;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
@ -287,11 +292,6 @@ html {
color: #fff
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.itemProgressBarForeground-recording {
background-color: #CB272A
}

56
src/themes/purplehaze/theme.css
View file

@ -117,6 +117,20 @@ a[data-role=button] {
color: rgb(225, 229, 242)
}
#btnResetPassword,
.btnForgotPassword,
.btnCancel,
.button-cancel {
background: rgba(0, 0, 0, .5);
color: rgba(255, 255, 255, .87);
}
.alphaPickerButton {
color: #999;
color: rgba(255, 255, 255, .5);
background-color: transparent
}
#btnResetPassword:hover,
#btnRestart:hover,
#btnDeleteImage:hover,
@ -148,14 +162,6 @@ a[data-role=button] {
color: rgba(255, 255, 255, .87)
}
#btnResetPassword,
.btnForgotPassword,
.btnCancel,
.button-cancel {
background: rgba(0, 0, 0, .5);
color: rgba(255, 255, 255, .87);
}
.itemName {
color: #f1f7ee
}
@ -289,12 +295,6 @@ a[data-role=button] {
color: #48C3C8
}
.alphaPickerButton {
color: #999;
color: rgba(255, 255, 255, .5);
background-color: transparent
}
.alphaPickerButton-selected {
color: #0ce8d6
}
@ -379,14 +379,14 @@ a[data-role=button] {
color: rgb(12, 232, 214);
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border:2px solid #ff77f1;
}
.emby-checkbox:focus+span+.checkboxOutline {
border-color: #ff77f1;
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border:2px solid #ff77f1;
}
.itemProgressBarForeground {
background-color: rgb(12, 232, 214);
}
@ -525,6 +525,11 @@ a[data-role=button] {
color: #4285F4
}
.personCard .cardScalable {
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #ff77f1 !important
@ -536,11 +541,6 @@ a[data-role=button] {
scrollbar-color: #888 rgba(59, 59, 59, 0.5)
}
.layout-desktop ::-webkit-scrollbar {
width: .4em;
height: 1em
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}
@ -549,6 +549,11 @@ a[data-role=button] {
background-color: rgba(59, 59, 59, 0.5)
}
.layout-desktop ::-webkit-scrollbar {
width: .4em;
height: 1em
}
::-webkit-scrollbar-thumb:horizontal,
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 2px;
@ -573,11 +578,6 @@ a[data-role=button] {
width: 40vw;
}
.personCard .cardScalable {
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
}
.personCard .cardPadder-overflowPortrait,
.personCard .cardPadder-portrait {
padding-bottom: 100%;

20
src/themes/wmc/theme.css
View file

@ -263,6 +263,11 @@ html {
border-color: #fff;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
@ -277,11 +282,6 @@ html {
color: #fff
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground {
background-color: #00a4dc
}
.itemProgressBarForeground-recording {
background-color: #CB272A
}
@ -421,11 +421,6 @@ html {
border-color: #fff !important
}
.layout-desktop ::-webkit-scrollbar {
width: 1em;
height: 1em
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
@ -435,6 +430,11 @@ html {
background-color: #081B3B
}
.layout-desktop ::-webkit-scrollbar {
width: 1em;
height: 1em
}
::-webkit-scrollbar-thumb:horizontal,
::-webkit-scrollbar-thumb:vertical {
border-radius: 2px;