User:Bfdifan2006/protectionPadlocks.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Copy-paste mw.loader.load('https://bulbapedia.bulbagarden.net/w/index.php?title=User:Bfdifan2006/protectionPadlocks.js&action=raw&ctype=text/javascript'); into your custom JS,
and @import url(//bulbapedia.bulbagarden.net/w/index.php?title=User:Bfdifan2006/protectionPadlocks.css&action=raw&ctype=text/css); into your custom CSS! 

Both are required so the padlocks can be properly styled.

Showcase: https://i.imgur.com/70X4nuT.png*/

/* This is so the Minerva skin gets proper styling */
.mw-indicators {
    float: right;
    line-height: 1.5em;
    font-size: 95%;
}

/* Padlock styles */

[class|="padlock"] {
    height: 20px;
    aspect-ratio: 1/1;
    width: auto;
    box-sizing:border-box;
    border-radius: 15%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: white;
    font-weight: bold;
    position: relative;
    font-family: monospace;
    margin:0 2px;
}

[class|="padlock"]::before {
    content: "";
    position: absolute;
    top: -38%;
    border: 5px solid grey;
    border-radius: 8px 8px 0 0;
    width: 6px;
    aspect-ratio: 2/1;
    border-bottom: 0;
    box-sizing: content-box;
}

.padlock-sysop {
    background-color: #ff6666;
}

.padlock-autoconfirmed {
    background-color: #666666;
}

.padlock-move {
    background-color: #66aa66;
}

.padlock-create {
    background-color: #66aaff;
}