blob: e391b8b89e4ef94c0f127d04b6f6fc07a814e3ff [file] [log] [blame]
<!-- Common css variables for Material Design settings. -->
<custom-style>
<style>
/* We keep our vars in sort order, though some vars must be defined prior to
* others. The --settings-* vars are defined explicitly prior to the --paper-*
* and --iron-* vars.
*/
html {
/* Some colors use non-MD colors. These custom colors are specified by
* UX design (bettes@). */
--settings-disabled-opacity: .65;
--settings-error-color: var(--google-red-700);
/* No --settings-nav-icon-color needed in light mode. */
--settings-nav-item-color: var(--google-grey-refresh-700);
--settings-row-min-height: var(--cr-section-min-height);
--settings-row-two-line-min-height: var(--cr-section-two-line-min-height);
/* Spacing between a control (e.g. checkbox) and its label. */
--settings-control-label-spacing: 20px;
/* Spacing between policy (controlledBy) indicator and control. */
--settings-controlled-by-spacing: var(--cr-controlled-by-spacing);
--settings-input-max-width: var(--cr-default-input-max-width);
--iron-icon-fill-color: var(--google-grey-refresh-700);
--iron-icon-height: var(--cr-icon-size);
--iron-icon-width: var(--cr-icon-size);
--cr-radio-group-item-padding: 0;
}
@media (prefers-color-scheme: dark) {
html {
--iron-icon-fill-color: var(--google-grey-refresh-500);
--settings-error-color: var(--google-red-refresh-300);
--settings-nav-icon-color: var(--google-grey-refresh-500);
--settings-nav-item-color: var(--cr-primary-text-color);
}
}
</style>
</custom-style>