tim
4657088d23
An invisible copy of the note sits under the image box, so the page does not jump when the tabs change.
407 lines
8.0 KiB
CSS
407 lines
8.0 KiB
CSS
input {
|
|
font-family: "Noto Sans", "Verdana", sans-serif;
|
|
}
|
|
input[type=checkbox] {
|
|
accent-color: #006633;
|
|
}
|
|
#main .grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(75px, 125px) auto;
|
|
}
|
|
#main .grid > .rightcolumn {
|
|
margin-top: 5px;
|
|
align-self: end;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
}
|
|
#main .grid .rightcolumn > input {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 300px;
|
|
padding: 3px 8px;
|
|
font-size: 12pt;
|
|
border: 1px solid #b8c9be;
|
|
border-radius: 8px;
|
|
}
|
|
#main .grid .rightcolumn > input:focus {
|
|
border-color: #006633;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
|
|
}
|
|
#main .grid .rightcolumn input#remember {
|
|
margin-top: 7px;
|
|
width: initial;
|
|
}
|
|
|
|
#main .grid > label {
|
|
display: block;
|
|
margin-top: 5px;
|
|
text-align: right;
|
|
width: calc(100% - 20px);
|
|
padding-right: 20px;
|
|
}
|
|
|
|
#main .grid #textparent {
|
|
min-height: 200px;
|
|
}
|
|
|
|
#main .submission button {
|
|
padding: 4px 14px;
|
|
border: 1px solid #006633;
|
|
border-radius: 6px;
|
|
background-color: #FFFFFF;
|
|
color: #006633;
|
|
font: bold 11pt "Noto Sans", "Verdana", sans-serif;
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
}
|
|
#main .submission button:hover {
|
|
background-color: #006633;
|
|
color: #FFFFFF;
|
|
}
|
|
#main .grid #hidden {
|
|
display: block;
|
|
margin: 5px 0;
|
|
width: initial;
|
|
}
|
|
|
|
#main .grid .textarea {
|
|
width: inherit;
|
|
}
|
|
|
|
#main .grid textarea.submission {
|
|
margin-top: 10px;
|
|
border: 1px solid #b8c9be;
|
|
border-radius: 8px;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
div.note {
|
|
display: block;
|
|
text-align: justify;
|
|
font-size: 10.5pt;
|
|
margin-bottom: 10px;
|
|
}
|
|
.textarea div.note {
|
|
}
|
|
|
|
.in-note {
|
|
text-align: justify;
|
|
font-size: 12pt;
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.remove img {
|
|
padding: 5px;
|
|
padding-left: 10px;
|
|
float: right;
|
|
}
|
|
|
|
#main .tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
#main .tab,
|
|
#main .counter {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
margin-top: 5px;
|
|
text-align: right;
|
|
padding-right: 20px;
|
|
}
|
|
#main .tab {
|
|
padding-top: 3px;
|
|
padding-bottom: 3px;
|
|
padding-left: 5px;
|
|
background-color: #e3ebe6;
|
|
color: #006633;
|
|
cursor: pointer;
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
#main .tab:hover {
|
|
background-color: #d2e2d8;
|
|
}
|
|
/* The tab that is showing */
|
|
#main .tab.active {
|
|
background-color: #006633;
|
|
color: white;
|
|
cursor: default;
|
|
}
|
|
/* A tab whose field failed validation */
|
|
#main .tab.red {
|
|
color: #cc0000;
|
|
}
|
|
#main .tab.active.red {
|
|
color: #ffd0d0;
|
|
}
|
|
/* WordCount */
|
|
#main .counter {
|
|
font-size: 11pt;
|
|
}
|
|
|
|
/*
|
|
* The image box has the size of the story editor (publish/editor.css), so
|
|
* that the box keeps its size when the tabs change: at most 450px wide,
|
|
* and 337px high. That is the 300px writing area, the 35px toolbar (26px
|
|
* buttons, 1px margins, 3px padding and a 1px line) and the 2px border.
|
|
* An invisible copy of the note under the editor takes the same space
|
|
* under the box.
|
|
*/
|
|
#uploadparent > .upload {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 450px;
|
|
height: 337px;
|
|
overflow: auto;
|
|
border: 1px solid #b8c9be;
|
|
border-radius: 8px;
|
|
}
|
|
#uploadparent > .upload > div {
|
|
padding: 10px;
|
|
}
|
|
#uploadparent > .spacer {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.yes {
|
|
font-weight: bold;
|
|
}
|
|
.no {
|
|
color: red;
|
|
}
|
|
|
|
.required {
|
|
display: inline-flex;
|
|
align-self: center;
|
|
color: red;
|
|
}
|
|
|
|
ul.error-box {
|
|
border: 1px solid #cc0000;
|
|
border-radius: 8px;
|
|
background-color: #fff5f5;
|
|
padding: 10px 30px;
|
|
}
|
|
fieldset.mi_group_prevacct ul.error-box {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 4px 0 0 6px;
|
|
color: red;
|
|
}
|
|
ul.error-box li {
|
|
margin: 4px 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#main .grid div.g-recaptcha {
|
|
grid-column: 2;
|
|
margin: 5px 0;
|
|
}
|
|
#captcha #recaptcha_image {
|
|
margin-left: 120px;
|
|
border: 1px solid #b8c9be;
|
|
border-radius: 8px;
|
|
}
|
|
#captcha .icons {
|
|
position:relative;
|
|
top:0.6em;
|
|
}
|
|
|
|
/* The search box above the list of posted stories in publish/edit */
|
|
#main .story-search {
|
|
display: flex;
|
|
gap: 6px;
|
|
margin: 10px 0 20px;
|
|
}
|
|
#main .story-search input {
|
|
box-sizing: border-box;
|
|
width: 300px;
|
|
min-width: 0;
|
|
padding: 3px 8px;
|
|
border: 1px solid #b8c9be;
|
|
border-radius: 8px;
|
|
font-size: 12pt;
|
|
}
|
|
#main .story-search input:focus {
|
|
border-color: #006633;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
|
|
}
|
|
#main .story-search button {
|
|
padding: 4px 14px;
|
|
border: 1px solid #006633;
|
|
border-radius: 6px;
|
|
background-color: #ffffff;
|
|
color: #006633;
|
|
font: bold 11pt "Noto Sans", "Verdana", sans-serif;
|
|
cursor: pointer;
|
|
}
|
|
#main .story-search button:hover {
|
|
background-color: #006633;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/*
|
|
* Phones: one column, with each label above its input. The inputs, the
|
|
* editor and the image box take the full width, the controls are at
|
|
* least 44px high for fingers, and the text is at least 16px, so that
|
|
* iOS does not zoom in when an input gets the focus.
|
|
*/
|
|
@media (max-width: 600px) {
|
|
#main .grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
#main .grid > * {
|
|
min-width: 0;
|
|
}
|
|
#main .grid > .leftcolumn {
|
|
display: none;
|
|
}
|
|
#main .grid > label {
|
|
width: auto;
|
|
margin-top: 14px;
|
|
padding-right: 0;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
}
|
|
#main .grid > .rightcolumn {
|
|
margin-top: 4px;
|
|
align-self: stretch;
|
|
}
|
|
/* The star of a required field goes inside the right end of the input,
|
|
so that all the inputs have the same width */
|
|
#main .grid > .rightcolumn:has(.required) {
|
|
position: relative;
|
|
}
|
|
#main .grid .rightcolumn > input:has(+ .required) {
|
|
padding-right: 30px;
|
|
}
|
|
#main .grid .rightcolumn > .required {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 12px;
|
|
transform: translateY(-50%);
|
|
}
|
|
#main .grid .rightcolumn > input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
width: auto;
|
|
min-height: 44px;
|
|
padding: 8px 12px;
|
|
font-size: 16px;
|
|
}
|
|
#main .grid .rightcolumn input#remember,
|
|
#main .grid #hidden {
|
|
flex: none;
|
|
width: 24px;
|
|
min-height: 24px;
|
|
height: 24px;
|
|
margin: 8px 0;
|
|
}
|
|
#main .grid > div.note {
|
|
margin-top: 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
/* The Text and Image tabs sit in a row on the top border of the story
|
|
box, as they touch its left border on a wide screen. They start after
|
|
its round corner. */
|
|
#main .tabs {
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
padding-top: 18px;
|
|
padding-left: 10px;
|
|
}
|
|
#main .tab {
|
|
min-height: 44px;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 10px 18px;
|
|
border-radius: 8px 8px 0 0;
|
|
text-align: center;
|
|
}
|
|
#main .counter {
|
|
margin: 0 0 6px auto;
|
|
padding-right: 0;
|
|
}
|
|
#main .grid > .textarea {
|
|
width: 100%;
|
|
margin-top: 0;
|
|
}
|
|
#main .grid .textarea .note {
|
|
margin-top: 6px;
|
|
text-align: left;
|
|
}
|
|
#main .grid #textparent {
|
|
min-height: 0;
|
|
}
|
|
/* On a phone the editor toolbar wraps onto two lines of 42px (40px
|
|
buttons and 1px margins), so the editor is 393px high */
|
|
#uploadparent > .upload {
|
|
max-width: none;
|
|
height: 393px;
|
|
}
|
|
#uploadparent input[type=file] {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
font-size: 16px;
|
|
}
|
|
#uploadparent input[type=file]::file-selector-button {
|
|
min-height: 44px;
|
|
margin-right: 10px;
|
|
padding: 8px 16px;
|
|
border: 1px solid #006633;
|
|
border-radius: 6px;
|
|
background-color: #ffffff;
|
|
color: #006633;
|
|
font: bold 16px "Noto Sans", "Verdana", sans-serif;
|
|
}
|
|
|
|
#main .grid div.g-recaptcha {
|
|
grid-column: auto;
|
|
margin: 18px 0 0;
|
|
}
|
|
|
|
#main .submission {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 18px;
|
|
}
|
|
#main .story-search input {
|
|
flex: 1;
|
|
width: auto;
|
|
min-height: 44px;
|
|
padding: 8px 12px;
|
|
font-size: 16px;
|
|
}
|
|
#main .story-search button,
|
|
#main .submission button {
|
|
min-height: 44px;
|
|
margin: 0;
|
|
padding: 8px 20px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
ul.error-box {
|
|
padding: 10px 16px 10px 20px;
|
|
}
|
|
ul.error-box li {
|
|
margin: 4px 0 4px 10px;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Below 346px the editor toolbar is narrower than its first three groups
|
|
* (300px), so it wraps onto three lines and the editor is 435px high.
|
|
*/
|
|
@media (max-width: 345px) {
|
|
#uploadparent > .upload {
|
|
height: 435px;
|
|
}
|
|
}
|