diff options
Diffstat (limited to 'ext/mixed/css/display.css')
| -rw-r--r-- | ext/mixed/css/display.css | 165 |
1 files changed, 141 insertions, 24 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index f6317d54..5a8c0212 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -38,6 +38,13 @@ --entry-padding: 0.72em; + --sidebar-width-no-units: 40; + --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units))); + --sidebar-button-height-no-units: 30; + --sidebar-button-height: calc(1em * (var(--sidebar-button-height-no-units) / var(--font-size-no-units))); + --sidebar-button-icon-size-no-units: 16; + --sidebar-button-icon-size: calc(1em * (var(--sidebar-button-icon-size-no-units) / var(--font-size-no-units))); + /* Colors */ --background-color: #ffffff; --glossary-image-background-color: #eeeeee; @@ -66,6 +73,18 @@ --tag-part-of-speech-background-color: #565656; --tag-search-background-color: #8a8a91; --tag-pitch-accent-dictionary-background-color: #6640be; + + --sidebar-background-color: #f8f9fa; + + --sidebar-button-background-color: transparent; + --sidebar-button-background-color-hover: #cccccc; + --sidebar-button-background-color-active: #aaaaaa; + --sidebar-button-danger-background-color: transparent; + --sidebar-button-danger-background-color-hover: #dd2222; + --sidebar-button-danger-background-color-active: #bb2222; + --sidebar-button-icon-color: #333333; + --sidebar-button-disabled-icon-color: #888888; + --sidebar-button-danger-icon-color: #ffffff; } :root[data-yomichan-theme=dark] { /* Colors */ @@ -96,6 +115,18 @@ --tag-part-of-speech-background-color: #565656; --tag-search-background-color: #69696e; --tag-pitch-accent-dictionary-background-color: #6640be; + + --sidebar-background-color: #282828; + + --sidebar-button-background-color: transparent; + --sidebar-button-background-color-hover: #3a3a3a; + --sidebar-button-background-color-active: #5a5a5a; + --sidebar-button-danger-background-color: transparent; + --sidebar-button-danger-background-color-hover: #dd2222; + --sidebar-button-danger-background-color-active: #bb2222; + --sidebar-button-icon-color: #cccccc; + --sidebar-button-disabled-icon-color: #777777; + --sidebar-button-danger-icon-color: #ffffff; } @@ -172,39 +203,125 @@ a { } -/* Navigation */ -.navigation-header { - top: 0; - left: 0; +/* Sidebar layout */ +.content-outer { width: 100%; - height: 2.1em; - box-sizing: border-box; - padding: 0.25em 0.5em; - border-bottom: var(--thin-border-size) solid var(--light-border-color); - background-color: var(--background-color); - z-index: 10; + height: 100%; + display: flex; + flex-flow: row nowrap; + overflow: hidden; + align-items: stretch; + justify-content: center; +} +.content-sidebar { + flex: 0 0 auto; + height: 100%; + overflow-x: hidden; + overflow-y: auto; + background-color: var(--sidebar-background-color); + z-index: 1; + position: relative; + display: block; } -.navigation-header-actions { +.content-sidebar[hidden] { + display: none; +} +.content-sidebar[hidden][data-has-navigation-previous=true], +.content-sidebar[hidden][data-has-navigation-next=true] { + display: block; +} +.content-sidebar-inner { display: flex; + flex-flow: column nowrap; + width: var(--sidebar-width); + height: 100%; } -.navigation-header:not([data-has-previous=true]) .navigation-header-actions .action-button.action-previous::before, -.navigation-header:not([data-has-next=true]) .navigation-header-actions .action-button.action-next::before { - opacity: 0.25; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); +.content-sidebar-top { + flex: 1 1 auto; + display: flex; + flex-flow: column nowrap; } -.action-button.action-next::before { - transform: scaleX(-1); +.content-sidebar-bottom { + position: sticky; + bottom: 0; + background-color: var(--sidebar-background-color); + display: flex; + flex-flow: column nowrap; } -:root[data-yomichan-page=search] .navigation-header { - position: sticky; + +/* Sidebar buttons */ +button.sidebar-button { + width: 100%; + height: var(--sidebar-button-height); + background-color: var(--sidebar-button-background-color); + margin: 0; + padding: 0; + border: 0; + cursor: pointer; + display: block; + transition: background-color 0.125s ease-in-out; + outline: none; + font-size: inherit; } -:root[data-yomichan-page=float] .navigation-header { - position: fixed; +button.sidebar-button:disabled { + cursor: default; +} +button.sidebar-button:hover:not(:disabled) { + background-color: var(--sidebar-button-background-color-hover); +} +button.sidebar-button:active:not(:disabled) { + background-color: var(--sidebar-button-background-color-active); } -:root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation-header-spacer { - height: 2.1em; +button.sidebar-button.danger { + background-color: var(--sidebar-button-danger-background-color); +} +button.sidebar-button.danger:hover:not(:disabled) { + background-color: var(--sidebar-button-danger-background-color-hover); +} +button.sidebar-button.danger:active:not(:disabled) { + background-color: var(--sidebar-button-danger-background-color-active); +} +.sidebar-button-icon { + display: block; + width: 100%; + height: 100%; + mask-repeat: no-repeat; + mask-position: center center; + mask-mode: alpha; + mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + -webkit-mask-mode: alpha; + -webkit-mask-size: var(--sidebar-button-icon-size) var(--sidebar-button-icon-size); + background-color: var(--sidebar-button-icon-color); + transition: background-color 0.125s ease-in-out; +} +button.sidebar-button:disabled .sidebar-button-icon { + background-color: var(--sidebar-button-disabled-icon-color); +} +button.sidebar-button.danger:hover .sidebar-button-icon { + background-color: var(--sidebar-button-danger-icon-color); +} +.sidebar-button-icon[data-icon=cross] { + mask-image: url(/mixed/img/cross.svg); + -webkit-mask-image: url(/mixed/img/cross.svg); +} +.sidebar-button-icon[data-icon=left-chevron] { + mask-image: url(/mixed/img/left-chevron.svg); + -webkit-mask-image: url(/mixed/img/left-chevron.svg); +} +.sidebar-button-icon[data-icon=right-chevron] { + mask-image: url(/mixed/img/right-chevron.svg); + -webkit-mask-image: url(/mixed/img/right-chevron.svg); +} +.sidebar-button-icon[data-icon=kebab-menu] { + mask-image: url(/mixed/img/kebab-menu.svg); + -webkit-mask-image: url(/mixed/img/kebab-menu.svg); +} +.sidebar-button-icon[data-icon=profile] { + mask-image: url(/mixed/img/profile.svg); + -webkit-mask-image: url(/mixed/img/profile.svg); } |