@fox-line: "/styles/fonts/foxline";
@font-face {
font-family: 'foxLine';
src: url('@{fox-line}/foxLine.eot?txqim3');
src: url('@{fox-line}/foxLine.eot?txqim3#iefix') format('embedded-opentype'),
url('@{fox-line}/foxLine.ttf?txqim3') format('truetype'),
url('@{fox-line}/foxLine.woff?txqim3') format('woff'),
url('@{fox-line}/foxLine.svg?txqim3#foxLine') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
.userBanner& {
-webkit-box-shadow: 2px 2px 2px 0px #696969;
box-shadow: 2px 2px 2px 0px #696969;
padding: 5px;
background: @bgColor;
border-color: @bgColor;
color: @textColor;
text-align: left;
letter-spacing: 0;
margin-bottom: 4px;
text-transform: uppercase;
font-size: 10px;
position: relative;
border-radius: 0;
min-width: 160px;
strong {
color: @strongColor;
}
& when (@textShadow) {
text-shadow: 0 0 2px;
}
& when not (@numLine = false) and (@numLine <= 7) {
@startBgColor: #fc4330;
@stopBgColor: #cccccc;
@startPercentColor: @numLine * 14.2%;
@stopPercentColor: 0%;
padding: 9px 5px 5px;
.userBanner-before {
position: absolute;
display: block;
top: 1px;
left: -1px;
&:before {
font-family: 'foxLine';
content: "\ea0b\ea0b\ea0b\ea0b\ea0b\ea0b\ea0b";
font-size: 2.2em;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0;
letter-spacing: 1px;
& when (iscolor(@startColor)) and (iscolor(@stopColor)) {
background: linear-gradient(90deg, @startColor @startPercentColor, @stopColor @stopPercentColor);
}
& when (@startColor = false) and (@stopColor = false) {
background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
}
& when (@startColor = false) and (iscolor(@stopColor)){
background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopColor @stopPercentColor);
}
& when (iscolor(@startColor)) and (@stopColor = false) {
background: linear-gradient(90deg, @startColor @startPercentColor, @stopBgColor @stopPercentColor);
}
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image-slice: 1;
}
}
}
.userBanner-after:after {
float: right;
content: 'fox.dev';
}
}
}
.userBanner--staff {
.fox-bannerProgressLine(false; false; false; white; white; #292929; true);
}
.userBanner--red {
.fox-bannerProgressLine(7; false; false; white; white; #185886; false);
}
@fox-line: "/styles/fonts/foxline";
@font-face {
font-family: 'foxLine';
src: url('@{fox-line}/foxLine.eot?txqim3');
src: url('@{fox-line}/foxLine.eot?txqim3#iefix') format('embedded-opentype'),
url('@{fox-line}/foxLine.ttf?txqim3') format('truetype'),
url('@{fox-line}/foxLine.woff?txqim3') format('woff'),
url('@{fox-line}/foxLine.svg?txqim3#foxLine') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
.userBanner& {
-webkit-box-shadow: 2px 2px 2px 0px #696969;
box-shadow: 2px 2px 2px 0px #696969;
padding: 5px;
background: @bgColor;
border-color: @bgColor;
color: @textColor;
text-align: left;
letter-spacing: 0;
margin-bottom: 4px;
text-transform: uppercase;
font-size: 10px;
position: relative;
border-radius: 0;
min-width: 161px;
strong {
color: @strongColor;
}
& when (@textShadow) {
text-shadow: 0 0 2px;
}
& when not (@numLine = false) and (@numLine <= 7) {
@startBgColor: #fc4330;
@stopBgColor: #cccccc;
@startPercentColor: @numLine * 14.2%;
@stopPercentColor: 0%;
padding: 9px 5px 5px;
.userBanner-before {
position: absolute;
display: block;
top: 1px;
left: -1px;
background-color: black;
height: 6px;
border-top: 1.9px solid transparent;
&:before {
font-family: 'foxLine';
content: "\ea0b\ea0b\ea0b\ea0b\ea0b\ea0b\ea0b";
font-size: 2.2em;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0;
letter-spacing: 1px;
& when (iscolor(@startColor)) and (iscolor(@stopColor)) {
background: linear-gradient(90deg, @startColor @startPercentColor, @stopColor @stopPercentColor);
}
& when (@startColor = false) and (@stopColor = false) {
background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
}
& when (@startColor = false) and (iscolor(@stopColor)){
background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopColor @stopPercentColor);
}
& when (iscolor(@startColor)) and (@stopColor = false) {
background: linear-gradient(90deg, @startColor @startPercentColor, @stopBgColor @stopPercentColor);
}
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image-slice: 1;
}
}
}
.userBanner-after:after {
float: right;
content: 'fox.dev';
}
}
}
.userBanner--staff {
.fox-bannerProgressLine(false; false; false; white; white; #292929; true);
}
.userBanner--red {
.fox-bannerProgressLine(4; #46a7eb; #e7e8ea; white; white; #185886; false);
}
@fox-line: "/styles/fonts/foxline";
@font-face {
font-family: 'foxLine';
src: url('@{fox-line}/foxLine.eot?txqim3');
src: url('@{fox-line}/foxLine.eot?txqim3#iefix') format('embedded-opentype'),
url('@{fox-line}/foxLine.ttf?txqim3') format('truetype'),
url('@{fox-line}/foxLine.woff?txqim3') format('woff'),
url('@{fox-line}/foxLine.svg?txqim3#foxLine') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.fox-bannerProgressLine(@numLine: 0; @startColor: false; @stopColor: false; @textColor: #fff; @strongColor: inherit; @bgColor: #292929; @textShadow: false; ) {
.userBanner& {
-webkit-box-shadow: 2px 2px 2px 0px #696969;
box-shadow: 2px 2px 2px 0px #696969;
padding: 5px;
background: @bgColor;
border-color: @bgColor;
color: @textColor;
text-align: left;
letter-spacing: 0;
margin-bottom: 4px;
text-transform: uppercase;
font-size: 10px;
position: relative;
border-radius: 0;
min-width: 160px;
strong {
color: @strongColor;
}
& when (@textShadow) {
text-shadow: 0 0 2px;
}
& when not (@numLine = false) and (@numLine <= 7) {
@startBgColor: #fc4330;
@stopBgColor: #cccccc;
@stopPercentColor: 0%;
@startPercentColor: @numLine * 14.2%;
& when (@numLine >= 1) {
@stopPercentColor: (@numLine * 10%) + 4;
}
& when (iscolor(@startColor)) {
@startBgColor: @startColor;
}
& when (iscolor(@stopColor)) {
@stopBgColor: @stopColor;
}
padding: 9px 5px 5px;
.userBanner-before {
position: absolute;
display: block;
top: 1px;
left: -1px;
&:before {
font-family: 'foxLine';
content: "\ea0b\ea0b\ea0b\ea0b\ea0b\ea0b\ea0b";
font-size: 2.2em;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0;
letter-spacing: 1px;
background: linear-gradient(90deg, @startBgColor @startPercentColor, @stopBgColor @stopPercentColor);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image-slice: 1;
}
}
}
.userBanner-after:after {
float: right;
content: 'fox.dev';
}
}
}
.userBanner--staff {
.fox-bannerProgressLine(false; false; false; white; white; #292929; true);
}
.userBanner--red {
.fox-bannerProgressLine(7; false; false; white; white; #292929; true);
}