board-game/css/less/mixin.less

an online board game engine

@base_background: #0055AA;
@base_foreground: #FFFFFF;
@base_middle: #808080;
@base_border_color: @base_background;
@base_disable_color: #808080;

@base_background_gray: lightness(@base_background);
@base_foreground_gray: lightness(@base_foreground);

@mask: rgb(@base_background_gray, @base_background_gray, @base_background_gray);

@form_background: darken(average(@base_background, @base_middle), lightness(@base_background) * 0.1);
@form_foreground: @base_foreground;
@form_border_color: @base_border_color;

@form_disable_background: @base_disable_color;
@form_disable_foreground: average(@base_disable_color, @base_foreground);
@form_disable_border_color: @base_disable_color;

@btn_background: linear-gradient(to bottom, @form_background, @form_background 50%, darken(@form_background, lightness(@form_background) * 0.2) 50%, darken(@form_background, lightness(@form_background) * 0.2));
@btn_disable_background: linear-gradient(to bottom, @base_disable_color, @base_disable_color 50%, darken(@base_disable_color, lightness(@base_disable_color) * 0.2) 50%, darken(@base_disable_color, lightness(@base_disable_color) * 0.2));

@dialog_border_color: lighten(@form_border_color, lightness(@form_border_color) * 0.1);

@hall_btn_background: linear-gradient(to left bottom, lighten(@form_background, lightness(@form_background) * 0.4), @form_background 60%, darken(@form_background, lightness(@form_background) * 0.1));

@dialog_alpha: 80;
@room_alpha: 75;
@team_alpha: 30;

@background: linear-gradient(to bottom, @base_background, lighten(@base_background, lightness(@base_background) * 0.5) 70%, @base_background);
@min: 320px;
@alpha: rgba(0, 0, 0, 0.5);
@red: red;
@blue: blue;
@green: green;
@yellow: yellow;
@white: white;
@black: black;
@gray: gray;
@fw: 1.28571429em;

@control_button_bg: radial-gradient(50% 50%, white 0%, white 70%, gray 80%, transparent 100%);
@control_area_bg: radial-gradient(50% 50%, transparent 0%, transparent 25%, white 70%, transparent 80%, transparent 100%);

.absolute(@zIndex) {
  position: absolute;
  z-index: @zIndex;
}
.min-width() { min-width: @min; }
.min-height() { min-height: @min; }
.width() { width: 100%; }
.height() { height: 100%; }
.full() {
  .width;
  .height;
}
.alpha() { background: @alpha }
.flex() { display: flex; }
.flex-1() { flex: 1; }
.flex-none() { flex: none; }
.justify(@justify-content: inherit) when (@justify-content = inherit) { }
.justify(@justify-content: inherit) { justify-content: @justify-content; }
.align(@align-items: inherit) when (@align-items = inherit) { }
.align(@align-items: inherit) { align-items: @align-items; }
.flex-align(@justify-content: inherit, @align-items: inherit) {
  .justify(@justify-content);
  .align(@align-items);
}
.center() { .flex-align(center, center); }
.column() { flex-direction: column; }
.column-reverse() { flex-direction: column-reverse }
.row() { flex-direction: row; }
.row-reverse() { flex-direction: row-reverse; }
.flex-column() {
  .flex;
  .column;
}
.flex-column-reverse() {
  .flex;
  .column-reverse;
}
.flex-row() {
  .flex;
  .row;
}
.flex-row-reverse() {
  .flex;
  .row-reverse;
}
.flex-center() {
  .flex;
  .center;
}
.wrap() { flex-wrap: wrap; }
.nowrap() { flex-wrap: nowrap; }

.hidden { display: none; }
.pull-left { float: left; }
.pull-right { float: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-red { color: @red; }
.text-green { color: @green; }
.text-blue { color: @blue; }
.text-yellow { color: @yellow; }
.text-white { color: @white; }
.text-black { color: @black; }
.text-gray { color: @gray; }
.scrollable { overflow: auto; overflow: overlay; -ms-overflow-style: -ms-autohiding-scrollbar; }

.fa-rotate-45 { transform: rotate(45deg); }
.fa-rotate-135 { transform: rotate(135deg); }
.fa-rotate-225 { transform: rotate(225deg); }
.fa-rotate-315 { transform: rotate(315deg); }

:root .fa-rotate-45,
:root .fa-rotate-135,
:root .fa-rotate-225,
:root .fa-rotate-315 {
  filter: none;
}