f757d7d1a5
The search bar doesn't feel right if the placeholder is centered, while the text cursor is left-aligned. The cursor should appear instead of the placeholder (at the same position). Added styles to center the text cursor and hide the placeholder when selecting the input field. Tested in: - Firefox 54 & 55 - Chromium 60 (compatible with Chrome 60) - Microsoft Edge (partially working!) --- Microsoft Edge --- Due to a bug in the Microsoft Edge browser, the text cursor is not centered as long as the placeholder is defined (which it is always) More information: https://stackoverflow.com/a/33224868 Official bug report: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4468563/ ----------------------
305 lines
3.7 KiB
CSS
305 lines
3.7 KiB
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
outline: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
|
|
}
|
|
/* HTML5 display-role reset for older browsers */
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
/* Let's go for the actual style */
|
|
|
|
body {
|
|
|
|
background-color: #EEEEEE;
|
|
font-family: 'Noto Sans';
|
|
|
|
}
|
|
|
|
header {
|
|
|
|
text-shadow:0 5px 6px rgba(150,150,150,0.69);
|
|
text-align: center;
|
|
color: #1182DB;
|
|
|
|
}
|
|
|
|
header > h1 {
|
|
|
|
font-size: 300%;
|
|
|
|
}
|
|
|
|
header > h2 {
|
|
|
|
margin-left: 1em;
|
|
font-size: 120%;
|
|
|
|
}
|
|
|
|
header > p.status {
|
|
font-weight: bold;
|
|
margin: 1em;
|
|
color: red;
|
|
}
|
|
|
|
.searchbar {
|
|
|
|
width: 50%;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
.searchbar input[type="text"] {
|
|
|
|
width: 100%;
|
|
margin: auto;
|
|
font-size: 1.4em;
|
|
|
|
}
|
|
|
|
.searchbar input[type="text"]::placeholder {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.searchbar > h3 {
|
|
|
|
font-size: 150%;
|
|
font-weight: bold;
|
|
color: #1182DB;
|
|
|
|
}
|
|
|
|
section {
|
|
|
|
background-color: #FFFFFF;
|
|
width: 80%;
|
|
margin: 30px auto;
|
|
padding: 10px 15px;
|
|
text-align: center;
|
|
|
|
box-shadow: 0px 1px 2px rgba(0,0,0, 0.25);
|
|
|
|
}
|
|
|
|
|
|
section.footer {
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
section.footer:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
section > h2 {
|
|
|
|
font-size: 200%;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
a, a:link, a:visited {
|
|
|
|
color: #2196F3;
|
|
|
|
}
|
|
|
|
button {
|
|
|
|
line-height: 1.9em;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
vertical-align: middle;
|
|
padding: 6px 12px;
|
|
margin: 12px auto 0px;
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
|
border-radius: 2px;
|
|
border: 1px solid transparent;
|
|
min-width: 140px;
|
|
background: #2196F3 none repeat scroll 0% 0%;
|
|
cursor: pointer;
|
|
|
|
width: calc(20% - 4px);
|
|
|
|
}
|
|
|
|
button.small {
|
|
|
|
width: auto;
|
|
line-height: 1.2em;
|
|
|
|
}
|
|
|
|
.description {
|
|
|
|
margin: 10px;
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
h5 {
|
|
|
|
margin: 20px;
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
form {
|
|
|
|
margin-bottom: 6px;
|
|
|
|
}
|
|
|
|
.maintainer {
|
|
|
|
font-size: 60%;
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
.secure-warning {
|
|
|
|
background-color: #ffc600;
|
|
color: #5f5f5f;
|
|
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
|
border-radius: 2px;
|
|
border: 1px solid transparent;
|
|
|
|
width: 80%;
|
|
margin: auto;
|
|
margin-bottom: 6px;
|
|
|
|
}
|
|
|
|
input[type="text"] {
|
|
|
|
background-color: white;
|
|
color: #404552;
|
|
border: 0px;
|
|
border-bottom: 2px solid #2196F3;
|
|
font-size: 1.1em;
|
|
margin-left: 8px;
|
|
padding-left: 4px;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
input[type="text"]:focus::-webkit-input-placeholder {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
input[type="text"]:focus::-moz-placeholder {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
input[type="text"]:focus:-moz-placeholder {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
input[type="text"]:focus:-ms-input-placeholder {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
form {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
h5 {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.showmore-box {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.showmore, .showless {
|
|
|
|
color: #888888;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.showmore-box:checked ~ .showmore {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.showmore-box:not(:checked) ~ .showless {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.showmore-box:checked ~ form, .showmore-box:checked ~ h5 {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
/* Additional styles for error pages */
|
|
|
|
.exception-message {
|
|
|
|
background-color: #c00000;
|
|
color: #FFFFFF;
|
|
|
|
font-weight: bold;
|
|
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
|
|
border-radius: 2px;
|
|
border: 1px solid transparent;
|
|
|
|
width: 80%;
|
|
margin: auto;
|
|
margin-bottom: 6px;
|
|
|
|
}
|
|
|
|
.advice {
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
display: table;
|
|
|
|
}
|
|
|
|
.advice > li {
|
|
|
|
text-align: left;
|
|
|
|
}
|