- Welcome to the Kancolle Wiki!
- If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord
Changes
Jump to navigation
Jump to search
Line 1:
Line 1: + Line 95:
Line 96: − +
Factor out common css effects
local Ship = require('Module:Ship')
local Ship = require('Module:Ship')
local StatIcons = require('Module:StatIcons')
local StatIcons = require('Module:StatIcons')
local Effects = require('Module:Effects')
local Formatting = require('Module:Formatting')
local Formatting = require('Module:Formatting')
local format = require('Module:StringInterpolation').format
local format = require('Module:StringInterpolation').format
local extra = ""
local extra = ""
if rarity > 6 then
if rarity > 6 then
extra = mw.ustring.format(" background-image: %s%s", rarity > 7 and "radial-gradient(circle farthest-corner at center, rgba(255, 0, 80, 0)0%, rgba(255, 60, 0, 0) 60%, rgba(255, 60, 0, 0.3) 100%), " or "", "radial-gradient(ellipse closest-side at center, eebbee 0%, eebbee 50%, rgba(238,187,238,0) 80%, transparent), linear-gradient(1deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(2deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(4deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(5deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(6deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(7deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(9deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(11deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(13deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(14deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(16deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(18deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(20deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(22deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(24deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(26deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(28deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(29deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(31deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(33deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(35deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(36deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(38deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(39deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(40deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(41deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(42deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(43deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(45deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(46deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(48deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(49deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(51deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(52deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(53deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(55deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(57deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(59deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(61deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(63deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(65deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(67deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(68deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(70deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(72deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(73deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(74deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(75deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(77deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(78deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(80deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(81deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(83deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(85deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(86deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(88deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(90deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(92deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(93deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(94deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(96deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(97deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(99deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(101deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(103deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(104deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(106deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(108deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(109deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(111deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(112deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(114deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(115deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(117deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(119deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(120deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(121deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(122deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(124deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(125deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(127deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(129deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(130deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(131deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(132deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(133deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(135deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(137deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(139deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(140deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(142deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(144deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(146deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(147deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(149deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(150deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(152deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(154deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(156deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(158deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(160deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(161deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(162deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(164deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(165deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(167deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(168deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(169deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(171deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(173deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(175deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(176deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(178deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent), linear-gradient(179deg, transparent, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) calc(50% + 1px), transparent calc(50% + 1px), transparent)")
extra = format{" background-image: ${bloom}${sparkles}", bloom = rarity > 7 and Effects.bloom or "", sparkles = Effects.sparkles}
end
end
return self._rarity_map[rarity], extra
return self._rarity_map[rarity], extra