diff options
Diffstat (limited to 'public/stylesheets/style.css')
| -rw-r--r-- | public/stylesheets/style.css | 242 |
1 files changed, 212 insertions, 30 deletions
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 95944e0..5c51bb4 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -40,33 +40,82 @@ html, body { #search .input-wrapper { position: relative; flex-grow: 1; + color: #FFFFFF; } -#search input[type='text'] { +#search input[type='search'] { display: block; - background-color: #D32F2F; - color: #FFFFFF; + background-color: #f6695e; + color: inherit; + border-radius: 2px; width: 100%; display: block; outline: none; border: 0; padding: 16px; - font-size: 1.1em; + font-size: 16px; + transition: box-shadow 200ms ease-in-out; +} + +#search input[type='search']:focus { + background-color: #FFFFFF; + color: #212121; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} + +#search input[type='search']:focus + button { + color: #212121; +} + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} + +input[type="search"]::-ms-clear { + width: 0; + height: 0; +} + +button::-moz-focus-inner { + border: 0; +} + + +/* WebKit, Blink, Edge */ +input::-webkit-input-placeholder { + color: #FFCDD2; +} +input:focus::-webkit-input-placeholder { + color: #757575; } -::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: #FFCDD2; +/* Mozilla Firefox 4 to 18 */ +input:-moz-placeholder { + color: #FFCDD2; + opacity: 1; } -:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: #FFCDD2; - opacity: 1; +input:focus:-moz-placeholder { + color: #757575; } -::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: #FFCDD2; - opacity: 1; + +/* Mozilla Firefox 19+ */ +input::-moz-placeholder { + color: #FFCDD2; + opacity: 1; } -:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #FFCDD2; +input:focus::-moz-placeholder { + color: #757575; +} + +/* Internet Explorer 10-11 */ +input:-ms-input-placeholder { + color: #FFCDD2; +} +input:focus:-ms-input-placeholder { + color: #757575; } li:hover { @@ -85,8 +134,8 @@ li:hover { padding: 0; } -#search-space-filler { - height: 73px; +body.searched #search-space-filler { + height: 70px; } .autocomplete-wrapper { @@ -121,25 +170,20 @@ li:hover { } #week-selector .current { + display: flex; flex-grow: 1; - text-align: center; - padding: 5px; + align-items: center; + justify-content: center; } -#week-selector input[type='button'] { - background: #D32F2F; +#week-selector button { + background: transparent; color: white; border: 0px; padding: 5px 10px; border-radius: 2px; } -/*input:hover,*/ -input:focus { - outline: none; - background-color: #b71c1c !important; -} - input { -webkit-appearance: none; } @@ -147,12 +191,24 @@ input { #search .fav { position: absolute; font-size: 1.8em; - color: #FFCDD2; - right: 12.5px; - top: 12.5px; + color: inherit; + right: 8.5px; + top: 8.5px; border: 0; - padding: 0; + padding: 4px; + border-radius: 2px; background: none; + + display: none; +} + +body.searched #search .fav { + display: block; +} + +#week-selector button:focus, #search #overflow-button:focus, #search .fav:focus { + outline: none; + background-color: #D32F2F; } #search #overflow-button { @@ -160,6 +216,7 @@ input { border: none; padding: 3px 9px; color: white; + border-radius: 2px; } .hidden { @@ -170,3 +227,128 @@ ul a { color: inherit; text-decoration: none; } + +#search .title { + display: none; +} + +body.no-input #week-selector { + display: none; +} + +@media screen and (min-height: 400px) { + body.no-input { + background-color: #ececec; + } + + body.no-input #search { + height: 100%; + background-color: #ececec; + box-shadow: none; + } + + body.no-input #search button { + display: none; + } + + body.no-input #search #overflow-button { + position: absolute; + display: block; + top: 0; + right: 0; + color: #757575; + } + + body.no-input #search .print-page { + display: none; + } + + body.no-input #search #overflow-button:focus { + background-color: inherit; + color: #212121; + } + + body.no-input #search .logo { + background-image: url(/icons/mml-logo.png); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + height: 100px; + width: 100px; + + /* virtual center: http://javier.xyz/visual-center/ */ + transform: translate(-8%,-3%); + margin: 0 auto; + } + + body.no-input #search .title { + display: block; + font-size: 55px; + padding-bottom: 32px; + } + + body.no-input #search .title .text { + text-align: center; + line-height: 55px; + } + + body.no-input #search .top-bar { + position: static; + display: block; + margin-top: 50vh; + transform: translateY(-75%); + } + + body.no-input #search input[type='search'] { + background-color: #FFF; + } + + /* WebKit, Blink, Edge */ + body.no-input #search input::-webkit-input-placeholder { + color: #757575; + } + + /* Mozilla Firefox 4 to 18 */ + body.no-input #search input:-moz-placeholder { + color: #757575; + opacity: 1; + } + + /* Mozilla Firefox 19+ */ + body.no-input #search input::-moz-placeholder { + color: #757575; + opacity: 1; + } + + /* Internet Explorer 10-11 */ + body.no-input #search input:-ms-input-placeholder { + color: #757575; + } + + body.no-input .tooltip { + display: block; + position: absolute; + background-color: white; + padding: 15px; + margin: 32px 8px; + border-radius: 2px; + + left: 16px; + right: 16px; + } + + body.no-input .tooltip::before { + content: ''; + width: 24px; + height: 24px; + background-color: white; + top: -12px; + position: absolute; + transform: rotate(45deg); + z-index: -1; + } +} + +.tooltip { + display: none; +}
\ No newline at end of file |