Template:Clickable button 3/styles.css

/** Styles used by Template:Clickable button 3 */ .module-clickable-button-3 a { background-color: #f9f9f9; border-color: #aaaaaa; color: #222222; display: inline-block; box-sizing: border-box; margin: 0; border-width: 1px; border-style: solid; border-radius: 0; vertical-align: middle; font-family: inherit; font-size: 1em; font-weight: bold; line-height: 1.28571429em; text-align: center; background-image: none; transition-property: background-color, color, border-color, box-shadow; transition-duration: 100ms; min-height: 32px; min-width: 4em; max-width: 28.75em; padding: 5px 12px; text-decoration: none; } .module-clickable-button-3 a:visited { color: #222222; } .module-clickable-button-3 a:hover { background-color: #ffffff; color: #444444; cursor: pointer; } .module-clickable-button-3 a:focus { color: #222222; border-color: #0645ad; box-shadow: inset 0 0 0 1px #0645ad; outline: 1px solid transparent; } .module-clickable-button-3 a:active { background-color: #eeeeee; color: #000000; border-color: #767676; box-shadow: none; } .module-clickable-button-3 a:focus { color: #222222; border-color: #0645ad; box-shadow: inset 0 0 0 1px #0645ad; outline: 1px solid transparent; } .module-clickable-button-3 a:active { background-color: #eeeeee; color: #000000; border-color: #767676; box-shadow: none; } .module-clickable-button-3.module-clickable-button-quiet a, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a { background-color: transparent; color: #222222; border-color: transparent; font-weight: bold; } .module-clickable-button-3.module-clickable-button-quiet a:hover, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a:hover, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a:hover { background-color: rgba(0, 24, 73, 0.027); color: #222222; } .module-clickable-button-3.module-clickable-button-quiet a:focus, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a:focus, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a:focus { color: #222222; border-color: #0645ad; box-shadow: inset 0 0 0 1px #0645ad; } .module-clickable-button-3.module-clickable-button-quiet a:active, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-progressive a:active, .module-clickable-button-3.module-clickable-button-quiet.module-clickable-button-destructive a:active { background-color: rgba(0, 24, 73, 0.082); color: #000000; border-color: #767676; box-shadow: none; } .module-clickable-button-3.module-clickable-button-progressive a { background-color: #0645ad; color: #ffffff; border-color: #0645ad; } .module-clickable-button-3.module-clickable-button-progressive a:hover { background-color: #447ff5; border-color: #447ff5; } .module-clickable-button-3.module-clickable-button-progressive a:focus { box-shadow: inset 0 0 0 1px #0645ad, inset 0 0 0 2px #ffffff; } .module-clickable-button-3.module-clickable-button-progressive a:active { background-color: #2a4b8d; border-color: #2a4b8d; box-shadow: none; } .module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a { background-color: rgba(255, 255, 255, 0); color: #0645ad; border-color: transparent; } .module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a:hover { background-color: rgba(52, 123, 255, 0.2); color: #447ff5; border-color: transparent; } .module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a:focus { color: #0645ad; border-color: #0645ad; } .module-clickable-button-3.module-clickable-button-progressive.module-clickable-button-quiet a:active { color: #ffffff; background-color: #2a4b8d; border-color: #2a4b8d; } .module-clickable-button-3.module-clickable-button-destructive a { background-color: #dd0033; color: #ffffff; border-color: #dd0033; } .module-clickable-button-3.module-clickable-button-destructive a:hover { background-color: #ff4242; border-color: #ff4242; } .module-clickable-button-3.module-clickable-button-destructive a:focus { box-shadow: inset 0 0 0 1px #dd0033, inset 0 0 0 2px #ffffff; } .module-clickable-button-3.module-clickable-button-destructive a:active { background-color: #b32424; border-color: #b32424; box-shadow: none; } .module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a { color: #dd0033; background-color: rgba(255, 255, 255, 0); border-color: transparent; } .module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a:hover { background-color: #ff4242; border-color: transparent; color: #ff4242; } .module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a:focus { color: #dd0033; border-color: #dd0033; } .module-clickable-button-3.module-clickable-button-destructive.module-clickable-button-quiet a:active { color: #ffffff; background-color: #b32424; border-color: #b32424; }

@media screen { /* Styles for night mode: Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis */ html.skin-theme-clientpref-night .module-clickable-button-3 a { background-color: #222222; color: #f9f9f9; }	html.skin-theme-clientpref-night .module-clickable-button-3 a:hover { color: #ffffff; background-color: #444444; } }

@media screen and (prefers-color-scheme: dark) { html.skin-theme-clientpref-os .module-clickable-button-3 a { background-color: #222222; color: #f9f9f9; }

html.skin-theme-clientpref-os .module-clickable-button-3 a:hover { color: #ffffff; background-color: #444444; } }