127
128
129
130
131
132
133
134
135
136
137
138
139
140
...
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
...
541
542
543
544
545
546
547
548
|
tone(-50%),
tone(-35%)
);
input[type='text'], input[type='password'], textarea {
@extend %serif;
padding: 0.08in 0.1in;
border: 1px solid black;
background: linear-gradient(to bottom, tone(-55%), tone(-40%));
font-size: 16pt;
color: tone(25%);
box-shadow: inset 0 0 20px -3px tone(-55%);
&:focus {
color: white;
................................................................................
> a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
}
}
form.compose {
@extend %box;
display: grid;
grid-template-columns: 1.1in 2fr min-content 1fr;
grid-template-rows: 1fr min-content;
grid-gap: 2px;
padding: 0.1in;
> img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
> textarea {
grid-column: 2/5; grid-row: 1/2; height: 3in;
resize: vertical;
margin-bottom: 0.08in;
}
> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
> button { grid-column: 4/5; grid-row: 2/3; }
a.help[href] { margin-right: 0.05in }
}
a.help[href] {
display: block;
text-align: center;
padding: 0.09in 0.2in;
................................................................................
padding-top: 0.12in;
background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
border: 1px solid tone(-55%);
border-left: none;
text-shadow: 1px 1px 0 black;
}
}
}
|
>
|
|
>
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
...
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
...
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
|
tone(-50%),
tone(-35%)
);
input[type='text'], input[type='password'], textarea {
@extend %serif;
padding: 0.08in 0.1in;
box-sizing: border-box;
border: 1px solid black;
background: linear-gradient(to bottom, tone(-55%), tone(-40%));
font-size: 16pt;
color: tone(25%);
box-shadow: inset 0 0 20px -3px tone(-55%);
&:focus {
color: white;
................................................................................
> a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
}
}
form.compose {
@extend %box;
display: grid;
grid-template-columns: 1.1in 2fr min-content 1fr 1.5fr;
grid-template-rows: 1fr min-content;
grid-gap: 2px;
padding: 0.1in;
> img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
> textarea {
grid-column: 2/6; grid-row: 1/2; height: 3in;
resize: vertical;
margin-bottom: 0.08in;
}
> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
> button[value="post"] { grid-column: 5/6; grid-row: 2/3; }
> button[value="attach"] { grid-column: 4/5; grid-row: 2/3; }
a.help[href] { margin-right: 0.05in }
}
a.help[href] {
display: block;
text-align: center;
padding: 0.09in 0.2in;
................................................................................
padding-top: 0.12in;
background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
border: 1px solid tone(-55%);
border-left: none;
text-shadow: 1px 1px 0 black;
}
}
}
form {
.elem {
margin: 0.1in 0;
label { display:block; font-weight: bold; padding: 0.03in 0; }
.txtbox {
@extend %serif;
box-sizing: border-box;
padding: 0.08in 0.1in;
border: 1px solid black;
background: tone(-55%);
}
input, textarea, .txtbox {
display: block;
width: 100%;
}
button { float: right; width: 50%; }
}
}
|