Template:Reaction/styles.css

 .template-reaction{
 display:inline-block;
 margin:0.2em;
 border-radius:1.8em;
 padding:.3em;
 height:1.2em;
 font-size:80%;
 line-height:1;
 cursor:pointer;
 font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Apple Color Emoji','Segoe UI',Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
 }

 .template-reaction.reaction-content{
 display:flex;
 align-items:center;
 justify-content:center;
 height:100%;
 }

 .template-reaction.reaction-icon-container{
 padding-left:.1em;
 padding-right:.3em;
 }

 .template-reaction.reaction-icon{
 font-size:133%;
 }

 .template-reaction.reaction-counter-container{
 padding-right:.3em;
 }

 .template-reaction.reaction-counter{
 font-weight:500;
 }

 .template-reaction.reaction-reacted.reaction-counter{
 font-weight:bold;
 }

 .template-reaction.reaction-new{
 border-width:1px;
 border-style:dashed;
 }

 /* 如果是允許的圖標則覆蓋掉其他小工具或樣式的隱藏圖標 */
 .template-reaction.zhwp-talkicon.zhwp-talkicon-reactionable{
 display:inline;
 }

 /* Prevent content from being selected */
 .template-reaction,
 .template-reaction*{
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 }

 /* Color schemes - default light theme */

 .template-reaction{
 background-color:#ebf3fd;
 color:#3390ec;
 }

 .template-reaction.reaction-reacted.reaction-icon,
 .template-reaction.reaction-reacted.reaction-counter{
 color:#ebf3fd;
 }

 .template-reaction.reaction-reacted{
 background-color:#3390ec;
 }

 .template-reaction.reaction-new{
 background-color:#ffffff;
 border-color:#BDD7F8;
 }

 /* Color schemes - dark theme */

 @mediascreenand(prefers-color-scheme:dark){
 .skin-theme-clientpref-os.template-reaction{
 background-color:#0048a6;
 color:#ffffff;
 }
 .skin-theme-clientpref-os.template-reaction.reaction-reacted.reaction-icon,
 .skin-theme-clientpref-os.template-reaction.reaction-reacted.reaction-counter{
 color:#ffffff;
 }
 .skin-theme-clientpref-os.template-reaction.reaction-reacted{
 background-color:#1a73e8;
 }
 .skin-theme-clientpref-os.template-reaction.reaction-new{
 background-color:#000000;
 border-color:#BDD7F8;
 }
 html.skin-theme-clientpref-os.template-reaction[style*="background"]{
 color:#ffffff;
 }
 }

 @mediascreen{
 .skin-theme-clientpref-night.template-reaction{
 background-color:#0048a6;
 color:#ffffff;
 }
 .skin-theme-clientpref-night.template-reaction.reaction-reacted.reaction-icon,
 .skin-theme-clientpref-night.template-reaction.reaction-reacted.reaction-counter{
 color:#ffffff;
 }
 .skin-theme-clientpref-night.template-reaction.reaction-reacted{
 background-color:#1a73e8;
 }
 .skin-theme-clientpref-night.template-reaction.reaction-new{
 background-color:#000000;
 border-color:#BDD7F8;
 }
 html.skin-theme-clientpref-night.template-reaction[style*="background"]{
 color:#ffffff;
 }
 }