variables.less

/**
 *    Copyright 2015-2017 ppy Pty. Ltd.
 *
 *    This file is part of osu!web. osu!web is distributed with the hope of
 *    attracting more community contributions to the core ecosystem of osu!.
 *
 *    osu!web is free software: you can redistribute it and/or modify
 *    it under the terms of the Affero GNU General Public License version 3
 *    as published by the Free Software Foundation.
 *
 *    osu!web is distributed WITHOUT ANY WARRANTY; without even the implied
 *    warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *    See the GNU Affero General Public License for more details.
 *
 *    You should have received a copy of the GNU Affero General Public License
 *    along with osu!web.  If not, see <http://www.gnu.org/licenses/>.
 */

@import "app";

@screen-mobile-max: (@screen-sm-min - 1px);
@desktop: ~"(min-width: @{screen-sm-min})";
@mobile: ~"(max-width: @{screen-mobile-max})";

@bar-size: 3px;
@logo-size: 100px;
// header left margin (20) + logo (100) + menu left margin (10)
@padding-big: (20px + @logo-size + 10px);
// ┐(ﾟ ヮﾟ)┌
@padding-wiki-desktop: 40px;

@height--nav-popup: 210px; // min-height; actual height will be calculated by js.

@navbar-mobile--content-height: @navbar-height - (@navbar-padding-vertical * 2);


@border-radius--nav-avatar: 10px;

// here be z-indexes
@z-index--visibility-hidden: 0;
@z-index--body-background: 0;
@z-index--beatmaps-panel: 4;
@z-index--page-extra-tabs: 5;
@zindex-navbar: 500; // bootstrap
@zindex-dropdown: 500; // bootstrap
@z-index--forum-topic-headernav: 501;
@z-index--fixed-bar: 501;
@z-index--blackout: 510;
@z-index--blackout-visible: 511;
@zindex-navbar-fixed: 530; // bootstrap
@zindex-modal-background: 540; // bootstrap
@zindex-modal: 550; // bootstrap
@zindex-popover: 560; // bootstrap
@zindex-tooltip: 570; // bootstrap
@z-index--nav-popup: 998;
@z-index--nav-float: 999;
// Xsolla overlay: 1000
@z-index--overlay: 9990;

@z-index--beatmapset-header: 1;
@z-index--contest-header: 1;
@z-index--download-header: 1;
@z-index--tournament-header: 1;

