/** * Planeswalker symbols */ .@{ms-prefix}-loyalty { // All &-up, &-down, &-zero, &-start { color: #111; font-size: 21px; position: relative; text-align: center; line-height: 0.9em; } // Start &-start { font-size: 25px; // increase the size a bit by default } // Counters &-0::after, &-1::after, &-2::after, &-3::after, &-4::after, &-5::after, &-6::after, &-7::after, &-8::after, &-9::after, &-10::after, &-11::after, &-12::after, &-13::after, &-14::after, &-15::after, &-16::after, &-17::after, &-18::after, &-19::after, &-20::after, &-25::after, &-x::after { color: #fff; display: inline-block; font-size: 0.5em; font-family: @ms-serif-font; position: absolute; left: 0; line-height: 2em; width: 100%; text-align: center; } &-0::after { content: "0"; } &-up { &.@{ms-prefix}-loyalty-1::after { content: "+1"; } &.@{ms-prefix}-loyalty-2::after { content: "+2"; } &.@{ms-prefix}-loyalty-3::after { content: "+3"; } &.@{ms-prefix}-loyalty-4::after { content: "+4"; } &.@{ms-prefix}-loyalty-5::after { content: "+5"; } &.@{ms-prefix}-loyalty-6::after { content: "+6"; } &.@{ms-prefix}-loyalty-7::after { content: "+7"; } &.@{ms-prefix}-loyalty-8::after { content: "+8"; } &.@{ms-prefix}-loyalty-9::after { content: "+9"; } &.@{ms-prefix}-loyalty-10::after { content: "+10"; } &.@{ms-prefix}-loyalty-11::after { content: "+11"; } &.@{ms-prefix}-loyalty-12::after { content: "+12"; } &.@{ms-prefix}-loyalty-13::after { content: "+13"; } &.@{ms-prefix}-loyalty-14::after { content: "+14"; } &.@{ms-prefix}-loyalty-15::after { content: "+15"; } &.@{ms-prefix}-loyalty-16::after { content: "+16"; } &.@{ms-prefix}-loyalty-17::after { content: "+17"; } &.@{ms-prefix}-loyalty-18::after { content: "+18"; } &.@{ms-prefix}-loyalty-19::after { content: "+19"; } &.@{ms-prefix}-loyalty-20::after { content: "+20"; } &.@{ms-prefix}-loyalty-25::after { content: "+25"; } &.@{ms-prefix}-loyalty-x::after { content: "+X"; } } &-start { &.@{ms-prefix}-loyalty-1::after { content: "1"; } &.@{ms-prefix}-loyalty-2::after { content: "2"; } &.@{ms-prefix}-loyalty-3::after { content: "3"; } &.@{ms-prefix}-loyalty-4::after { content: "4"; } &.@{ms-prefix}-loyalty-5::after { content: "5"; } &.@{ms-prefix}-loyalty-6::after { content: "6"; } &.@{ms-prefix}-loyalty-7::after { content: "7"; } &.@{ms-prefix}-loyalty-8::after { content: "8"; } &.@{ms-prefix}-loyalty-9::after { content: "9"; } &.@{ms-prefix}-loyalty-10::after { content: "10"; } &.@{ms-prefix}-loyalty-11::after { content: "11"; } &.@{ms-prefix}-loyalty-12::after { content: "12"; } &.@{ms-prefix}-loyalty-13::after { content: "13"; } &.@{ms-prefix}-loyalty-14::after { content: "14"; } &.@{ms-prefix}-loyalty-15::after { content: "15"; } &.@{ms-prefix}-loyalty-16::after { content: "16"; } &.@{ms-prefix}-loyalty-17::after { content: "17"; } &.@{ms-prefix}-loyalty-18::after { content: "18"; } &.@{ms-prefix}-loyalty-19::after { content: "19"; } &.@{ms-prefix}-loyalty-20::after { content: "20"; } &.@{ms-prefix}-loyalty-25::after { content: "25"; } &.@{ms-prefix}-loyalty-x::after { content: "X"; } } &-down { &::after{ line-height: 1.8em; } &.@{ms-prefix}-loyalty-1::after { content: "-1"; } &.@{ms-prefix}-loyalty-2::after { content: "-2"; } &.@{ms-prefix}-loyalty-3::after { content: "-3"; } &.@{ms-prefix}-loyalty-4::after { content: "-4"; } &.@{ms-prefix}-loyalty-5::after { content: "-5"; } &.@{ms-prefix}-loyalty-6::after { content: "-6"; } &.@{ms-prefix}-loyalty-7::after { content: "-7"; } &.@{ms-prefix}-loyalty-8::after { content: "-8"; } &.@{ms-prefix}-loyalty-9::after { content: "-9"; } &.@{ms-prefix}-loyalty-10::after { content: "-10"; } &.@{ms-prefix}-loyalty-11::after { content: "-11"; } &.@{ms-prefix}-loyalty-12::after { content: "-12"; } &.@{ms-prefix}-loyalty-13::after { content: "-13"; } &.@{ms-prefix}-loyalty-14::after { content: "-14"; } &.@{ms-prefix}-loyalty-15::after { content: "-15"; } &.@{ms-prefix}-loyalty-16::after { content: "-16"; } &.@{ms-prefix}-loyalty-17::after { content: "-17"; } &.@{ms-prefix}-loyalty-18::after { content: "-18"; } &.@{ms-prefix}-loyalty-19::after { content: "-19"; } &.@{ms-prefix}-loyalty-20::after { content: "-20"; } &.@{ms-prefix}-loyalty-25::after { content: "-25"; } &.@{ms-prefix}-loyalty-x::after { content: "-X"; } } } /** * Saga loyalty */ .@{ms-prefix}-saga { // Numbers &-1::after, &-2::after, &-3::after, &-4::after, &-5::after { // future proofing :P color: #fff; display: inline-block; font-size: 0.6em; font-family: @ms-serif-font; position: absolute; left: 0; line-height: 1.75em; width: 100%; text-align: center; } &-1::after { content: "I"; } &-2::after { content: "II"; } &-3::after { content: "III"; } &-4::after { content: "IV"; } &-5::after { content: "V"; } } /** * Level card levels */ .@{ms-prefix}-level { // level numbers must be in a span for now unfortunately > span { font-size: 0.33em; position: absolute; left: 0; top: 0; color: #000; font-family: @ms-serif-font; width: 76%; text-align: center; line-height: 3.8; } // alt border similar to duo handling &::after { color: rgba(0,0,0,0.25); display: block; font-size: 1em; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } }