diff options
Diffstat (limited to 'styles')
| -rw-r--r-- | styles/global.scss | 13 | ||||
| -rw-r--r-- | styles/global/_themes.scss | 4 | ||||
| -rw-r--r-- | styles/global/_window.scss | 64 | ||||
| -rw-r--r-- | styles/main/_header.scss | 74 |
4 files changed, 120 insertions, 35 deletions
diff --git a/styles/global.scss b/styles/global.scss index 0a542a9..04473b8 100644 --- a/styles/global.scss +++ b/styles/global.scss @@ -32,3 +32,16 @@ textarea, input { padding-right: 2rem; } +.mobile-only { + display: none!important; + + @media(max-width: 40em) { + display: inline-block!important; + } +} + +.desktop-only { + @media(max-width: 40em) { + display: none!important; + } +} diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss index 9319fa5..e0b146f 100644 --- a/styles/global/_themes.scss +++ b/styles/global/_themes.scss @@ -13,7 +13,7 @@ --color-window-border-top: rgba(255,255,255,.7); --color-window-border-bottom: #ccc; --color-window-content: #fff; - --color-window-popup: #fff; + --color-window-popup: #eee; --color-window-buttons: #666; --color-window-buttons-alt: #222; --color-window-menu: #eee; @@ -42,7 +42,7 @@ --color-window-border-top: rgba(255,255,255,.7); --color-window-border-bottom: #ccc; --color-window-content: #fff; - --color-window-popup: #fff; + --color-window-popup: #eee; --color-window-buttons: #666; --color-window-buttons-alt: #222; --color-window-menu: #eee; diff --git a/styles/global/_window.scss b/styles/global/_window.scss index 08ddfaf..c489796 100644 --- a/styles/global/_window.scss +++ b/styles/global/_window.scss @@ -1,11 +1,14 @@ .window { position: absolute; - transition-property: opacity, visibility, transform, width, height, top, left; - transition-duration: .3s; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: .5em; color: var(--color-text); + @media(min-width: 40em) { + transition-property: opacity, visibility, transform, width, height, top, left; + transition-duration: .3s; + } + &.moving { transition: none } @@ -29,19 +32,6 @@ height: 100%; width: 100%; } - // top: 50%; - // left: 50%; - - // @media (min-width: 80em) { - // width: 64em; - // left: calc((100vw - 64em) / 2) - // } - - // @media (min-height: 80em) { - // width: 64em; - // left: calc((100vh - 64em) / 2) - // } - // } &__title { position: absolute; @@ -86,6 +76,10 @@ color: var(--color-window-buttons-alt); } } + + @media(max-width: 40em) { + display: none; + } } &__content { @@ -96,7 +90,6 @@ right: 0; bottom: 0; left: 0; - padding: 1em; border-bottom-left-radius: .5em; border-bottom-right-radius: .5em; } @@ -109,18 +102,35 @@ .window__submenu { display: block; - margin: -1em -1em 1em; height: 2em; + width: 100%; background: var(--color-window-menu); - & > div { + & > div > div { // cursor: pointer; display: inline-block; padding: .5em; transition: .3s background; + white-space: nowrap; - &:hover { - background-color: var(--color-window-menu-alt); + @media(hover: hover) { + &:hover { + background-color: var(--color-window-menu-alt); + } + } + } + + + @media(max-width: 40em) { + height: 3em; + overflow: auto; + + & > div { + display: flex; + } + + & > div > div { + padding: 1em; } } } @@ -128,7 +138,7 @@ &__scroll { height: 100%; overflow: auto; - margin: -1em -1em 0; + padding: 1em; } &__buttons--popup { @@ -150,8 +160,10 @@ // cursor: pointer; transition: .3s background-color; - &:hover { - background-color: var(--color-button-alt); + @media(hover: hover) { + &:hover { + background-color: var(--color-button-alt); + } } } @@ -163,8 +175,10 @@ border-top: 1px solid var(--color-popup-error-border); border-bottom: 1px solid var(--color-popup-error-border); - &:hover { - background-color: var(--color-popup-error-button-alt); + @media(hover: hover) { + &:hover { + background-color: var(--color-popup-error-button-alt); + } } } } diff --git a/styles/main/_header.scss b/styles/main/_header.scss index 9fab16b..e6ac70f 100644 --- a/styles/main/_header.scss +++ b/styles/main/_header.scss @@ -6,34 +6,92 @@ nav { display: flex; - & > ul:first-of-type { + & > div { flex-grow: 1; - overflow: auto; + overflow-y: auto; + + & > span { + padding-left: .5em; + line-height: 2em; + font-weight: 600; + } + + & > ul { + display: flex; + } } - & > ul { + & > ul, + & > div > ul { display: block; & > li { display: inline-block; + & > span > span { + padding: .75em; + display: inline-block; + margin-left: .5em; + color: var(--color-error); + } + & > span, & > a { display: inline-block; color: var(--color-text); text-decoration: none; align-items: center; - padding: .25em .5em; - margin: .25em; border-radius: .5em; transition: .3s background, .3s color; + white-space: nowrap; + padding: .25em .5em; + margin: .25em; - &:hover { - background-color: var(--color-selected); - color: var(--color-text-alt); + @media(hover: hover) { + &:hover { + background-color: var(--color-selected); + color: var(--color-text-alt); + } } } } } } } + +.showMobileAppList { + @media(max-width: 40em) { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--color-window-popup); + border-bottom: 1px solid var(--color-window-border-bottom); + border-top: 1px solid var(--color-window-border-top); + border-radius: .5em; + padding: 1em; + min-width: 13em; + + li { + width: 100%; + padding: 0; + margin: -.25em 0; + } + + & > li:first-of-type { + padding: .5em .5em 1em; + white-space: nowrap; + } + + & > li:last-of-type { + width: 100%; + padding-top: 1em; + text-align: center; + + span { + height: 2.1em; + padding: .5em .75em; + } + } + } +} |