/*-----------------------------------------------------------------------------
;
; buttons.css
;     Part of the Emilda Project (http://www.emilda.org/)
;
; Description
;     Push buttons, for every template.
;
;-----------------------------------------------------------------------------*/

/* Both templates carried a button rule and both had it commented out in full,
 * so buttons had been falling through to whatever the browser happened to
 * draw. That is why they differed between browsers, and why the login button
 * was Arial 13px while every button inside the application was Open Sans 15px:
 * index.php does not load the template stylesheet.
 *
 * This file is in the forced stylesheet list in conf/page_config.conf.php, and
 * index.php and setup.php link it directly because neither goes through the
 * layout. templates/<name>/buttons.css would override it if a template ever
 * wants its own; the resolver in lib/layout.inc falls back to this one.
 *
 * The colours are Chrome's own, read off a rendered <input type=button> rather
 * than taken from its UA stylesheet, which does not describe what is painted:
 * the stylesheet says a 2px outset border in black, while the native theme
 * actually draws 1px of #767676.
 *
 *     state     face      border    text
 *     rest      #EFEFEF   #767676   #000000
 *     hover     #E5E5E5   #4F4F4F   #000000
 *     active    #F5F5F5   #8D8D8D   #000000
 *     disabled  #EFEFEF   #CFCFCF   #ABABAB
 *
 * Active is lighter than rest rather than darker. That looks backwards written
 * down, but it is what Chrome paints, and matching it is the whole point.
 *
 * Writing the values out is what makes Firefox and Safari draw the same
 * button. It is also required rather than optional: setting any of these
 * properties turns off the native appearance, which takes the browser's own
 * hover and press states with it, so they have to be restated.
 *
 * <button> is deliberately not in the selector. The only ones in the
 * application are the subject dialog's close control and the widgets jQuery UI
 * and GLightbox build for themselves, and none of those should look like a
 * form button.
 */

:is(input[type=button], input[type=submit], input[type=reset], .button) {
	appearance: none;
	-webkit-appearance: none;

	/* One size for every button. The variable is defined in
	 * templates/default/style.css; the fallback is for setup.php, which loads
	 * this file without it. */
	font-family: var(--font-text, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
	font-size: 11pt;
	font-weight: normal;
	line-height: normal;

	/* Chrome's own metrics. */
	padding: 1px 6px;
	border: 1px solid #767676;
	border-radius: 2px;
	background: #EFEFEF;
	color: #000000;

	/* The one deliberate departure: Chrome leaves the arrow cursor over a
	 * button. */
	cursor: pointer;
}

/* :enabled keeps these off disabled buttons without having to raise the
 * specificity of the disabled rule to outrank them.
 *
 * There was a .button_disabled guard here as well, for the class
 * communication.php set alongside the attribute. That page is gone and nothing
 * else ever set the class, so the attribute is the whole story now. */
:is(input[type=button], input[type=submit], input[type=reset], .button):enabled:hover {
	background: #E5E5E5;
	border-color: #4F4F4F;
}

:is(input[type=button], input[type=submit], input[type=reset], .button):enabled:active {
	background: #F5F5F5;
	border-color: #8D8D8D;
}

:is(input[type=button], input[type=submit], input[type=reset], .button):disabled {
	background: #EFEFEF;
	border-color: #CFCFCF;
	color: #ABABAB;
	cursor: default;
}

/* appearance: none removes the native focus ring as well. Keyboard users need
 * it back; :focus-visible leaves it off for pointer clicks, which is where the
 * native ring was an annoyance. */
:is(input[type=button], input[type=submit], input[type=reset], .button):focus-visible {
	outline: 2px solid #101010;
	outline-offset: 1px;
}