@box-shadow-x: 0;
@box-shadow-y: 1px;
@box-shadow-radius: 3px;
@box-shadow-color: fade(#000, 25%);

@avatar-size--base: 128px;

@landing-dot-size: 17px;

@profile-badge-size: 50px;
@profile-header-height: 350px;
@profile-user-bar-height: 60px;
@profile-avatar-size: 110px;
@profile-cover-thumb-size: 85px;
@profile-stats-box-width: 280px;

@beatmapset-avatar-size: 50px;

@beatmapset-float-box-width: 275px;

// top padding + menu + page title
@nav-avatar-size: 70px;
@nav-sm-height: 20px + @nav-menu-height + @nav-page-title-height;
@nav-page-title-height: 40px;
@nav-menu-height: 20px;
@nav-search-icon-width: 30px;

// here be font-sizes
@font-size--small: 10px;
@font-size--small-2: 11px;
@font-size--normal: 12px;
@font-size--normal-2: 13px;
@font-size--title-small: 14px;
@font-size--title-small-2: 15px;
@font-size--title-small-3: 16px;
@font-size--large: 20px;
@font-size--title: 24px;
@font-size--large-2: 35px;
@font-size--large-3: 40px;

@font-size--wiki: 14px;

@font-size--header-title: 32px;
@font-size--header-title-mobile: 24px;
@font-size--header-subtitle: 16px;
@font-size--header-description: 12px;

@font-size--header-wiki-2: 26px;
@font-size--header-wiki-3: 20px;
@font-size--header-wiki-4: 18px;
@font-size--header-wiki-5: 16px;
@font-size--header-wiki-6: 14px;

@font-size--new-header-title: 30px;
@font-size--new-header-subtitle: 14px;

@font-size--new-header-title-mobile: 24px;
@font-size--new-header-subtitle-mobile: 12px;

@font-size--forum-topic-entry-icon: 16px;
@font-size--forum-topic-entry-icon-small: 10px;
@font-size--forum-post-heading: 20px;
@font-size--forum-quote-heading: 13px;

@font-size--store-header-link-icon: 18px;
@font-size--store-header-link-text: 12px;
@font-size--store-notice-text: 15px;
@font-size--store-notice-title: 13px;

@font-size--livestream-header: 15px;
@font-size--livestream-featured-name: 30px;
@font-size--livestream-featured-detail: 15px;
@font-size--livestream-item-name: 15px;
@font-size--livestream-item-detail: 10px;

@font-size--nav-popup-link: 14px;
@font-size--nav-popup-section: 12px;
@font-size--nav-popup-title-large: 20px;
@font-size--nav-popup-title: 15px;

@font-size--paginator: 12px;
@font-size--phone-input: 16px;

@font-size--support-osu-popup-body: 15px;
@font-size--support-osu-popup-header: 48px;
@font-size--support-osu-popup-header-smaller: 26px;

@font-size--warning: 13px;
@font-size--warning-icon: 20px;

@flex-grid--gutter-width: 20px;

@header-icon-size: 50px;
@header-icon-margin: 8px;

@forum-category-colour--osu-bg: @pink;
@forum-category-colour--osu-link: @pink-text;
@forum-category-colour--osu-link-hover: @pink;

@forum-category-colour--language-specific-bg: @yellow;
@forum-category-colour--language-specific-link: @yellow-text;
@forum-category-colour--language-specific-link-hover: @yellow-dark;

@forum-category-colour--other-bg: @green;
@forum-category-colour--other-link: @green-text;
@forum-category-colour--other-link-hover: @green;

@forum-category-colour--beatmaps-bg: @purple;
@forum-category-colour--beatmaps-link: @purple-text;
@forum-category-colour--beatmaps-link-hover: @purple;

@forum-category-colour--osu-bg: @pink;
@forum-category-colour--osu-link: @pink-text;
@forum-category-colour--osu-link-hover: @pink;

@forum-category-colour--management-bg: @gray;
@forum-category-colour--management-link: @gray-text;
@forum-category-colour--management-link-hover: @gray;

@forum-post--xs-avatar: 50px;

@beatmap-discussion--avatar-size: 40px;
@beatmap-discussion--reply-padding: (20px + @beatmap-discussion--avatar-size);
@beatmap-discussion--timestamp-width: 110px;

@beatmap-discussion--color-hype: @blue-dark;
@beatmap-discussion--color-mapper-note: @purple;
@beatmap-discussion--color-praise: @blue-dark;
@beatmap-discussion--color-problem: @pink-dark;
@beatmap-discussion--color-resolved: @green;
@beatmap-discussion--color-suggestion: @yellow-dark;

@beatmappack-listing--gutter: 20px;

@section-color--default: @pink-darker;

@section-color--beatmaps: @pink-darker;
@section-color--community: @pink-darker;
@section-color--multiplayer: @pink-darker;
@section-color--error: @pink-darker;
@section-color--help: @yellow-darker;
@section-color--home: @purple-darker;
@section-color--ranking: @green-darker;
@section-color--store: @pink-darker;
@section-color--user: @blue-darker;

@user-color-default: @blue-darker;

@changelog-stream--stable: @blue;
@changelog-stream--stable-fallback: @green;
@changelog-stream--beta: @yellow;
@changelog-stream--cutting-edge: @yellow;
@changelog-stream--lazer: @red;
@changelog-stream--lazer-experimental: @red;

@changelog-stream--build-0: @purple;
@changelog-stream--build-1: @purple-darker;
@changelog-stream--build-2: @pink;
@changelog-stream--build-3: @pink-darker;
@changelog-stream--build-4: @blue;
@changelog-stream--build-5: @blue-darker;
@changelog-stream--build-6: @yellow;
@changelog-stream--build-7: @yellow-darker;
@changelog-stream--build-8: @green;
@changelog-stream--build-9: @green-darker;
@changelog-stream--build-10: @red;
@changelog-stream--build-11: @red-darker;

@page-extra-side-padding--small: 10px;
@page-extra-side-padding--large: 30px;

@mod-width: 45px;
@mod-height: 32px;

@mod-height-normal: 22px;
@mod-width-normal: (@mod-height-normal / @mod-height * @mod-width);

@mod-height-small: 18px;
@mod-width-small: (@mod-height-small / @mod-height * @mod-width);

@page-spacing: 10px;

@rank-width: 60px;
@rank-height: 40px;

@btn-circle-diameter: 30px;

// difficulty colours
@diff-easy: @green;
@diff-normal: @blue;
@diff-hard: @yellow;
@diff-insane: @pink;
@diff-expert: @purple;
@diff-expert--light: @purple-light;
@diff-expert-plus: #000;
// for when black text won't just work on dark background
@diff-expert-plus--light: #999;

// user profile detail-row
@detail-row--bottom-min-height: 18px;
@detail-row--score-details-gap: 2px;

// store slider
@slider-callout--arrow-height: 12px;
@slider-callout--arrow-gap: 2px;
@slider-callout--width: 128px;
@slider-handle-protrusion: 5px;
@slider-handle-height: @slider-height + 2 * @slider-handle-protrusion;
@slider-handle-width: 10px;
@slider-height: 10px;

@usercard-width: 260px;
@usercard-height: 100px;