From aa9d969df0b2aae30d0d6158f41d66f6c797c9a1 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Mon, 5 Dec 2016 21:05:23 +0100 Subject: added clean start spage --- public/stylesheets/style.css | 167 ++++++++++++++++++++++++++----- public/stylesheets/style_new.css | 205 --------------------------------------- 2 files changed, 144 insertions(+), 228 deletions(-) delete mode 100644 public/stylesheets/style_new.css (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 95944e0..b572823 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -40,33 +40,65 @@ html, body { #search .input-wrapper { position: relative; flex-grow: 1; + color: #FFFFFF; } #search input[type='text'] { 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; + transition: box-shadow 200ms ease-in-out; } -::-webkit-input-placeholder { /* WebKit, Blink, Edge */ - color: #FFCDD2; +#search input[type='text']: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); } -:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ - color: #FFCDD2; - opacity: 1; + +#search input[type='text']:focus + button { + color: #212121; +} + +/* WebKit, Blink, Edge */ +input::-webkit-input-placeholder { + color: #FFCDD2; } -::-moz-placeholder { /* Mozilla Firefox 19+ */ - color: #FFCDD2; - opacity: 1; +input:focus::-webkit-input-placeholder { + color: #757575; +} + +/* Mozilla Firefox 4 to 18 */ +input:-moz-placeholder { + color: #FFCDD2; + opacity: 1; +} +input:focus:-moz-placeholder { + color: #757575; +} + +/* Mozilla Firefox 19+ */ +input::-moz-placeholder { + color: #FFCDD2; + opacity: 1; +} +input:focus::-moz-placeholder { + color: #757575; +} + +/* Internet Explorer 10-11 */ +input:-ms-input-placeholder { + color: #FFCDD2; } -:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: #FFCDD2; +input:focus:-ms-input-placeholder { + color: #757575; } li:hover { @@ -127,19 +159,13 @@ li:hover { } #week-selector input[type='button'] { - background: #D32F2F; + background: inherit; 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,19 +173,26 @@ 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; } +#week-selector input[type='button']:focus, #search #overflow-button:focus, #search .fav:focus { + outline: none; + background-color: #D32F2F; +} + #search #overflow-button { background: none; border: none; padding: 3px 9px; color: white; + border-radius: 2px; } .hidden { @@ -170,3 +203,91 @@ ul a { color: inherit; text-decoration: none; } + +#search .title { + display: none; +} + +#search.no-input { + height: 100%; + background-color: #ececec; +} + +#search.no-input button { + display: none; +} + +#search.no-input #overflow-button { + position: absolute; + display: block; + top: 0; + right: 0; + color: #757575; +} + +#search.no-input .print-page { + display: none; +} + +#search.no-input #overflow-button:focus { + background-color: inherit; + color: #212121; +} + +#search.no-input .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; +} + +#search.no-input .title { + display: block; + font-size: 55px; + width: 580px; + padding-bottom: 32px; +} + +#search.no-input .title .text { + text-align: center; + line-height: 55px; +} + +#search.no-input .top-bar { + position: static; + display: block; + margin-top: 50vh; + transform: translateY(-75%); +} + +#search.no-input input[type='text'] { + background-color: #FFF; +} + +/* WebKit, Blink, Edge */ +#search.no-input input::-webkit-input-placeholder { + color: #757575; +} + +/* Mozilla Firefox 4 to 18 */ +#search.no-input input:-moz-placeholder { + color: #757575; + opacity: 1; +} + +/* Mozilla Firefox 19+ */ +#search.no-input input::-moz-placeholder { + color: #757575; + opacity: 1; +} + +/* Internet Explorer 10-11 */ +#search.no-input input:-ms-input-placeholder { + color: #757575; +} \ No newline at end of file diff --git a/public/stylesheets/style_new.css b/public/stylesheets/style_new.css deleted file mode 100644 index f6c6b25..0000000 --- a/public/stylesheets/style_new.css +++ /dev/null @@ -1,205 +0,0 @@ -* { - box-sizing: border-box; -} - -html, body { - margin: 0; - font-family: 'Roboto', sans-serif; - display: flex; - -js-display: flex; - flex-direction: column; - width: 100vw; - height: 100vh; -} - -.other { - color: gray; - font-style: italic; - margin-left: 5px; -} - -#search { - z-index: 2; - background-color: #F44336; - margin: 0 auto; - width: 100%; - position: absolute; - /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/ - /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/ - box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.06), 0 0.5px 1px rgba(0,0,0,0.12); -} - -#search .top-bar { - position: relative; - margin: 0 auto; - max-width: 600px; - padding: 10px; - display: flex; -} - -#search .input-wrapper { - position: relative; - flex-grow: 1; - color: #FFFFFF; -} - -#search input[type='text'] { - display: block; - background-color: #f6695e; - color: inherit; - border-radius: 2px; - width: 100%; - display: block; - outline: none; - border: 0; - padding: 16px; - font-size: 1.1em; - transition: box-shadow 200ms ease-in-out; -} - -#search input[type='text']: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='text']:focus + button { - color: #212121; -} - -/* WebKit, Blink, Edge */ -input::-webkit-input-placeholder { - color: #FFCDD2; -} -input:focus::-webkit-input-placeholder { - color: #757575; -} - -/* Mozilla Firefox 4 to 18 */ -input:-moz-placeholder { - color: #FFCDD2; - opacity: 1; -} -input:focus:-moz-placeholder { - color: #757575; -} - -/* Mozilla Firefox 19+ */ -input::-moz-placeholder { - color: #FFCDD2; - opacity: 1; -} -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 { - background-color: lightgray; - cursor: pointer; -} - -.selected { - background-color: lightgray; -} - -#schedule { - flex-grow: 1; - width: 100vw; - border: 0; - padding: 0; -} - -#search-space-filler { - height: 73px; -} - -.autocomplete-wrapper { - background-color: white; -} - -.autocomplete { - max-width: 600px; - margin: 0 auto; - padding: 0; -} - -.autocomplete li { - list-style: none; - padding: 10px; -} - -#week-selector { - z-index: 1; - background-color: #F44336; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - color: white; -} - -#week-selector .week-wrapper { - max-width: 600px; - padding: 10px !important; - margin: 0 auto; - display: flex; - -js-display: flex; - padding: 10px 0; -} - -#week-selector .current { - flex-grow: 1; - text-align: center; - padding: 5px; -} - -#week-selector input[type='button'] { - background: inherit; - color: white; - border: 0px; - padding: 5px 10px; - border-radius: 2px; -} - -input { - -webkit-appearance: none; -} - -#search .fav { - position: absolute; - font-size: 1.8em; - color: inherit; - right: 8.5px; - top: 8.5px; - border: 0; - padding: 4px; - border-radius: 2px; - background: none; -} - -#week-selector input[type='button']:focus, #search #overflow-button:focus, #search .fav:focus { - outline: none; - background-color: #D32F2F; -} - -#search #overflow-button { - background: none; - border: none; - padding: 3px 9px; - color: white; - border-radius: 2px; -} - -.hidden { - display: none !important; -} - -ul a { - color: inherit; - text-decoration: none; -} -- cgit v1.1