diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 6b3ff070..e3fc082c 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -32,9 +32,9 @@ color: var(--post-form-field-title-color); font-weight: var(--post-form-field-title-font-weight); border: var(--post-form-field-border); - padding: 0 5px; + padding: var(--post-form-field-title-padding); + font-size: var(--post-form-field-title-font-size); width: 80px; - font-size: 10pt; } .postFormButtonDesktop td { @@ -43,39 +43,45 @@ font-size: 10pt; position: relative; } + +.postFormButtonDesktop input[type="text"], .postFormButtonDesktop textarea { + border: var(--post-form-field-input-border, revert); + font-family: var(--post-form-field-font-family, revert); + appearance: var(--post-form-field-input-appearance, revert); + outline: var(--post-form-field-input-outline, revert); + background-color: var(--post-form-field-input-background-color, revert); + color: var(--post-form-field-input-color, revert); + filter: var(--filter80); + padding: 2px 4px 3px; + font-size: 10pt; +} + +.postFormButtonDesktop input[type="text"]:focus, .postFormButtonDesktop textarea:focus { + border: var(--post-form-field-input-focus-border, revert); +} .postFormButtonDesktop td > input[type="text"] { width: 244px; - margin: 0; - margin-right: 2px; - padding: 2px 4px 3px; - border: 1px solid #aaa; - outline: none; - appearance: none; - font-family: arial, helvetica, sans-serif; - font-size: 10pt; } .postFormButtonDesktop textarea { width: 292px; - margin-bottom: 0; - outline: none; - border-radius: none; - border: 1px solid #aaa; - padding: 2px 4px 3px; - appearance: none; - font-family: arial, helvetica, sans-serif; - font-size: 10pt; /* textareas have a gap below them that differs along browsers https://stackoverflow.com/a/7144960 */ vertical-align: top; } +.postFormButtonDesktop button { + margin-left: 2px; + filter: var(--filter80); +} + .linkType { font-weight: normal; position: absolute; white-space: nowrap; bottom: 3px; + padding-left: 3px; } @media (max-width: 640px) { diff --git a/src/themes.css b/src/themes.css index d8cdf0e5..c18e251b 100644 --- a/src/themes.css +++ b/src/themes.css @@ -112,6 +112,17 @@ /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #ea8; + --post-form-field-title-color: #800; + --post-form-field-border: 1px solid #800; + --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #aaa; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + --post-form-field-input-focus-border: 1px solid #ea8; /* quotelink */ --post-quotelink-text-color: navy; @@ -246,6 +257,13 @@ --post-form-field-title-color: #000; --post-form-field-border: 1px solid #000; --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #aaa; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + --post-form-field-input-focus-border: 1px solid #98e; /* quotelink */ --post-quotelink-text-color: #d00; @@ -353,6 +371,11 @@ /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #ea8; + --post-form-field-title-color: #800; + --post-form-field-border: none; + --post-form-field-title-font-weight: 700; + --post-form-field-title-font-size: 16px; /* quotelink */ --post-quotelink-text-color: navy; @@ -474,6 +497,11 @@ /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #98e; + --post-form-field-title-color: #000; + --post-form-field-border: none; + --post-form-field-title-font-weight: 700; + --post-form-field-title-font-size: 16px; /* quotelink */ --post-quotelink-text-color: #d00; @@ -608,6 +636,17 @@ /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #282a2e; + --post-form-field-title-color: #c5c8c6; + --post-form-field-border: 1px solid #111; + --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #aaa; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + --post-form-field-input-focus-border: 1px solid #111; /* select */ --select-border: 1px solid #575a60; @@ -714,6 +753,17 @@ /* post form */ --post-form-toggle-font-size: 22px; --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #ddd; + --post-form-field-title-color: #333; + --post-form-field-border: 1px solid #ccc; + --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #aaa; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + --post-form-field-input-focus-border: 1px solid #ea8; /* quotelink */ --post-quotelink-text-color: #f60;