Tags: Mobile edit Mobile web edit |
Tags: Mobile edit Mobile web edit |
| Line 1: |
Line 1: |
| /* ── Portrait border rings ─────────────────────────────────────────── */
| | <div class="portrait-ring pb-{{{border|pink}}}{{#ifeq:{{{shape|circle}}}|square| shape-square|}}"><div>[[File:{{{image}}}|148px|link=]]</div></div><noinclude> |
| .portrait-ring {
| | == Usage == |
| padding: 5px;
| | <pre> |
| display: inline-flex;
| | {{Portrait |
| align-items: center;
| | | image = Filename.png |
| justify-content: center;
| | | border = gold |
| border-radius: 50%;
| | | shape = circle |
| box-shadow: 0 4px 20px #f7339a33;
| | }} |
| } | | </pre> |
| .portrait-ring.shape-square { border-radius: 16px; }
| |
| .portrait-ring img {
| |
| width: 148px; height: 148px;
| |
| object-fit: cover; object-position: top center;
| |
| border-radius: 50%; display: block;
| |
| } | |
| .portrait-ring.shape-square img { border-radius: 11px; }
| |
|
| |
|
| .pb-pink { background: linear-gradient(135deg,#f7339a 0%,#fff 35%,#ff9dd1 55%,#fff 75%,#f7339a 100%); }
| | === Border options === |
| .pb-red { background: linear-gradient(135deg,#5a0000 0%,#ff4444 22%,#cc0000 44%,#ff8888 66%,#8b0000 88%,#ff4444 100%); }
| | pink · red · orange · gold · yellow · green · cyan · blue · purple · pink-metal · brown · bronze · silver · gray · black · white · rainbow |
| .pb-orange { background: linear-gradient(135deg,#5a1e00 0%,#ff8c00 22%,#e05a00 44%,#ffb347 66%,#7a3000 88%,#ff8c00 100%); }
| |
| .pb-gold { background: linear-gradient(135deg,#5a3e00 0%,#ffd700 18%,#fff0a0 36%,#c8960c 54%,#ffe566 72%,#8a6000 90%,#ffd700 100%); }
| |
| .pb-yellow { background: linear-gradient(135deg,#666600 0%,#ffff44 25%,#eeee00 50%,#ffffaa 75%,#888800 100%); }
| |
| .pb-green { background: linear-gradient(135deg,#002200 0%,#22cc44 22%,#00882a 44%,#77ee99 66%,#004410 88%,#22cc44 100%); }
| |
| .pb-cyan { background: linear-gradient(135deg,#002233 0%,#00ccdd 22%,#007799 44%,#88eeff 66%,#003344 88%,#00ccdd 100%); }
| |
| .pb-blue { background: linear-gradient(135deg,#000066 0%,#4488ff 22%,#1133cc 44%,#99bbff 66%,#000088 88%,#4488ff 100%); }
| |
| .pb-purple { background: linear-gradient(135deg,#1a0033 0%,#9933ff 22%,#6600bb 44%,#cc99ff 66%,#2a0055 88%,#9933ff 100%); }
| |
| .pb-pink-metal { background: linear-gradient(135deg,#550033 0%,#ff44aa 22%,#cc0066 44%,#ff99cc 66%,#7a0044 88%,#ff44aa 100%); }
| |
| .pb-brown { background: linear-gradient(135deg,#1a0800 0%,#8b5e3c 22%,#5a2e10 44%,#c4956a 66%,#2a1000 88%,#8b5e3c 100%); }
| |
| .pb-bronze { background: linear-gradient(135deg,#2a1200 0%,#cd7f32 18%,#8b4513 36%,#eaaa6a 54%,#cd7f32 72%,#3a1800 90%,#cd7f32 100%); }
| |
| .pb-silver { background: linear-gradient(135deg,#444 0%,#ddd 18%,#999 36%,#fff 54%,#bbb 72%,#eee 88%,#555 100%); }
| |
| .pb-gray { background: linear-gradient(135deg,#111 0%,#777 25%,#444 50%,#aaa 75%,#222 100%); }
| |
| .pb-black { background: linear-gradient(135deg,#000 0%,#333 22%,#000 44%,#555 66%,#111 88%,#444 100%); }
| |
| .pb-white { background: linear-gradient(135deg,#bbb 0%,#fff 25%,#ddd 50%,#fff 75%,#ccc 100%); }
| |
| .pb-rainbow { background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000);
| |
| animation: pb-rainbow-spin 2.5s linear infinite; }
| |
|
| |
|
| @keyframes pb-rainbow-spin {
| | === Shape options === |
| 0% { filter: hue-rotate(0deg) brightness(1.1); }
| | circle · square |
| 50% { filter: hue-rotate(180deg) brightness(1.2); }
| | </noinclude> |
| 100% { filter: hue-rotate(360deg) brightness(1.1); }
| |
| }
| |
[[File:{{{image}}}|148px|link=]]
Usage
{{Portrait
| image = Filename.png
| border = gold
| shape = circle
}}
Border options
pink · red · orange · gold · yellow · green · cyan · blue · purple · pink-metal · brown · bronze · silver · gray · black · white · rainbow
Shape options
circle · square
