a428899b3c
Modern browsers support styling radio buttons and checkboxes with CSS. This makes the implementation much easier, and the fallback for older browsers is still decent.
129 lines
2.9 KiB
CSS
129 lines
2.9 KiB
CSS
/* Copyright 2015 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
/* Used for annotation layer tests */
|
|
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.annotationLayer {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.annotationLayer > section {
|
|
position: absolute;
|
|
}
|
|
|
|
.annotationLayer .linkAnnotation > a {
|
|
position: absolute;
|
|
font-size: 1em;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.2;
|
|
background: #ff0;
|
|
box-shadow: 0px 2px 10px #ff0;
|
|
}
|
|
|
|
.annotationLayer .textAnnotation img {
|
|
position: absolute;
|
|
}
|
|
|
|
.annotationLayer .textWidgetAnnotation input,
|
|
.annotationLayer .textWidgetAnnotation textarea,
|
|
.annotationLayer .choiceWidgetAnnotation select,
|
|
.annotationLayer .buttonWidgetAnnotation.checkBox input,
|
|
.annotationLayer .buttonWidgetAnnotation.radioButton input {
|
|
background-color: rgba(0, 54, 255, 0.13);
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box;
|
|
font-size: 9px;
|
|
height: 100%;
|
|
padding: 0 3px;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
.annotationLayer .textWidgetAnnotation textarea {
|
|
font: message-box;
|
|
font-size: 9px;
|
|
resize: none;
|
|
}
|
|
|
|
.annotationLayer .textWidgetAnnotation input[disabled],
|
|
.annotationLayer .textWidgetAnnotation textarea[disabled],
|
|
.annotationLayer .choiceWidgetAnnotation select[disabled],
|
|
.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
|
|
.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.annotationLayer .textWidgetAnnotation input.comb {
|
|
font-family: monospace;
|
|
padding-left: 2px;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.annotationLayer .buttonWidgetAnnotation.checkBox input,
|
|
.annotationLayer .buttonWidgetAnnotation.radioButton input {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-ms-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.annotationLayer .popupAnnotation {
|
|
display: block !important;
|
|
}
|
|
|
|
.annotationLayer .popupWrapper {
|
|
display: block !important;
|
|
position: absolute;
|
|
width: 20em;
|
|
}
|
|
|
|
.annotationLayer .popup {
|
|
position: absolute;
|
|
z-index: 200;
|
|
max-width: 20em;
|
|
background-color: #FFFF99;
|
|
box-shadow: 0px 2px 5px #333;
|
|
border-radius: 2px;
|
|
padding: 0.6em;
|
|
margin-left: 5px;
|
|
font: message-box;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.annotationLayer .popup h1 {
|
|
font-size: 1em;
|
|
border-bottom: 1px solid #000000;
|
|
margin: 0;
|
|
padding: 0 0 0.2em 0;
|
|
}
|
|
|
|
.annotationLayer .popup p {
|
|
margin: 0;
|
|
padding: 0.2em 0 0 0;
|
|
}
|