MediaWiki:Common.css: Difference between revisions

mNo edit summary
mNo edit summary
Line 1,425: Line 1,425:
   ========================================================= */
   ========================================================= */


.ooo-extlink a {
.ooo-extlink a,
   display:inline-flex;
.ooo-extlink a.external,
   align-items:center;
.ooo-extlink a.extiw {
   display: inline-flex;
   align-items: center;
  gap: 6px;


   padding:4px 8px;
   padding: 4px 8px;
   border-radius:4px;
   border-radius: 4px;
  border: 1px solid var(--ooo-border);
  background: rgba(245,196,0,0.05);


   border:1px solid var(--ooo-border);
   color: var(--ooo-accent) !important;
   background:rgba(245,196,0,0.05);
   text-decoration: none !important;
  font-weight: 600;


   color:var(--ooo-accent) !important;
   transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration:none !important;
  font-weight:600;


   transition:
   /* kill MediaWiki default external icon */
    background 0.15s ease,
  background-image: none !important;
    border-color 0.15s ease;
}
}


/* hover */
/* hover */
 
.ooo-extlink a:hover,
.ooo-extlink a:hover {
.ooo-extlink a.external:hover,
   background:rgba(245,196,0,0.15);
.ooo-extlink a.extiw:hover {
   border-color:rgba(245,196,0,0.6);
   background: rgba(245,196,0,0.15);
   border-color: rgba(245,196,0,0.6);
}
}


/* external icon */
/* custom icon */
.ooo-extlink a::after,
.ooo-extlink a.external::after,
.ooo-extlink a.extiw::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  opacity: 0.8;
  flex-shrink: 0;


.ooo-extlink a::after {
  background-color: currentColor;
  content:"";
  display:inline-block;


   width:12px;
   -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain;
  height:12px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain;


  margin-left:6px;
   transition: transform 0.15s ease;
  opacity:0.8;
 
  background-color:currentColor;
 
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='currentColor' d='M12 3h5v5h-2V6.4l-6.3 6.3-1.4-1.4L13.6 5H12V3zM5 5h4v2H7v6h6v-2h2v4H5V5z'/></svg>") no-repeat center / contain;
 
   transition:transform 0.15s ease;
}
}


/* icon hover motion */
.ooo-extlink a:hover::after,
 
.ooo-extlink a.external:hover::after,
.ooo-extlink a:hover::after {
.ooo-extlink a.extiw:hover::after {
   transform:translate(1px,-1px);
   transform: translate(1px,-1px);
}
}