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 #336 from grafixeyehero/purple-haze

Browse source 
Update purple haze theme and fix some unstyled elements
This commit is contained in:
Anthony Lavado 2019-06-12 20:32:00 -04:00 • committed by GitHub
commit d33c87a99c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 122 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/imagedownloader/imagedownloader.template.html
View file

@ -10,27 +10,29 @@
<div class="flex align-items-center justify-content-center flex-wrap-wrap" style="margin: 2em 0;"> <div class="flex align-items-center justify-content-center flex-wrap-wrap" style="margin: 2em 0;">
<div style="margin: 0;"> <div style="margin: 0;">
<label for="selectImageProvider" style="display: inline-block;">${LabelSource}</label> <div class="selectContainer">
<select id="selectImageProvider" style="padding-left:.5em;padding-right:0;display: inline-block;width:auto!important;"> <select id="selectImageProvider" name="selectImageProvider" is="emby-select" label="${LabelSource}">
<option value="">${All}</option> <option value="">${All}</option>
</select> </select>
</div>
</div> </div>
<div style="margin-left:1em;"> <div style="margin-left:1em;">
<label for="selectBrowsableImageType" style="display: inline-block;">${LabelType}</label> <div class="selectContainer">
<select id="selectBrowsableImageType" style="padding-left:.5em;padding-right:0;display: inline-block;width:auto!important;"> <select id="selectBrowsableImageType" name="selectBrowsableImageType" is="emby-select" label="${LabelType}">
<option value="Primary">${Primary}</option> <option value="Primary">${Primary}</option>
<option value="Art">${Art}</option> <option value="Art">${Art}</option>
<option value="Backdrop">${Backdrop}</option> <option value="Backdrop">${Backdrop}</option>
<option value="Banner">${Banner}</option> <option value="Banner">${Banner}</option>
<option value="Box">${Box}</option> <option value="Box">${Box}</option>
<option value="BoxRear">${BoxRear}</option> <option value="BoxRear">${BoxRear}</option>
<option value="Disc">${Disc}</option> <option value="Disc">${Disc}</option>
<option value="Logo">${Logo}</option> <option value="Logo">${Logo}</option>
<option value="Menu">${Menu}</option> <option value="Menu">${Menu}</option>
<option value="Screenshot">${Screenshot}</option> <option value="Screenshot">${Screenshot}</option>
<option value="Thumb">${Thumb}</option> <option value="Thumb">${Thumb}</option>
</select> </select>
</div>
</div> </div>
<div class="availableImagesPaging" style="margin-left:1em;"></div> <div class="availableImagesPaging" style="margin-left:1em;"></div>
<label style="margin: 0 0 0 1em;width:auto;"> <label style="margin: 0 0 0 1em;width:auto;">
@ -41,4 +43,4 @@
<div class="availableImagesList vertical-wrap centered"></div> <div class="availableImagesList vertical-wrap centered"></div>
</div> </div>
</div> </div>

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

