External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(post form): style submit form in all themes

Browse Source
This commit is contained in:
plebeius.eth
2024-04-24 11:26:15 +02:00
parent a5a7a97e47
commit a6bbddd2cd
2 changed files with 74 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post-form/post-form.module.css
+24 -18
View File
@@ -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) {
src/themes.css
+50
View File
@@ -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;