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 From 0c8b852ba47713a1508734de1fc5c871bf6ad0a3 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Mon, 5 Dec 2016 21:06:28 +0100 Subject: fixed page too big on mobile --- public/stylesheets/style.css | 1 - 1 file changed, 1 deletion(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index b572823..7ac665f 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -250,7 +250,6 @@ ul a { #search.no-input .title { display: block; font-size: 55px; - width: 580px; padding-bottom: 32px; } -- cgit v1.1 From 13a8cb94986970427e4e28a0ed0c5ac8984de293 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Tue, 6 Dec 2016 16:23:58 +0100 Subject: don't show begin screen if screen is short --- public/stylesheets/style.css | 164 ++++++++++++++++++++++--------------------- 1 file changed, 83 insertions(+), 81 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 7ac665f..8151be6 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -208,85 +208,87 @@ ul a { 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; - 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; +@media screen and (min-height: 400px) { + #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; + 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 -- cgit v1.1 From 6c91328315e27a16891fc01c1765a1d14b9adb5a Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 17:35:52 +0100 Subject: fixed iOS safari zooming in when focusing input --- public/stylesheets/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 8151be6..c4c2581 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -53,7 +53,7 @@ html, body { outline: none; border: 0; padding: 16px; - font-size: 1.1em; + font-size: 16px; transition: box-shadow 200ms ease-in-out; } -- cgit v1.1 From 0e2ef2aa2495fa19d7cc7a25cceef58c572494ca Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 17:59:59 +0100 Subject: .no-input is now on body --- public/stylesheets/style.css | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c4c2581..bf9ab43 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -209,16 +209,20 @@ ul a { } @media screen and (min-height: 400px) { - #search.no-input { + body.no-input { + background-color: #ececec; + } + + body.no-input #search { height: 100%; background-color: #ececec; } - #search.no-input button { + body.no-input #search button { display: none; } - #search.no-input #overflow-button { + body.no-input #search #overflow-button { position: absolute; display: block; top: 0; @@ -226,16 +230,16 @@ ul a { color: #757575; } - #search.no-input .print-page { + body.no-input #search .print-page { display: none; } - #search.no-input #overflow-button:focus { + body.no-input #search #overflow-button:focus { background-color: inherit; color: #212121; } - #search.no-input .logo { + body.no-input #search .logo { background-image: url(/icons/mml-logo.png); background-position: center; background-repeat: no-repeat; @@ -248,47 +252,47 @@ ul a { margin: 0 auto; } - #search.no-input .title { + body.no-input #search .title { display: block; font-size: 55px; padding-bottom: 32px; } - #search.no-input .title .text { + body.no-input #search .title .text { text-align: center; line-height: 55px; } - #search.no-input .top-bar { + body.no-input #search .top-bar { position: static; display: block; margin-top: 50vh; transform: translateY(-75%); } - #search.no-input input[type='text'] { + body.no-input #search input[type='text'] { background-color: #FFF; } /* WebKit, Blink, Edge */ - #search.no-input input::-webkit-input-placeholder { + body.no-input #search input::-webkit-input-placeholder { color: #757575; } /* Mozilla Firefox 4 to 18 */ - #search.no-input input:-moz-placeholder { + body.no-input #search input:-moz-placeholder { color: #757575; opacity: 1; } /* Mozilla Firefox 19+ */ - #search.no-input input::-moz-placeholder { + body.no-input #search input::-moz-placeholder { color: #757575; opacity: 1; } /* Internet Explorer 10-11 */ - #search.no-input input:-ms-input-placeholder { + body.no-input #search input:-ms-input-placeholder { color: #757575; } } \ No newline at end of file -- cgit v1.1 From 10ba0f1b863e97e5ecfa19e81fd9ba2a0425301a Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 18:04:05 +0100 Subject: remove box shadow from #search when full height --- public/stylesheets/style.css | 1 + 1 file changed, 1 insertion(+) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index bf9ab43..e4d2e2e 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -216,6 +216,7 @@ ul a { body.no-input #search { height: 100%; background-color: #ececec; + box-shadow: none; } body.no-input #search button { -- cgit v1.1 From 6bc04592cc7511775cdec9902c841aca7a0d2a6c Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 18:49:25 +0100 Subject: fixed week buttons for IE9 --- public/stylesheets/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index e4d2e2e..c136867 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -158,7 +158,7 @@ li:hover { padding: 5px; } -#week-selector input[type='button'] { +#week-selector button { background: inherit; color: white; border: 0px; @@ -182,7 +182,7 @@ input { background: none; } -#week-selector input[type='button']:focus, #search #overflow-button:focus, #search .fav:focus { +#week-selector button:focus, #search #overflow-button:focus, #search .fav:focus { outline: none; background-color: #D32F2F; } -- cgit v1.1 From 186b477085d63e23566d9ac4c11a36cde178e14e Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 19:24:31 +0100 Subject: hide week selector when didn't search --- public/stylesheets/style.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c136867..78974fb 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -117,8 +117,8 @@ li:hover { padding: 0; } -#search-space-filler { - height: 73px; +body.searched #search-space-filler { + height: 70px; } .autocomplete-wrapper { @@ -208,11 +208,15 @@ ul a { 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; -- cgit v1.1 From 2e9a1e4bbb20b44bbd3416be2f2bfafbfca8dacf Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 19:55:39 +0100 Subject: only show fav button when searched --- public/stylesheets/style.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 78974fb..c3fe06c 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -180,6 +180,12 @@ input { 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 { -- cgit v1.1 From a4fad200782966a4b850c5635c864915c18a8bd1 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 6 Dec 2016 20:11:35 +0100 Subject: centered week selector text verticaly --- public/stylesheets/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index c3fe06c..869ae89 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -153,9 +153,10 @@ body.searched #search-space-filler { } #week-selector .current { + display: flex; flex-grow: 1; - text-align: center; - padding: 5px; + align-items: center; + justify-content: center; } #week-selector button { -- cgit v1.1 From 3b14fbf32d87668a3fbbf561a4d6dfaddaa0bcc9 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 7 Dec 2016 12:17:30 +0100 Subject: switched to input[type='search'] --- public/stylesheets/print.css | 2 +- public/stylesheets/style.css | 25 +++++++++++++++++++++---- 2 files changed, 22 insertions(+), 5 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/print.css b/public/stylesheets/print.css index dd17a42..b6c3110 100644 --- a/public/stylesheets/print.css +++ b/public/stylesheets/print.css @@ -11,7 +11,7 @@ max-width: inherit; } -#search input[type="text"] { +#search input[type="search"] { background-color: inherit; color: black; font-weight: bold; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 869ae89..cda0b19 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -43,7 +43,7 @@ html, body { color: #FFFFFF; } -#search input[type='text'] { +#search input[type='search'] { display: block; background-color: #f6695e; color: inherit; @@ -57,16 +57,33 @@ html, body { transition: box-shadow 200ms ease-in-out; } -#search input[type='text']:focus { +#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='text']:focus + button { +#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[tupe="search"]::-ms-clear { + width: 0; + height: 0; +} + +button::-moz-focus-inner { + border: 0; +} + + /* WebKit, Blink, Edge */ input::-webkit-input-placeholder { color: #FFCDD2; @@ -282,7 +299,7 @@ body.no-input #week-selector { transform: translateY(-75%); } - body.no-input #search input[type='text'] { + body.no-input #search input[type='search'] { background-color: #FFF; } -- cgit v1.1 From 73af3c8dee488ba962e44343f1e57a5ca3deb428 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 7 Dec 2016 12:48:14 +0100 Subject: add tooltip --- public/stylesheets/style.css | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index cda0b19..f569134 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -324,4 +324,28 @@ body.no-input #week-selector { body.no-input #search input:-ms-input-placeholder { color: #757575; } +} + +.tooltip { + display: none; +} + +body.no-input .tooltip { + display: block; + position: absolute; + background-color: white; + padding: 15px; + margin: 32px 8px; + border-radius: 2px; +} + +body.no-input .tooltip::before { + content: ''; + width: 24px; + height: 24px; + background-color: white; + top: -12px; + position: absolute; + transform: rotate(45deg); + z-index: -1; } \ No newline at end of file -- cgit v1.1 From fa4cb48e2ca2186a9fb82407a9d1febd438e61c7 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 7 Dec 2016 13:00:18 +0100 Subject: improved tooltip --- public/stylesheets/style.css | 43 +++++++++++++++++++++++-------------------- 1 file changed, 23 insertions(+), 20 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index f569134..e35d389 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -324,28 +324,31 @@ body.no-input #week-selector { body.no-input #search input:-ms-input-placeholder { color: #757575; } -} -.tooltip { - display: none; -} + body.no-input .tooltip { + display: block; + position: absolute; + background-color: white; + padding: 15px; + margin: 32px 8px; + border-radius: 2px; -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; + } } -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 -- cgit v1.1 From bbb106183b49350361e8e2c99ecc8476a4abeeb5 Mon Sep 17 00:00:00 2001 From: Noah Loomans Date: Wed, 7 Dec 2016 13:17:47 +0100 Subject: fix typo and change inherit to transparent (IE) --- public/stylesheets/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'public/stylesheets') diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index e35d389..5c51bb4 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -74,7 +74,7 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } -input[tupe="search"]::-ms-clear { +input[type="search"]::-ms-clear { width: 0; height: 0; } @@ -177,7 +177,7 @@ body.searched #search-space-filler { } #week-selector button { - background: inherit; + background: transparent; color: white; border: 0px; padding: 5px 10px; -- cgit v1.1