@ -39,7 +39,7 @@ html {
.dialog, .dialog,
html { html {
background-color: #0e0f2d background-color: #230c33
} }
.backgroundContainer { .backgroundContainer {
@ -59,13 +59,13 @@ html {
} }
.paper-icon-button-light:hover { .paper-icon-button-light:hover {
color: #48C3C8; color: rgb(12, 232, 214);
background-color: rgba(0,164,220, .2); background-color: rgba(0,164,220, .2);
transition: 0.2s; transition: 0.2s;
} }
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #48C3C8; color: #ff77f1;
} }
progress { progress {
@ -87,41 +87,100 @@ progress::-webkit-progress-value {
.fab, .fab,
.raised { .raised {
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5);
color: rgba(255, 255, 255, .87) color: rgba(255, 255, 255, .87);
} }
.fab:focus, .fab:focus,
.raised:focus { .raised:focus {
background: rgba(0, 0, 0, .7) background: #ff77f1
} }
.button-submit { div[data-role=controlgroup] a.ui-btn-active {
background: #48C3C8; background: #55828b !important;
color: #f8f8fe color: #e1e5f2 !important
} }
.button-submit:hover { a[data-role=button] {
background: #0ce8d6; background: rgba(2, 43, 58, 0.521) !important;
color: #f8f8fe }
#btnDeleteImage,
.submit,
.btnBrowse,
.mini,
.btnRefresh,
.btnManual,
.button-submit,
.viewTabButton,
.button-alt,
.btnOption {
background: rgb(72, 195, 200);
color: rgb(225, 229, 242)
}
#btnResetPassword:hover,
#btnRestart:hover,
#btnDeleteImage:hover,
#btnShutdown:hover,
.button-cancel:hover,
.fab:hover,
.raised:hover,
.alphaPickerButton:hover,
.submit:hover,
.btnBrowse:hover,
.mini:hover,
.btnRefresh:hover,
.button-submit:hover,
.viewTabButton:hover,
.button-alt:hover,
.btnOption:hover,
.btnManual:hover,
.block:hover {
background: rgb(12, 232, 214);
color: rgba(255, 255, 255, .87)
}
.button-submit:focus {
background: #ff77f1
}
#btnResetPassword,
.btnForgotPassword,
.btnCancel,
.button-cancel {
background: rgba(0, 0, 0, .5);
color: rgba(255, 255, 255, .87);
}
.itemName {
color: #f1f7ee
}
.textareaLabel,
.sectionTitle,
.fieldDescription,
.checkboxLabel {
color: #f1f7ee
} }
.checkboxLabel { .checkboxLabel {
color: inherit color: inherit
} }
.selectLabel,
.checkboxLabel,
.checkboxListLabel, .checkboxListLabel,
.inputLabel, .inputLabel,
.inputLabelUnfocused, .inputLabelUnfocused,
.paperListLabel, .paperListLabel,
.textareaLabelUnfocused { .textareaLabelUnfocused {
color: #bbb; color: rgb(191, 219, 247);
color: rgba(255, 255, 255, .7)
} }
.inputLabelFocused, .inputLabelFocused,
.selectLabelFocused, .selectLabelFocused,
.textareaLabelFocused { .textareaLabelFocused {
color: #48C3C8 color: #ff77f1
} }
.checkboxOutline { .checkboxOutline {
@ -238,7 +297,7 @@ progress::-webkit-progress-value {
} }
.alphaPickerButton-tv:focus { .alphaPickerButton-tv:focus {
background: #0ce8d6; background: #ff77f1;
color: #f8f8fe !important color: #f8f8fe !important
} }
@ -285,7 +344,7 @@ progress::-webkit-progress-value {
.emby-input:focus, .emby-input:focus,
.emby-textarea:focus { .emby-textarea:focus {
border-color: #48C3C8 border-color: #ff77f1
} }
.emby-select-withcolor { .emby-select-withcolor {
@ -300,29 +359,33 @@ progress::-webkit-progress-value {
} }
.emby-select-withcolor:focus { .emby-select-withcolor:focus {
border-color: #48C3C8 !important border-color: #ff77f1 !important
} }
.emby-select-tv-withcolor:focus { .emby-select-tv-withcolor:focus {
background-color: #48C3C8 !important; background-color: #ff77f1 !important;
color: #fff !important color: #fff !important
} }
.emby-checkbox:checked+span+.checkboxOutline { .emby-checkbox:checked+span+.checkboxOutline {
border-color: #48C3C8 background-color: #030322;
border:2px solid rgb(72, 195, 200);
} }
.emby-checkbox:focus+span+.checkboxOutline { .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
border-color: #fff; color: rgb(12, 232, 214);
} }
.emby-checkbox:focus:not(:checked)+span+.checkboxOutline { .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
border-color: #48C3C8; border:2px solid #ff77f1;
}
.emby-checkbox:focus+span+.checkboxOutline {
border-color: #ff77f1;
} }
.emby-checkbox:checked+span+.checkboxOutline,
.itemProgressBarForeground { .itemProgressBarForeground {
background-color: #48C3C8 background-color: rgb(12, 232, 214);
} }
.itemProgressBarForeground-recording { .itemProgressBarForeground-recording {
@ -332,7 +395,7 @@ progress::-webkit-progress-value {
.countIndicator, .countIndicator,
.fullSyncIndicator, .fullSyncIndicator,
.playedIndicator { .playedIndicator {
background: #48C3C8 background: rgb(12, 232, 214);
} }
.fullSyncIndicator { .fullSyncIndicator {
@ -341,12 +404,11 @@ progress::-webkit-progress-value {
.mainDrawer { .mainDrawer {
color: #f8f8fe; color: #f8f8fe;
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5)
} }
.drawer-open { .drawer-open {
background-color: #030322 background-color: #030322
} }
.navMenuOption:hover { .navMenuOption:hover {
@ -359,7 +421,7 @@ progress::-webkit-progress-value {
} }
.emby-button-focusscale:focus { .emby-button-focusscale:focus {
background: #48C3C8; background: #8ae9c1;
color: #f8f8fe color: #f8f8fe
} }
@ -377,7 +439,7 @@ progress::-webkit-progress-value {
} }
.emby-tab-button.emby-button-tv:focus { .emby-tab-button.emby-button-tv:focus {
color: #48C3C8; color: #ff77f1;
background: 0 0 background: 0 0
} }
@ -429,7 +491,7 @@ progress::-webkit-progress-value {
.guide-date-tab-button.emby-tab-button-active, .guide-date-tab-button.emby-tab-button-active,
.guide-date-tab-button:focus { .guide-date-tab-button:focus {
color: #48C3C8 color: #ff77f1
} }
.guide-date-tab-button.emby-button-tv:focus { .guide-date-tab-button.emby-button-tv:focus {
@ -470,11 +532,17 @@ progress::-webkit-progress-value {
} }
.card:focus .card-focuscontent { .card:focus .card-focuscontent {
border-color: #48C3C8 border-color: #ff77f1
}
.layout-desktop,
.scrollY {
scrollbar-width: thin;
scrollbar-color: #888 rgba(59, 59, 59, 0.5)
} }
.layout-desktop ::-webkit-scrollbar { .layout-desktop ::-webkit-scrollbar {
width: 1em; width: .4em;
height: 1em height: 1em
} }
@ -483,7 +551,7 @@ progress::-webkit-progress-value {
} }
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
background-color: #3b3b3b background-color: rgba(59, 59, 59, 0.5)
} }
::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:horizontal,