122 lines
3 KiB
SCSS
122 lines
3 KiB
SCSS
|
/**
|
||
|
|
* Quickreply and talkform tweaks:
|
||
|
|
* (To make them fit better with Foundation's odd form control styles.)
|
||
|
|
*/
|
||
|
|
|
||
|
|
@mixin hack-normal-button {
|
||
|
|
@include button;
|
||
|
|
@include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color);
|
||
|
|
@include inset-shadow();
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin hack-match-input-height {
|
||
|
|
// Foundation sets input/select heights weirdly, and doesn't have a built-in
|
||
|
|
// way to make nearby buttons not look janky. So copy that height logic.
|
||
|
|
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin hack-normal-select {
|
||
|
|
// Foundation likes stretching selects to 100% for some reason. It also
|
||
|
|
// draws an artificial dropdown triangle we need to leave room for.
|
||
|
|
width: auto;
|
||
|
|
padding-right: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin hack-smaller-select {
|
||
|
|
width: auto;
|
||
|
|
height: 1.6rem;
|
||
|
|
padding: 0 24px 0 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin hack-smaller-button {
|
||
|
|
height: 1.6rem;
|
||
|
|
padding: 0 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#qrformdiv {
|
||
|
|
// Consistent Foundation styles for most buttons
|
||
|
|
input[type="button"],
|
||
|
|
button:not(#lj_userpicselect),
|
||
|
|
input[type="submit"]:not(#submitpost) {
|
||
|
|
@include hack-normal-button;
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#submitpost {
|
||
|
|
@include inset-shadow();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear unwanted extra button styles for icon browse button.
|
||
|
|
#lj_userpicselect {
|
||
|
|
border-radius: initial;
|
||
|
|
box-shadow: initial;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Foundation default (inline-block) gives worse wrapping on mobile for long labels.
|
||
|
|
label {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea {
|
||
|
|
// Foundation hates textarea resizers
|
||
|
|
max-width: unset;
|
||
|
|
// Foundation sets height to "illegible chiclet," then unsets it with an
|
||
|
|
// attribute selector on the "rows" attribute. Works fine, unless you're
|
||
|
|
// browsing with a potato that doesn't understand attribute selectors.
|
||
|
|
height: unset;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Shrink subject a bit
|
||
|
|
.qr-subject {
|
||
|
|
input[type="text"] {
|
||
|
|
height: 2.2rem;
|
||
|
|
padding: 0.3em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-meta {
|
||
|
|
// Make .ljuser bigger ("font-size: smaller" looks more balanced on journal
|
||
|
|
// styles, but unbalanced here due to big form fields and smaller body text).
|
||
|
|
.ljuser {
|
||
|
|
font-size: inherit !important;
|
||
|
|
}
|
||
|
|
// Make more options and icon controls smaller so they don't tower over the
|
||
|
|
// icon preview.
|
||
|
|
select {
|
||
|
|
@include hack-smaller-select;
|
||
|
|
}
|
||
|
|
|
||
|
|
button, input[type="button"] {
|
||
|
|
@include hack-smaller-button;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qr-markup {
|
||
|
|
// Default form controls are too huge to go between subject and body.
|
||
|
|
select {
|
||
|
|
@include hack-smaller-select;
|
||
|
|
vertical-align: top; // Lets the help link image triangulate properly.
|
||
|
|
}
|
||
|
|
|
||
|
|
button, input[type="button"] {
|
||
|
|
@include hack-smaller-button;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hack to make the "multiform" comment editing controls match site-skin without
|
||
|
|
* messing with the S2 markup
|
||
|
|
*/
|
||
|
|
#multiform_mode {
|
||
|
|
@include hack-normal-select;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
#multiform_submit {
|
||
|
|
@include hack-normal-button;
|
||
|
|
@include hack-match-input-height;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|