Bradley M. Kuhn
6b649e2f48
I wrap the entire section that has material that can be expanded in a div with class `expandable-section`. Once doing so, if you provide an anchor with the class of `expander`, that anchor will be created with text in the `data-expand-link-text` attribute. I've also added some CSS to make the link look a certain way, for good measure.
119 lines
1.9 KiB
CSS
119 lines
1.9 KiB
CSS
.supporter-type-selection .prolog > span:first-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.supporter-form-input {
|
|
margin-bottom: .5em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.supporter-form-input label {
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
white-space: normal;
|
|
}
|
|
|
|
.supporter-form-input input[name=amount],
|
|
.supporter-form-input input[name=a3] {
|
|
width: 5em;
|
|
}
|
|
|
|
.supporter-form-input input[type=radio] {
|
|
margin-left: 1em;
|
|
margin-right: .2em;
|
|
}
|
|
|
|
.supporter-form-input input[type=radio]:first-of-type {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.supporter-form-submit {
|
|
text-align: center;
|
|
}
|
|
|
|
.form-error, .supporter-form-input p {
|
|
font-size: 80%;
|
|
white-space: normal;
|
|
}
|
|
|
|
.form-error {
|
|
color: red;
|
|
}
|
|
|
|
input.invalid, textarea.invalid {
|
|
border: 2px solid red;
|
|
}
|
|
|
|
input.valid, textarea.valid {
|
|
border: 2px solid green;
|
|
}
|
|
|
|
.supporter-type-selector {
|
|
clear: both;
|
|
font-size: 125%;
|
|
text-align: center;
|
|
}
|
|
|
|
h1.appeal {
|
|
margin-top: -.75em;
|
|
}
|
|
|
|
img.appeal-left {
|
|
float: left;
|
|
padding-right: 1em;
|
|
margin: .25em;
|
|
min-width: 8%;
|
|
max-width: 30%;
|
|
height: auto;
|
|
}
|
|
|
|
img.appeal-right {
|
|
float: right;
|
|
padding-left: 1em;
|
|
margin: .25em;
|
|
min-width: 8%;
|
|
max-width: 30%;
|
|
width: auto;
|
|
}
|
|
|
|
img.appeal {
|
|
float: left;
|
|
padding-right: 1em;
|
|
min-width: 10%;
|
|
max-width: 85%;
|
|
width: auto;
|
|
}
|
|
|
|
img.appeal-header {
|
|
max-width: 100%;
|
|
width: auto;
|
|
margin-top: 0em;
|
|
}
|
|
|
|
img.appeal-footer {
|
|
max-width: 40%;
|
|
float: right;
|
|
width: 10%;
|
|
min-width: 1%;
|
|
height: auto;
|
|
}
|
|
img.appeal-match {
|
|
float: left;
|
|
height: auto;
|
|
border: 1px solid #fff;
|
|
width: 10%;
|
|
margin-top: .25em;
|
|
margin-bottom: .25em;
|
|
margin-right: 1em;
|
|
background: #eee;
|
|
}
|
|
p.appeal-match-text {
|
|
width: 100%;
|
|
border: 1px solid #fff;
|
|
background: #eee;
|
|
}
|
|
a.expander {
|
|
font-size: 75%;
|
|
font-style: italic;
|
|
text-align: center;
|
|
}
|