diff options
| -rw-r--r-- | resources/servo.css | 103 |
1 files changed, 93 insertions, 10 deletions
diff --git a/resources/servo.css b/resources/servo.css index 5f53c177e59..dd3d9440a91 100644 --- a/resources/servo.css +++ b/resources/servo.css @@ -1,26 +1,105 @@ button, -input { background: white; min-height: 1.0em; padding: 0em; padding-left: 0.25em; padding-right: 0.25em; border: solid lightgrey 1px; color: black; font-family: sans-serif; font-size: 0.7em; white-space: nowrap; text-align: left; line-height: 1.8; } -textarea { background: white; min-height: 1.0em; padding: 0em; padding-left: 0.25em; padding-right: 0.25em; border: solid lightgrey 1px; color: black; font-family: sans-serif; font-size: 0.7em; white-space: pre; } +input { + background: white; + min-height: 1.0em; + padding: 0em; + padding-left: 0.25em; + padding-right: 0.25em; + border: solid lightgrey 1px; + color: black; + font-family: sans-serif; + font-size: 0.7em; + white-space: nowrap; + text-align: left; + line-height: 1.8; +} + +textarea { + background: white; + min-height: 1.0em; + padding: 0em; + padding-left: 0.25em; + padding-right: 0.25em; + border: solid lightgrey 1px; + color: black; + font-family: sans-serif; + font-size: 0.7em; + white-space: pre; +} + input::selection, -textarea::selection { background: rgba(176, 214, 255, 1.0); color: black; } +textarea::selection { + background: rgba(176, 214, 255, 1.0); + color: black; +} + button, input[type="button"], input[type="submit"], -input[type="reset"] { background: lightgrey; border-top: solid 1px #EEEEEE; border-left: solid 1px #CCCCCC; border-right: solid 1px #999999; border-bottom: solid 1px #999999; text-align: center; vertical-align: middle; color: black; } -input[type="hidden"] { display: none !important } +input[type="reset"] { + background: lightgrey; + border-top: solid 1px #EEEEEE; + border-left: solid 1px #CCCCCC; + border-right: solid 1px #999999; + border-bottom: solid 1px #999999; + text-align: center; + vertical-align: middle; + color: black; +} + +input[type="hidden"] { display: none !important } + input[type="checkbox"], -input[type="radio"] { font-family: monospace !important; border: none !important; background: transparent; } +input[type="radio"] { + font-family: monospace !important; + border: none !important; + background: transparent; +} + +input[type="checkbox"]::before { + display: inline-block; + border: solid currentcolor 1px; + content: ""; + padding: 0; + width: 1em; + height: 1em; + text-align: center; +} -input[type="checkbox"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; text-align: center; } input[type="checkbox"]:checked::before { content: "✓"; } input[type="checkbox"]:indeterminate::before { content: "-"; } -input[type="radio"]::before { display: inline-block; border: solid currentcolor 1px; content: ""; padding: 0; width: 1em; height: 1em; border-radius: 50%; text-align: center; } + +input[type="radio"]::before { + display: inline-block; + border: solid currentcolor 1px; + content: ""; + padding: 0; + width: 1em; + height: 1em; + border-radius: 50%; + text-align: center; +} + input[type="radio"]:checked::before { content: "●"; line-height: 1em; } -select { border-style: solid; border-width: 1px; background: white; } +select { + border-style: solid; + border-width: 1px; + background: white; +} + select[multiple] { padding: 0em 0.25em; } select:not([multiple]) { padding: 0.25em 0.5em; border-radius: 6px; } -select:not([multiple])::after { content: ""; display: inline-block; border-width: 5.2px 3px 0 3px; border-style: solid; border-color: currentcolor transparent transparent transparent; margin-left: 0.5em; } + +select:not([multiple])::after { + content: ""; + display: inline-block; + border-width: 5.2px 3px 0 3px; + border-style: solid; + border-color: currentcolor transparent transparent transparent; + margin-left: 0.5em; +} + select:not([multiple]) option { display: none !important; } select:not([multiple]) option[selected] { display: inline !important; } select[multiple] option { display: block !important; } @@ -46,19 +125,23 @@ textarea { details { display: block; } + details::-servo-details-summary { margin-left: 40px; display: list-item; list-style: disclosure-closed; } + details[open]::-servo-details-summary { list-style: disclosure-open; } + *|*::-servo-details-content { margin-left: 40px; overflow: hidden; display: block; } + /* * Until servo supports svg properly, make sure to at least prevent svg * children from being layed out and rendered like usual html. |