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

Merge pull request #327 from DrPandemic/focus-checkbox

Browse source 
Changes checkboxes focus appearance
This commit is contained in:
Joshua M. Boniface 2019-05-17 09:04:17 -04:00 • committed by GitHub
commit dd2cd4ab8a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 67 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CONTRIBUTORS.md
View file

@ -22,6 +22,7 @@
- [LogicalPhallacy](https://github.com/LogicalPhallacy) - [LogicalPhallacy](https://github.com/LogicalPhallacy)
- [thornbill](https://github.com/thornbill) - [thornbill](https://github.com/thornbill)
- [redSpoutnik](https://github.com/redSpoutnik) - [redSpoutnik](https://github.com/redSpoutnik)
- [DrPandemic](https://github.com/drpandemic)
# Emby Contributors # Emby Contributors

29
src/components/emby-checkbox/emby-checkbox.css
View file

@ -63,29 +63,6 @@
justify-content: center; justify-content: center;
} }
/* Commenting this out - set by theme */
/*.emby-checkbox:checked + span + span + .checkboxOutline {
border-color: #52B54B;
}*/
.emby-checkbox-focushelper {
position: absolute;
top: -0.915em;
left: -0.915em;
width: 3.66em;
height: 3.66em;
display: inline-block;
box-sizing: border-box;
margin: 3px 0 0 0;
border-radius: 50%;
background-color: transparent;
}
/* Commenting this out - set by theme */
/*.emby-checkbox:focus + span + .emby-checkbox-focushelper {
background-color: rgba(82, 181, 75, 0.26);
}*/
.checkboxIcon { .checkboxIcon {
font-size: 1.6em; font-size: 1.6em;
color: #fff; color: #fff;
@ -95,18 +72,18 @@
display: none; display: none;
} }
.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-checked { .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
/* background-color set by theme */ /* background-color set by theme */
/*background-color: #52B54B;*/ /*background-color: #52B54B;*/
display: flex !important; display: flex !important;
} }
.emby-checkbox:checked + span + span + .checkboxOutline > .checkboxIcon-unchecked { .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-unchecked {
/* background-color set by theme */ /* background-color set by theme */
display: none !important; display: none !important;
} }
.emby-checkbox:checked[disabled] + span + span + .checkboxOutline > .checkboxIcon { .emby-checkbox:checked[disabled] + span + .checkboxOutline > .checkboxIcon {
background-color: rgba(0, 0, 0, 0.26); background-color: rgba(0, 0, 0, 0.26);
} }

2
src/components/emby-checkbox/emby-checkbox.js
View file

@ -61,7 +61,7 @@ define(['browser', 'dom', 'css!./emby-checkbox', 'registerElement'], function (b
var uncheckedIcon = this.getAttribute('data-uncheckedicon') || ''; var uncheckedIcon = this.getAttribute('data-uncheckedicon') || '';
var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>'; var checkHtml = '<i class="md-icon checkboxIcon checkboxIcon-checked">' + checkedIcon + '</i>';
var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>'; var uncheckedHtml = '<i class="md-icon checkboxIcon checkboxIcon-unchecked">' + uncheckedIcon + '</i>';
labelElement.insertAdjacentHTML('beforeend', '<span class="emby-checkbox-focushelper"></span><span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>'); labelElement.insertAdjacentHTML('beforeend', '<span class="' + outlineClass + '">' + checkHtml + uncheckedHtml + '</span>');
labelTextElement.classList.add('checkboxLabel'); labelTextElement.classList.add('checkboxLabel');

16
src/components/themes/appletv/theme.css
View file

@ -286,11 +286,19 @@ html {
border: .07em solid rgba(0, 0, 0, .158) border: .07em solid rgba(0, 0, 0, .158)
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:checked+span+.checkboxOutline,
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
border-color: #00a4dc border-color: #00a4dc
} }
.emby-checkbox:focus+span+.checkboxOutline {
border-color: #fff;
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-select-withcolor>option { .emby-select-withcolor>option {
color: #000; color: #000;
background: #fff background: #fff
@ -301,11 +309,7 @@ html {
color: #fff color: #fff
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:checked+span+.checkboxOutline,
background-color: rgba(0,164,220, .26)
}
.emby-checkbox:checked+span+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #00a4dc background-color: #00a4dc
} }

12
src/components/themes/blueradiance/theme.css
View file

@ -279,15 +279,19 @@ html {
color: #fff !important color: #fff !important
} }
.emby-checkbox:checked+span+span+.checkboxOutline { .emby-checkbox:checked+span+.checkboxOutline {
border-color: #00a4dc border-color: #00a4dc
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:focus+span+.checkboxOutline {
background-color: rgba(0,164,220, .26) border-color: #fff;
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #00a4dc background-color: #00a4dc
} }

12
src/components/themes/dark/theme.css
View file

@ -264,15 +264,19 @@ html {
color: #fff !important color: #fff !important
} }
.emby-checkbox:checked+span+span+.checkboxOutline { .emby-checkbox:checked+span+.checkboxOutline {
border-color: #00a4dc border-color: #00a4dc
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:focus+span+.checkboxOutline {
background-color: rgba(0,164,220, .26) border-color: #fff;
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #00a4dc background-color: #00a4dc
} }

12
src/components/themes/emby/theme.css
View file

@ -264,15 +264,19 @@ html {
color: #fff !important color: #fff !important
} }
.emby-checkbox:checked+span+span+.checkboxOutline { .emby-checkbox:checked+span+.checkboxOutline {
border-color: #52b54b border-color: #52b54b
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:focus+span+.checkboxOutline {
background-color: rgba(82, 181, 75, .26) border-color: #fff;
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #52b54b;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #52b54b background-color: #52b54b
} }

16
src/components/themes/light/theme.css
View file

@ -272,11 +272,19 @@ html {
border: .07em solid rgba(0, 0, 0, .158) border: .07em solid rgba(0, 0, 0, .158)
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:checked+span+.checkboxOutline,
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
border-color: #00a4dc border-color: #00a4dc
} }
.emby-checkbox:focus+span+.checkboxOutline {
border-color: #000;
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-select-withcolor>option { .emby-select-withcolor>option {
color: #000; color: #000;
background: #fff background: #fff
@ -287,11 +295,7 @@ html {
color: #fff color: #fff
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:checked+span+.checkboxOutline,
background-color: rgba(0,164,220, .26)
}
.emby-checkbox:checked+span+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #00a4dc background-color: #00a4dc
} }

12
src/components/themes/purple-haze/theme.css
View file

@ -308,15 +308,19 @@ progress::-webkit-progress-value {
color: #fff !important color: #fff !important
} }
.emby-checkbox:checked+span+span+.checkboxOutline { .emby-checkbox:checked+span+.checkboxOutline {
border-color: #48C3C8 border-color: #48C3C8
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:focus+span+.checkboxOutline {
background-color: rgba(0,164,220, .26) border-color: #fff;
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #48C3C8;
}
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #48C3C8 background-color: #48C3C8
} }

16
src/components/themes/wmc/theme.css
View file

@ -266,11 +266,19 @@ html {
border: .07em solid rgba(255, 255, 255, .135) border: .07em solid rgba(255, 255, 255, .135)
} }
.emby-checkbox:checked+span+span+.checkboxOutline, .emby-checkbox:checked+span+.checkboxOutline,
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
border-color: #00a4dc border-color: #00a4dc
} }
.emby-checkbox:focus+span+.checkboxOutline {
border-color: #fff;
}
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #00a4dc;
}
.emby-select-withcolor>option { .emby-select-withcolor>option {
color: #000; color: #000;
background: #fff background: #fff
@ -281,11 +289,7 @@ html {
color: #fff color: #fff
} }
.emby-checkbox:focus+span+.emby-checkbox-focushelper { .emby-checkbox:checked+span+.checkboxOutline,
background-color: rgba(0,164,220, .26)
}
.emby-checkbox:checked+span+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #00a4dc background-color: #00a4dc
} }