MediaWiki:Common.css: Difference between revisions
Modern Discord button styling |
Add full modern Discord widget CSS |
||
| Line 825: | Line 825: | ||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important; | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25) !important; | ||
transform: translateY(-2px) !important; | transform: translateY(-2px) !important; | ||
} | |||
/* NEW DISCORD WIDGET */ | |||
.discord-widget-modern { | |||
position: relative; | |||
background-color: #5865F2; | |||
border-radius: 4px; | |||
overflow: hidden; | |||
font-family: 'Inter', sans-serif; | |||
color: #ffffff; | |||
margin-bottom: 20px; | |||
transition: background-color 0.2s ease; | |||
} | |||
.discord-widget-modern a { | |||
position: absolute; | |||
top: 0; left: 0; right: 0; bottom: 0; | |||
z-index: 10; | |||
text-decoration: none !important; | |||
} | |||
.discord-click-target { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.discord-top { | |||
padding: 16px 20px; | |||
display: flex; | |||
align-items: center; | |||
} | |||
.discord-icon { | |||
width: 45px; | |||
height: 35px; | |||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36" fill="%23ffffff"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1,105.25,105.25,0,0,0,32.19-16.14c0,0,.04-.06.05-.09,2.7-27.14-2.88-51.52-19-72.06ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.31,60,73.31,53s5-12.74,11.43-12.74S96.2,46,96.09,53,91.04,65.69,84.69,65.69Z"/></svg>'); | |||
background-size: contain; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
margin-right: 15px; | |||
} | |||
.discord-text { | |||
flex-grow: 1; | |||
} | |||
.discord-server-name { | |||
font-weight: 800; | |||
font-size: 17px; | |||
margin-bottom: 2px; | |||
} | |||
.discord-join-text { | |||
font-size: 14px; | |||
} | |||
.discord-arrow { | |||
font-size: 28px; | |||
font-weight: bold; | |||
margin-left: 10px; | |||
line-height: 1; | |||
} | |||
.discord-bottom { | |||
background-color: #4752C4; | |||
padding: 10px; | |||
text-align: center; | |||
font-size: 12px; | |||
font-weight: 800; | |||
letter-spacing: 0.5px; | |||
transition: background-color 0.2s ease; | |||
} | |||
.discord-widget-modern:hover { | |||
background-color: #4752C4; | |||
cursor: pointer; | |||
} | |||
.discord-widget-modern:hover .discord-bottom { | |||
background-color: #3b45a5; | |||
} | } | ||