mirror of
https://github.com/BeamMP/Concept-BNG-UI.git
synced 2026-04-04 14:56:10 +00:00
3110 lines
60 KiB
CSS
3110 lines
60 KiB
CSS
:root{
|
||
--bng-orange: #ff6600;
|
||
--bng-orange-shade1: rgba(255, 102, 0, 0.7);
|
||
--bng-orange-shade2: rgba(255, 102, 0, 0.4);
|
||
--bng-orange-shade1opaque: #b34700;
|
||
--bng-orange-shade2opaque: #662900;
|
||
/* --bng-gradient-orange: linear-gradient(to right,#b34700, #ff6600); */
|
||
/* --bng-filter-orange: invert(49%) sepia(74%) saturate(3850%) hue-rotate(0deg) brightness(101%) contrast(106%); */
|
||
--bng-black-8: rgba(0, 0, 0, 0.8);
|
||
--bng-black-6: rgba(0, 0, 0, 0.6);
|
||
--bng-black-4: rgba(0, 0, 0, 0.4);
|
||
--bng-black-2: rgba(0, 0, 0, 0.2);
|
||
--dark-neutral-grey: #252525;
|
||
--neutral-grey: #b1b3b6;
|
||
--light-neutral-grey: #e3e5e8;
|
||
--dark-grey: #505050;
|
||
--dark-grey-alpha: rgba(80, 80, 80, 0.8);
|
||
--black-1:rgba(0, 0, 0, 0.7);
|
||
--black-2: rgba(0 ,0 ,0 ,0.4);
|
||
--white-1: rgba(255, 255, 255, 0.8);
|
||
--white-2: rgba(255, 255, 255, 0.4);
|
||
|
||
/* Additional color swatches that were added in Vue, but appear to be missing here (commented ones above are duplicates of below) */
|
||
|
||
|
||
/* bng UI color palette */
|
||
|
||
/* bng-orange */
|
||
--bng-orange-50: #fcd4c3;
|
||
--bng-orange-100: #ffbca0;
|
||
--bng-orange-200: #ffa37c;
|
||
--bng-orange-300: #ff8955;
|
||
--bng-orange-b400: #ff6600;
|
||
--bng-orange-500: #da5706;
|
||
--bng-orange-600: #a54106;
|
||
--bng-orange-700: #6c2f13;
|
||
--bng-orange-800: #451f0e;
|
||
--bng-orange-900: #291006;
|
||
|
||
/* bng-cool-gray */
|
||
--bng-cool-gray-50: #dadee8;
|
||
--bng-cool-gray-100: #cbced5;
|
||
--bng-cool-gray-200: #b9bdc8;
|
||
--bng-cool-gray-300: #aaaeb8;
|
||
--bng-cool-gray-400: #989daa;
|
||
--bng-cool-gray-500: #818693;
|
||
--bng-cool-gray-600: #606570;
|
||
--bng-cool-gray-700: #3f434e;
|
||
--bng-cool-gray-800: #282b33;
|
||
--bng-cool-gray-900: #151820;
|
||
|
||
/* bng-ter-blue-gray */
|
||
--bng-ter-blue-gray-50: #d2e4f0;
|
||
--bng-ter-blue-gray-100: #b5d1e4;
|
||
--bng-ter-blue-gray-200: #a1c0d5;
|
||
--bng-ter-blue-gray-300: #91b4cb;
|
||
--bng-ter-blue-gray-400: #7d9fb5;
|
||
--bng-ter-blue-gray-500: #6a8ba1;
|
||
--bng-ter-blue-gray-600: #4d697c;
|
||
--bng-ter-blue-gray-700: #2c4759;
|
||
--bng-ter-blue-gray-800: #1c2d38;
|
||
--bng-ter-blue-gray-900: #0c1a23;
|
||
|
||
/* bng-add-blue */
|
||
--bng-add-blue-50: #d0dff6;
|
||
--bng-add-blue-100: #bccfec;
|
||
--bng-add-blue-200: #a4bfe8;
|
||
--bng-add-blue-300: #89b0ea;
|
||
--bng-add-blue-400: #5f9df9;
|
||
--bng-add-blue-500: #5487d0;
|
||
--bng-add-blue-600: #3965a6;
|
||
--bng-add-blue-700: #234473;
|
||
--bng-add-blue-800: #152c4b;
|
||
--bng-add-blue-900: #0a192d;
|
||
|
||
/* bng-add-green */
|
||
--bng-add-green-50: #a0f9bc;
|
||
--bng-add-green-100: #73eb9d;
|
||
--bng-add-green-200: #4fdc88;
|
||
--bng-add-green-300: #4fca7e;
|
||
--bng-add-green-400: #49b672;
|
||
--bng-add-green-500: #429b63;
|
||
--bng-add-green-600: #33744a;
|
||
--bng-add-green-700: #224e32;
|
||
--bng-add-green-800: #173120;
|
||
--bng-add-green-900: #0f1c13;
|
||
|
||
/* bng-ter-yellow */
|
||
--bng-ter-yellow-50: #f9e03e;
|
||
--bng-ter-yellow-100: #e7cf30;
|
||
--bng-ter-yellow-200: #dac434;
|
||
--bng-ter-yellow-300: #c7b22d;
|
||
--bng-ter-yellow-400: #b19e22;
|
||
--bng-ter-yellow-500: #97871c;
|
||
--bng-ter-yellow-600: #726618;
|
||
--bng-ter-yellow-700: #4c4307;
|
||
--bng-ter-yellow-800: #322c05;
|
||
--bng-ter-yellow-900: #1b1804;
|
||
|
||
/* bng-ter-peach */
|
||
--bng-ter-peach-50: #f0dcb6;
|
||
--bng-ter-peach-100: #e6ca96;
|
||
--bng-ter-peach-200: #dbb875;
|
||
--bng-ter-peach-300: #cda961;
|
||
--bng-ter-peach-400: #b99448;
|
||
--bng-ter-peach-500: #a38038;
|
||
--bng-ter-peach-600: #7c6023;
|
||
--bng-ter-peach-700: #55400f;
|
||
--bng-ter-peach-800: #38290a;
|
||
--bng-ter-peach-900: #211602;
|
||
|
||
/* bng-add-red */
|
||
--bng-add-red-50: #fad4cc;
|
||
--bng-add-red-100: #f5bfb5;
|
||
--bng-add-red-200: #f5a799;
|
||
--bng-add-red-300: #f88b79;
|
||
--bng-add-red-400: #fb6752;
|
||
--bng-add-red-500: #ed3823;
|
||
--bng-add-red-600: #b12e1f;
|
||
--bng-add-red-700: #781f14;
|
||
--bng-add-red-800: #4d160f;
|
||
--bng-add-red-900: #24130f;
|
||
|
||
/* Handy additional color presets */
|
||
--bng-gradient-orange: linear-gradient(to right,#b34700, #ff6600);
|
||
--bng-filter-orange: invert(49%) sepia(74%) saturate(3850%) hue-rotate(0deg) brightness(101%) contrast(106%);
|
||
--bng-black-o8: rgba(0, 0, 0, 0.8);
|
||
--bng-black-o6: rgba(0, 0, 0, 0.6);
|
||
--bng-black-o4: rgba(0, 0, 0, 0.4);
|
||
--bng-black-o2: rgba(0, 0, 0, 0.2);
|
||
|
||
--bng-corners-1: 0.25rem;
|
||
--bng-corners-2: 0.5rem;
|
||
--bng-corners-3: 1rem;
|
||
|
||
|
||
|
||
/* z-index values: main stuff */
|
||
--zorder_index_fullscreen_default: 0;
|
||
--zorder_index_broken_ui_loading: 1;
|
||
--zorder_index_waiting_screen_icon: 10;
|
||
--zorder_index_fullscreen_loading: 50;
|
||
--zorder_index_waiting_screen: 97;
|
||
--zorder_index_mdcontent: 98;
|
||
--zorder-index_popup: 9876;
|
||
--zorder_index_prevnext: 999999;
|
||
|
||
--zorder_main_fancyBackground: -1;
|
||
--zorder_main_missionpopups: 5;
|
||
--zorder_main_contentNav: 1;
|
||
--zorder_main_reconnectScreen: 1;
|
||
--zorder_main_topbar_button_end: 5;
|
||
--zorder_main_mission_info_button: 10;
|
||
--zorder_main_mission_info_alt_button: 10;
|
||
--zorder_main_app_alignment_dot_corner: 23;
|
||
--zorder_main_menu_navigation_focus: 97;
|
||
--zorder_main_gfxSettingsLoading: 97;
|
||
|
||
--zorder_mainmenu_blendbox: 2;
|
||
--zorder_mainmenu_shippinginfo: 97;
|
||
--zorder_mainmenu_infobox: 97;
|
||
--zorder_mainmenu_accountinfo: 97;
|
||
--zorder_mainmenu_onlineinfo: 97;
|
||
--zorder_mainmenu_versioninfo: 97;
|
||
|
||
--zorder_index_menucontent: 2;
|
||
|
||
--zorder_menu_dashmenu: 3;
|
||
--zorder_play_crosshair: 20;
|
||
|
||
/* z-index values: app editing */
|
||
--zorder_bngapp_delete: calc(var(--zorder_menu_dashmenu) + 1);
|
||
--zorder_bngapp_move: calc(var(--zorder_menu_dashmenu) + 1);
|
||
--zorder_bngapp_resize: calc(var(--zorder_menu_dashmenu) + 1);
|
||
--zorder_bngapp_cockpit:calc(var(--zorder_menu_dashmenu) + 1);
|
||
--zorder_appedit_bar: 50;
|
||
|
||
/* z-index values: apps */
|
||
--zorder_apps_default: 1;
|
||
--zorder_apps_dev_langMenu: 1;
|
||
--zorder_apps_dev_reftip: 1;
|
||
--zorder_apps_dev_sapop: 1;
|
||
--zorder_apps_simpleBrakeThermals_svg: 999;
|
||
|
||
/* z-index values: modules */
|
||
--zorder_campaignselect_search: 1;
|
||
--zorder_levelselect_search: 1;
|
||
--zorder_scenarioselect_search: 1;
|
||
--zorder_vehicleselect_search: 1;
|
||
--zorder_vehicleselect_showconfigs: 1;
|
||
|
||
--zorder_dragrace_popover: 97;
|
||
--zorder_gamecontext_popover: 97;
|
||
--zorder_lightrunner_popover: 97;
|
||
--zorder_quickrace_popover: 97;
|
||
--zorder_scenariocontrol_popover: 97;
|
||
|
||
--zorder_comic_canvas: 97;
|
||
--zorder_fadescreen: 97;
|
||
--zorder_iconview_iconsdemo: 97;
|
||
--zorder_loading_background: 97;
|
||
|
||
--zorder_mapview_target_cross: 9;
|
||
--zorder_mapview_poi: 10;
|
||
--zorder_mapview_poi_focus: 12;
|
||
--zorder_mapview_arrow: 13;
|
||
--zorder_mapview_base: 15;
|
||
/* --zorder_mapview_left_pane: 20; */
|
||
|
||
--fnt-defs: 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', sans-serif;
|
||
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Open Sans Bold;
|
||
src: url(/ui/common/OpenSans-Bold.ttf);
|
||
}
|
||
@font-face {
|
||
font-family: Open Sans;
|
||
src: url(/ui/common/OpenSans-Regular.ttf);
|
||
}
|
||
@font-face {
|
||
font-family: Open Sans Extrabold;
|
||
src: url(/ui/common/OpenSans-ExtraBold.ttf);
|
||
}
|
||
@font-face {
|
||
font-family: Squada One;
|
||
src: url(/ui/common/SquadaOne-Regular.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: Digital;
|
||
src: url(/ui/common/Segment7Standard.otf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Roboto';
|
||
src: url(/ui/common/Roboto-Regular.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Roboto Bold';
|
||
src: url(/ui/common/Roboto-Bold.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Roboto Condensed';
|
||
font-style: normal;
|
||
font-weight: 300;
|
||
src: url(/ui/common/RobotoCondensed-Regular.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Play';
|
||
src: url(/ui/common/Play-Regular.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Play Bold';
|
||
src: url(/ui/common/Play-Bold.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'News Cycle';
|
||
src: url(/ui/common/NewsCycle-Regular.ttf);
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'News Cycle Bold';
|
||
src: url(/ui/common/NewsCycle-Bold.ttf);
|
||
}
|
||
|
||
/* Main font */
|
||
|
||
@font-face {
|
||
font-family: 'Overpass';
|
||
src: url('/ui/common/Overpass/Overpass-VariableFont_wght.ttf');
|
||
font-weight: 125 950;
|
||
font-stretch: 75% 125%;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Overpass';
|
||
src: url('/ui/common/Overpass/Overpass-Italic-VariableFont_wght.ttf');
|
||
font-weight: 125 950;
|
||
font-stretch: 75% 125%;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* Secondary font (to be used in UI) */
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-SemiBoldItalic.ttf');
|
||
font-weight: 600;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-ExtraLight.ttf');
|
||
font-weight: 200;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-Bold.ttf');
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-SemiBold.ttf');
|
||
font-weight: 600;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-BoldItalic.ttf');
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-ExtraBoldItalic.ttf');
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-ExtraBold.ttf');
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-Regular.ttf');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-LightItalic.ttf');
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-Medium.ttf');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-Light.ttf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-MediumItalic.ttf');
|
||
font-weight: 500;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-Italic.ttf');
|
||
font-weight: normal;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans';
|
||
src: url('/ui/common/NotoSans/NotoSans-ExtraLightItalic.ttf');
|
||
font-weight: 200;
|
||
font-style: italic;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* Set of fonts to fill the gaps for the hieroglyphic languages */
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans JP';
|
||
src: url('/ui/common/NotoSans/NotoSansJP-Light.otf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans JP';
|
||
src: url('/ui/common/NotoSans/NotoSansJP-Black.otf');
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans JP';
|
||
src: url('/ui/common/NotoSans/NotoSansJP-Bold.otf');
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans JP';
|
||
src: url('/ui/common/NotoSans/NotoSansJP-Regular.otf');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans JP';
|
||
src: url('/ui/common/NotoSans/NotoSansJP-Medium.otf');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans KR';
|
||
src: url('/ui/common/NotoSans/NotoSansKR-Light.otf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans KR';
|
||
src: url('/ui/common/NotoSans/NotoSansKR-Black.otf');
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans KR';
|
||
src: url('/ui/common/NotoSans/NotoSansKR-Bold.otf');
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans KR';
|
||
src: url('/ui/common/NotoSans/NotoSansKR-Regular.otf');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans KR';
|
||
src: url('/ui/common/NotoSans/NotoSansKR-Medium.otf');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans SC';
|
||
src: url('/ui/common/NotoSans/NotoSansSC-Light.otf');
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans SC';
|
||
src: url('/ui/common/NotoSans/NotoSansSC-Black.otf');
|
||
font-weight: 900;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans SC';
|
||
src: url('/ui/common/NotoSans/NotoSansSC-Bold.otf');
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans SC';
|
||
src: url('/ui/common/NotoSans/NotoSansSC-Regular.otf');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans SC';
|
||
src: url('/ui/common/NotoSans/NotoSansSC-Medium.otf');
|
||
font-weight: 500;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
/* Monospace font just in case */
|
||
|
||
@font-face {
|
||
font-family: 'Noto Sans Mono';
|
||
src: url('/ui/common/NotoSans/NotoSansMono-VariableFont_wdth,wght.ttf');
|
||
font-weight: 100 950;
|
||
font-stretch: 75% 125%;
|
||
font-style: normal;
|
||
}
|
||
|
||
html, body {
|
||
background: none;
|
||
cursor: default;
|
||
font-family: var(--fnt-defs);
|
||
height: 100%;
|
||
overflow: hidden !important;
|
||
|
||
-webkit-transition: none!important; transition: none!important;
|
||
-webkit-font-feature-settings: "kern" 1;
|
||
}
|
||
|
||
kbd, .key {
|
||
vertical-align: middle;
|
||
font-family: 'Noto Sans Mono', monospace;
|
||
font-size: 1em;
|
||
}
|
||
|
||
kbd>span, .key>span {
|
||
display: inline-flex;
|
||
}
|
||
|
||
kbd>span>span, .key>span>span {
|
||
font-size:0.8em;
|
||
line-height:1.25em;
|
||
padding-bottom:0.1em;
|
||
}
|
||
|
||
a svg {
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bngApp {
|
||
color: white;
|
||
background: rgb(0, 0, 0);
|
||
background: rgba(0, 0, 0, 0.43);
|
||
box-sizing: border-box;
|
||
padding:2px;
|
||
}
|
||
|
||
.bngAppFont {
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
font-weight: 900;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.active md-icon {
|
||
color: orange!important;
|
||
}
|
||
|
||
.md-virtual-repeat-offsetter {
|
||
right: 0 !important;
|
||
}
|
||
|
||
.stripedBackground {
|
||
background-image: url(/ui/images/stripedbackground.png);
|
||
}
|
||
|
||
.markEveryOddChild:nth-child(2n + 1) {
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.markEveryEvenRow tr:nth-child(2n) {
|
||
background-color: rgba(221, 221, 221, 0.5);
|
||
}
|
||
|
||
* {
|
||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||
-webkit-user-select: none;
|
||
}
|
||
|
||
|
||
/* Focus adjustments */
|
||
|
||
/* .menu-navigation:focus::before {
|
||
outline: 6px solid rgb(252, 107, 3) !important;
|
||
outline-offset: -3px;
|
||
z-index: var(--zorder_main_menu_navigation_focus);
|
||
} */
|
||
|
||
.controls-edit .menu-navigation, .controls-ffb .menu-navigation, .controls-filters .menu-navigation, .controls-hardware .menu-navigation {
|
||
position: relative;
|
||
}
|
||
|
||
.controls-edit {
|
||
min-width: 500px;
|
||
}
|
||
|
||
button:focus {
|
||
overflow: visible;
|
||
}
|
||
|
||
.md-button:focus {
|
||
outline: none;
|
||
overflow: visible;
|
||
}
|
||
|
||
.md-content {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
*:focus { /* should be global */
|
||
outline: none;
|
||
}
|
||
/* TODO: following should be limited to .menu-navigation */
|
||
*:focus {
|
||
box-shadow: inset 0 0 0 25em hsla(0, 0%, 0%, 0.2);
|
||
/* box-shadow: 0 0 0 2px hsla(0, 0%, 0%, 1), 0 0 0 4px hsla(24, 100%, 50%, 1), inset 0 0 0 25em hsla(0, 0%, 0%, 0.2); */
|
||
}
|
||
*:focus::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
top: -5px;
|
||
bottom: -5px;
|
||
left: -5px;
|
||
right: -5px;
|
||
border-radius: 6px;
|
||
border: 3px solid #f60;
|
||
pointer-events: none;
|
||
z-index: var(--zorder_main_menu_navigation_focus);
|
||
}
|
||
.bng-app *:focus::before { /* disable for ui apps */
|
||
content: none;
|
||
}
|
||
|
||
.ratio16x9 {
|
||
position: relative;
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ratio16x9:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 56.25%;
|
||
}
|
||
|
||
.ratio2x1 {
|
||
position: relative;
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ratio2x1:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 50%;
|
||
}
|
||
|
||
.ratio21x9 {
|
||
position: relative;
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ratio21x9:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 42.8%;
|
||
}
|
||
|
||
.ratio1x1 {
|
||
position: relative;
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ratio1x1:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 100%;
|
||
}
|
||
|
||
.ratio3x4 {
|
||
position: relative;
|
||
width: 100%;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.ratio3x4:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 133%;
|
||
}
|
||
|
||
.ratio-content {
|
||
position: absolute !important;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: center / cover no-repeat;
|
||
}
|
||
|
||
.bng-button {
|
||
position: relative;
|
||
}
|
||
|
||
.bng-button:not(:last-child) {
|
||
margin-right: 0.5em;
|
||
}
|
||
|
||
.bng-button-main:focus::before,
|
||
.bng-button-secondary:focus::before,
|
||
.bng-button-white:focus::before,
|
||
.bng-button-outline:focus::before,
|
||
.bng-button-link:focus::before,
|
||
.bng-button-attention:focus::before {
|
||
border: 2px solid #f60;
|
||
}
|
||
|
||
.bng-button-main,
|
||
.bng-button-secondary,
|
||
.bng-button-white,
|
||
.bng-button-outline,
|
||
.bng-button-link,
|
||
.bng-button-attention {
|
||
font-family: var(--fnt-defs);
|
||
font-size: 1em;
|
||
line-height: 1.25em;
|
||
min-width: 3em;
|
||
min-height: 2.25em;
|
||
padding: 0.5em 1em;
|
||
border: 0;
|
||
border-radius: 0.25em;
|
||
transition: all 0.1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
|
||
overflow: visible;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.bng-button-main:disabled,
|
||
.bng-button-secondary:disabled,
|
||
.bng-button-white:disabled,
|
||
.bng-button-link:disabled,
|
||
.bng-button-attention:disabled,
|
||
button[disabled] {
|
||
color: hsla(0, 0%, 60%, 1);
|
||
background-color: hsla(0, 0%, 25%, 1);
|
||
border-color: transparent;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bng-button-outline:disabled {
|
||
border-color: hsla(0, 0%, 60%, 1);
|
||
color: hsla(0, 0%, 60%, 1);
|
||
}
|
||
|
||
.bng-button-main {
|
||
background-color: hsla(24, 100%, 45%, 1); /* change to var() */
|
||
border-color: hsla(24, 100%, 45%, 1);
|
||
color: white;
|
||
}
|
||
|
||
.bng-button-main:hover {
|
||
background-color: hsla(24, 100%, 56%, 1); /* change to var() */
|
||
border-color: hsla(24, 100%, 56%, 1);
|
||
}
|
||
|
||
.bng-button-main:active {
|
||
background-color: hsla(24, 100%, 31%, 1); /* change to var() */
|
||
border-color: hsla(24, 100%, 31%, 1);
|
||
}
|
||
|
||
.bng-button-main:disabled {
|
||
color: hsla(24, 50%, 56%, 1);
|
||
}
|
||
|
||
.bng-button-secondary {
|
||
background-color: hsla(203, 30%, 26%, 1); /* change to var() */
|
||
border-color: hsla(203, 30%, 26%, 1);
|
||
color: white;
|
||
}
|
||
|
||
.bng-button-secondary:hover {
|
||
background-color: hsla(203, 20%, 35%, 1); /* change to var() */
|
||
border-color: hsla(203, 20%, 35%, 1);
|
||
}
|
||
|
||
.bng-button-secondary:active {
|
||
background-color: hsla(203, 30%, 22%, 1); /* change to var() */
|
||
border-color: hsla(203, 30%, 22%, 1);
|
||
}
|
||
|
||
.bng-button-outline {
|
||
background-color: var(--bng-black-4); /* change to var() */
|
||
color: white;
|
||
border-color: hsla(24, 100%, 50%, 1)
|
||
}
|
||
|
||
.bng-button-outline:hover {
|
||
background-color: hsla(24, 100%, 35%, 1); /* change to var() */
|
||
}
|
||
|
||
.bng-button-outline:focus {
|
||
background-color: hsla(24, 100%, 20%, 1); /* change to var() */
|
||
}
|
||
|
||
.bng-button-outline:active {
|
||
background-color: hsla(24, 100%, 10%, 1); /* change to var() */
|
||
}
|
||
|
||
.bng-button-link {
|
||
background-color: var(--bng-black-o2); /* change to var() */
|
||
color: white;
|
||
}
|
||
|
||
.bng-button-link:hover {
|
||
background-color: hsla(24, 100%, 35%, 0.25); /* change to var() */
|
||
}
|
||
|
||
.bng-button-link:active {
|
||
background-color: hsla(24, 0%, 0%, 1); /* change to var() */
|
||
}
|
||
|
||
.bng-button-link:focus {
|
||
background-color: hsla(24, 100%, 35%, 0.4); /* change to var() */
|
||
}
|
||
|
||
.bng-button-link:disabled {
|
||
background-color: hsla(0, 0%, 0%, 0); /* change to var() */
|
||
}
|
||
|
||
.bng-button-attention {
|
||
background-color: hsla(360, 75%, 40%, 1); /* change to var() */
|
||
color: white;
|
||
}
|
||
|
||
.bng-button-attention:hover {
|
||
background-color: hsla(360, 75%, 50%, 1); /* change to var() */
|
||
}
|
||
|
||
.bng-button-attention:active {
|
||
background-color: hsla(360, 75%, 30%, 1); /* change to var() */
|
||
}
|
||
|
||
.bng-button-attention:focus {
|
||
background-color: hsla(360, 85%, 45%, 1); /* change to var() */
|
||
}
|
||
|
||
.dashBrdButton:focus::before {
|
||
top: 2px;
|
||
bottom: 2px;
|
||
left: 2px;
|
||
right: 2px;
|
||
border-radius: 2px;
|
||
border: 2px solid #f60;
|
||
}
|
||
|
||
.dashBrdButton:focus {
|
||
box-shadow: none;
|
||
}
|
||
|
||
.orangeHover:hover {
|
||
color: var(--bng-orange);
|
||
}
|
||
|
||
a:focus {
|
||
position: relative;
|
||
}
|
||
|
||
a {
|
||
color: #f60;
|
||
}
|
||
|
||
md-radio-group.onlineDialogue {
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.onlineDialogue .md-button {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
bng-accordion bng-pane-header ._root {
|
||
position: relative;
|
||
}
|
||
|
||
bng-accordion bng-accordion-pane {
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
bng-pane-header.bottomBorder {
|
||
aborder-bottom: 1px solid var(--bng-orange-700);
|
||
border-bottom: 1px solid var(--bng-cool-gray-600);
|
||
}
|
||
|
||
bng-accordion {
|
||
padding: 0.25rem;
|
||
}
|
||
|
||
md-list-item {
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
/* Checkbox focus fix unless options layouts is fixed properly */
|
||
.optionsSideBarMinimal .md-proxy-focus md-checkbox > .md-label,
|
||
.optionsSideBarFullscreen .md-proxy-focus md-checkbox > .md-label {
|
||
display: none;
|
||
}
|
||
|
||
.filler {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.comicCanvas {
|
||
width: 100vw;
|
||
}
|
||
|
||
@media (min-device-aspect-ratio: 16/9) {
|
||
.comicCanvas {
|
||
width: calc(100vh * 16/9);
|
||
}
|
||
}
|
||
|
||
.container {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
|
||
.photomode-container .tl {
|
||
position: absolute; min-width: 100px; min-height: 100px;
|
||
top: 30px; left: 30px;
|
||
border-top: 5px solid; border-left: 5px solid;
|
||
}
|
||
|
||
.photomode-container .tr {
|
||
position: absolute; min-width: 100px; min-height: 100px;
|
||
top: 30px; right: 30px;
|
||
border-top: 5px solid; border-right: 5px solid;
|
||
}
|
||
|
||
.photomode-container .bl {
|
||
position: absolute; min-width: 100px; min-height: 100px;
|
||
bottom: 30px; left: 30px;
|
||
border-bottom: 5px solid; border-left: 5px solid;
|
||
}
|
||
|
||
|
||
.photomode-container .br {
|
||
position: absolute; min-width: 100px; min-height: 100px;
|
||
bottom: 30px; right: 30px;
|
||
border-bottom: 5px solid; border-right: 5px solid;
|
||
}
|
||
|
||
|
||
/* ------ material's overrides ------*/
|
||
md-slider .md-focus-ring {
|
||
display: none ;
|
||
}
|
||
|
||
md-tooltip > .md-content{
|
||
color: black;
|
||
background-color: white;
|
||
font-size: 14px;
|
||
}
|
||
/* --------------------------------- */
|
||
|
||
/* The buttons' background on focus, gets really annoying */
|
||
.bng-no-focus:focus {
|
||
background: inherit!important;
|
||
}
|
||
|
||
|
||
.bng-hidden-input {
|
||
border:none;
|
||
}
|
||
|
||
.bng-hidden-input[disabled] {
|
||
background: inherit;
|
||
}
|
||
|
||
/* smaller sidebar */
|
||
.smallsidenav {
|
||
fill: #737373;
|
||
/* was 48 */
|
||
/*
|
||
min-width: 140px !important;
|
||
width: 140px !important;
|
||
max-width: 140px !important;
|
||
*/
|
||
overflow:hidden;
|
||
|
||
}
|
||
|
||
.contentNav {
|
||
overflow-y:auto;
|
||
z-index: var(--zorder_main_contentNav);
|
||
}
|
||
|
||
/* some heighfixes */
|
||
md-switch.height32{
|
||
margin: 4px;
|
||
}
|
||
|
||
|
||
md-slider.height32{
|
||
height: 32px;
|
||
}
|
||
|
||
md-slider.height32 .md-track-container{
|
||
top: 15px;
|
||
}
|
||
|
||
md-slider.height32 .md-thumb{
|
||
top: -3px;
|
||
}
|
||
|
||
md-slider.height32 .md-focus-ring{
|
||
top: -8px;
|
||
}
|
||
|
||
md-slider.height32 .md-focus-thumb{
|
||
top: -8px;
|
||
}
|
||
|
||
md-select.height32{
|
||
margin: 1px;
|
||
}
|
||
|
||
md-select-label {
|
||
float: right;
|
||
}
|
||
|
||
md-select {
|
||
margin:0em;
|
||
color:white;
|
||
background:rgba(35, 35, 35, 0);
|
||
opacity: 0.99;
|
||
}
|
||
|
||
md-slider {
|
||
margin-right: 0.8em;
|
||
margin-left: 0.8em;
|
||
}
|
||
|
||
.truncate {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
position: relative;
|
||
}
|
||
|
||
.transparency {
|
||
opacity: 0.9;
|
||
}
|
||
.transparencyMid {
|
||
opacity: 0.75;
|
||
}
|
||
.transparencyHigh {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.gfxSettingsLoading {
|
||
z-index: var(--zorder_main_gfxSettingsLoading);
|
||
position: absolute;
|
||
padding:50px;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color:rgba(0,0,0,0.4);
|
||
}
|
||
|
||
.gfxSettingsLoading .icon {
|
||
-webkit-filter: drop-shadow( 0px 0px 15px white );
|
||
fill:white;
|
||
}
|
||
|
||
[ng\:cloak], [ng-cloak], .ng-cloak {
|
||
display: none !important;
|
||
}
|
||
|
||
::-webkit-scrollbar {
|
||
width: 7px;
|
||
height: 7px;
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: #f60;
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #f72;
|
||
}
|
||
::-webkit-scrollbar-thumb:active {
|
||
background: #d50;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: #222;
|
||
}
|
||
::-webkit-scrollbar-track:hover {
|
||
background: #333;
|
||
}
|
||
::-webkit-scrollbar-track:active {
|
||
background: #000;
|
||
}
|
||
::-webkit-scrollbar-corner {
|
||
background: transparent;
|
||
}
|
||
|
||
.loadingHint {
|
||
color: white;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.dark {
|
||
color: white;
|
||
}
|
||
|
||
|
||
|
||
/* Material Icons Webfont */
|
||
@font-face {
|
||
font-family: 'MIs';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: local('Material Icons'),
|
||
local('MaterialIcons-Regular'),
|
||
url(/ui/common/MaterialIcons-Regular.ttf) format('truetype');
|
||
}
|
||
|
||
.fancy {
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
font-style: italic;
|
||
font-weight: 800;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'Material Icons';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
src: url(/ui/common/MaterialIcons-Regular.ttf) format('truetype');
|
||
}
|
||
|
||
.material-icons {
|
||
font-family: 'Material Icons';
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-size: 1.5em; /* Preferred icon size */
|
||
display: inline-block;
|
||
width: 1em;
|
||
height: 1em;
|
||
line-height: 1;
|
||
text-transform: none;
|
||
letter-spacing: normal;
|
||
word-wrap: normal;
|
||
|
||
/* Support for all WebKit browsers. */
|
||
-webkit-font-smoothing: antialiased;
|
||
/* Support for Safari and Chrome. */
|
||
text-rendering: optimizeLegibility;
|
||
|
||
/* Support for Firefox. */
|
||
-moz-osx-font-smoothing: grayscale;
|
||
|
||
/* Support for IE. */
|
||
/*font-feature-settings: 'liga';*/
|
||
}
|
||
|
||
.md-sidenav-backdrop {
|
||
display: none !important;
|
||
}
|
||
|
||
.my-animation.ng-enter {
|
||
/* standard transition code */
|
||
transition: 2s linear all;
|
||
opacity:0;
|
||
}
|
||
.my-animation.ng-enter-stagger {
|
||
/* this will have a 100ms delay between each successive leave animation */
|
||
transition-delay: 3.1s;
|
||
|
||
/* in case the stagger doesn't work then the duration value
|
||
must be set to 0 to avoid an accidental CSS inheritance */
|
||
transition-duration: 1s;
|
||
}
|
||
.my-animation.ng-enter.ng-enter-active {
|
||
/* standard transition styles */
|
||
opacity:1;
|
||
}
|
||
|
||
v-pane-content > div { -webkit-transition: none!important; transition: none!important; }
|
||
|
||
|
||
#binding_list .bng-binding {
|
||
margin: 0.25em 0;
|
||
padding-left:0.125em;
|
||
}
|
||
|
||
|
||
|
||
|
||
/** { animation-name: none!important; transition: none!important;}*/
|
||
|
||
|
||
|
||
/* --------------------------------------------------------------------
|
||
-------------------------- [ ScenarioControl ] ---------------------
|
||
-------------------------------------------------------------------- */
|
||
.contentNavScenarioControl {
|
||
width:100%;
|
||
max-width:none;
|
||
min-width:none;
|
||
display:block;
|
||
background-color: rgba(0,0,0,0.2);
|
||
color:white;
|
||
}
|
||
|
||
|
||
.contentNavScenarioControl .startScreen {
|
||
position:fixed;
|
||
top:10px;
|
||
left:200px;
|
||
right:100px;
|
||
bottom:10px;
|
||
max-width:800px;
|
||
background-color: rgba(0,0,0,0.4);
|
||
color:white;
|
||
/* border: 2px solid rgba(0,0,0,0.4); */
|
||
/* -webkit-border-radius: 15px; */
|
||
}
|
||
|
||
.contentNavScenarioControl .endScreen {
|
||
position:fixed;
|
||
top:10px;
|
||
left:200px;
|
||
right:100px;
|
||
bottom:10px;
|
||
max-width:800px;
|
||
background-color: rgba(0,0,0,0.4);
|
||
color:white;
|
||
/* border: 2px solid rgba(0,0,0,0.4); */
|
||
/* -webkit-border-radius: 15px; */
|
||
}
|
||
|
||
|
||
/* -=-=-=--=-=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
|
||
------------------------ [ Credits ] -------------------------------
|
||
-=-=-=--=-=-=-=-=-=-=-=-=-=-=--=-=-=--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
|
||
|
||
/* moved to Vue - uncomment the below if issues occur elsewhere */
|
||
|
||
/*#bng-credits-wrapper {
|
||
width:100%;
|
||
height: 100%;
|
||
background: radial-gradient(ellipse at top left, #334455 0%, #000 100%);
|
||
text-align: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bng-credits-content {
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
/--* font-family: 'Roboto Condensed'; - if something breaks there *--/
|
||
text-transform: uppercase;
|
||
color: #fff;
|
||
}
|
||
|
||
.bng-credits-content creditsCategory {
|
||
display:block;
|
||
margin-top: 120px;
|
||
margin-bottom: 25px;
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bng-credits-content creditsMember {
|
||
display:block;
|
||
margin-bottom: 8px;
|
||
font-size: 24px;
|
||
color: white;
|
||
font-style: normal;
|
||
}
|
||
|
||
.bng-credits-content .title {
|
||
margin-bottom: 8px;
|
||
font-size: 24px;
|
||
color: var(--bng-orange);
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
#bng-credits-wrapper:focus {
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
*/
|
||
|
||
/* md-select item */
|
||
.md-select-menu-container.md-active md-select-menu { transition: none!important; }
|
||
.md-select-menu-container.md-active md-select-menu > * { opacity: 1; transition: none!important; }
|
||
.md-select-menu-container.md-leave { opacity: 0; transition: none!important; }
|
||
|
||
md-select.bng-select-fullwidth .md-select-label { width: 100%; }
|
||
.bng-short-select-item { height: 32px; }
|
||
|
||
|
||
|
||
/* alignment corners in app-editing */
|
||
.app-alignment-dot {
|
||
width: 150px;
|
||
height: 150px;
|
||
pointer-events: none;
|
||
background-image: radial-gradient(circle, rgba(255,255,255,1) 25%, rgba(255,255,200,0.3) 45%, rgba(255,255,155,0) 65%);
|
||
z-index: var(--zorder_main_app_alignment_dot_corner);
|
||
}
|
||
|
||
.app-alignment-dot.tl {
|
||
margin-left: -100px;
|
||
margin-top: -100px;
|
||
}
|
||
|
||
.app-alignment-dot.tr {
|
||
margin-right: -100px;
|
||
margin-top: -100px;
|
||
}
|
||
|
||
.app-alignment-dot.bl {
|
||
margin-left: -100px;
|
||
margin-bottom: -100px;
|
||
}
|
||
|
||
.app-alignment-dot.br {
|
||
margin-right: -100px;
|
||
margin-bottom: -100px;
|
||
}
|
||
|
||
.app-alignment-dot.c {
|
||
margin-left: -100px;
|
||
margin-top: -100px;
|
||
}
|
||
|
||
.bordered {
|
||
border: solid grey 1px;
|
||
box-sizing: border-box;
|
||
background-color: rgba(255, 0, 0, 0.01);
|
||
}
|
||
|
||
|
||
|
||
kbd > span {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.uppercase {
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
/* override for less padding in 2-line list items */
|
||
md-list-item.md-2-line.squeezed .md-list-item-text {
|
||
padding: 6px;
|
||
padding-top: 10px 0;
|
||
}
|
||
|
||
|
||
.menuNavbar {
|
||
background-color:rgba(0, 0, 0, 0.6);
|
||
padding: 2px 8px;
|
||
flex: none;
|
||
}
|
||
|
||
@media (max-width: 1200px){
|
||
.menuNavbar {
|
||
font-size: 0.75em;
|
||
}
|
||
}
|
||
|
||
|
||
.gridMarkSelected md-grid-tile:hover md-grid-tile-footer {
|
||
background: rgba(252, 107, 3, 0.60);
|
||
}
|
||
.gridMarkSelected md-grid-tile:focus md-grid-tile-footer,
|
||
.gridMarkSelected md-grid-tile.gridMarkSelected md-grid-tile-footer {
|
||
background: rgba(252, 107, 3, 0.80);
|
||
}
|
||
/* .gridMarkSelected md-grid-tile:focus {
|
||
border: 2px solid rgba(252, 107, 3, 0.60);
|
||
} */
|
||
.gridMarkSelected md-grid-tile {
|
||
outline: none;
|
||
/* border: 2px solid transparent; */
|
||
}
|
||
|
||
/*no f*cking clue why this is need seperatly to the above
|
||
(only for scenarios and vehicle details, rest works perfectly fine)*/
|
||
.gridMarkSelected .selectedGridItem md-grid-tile-footer {
|
||
background: rgba(252, 107, 3, 0.80);
|
||
}
|
||
.gridMarkSelected .selectedGridItem:hover md-grid-tile-footer {
|
||
background: rgba(252, 107, 3, 0.80);
|
||
}
|
||
|
||
.gridMarkSelected .selectedGridItem:focus md-grid-tile-footer {
|
||
background: rgba(252, 107, 3, 0.80);
|
||
}
|
||
/* .gridMarkSelected .selectedGridItem {
|
||
border: 2px solid rgba(252, 107, 3, 0.60);
|
||
} */
|
||
|
||
.bng-controls-aux-input {
|
||
width: 50px;
|
||
text-align: right;
|
||
margin-left: 15px;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* Simple table CSS (just to avoid having a completely ugly table) */
|
||
table.simple-table {
|
||
border-width: 1px;
|
||
border-color: #464646;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
table.simple-table th {
|
||
text-align: left;
|
||
padding: 5px;
|
||
background-color: #f1f1f1;
|
||
font-weight:none;
|
||
}
|
||
|
||
table.simple-table td {
|
||
background-color: white;
|
||
padding-left:5px;
|
||
}
|
||
|
||
table.simple-table tbody tr {
|
||
border-bottom: 1px solid lightgrey;
|
||
background-color: blue;
|
||
}
|
||
|
||
table.simple-table td.number {
|
||
font-family: 'Noto Sans Mono', monospace;
|
||
}
|
||
|
||
.bng-app {
|
||
user-select: none;
|
||
}
|
||
|
||
.bng-app.editable {
|
||
cursor: move;
|
||
}
|
||
|
||
.bng-app.editable .resizeHandle {
|
||
cursor: nw-resize;
|
||
}
|
||
|
||
.bng-app.editable:active {
|
||
box-shadow: 0 0 0px 2px rgba(252, 107, 3, 0.9);
|
||
}
|
||
|
||
table.bng-list-table {
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
table.bng-list-table td {
|
||
padding: 0.5em;
|
||
vertical-align: top;
|
||
}
|
||
|
||
|
||
/* ----------------------- TEST ONLY ------------------------- */
|
||
@font-face {
|
||
font-family: 'beamng-icons';
|
||
src: url(/ui/common/beamng-icons.ttf) format('truetype');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
.bng-icon {
|
||
/* use !important to prevent issues with browser extensions that change fonts */
|
||
font-family: 'beamng-icons' !important;
|
||
speak: none;
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
font-variant: normal;
|
||
text-transform: none;
|
||
line-height: 1;
|
||
|
||
/* Enable Ligatures ================ */
|
||
letter-spacing: 0;
|
||
-webkit-font-feature-settings: "liga";
|
||
-moz-font-feature-settings: "liga=1";
|
||
-moz-font-feature-settings: "liga";
|
||
-ms-font-feature-settings: "liga" 1;
|
||
font-feature-settings: "liga";
|
||
-webkit-font-variant-ligatures: discretionary-ligatures;
|
||
font-variant-ligatures: discretionary-ligatures;
|
||
|
||
/* Better Font Rendering =========== */
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
.bng-logo:before {
|
||
content: "\e900";
|
||
}
|
||
|
||
|
||
/* -- MISSION POPUP START -- */
|
||
|
||
|
||
.mission-popups {
|
||
display: block;
|
||
position: absolute;
|
||
top: 10px;
|
||
bottom: 10px;
|
||
left: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
.mission-info {
|
||
position: absolute;
|
||
top: 25px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
width: 600px;
|
||
max-width: 100%;
|
||
color: white;
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
font-weight: 800;
|
||
user-select: none;
|
||
z-index: var(--zorder_main_mission_info_button);
|
||
}
|
||
.mission-info .header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
border-top: solid 4px #ff6600;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
.mission-info .header-title {
|
||
font-size: 1.5em;
|
||
}
|
||
.mission-info .header-subtitle {
|
||
font-size: 1.2em;
|
||
}
|
||
.mission-info .header-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
fill: white;
|
||
stroke: none;
|
||
position: absolute;
|
||
left: -70px
|
||
}
|
||
.mission-info .body {
|
||
padding: 10px 0;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
.mission-info .row {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 5px 0;
|
||
line-height: 1.5em;
|
||
}
|
||
.mission-info .cell {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
}
|
||
.mission-info .cell.entry-label {
|
||
flex: 1;
|
||
/*font-size: 1.2em;*/
|
||
text-transform: uppercase;
|
||
justify-content: flex-end;
|
||
align-items: flex-start;
|
||
}
|
||
.mission-info .cell.entry-val {
|
||
flex: 1;
|
||
}
|
||
.mission-info .buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 5px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.mission-info .buttons .button {
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border-top: solid 4px transparent;
|
||
border-bottom: solid 4px transparent;
|
||
padding: 5px 20px;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
font-size: 1.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: var(--zorder_main_mission_info_button);
|
||
}
|
||
|
||
.mission-info .buttons .button:focus,
|
||
.mission-info .buttons .button:hover {
|
||
border-top: solid 4px #ff7700;
|
||
}
|
||
.mission-info .buttons .button:active {
|
||
border-color: #ff7700;
|
||
color: #ff7700;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
outline: none;
|
||
}
|
||
|
||
/* Alternate Mode */
|
||
.mission-info-alt {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
width: 600px;
|
||
max-width: 100%;
|
||
color: white;
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
font-weight: 800;
|
||
user-select: none;
|
||
}
|
||
|
||
.mission-info-alt .header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
border-top: solid 4px #ff7700;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
.mission-info-alt .header-title {
|
||
font-size: 1.5em;
|
||
}
|
||
.mission-info-alt .header-subtitle {
|
||
font-size: 1.2em;
|
||
}
|
||
.mission-info-alt .header-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
fill: white;
|
||
stroke: none;
|
||
position: absolute;
|
||
left: -70px
|
||
}
|
||
.mission-info-alt .body {
|
||
padding: 10px 0;
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
}
|
||
.mission-info-alt .row {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 5px 0;
|
||
line-height: 1.5em;
|
||
}
|
||
.mission-info-alt .cell {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
}
|
||
.mission-info-alt .cell.entry-label {
|
||
flex: 1;
|
||
/*font-size: 1.2em;*/
|
||
text-transform: uppercase;
|
||
justify-content: flex-end;
|
||
align-items: flex-start;
|
||
}
|
||
.mission-info-alt .cell.entry-val {
|
||
flex: 1;
|
||
}
|
||
.mission-info-alt .buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 5px;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.mission-info-alt .buttons .button {
|
||
background: rgba(0, 0, 0, 0.7);
|
||
border-top: solid 4px transparent;
|
||
border-bottom: solid 4px transparent;
|
||
padding: 5px 20px;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
font-size: 1.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index:var(--zorder_main_mission_info_alt_button);
|
||
}
|
||
|
||
.mission-info-alt .buttons .button:focus,
|
||
.mission-info-alt .buttons .button:hover {
|
||
border-top: solid 4px #ff7700;
|
||
}
|
||
.mission-info-alt .buttons .button:active {
|
||
border-color: #ff7700;
|
||
color: #ff7700;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
outline: none;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* MISSION POPUPS END */
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* very short fade-in */
|
||
.moduleStartScreenFade.ng-enter {
|
||
transition:0.1s linear all;
|
||
opacity: 0;
|
||
}
|
||
.moduleStartScreenFade.ng-enter-active {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* very short fade-out */
|
||
.moduleStartScreenFade.ng-leave {
|
||
transition:0.3s linear all;
|
||
opacity: 1;
|
||
}
|
||
.moduleStartScreenFade.ng-leave-active {
|
||
opacity: 0;
|
||
}
|
||
|
||
.moduleBlendOnLeave.ng-leave {
|
||
transition: 1s;
|
||
opacity: 1;
|
||
}
|
||
.moduleBlendOnLeave.ng-leave-active {
|
||
opacity: 0;
|
||
}
|
||
|
||
|
||
.font1 {
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
font-weight: 800;
|
||
}
|
||
|
||
.font2 {
|
||
font-family: var(--fnt-defs);
|
||
}
|
||
|
||
.color1 {
|
||
color: white;
|
||
}
|
||
|
||
.color2 {
|
||
color: #b9b9ba;
|
||
}
|
||
|
||
.color3 {
|
||
color: #FF6700;
|
||
}
|
||
|
||
.color4 {
|
||
color: #C80000;
|
||
}
|
||
|
||
.bg-color1 {
|
||
background-color: white;
|
||
}
|
||
|
||
.bg-color2 {
|
||
background-color: #b9b9ba;
|
||
}
|
||
|
||
.bg-color3 {
|
||
background-color: #FF6700;
|
||
}
|
||
|
||
.bg-color4 {
|
||
background-color: #C80000;
|
||
}
|
||
|
||
.fill-color1 {
|
||
fill: white;
|
||
}
|
||
|
||
.fill-color2 {
|
||
fill: #b9b9ba;
|
||
}
|
||
|
||
.fill-color3 {
|
||
fill: #FF6700;
|
||
}
|
||
|
||
.fill-color4 {
|
||
fill: #C80000;
|
||
}
|
||
|
||
.hg-color3 {
|
||
background-color: rgba(255, 103, 0, 0.3);
|
||
}
|
||
|
||
|
||
.possibleActionKey {
|
||
padding: 10px;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
border: 3px solid transparent;
|
||
background: rgba(0, 0, 0, 0.01); /* mouse focus hack */
|
||
}
|
||
|
||
.possibleActionKey:hover {
|
||
/*background-color: #FF6700;*/
|
||
-webkit-border-image: -webkit-linear-gradient(70deg, #FF6700 0%, transparent 35%, transparent 65%, #FF6700);
|
||
border-image-slice: 1;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.box {
|
||
position: relative;
|
||
width: inherit;
|
||
}
|
||
|
||
.box1_1:before{
|
||
content: "";
|
||
display: block;
|
||
padding-top: 100%;
|
||
}
|
||
|
||
.box16_19:before {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 56.25%;
|
||
}
|
||
|
||
.display {
|
||
width: 100vw;
|
||
}
|
||
|
||
@media (min-device-aspect-ratio: 16/9) {
|
||
.display {
|
||
width: calc(100vh * 16/9);
|
||
}
|
||
}
|
||
|
||
/* image sliders start */
|
||
.imageslider {
|
||
position: relative;
|
||
width: 100%;
|
||
width: 100%;
|
||
margin: auto;
|
||
}
|
||
.imageslideItem {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
opacity: 1;
|
||
transition: 0.5s linear opacity;
|
||
}
|
||
|
||
.imageslideItem.ng-hide-add, .imageslideItem.ng-hide-remove {
|
||
transition: 0.5s linear opacity;
|
||
}
|
||
|
||
/* starting animations for remove */
|
||
.imageslideItem.ng-hide-remove { opacity: 0; }
|
||
/* terminal animations for remove */
|
||
.imageslideItem.ng-hide-remove.ng-hide-remove-active { opacity: 1; }
|
||
|
||
/* starting animations for add */
|
||
.imageslideItem.ng-hide-add { opacity: 1; }
|
||
/* terminal animations for add */
|
||
.imageslideItem.ng-hide-add.ng-hide-add-active { opacity: 0; }
|
||
|
||
/* image sliders end */
|
||
|
||
|
||
/* image carousel start */
|
||
|
||
.img-carousel {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.img-carousel,
|
||
.img-carousel-prev {
|
||
background-size: cover;
|
||
background-position: 50% 50%;
|
||
}
|
||
|
||
.img-carousel-prev {
|
||
position: absolute !important;
|
||
display: inline-block;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.img-carousel-nav {
|
||
position: absolute !important;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: inline-block;
|
||
font-size: 0.8em;
|
||
height: 1.4em;
|
||
text-align: center;
|
||
background: linear-gradient(rgba(0,0,0, 0.0), rgba(0,0,0, 0.65));
|
||
}
|
||
.img-carousel-nav > * {
|
||
box-sizing: border-box;
|
||
display: inline-block;
|
||
width: 0.5em;
|
||
height: 0.5em;
|
||
margin: 0.3em;
|
||
background-color: #fff;
|
||
border-radius: 100%;
|
||
cursor: pointer;
|
||
}
|
||
.img-carousel-nav > *.selected {
|
||
top: 0;
|
||
width: 0.6em;
|
||
height: 0.6em;
|
||
margin: 0.2em;
|
||
}
|
||
|
||
/* image carousel end */
|
||
|
||
|
||
.no-mouse {
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* bng virtual repeat */
|
||
.bng-v-list__item {
|
||
display: inline-block;
|
||
}
|
||
.bng-v-list {
|
||
overflow-y: auto;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
overflow-x: hidden;
|
||
padding: 1em 1em 2em 0.5em;
|
||
}
|
||
|
||
/* bng 16:9 box */
|
||
.box {
|
||
margin: 0 auto;
|
||
width: inherit;
|
||
}
|
||
|
||
.box:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 48%
|
||
}
|
||
|
||
.box1_1 {
|
||
position: relative;
|
||
width: inherit;
|
||
}
|
||
.box1_1:after {
|
||
content: "";
|
||
display: block;
|
||
padding-top: 100%;
|
||
}
|
||
|
||
|
||
/* ----------------------------- for news link */
|
||
|
||
.tile a {
|
||
background-color: rgba(0,0,0,0);
|
||
text-decoration: none;
|
||
color: white;
|
||
}
|
||
|
||
.tile a:visited {
|
||
background-color: rgba(0,0,0,0);
|
||
color: white;
|
||
}
|
||
|
||
/*------------------------------- md-tab test for translation issues */
|
||
|
||
/*
|
||
.md-tab {
|
||
padding: 0px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: flex;
|
||
}
|
||
*/
|
||
|
||
|
||
#reconnectScreen {
|
||
position: fixed; /* or absolute */
|
||
top:0;
|
||
left:0;
|
||
right:0;
|
||
bottom:0;
|
||
z-index: var(--zorder_main_reconnectScreen) !important;
|
||
background-color:rgba(0, 0, 0, 0.815);
|
||
}
|
||
.reconnectScreenText {
|
||
position: fixed; /* or absolute */
|
||
top: 50%;
|
||
left: 50%;
|
||
/* bring your own prefixes */
|
||
transform: translate(-50%, -50%);
|
||
color:white;
|
||
font-family: 'Noto Sans Mono', monospace;
|
||
}
|
||
.md-subheader{
|
||
background-color: transparent;
|
||
}
|
||
input{
|
||
color: white;
|
||
background-color: #373737;
|
||
border-width: 0px;
|
||
border-radius: 5px;
|
||
padding: 1%;
|
||
}
|
||
|
||
input {
|
||
background-color: var(--bng-black-o2);
|
||
box-sizing: border-box;
|
||
border-bottom: 0.125em solid rgba(255, 255, 255, 0.6);
|
||
border-radius: var(--bng-corners-1) var(--bng-corners-1) 0 0;
|
||
padding: 0.5em 0.25em;
|
||
overflow: visible;
|
||
position: relative;
|
||
transition: all 0.2s ease-in-out;
|
||
font-family: var(--fnt-defs);
|
||
}
|
||
|
||
input:focus {
|
||
border-bottom: 0.125em solid var(--bng-orange-b400);
|
||
}
|
||
|
||
input:disabled {
|
||
background-color: rgba(var(--bng-cool-gray-700), 0.5);
|
||
border-bottom: 0.125em solid var(--bng-cool-gray-600);
|
||
}
|
||
|
||
/* Suffix and prefix styling */
|
||
|
||
.input-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
padding: 0;
|
||
position: relative;
|
||
font-size: 1em;
|
||
line-height: 1.25em;
|
||
color: white;
|
||
}
|
||
|
||
.input-wrapper > span {
|
||
background-color: var(--bng-black-o8);
|
||
border-bottom: 0.125em solid var(--bng-cool-gray-700);
|
||
padding: 0.5em 0.25em;
|
||
}
|
||
|
||
.input-wrapper.suffix > input {
|
||
border-radius: var(--bng-corners-1) 0 0 0;
|
||
}
|
||
|
||
.input-wrapper.prefix > input {
|
||
border-radius: 0 var(--bng-corners-1) 0 0;
|
||
}
|
||
|
||
.input-wrapper.suffix > span {
|
||
border-radius: 0 var(--bng-corners-1) 0 0;
|
||
}
|
||
|
||
.input-wrapper.prefix > span {
|
||
border-radius: var(--bng-corners-1) 0 0 0;
|
||
}
|
||
|
||
|
||
/* AngularJS form validation specific style */
|
||
|
||
input.ng-invalid {
|
||
background-color: rgba(var(--bng-add-red-700), 0.5);
|
||
border-bottom: 0.125em solid var(--bng-add-red-500);
|
||
}
|
||
|
||
.input-light{
|
||
color: black;
|
||
background-color: white;
|
||
border-width: 0px;
|
||
border-radius: 5px;
|
||
padding: 1%;
|
||
}
|
||
|
||
md-input-container label {
|
||
color:white;
|
||
}
|
||
|
||
.bng-list-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex: 0 0 auto;
|
||
box-sizing: border-box;
|
||
min-height: 3em;
|
||
}
|
||
|
||
.bng-list-item .settings-label {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex: 0 0 35%;
|
||
padding-right: 0.5em;
|
||
}
|
||
|
||
|
||
.bng-list-item .settings-input {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex: 1 0 auto;
|
||
}
|
||
|
||
.bngPauseContent {
|
||
color: white;
|
||
text-shadow: -3px 3px 15px #DB7B00, 3px -3px 15px #DB7B00;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* the button bar */
|
||
.dashBrdButton {
|
||
margin:0 !important;
|
||
padding: 0.375em 0.75em 0.5em 0.75em !important;
|
||
border-radius:0 !important;
|
||
line-height: inherit;
|
||
height: auto;
|
||
text-align:center;
|
||
/* min-width: 80px; disabled for now */
|
||
white-space: nowrap;
|
||
border-top: 0.125em solid transparent;
|
||
}
|
||
|
||
.dashBrdButton:not(.dashBrdButtonActive):hover, .dashBrdButton:not(.dashBrdButtonActive):focus {
|
||
background-color:rgba(0, 0, 0, 0.6);
|
||
border-top-color: var(--bng-orange);
|
||
}
|
||
|
||
/* the active button */
|
||
.dashBrdButtonActive {
|
||
background-color:white;
|
||
border-top-color: var(--bng-orange);
|
||
}
|
||
|
||
/* prevent user events */
|
||
.dashBrdButtonInactive {
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* position */
|
||
.dashBrdButtonStart {
|
||
/* margin-right: auto; */
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
.dashBrdButtonEnd {
|
||
/* margin-left: auto; */
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: var(--zorder_main_topbar_button_end);
|
||
}
|
||
|
||
/* pause button */
|
||
.dashBrdButtonPause {
|
||
background-color: var(--bng-orange-shade2);
|
||
}
|
||
.dashBrdButtonPaused {
|
||
animation: 2s infinite cubic-bezier(.17,.67,.83,.67) pauseButtonBreathing;
|
||
}
|
||
|
||
@keyframes pauseButtonBreathing {
|
||
0%
|
||
{
|
||
background-color: var(--bng-orange);
|
||
}
|
||
50%
|
||
{
|
||
background-color: var(--bng-black-6);
|
||
}
|
||
100%
|
||
{
|
||
background-color: var(--bng-orange);
|
||
}
|
||
}
|
||
|
||
.dashBrdButtonPaused:hover {
|
||
background-color: var(--bng-orange-shade1opaque) !important;
|
||
}
|
||
.dashBrdButtonPause .dashBrdSvgIcon {
|
||
filter: unset !important;
|
||
}
|
||
.dashBrdButtonPause .dashBrdText {
|
||
color: white !important;
|
||
}
|
||
|
||
/* topleft button */
|
||
.dashBrdButtonTopLeft {
|
||
background-color: var(--bng-orange-shade2);
|
||
}
|
||
|
||
@media (max-width: 1400px){
|
||
.dashBrdButtonPause .dashBrdText,
|
||
.dashBrdButtonExit .dashBrdText {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
|
||
/* the icon inside the button */
|
||
.dashBrdSvgIcon {
|
||
margin-top: -0.1em;
|
||
height: 100%;
|
||
color:white;
|
||
vertical-align:middle;
|
||
display: inline-block;
|
||
}
|
||
|
||
.dashBrdSvgIcon > span{
|
||
margin: 0 0.125em 0 0 !important;
|
||
font-size: 1em !important;
|
||
}
|
||
|
||
.dashBrdButtonActive .dashBrdSvgIcon {
|
||
filter: var(--bng-filter-orange);
|
||
}
|
||
.dashBrdText {
|
||
font-family: 'Overpass', var(--fnt-defs);
|
||
color:white;
|
||
vertical-align: middle;
|
||
font-weight: 600;
|
||
/* line-height: 150%; */
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.dashBrdButtonActive .dashBrdText {
|
||
color:black;
|
||
}
|
||
.dashMenuHeight {
|
||
height: 100%;
|
||
max-height: 2.5em;
|
||
overflow: hidden;
|
||
}
|
||
@media (max-width: 1500px){
|
||
.dashBrdText {
|
||
font-size: 0.75em;
|
||
}
|
||
}
|
||
@media (min-width: 1280px){
|
||
.dashBrdSvgIcon {
|
||
margin-right: 0.25em; /* that's for text, but there's a case when icon won't be shown */
|
||
}
|
||
}
|
||
@media (max-width: 1279px){
|
||
#dashmenu > *:not(.dashBrdButtonActive) > .dashBrdText {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.fancyBackgroundFill {
|
||
z-index:var(--zorder_main_fancyBackground);
|
||
position: absolute;
|
||
top: 0px;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
right: 0px;
|
||
}
|
||
|
||
.contentNavMainmenu > * {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
menu-content > .filler > * {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.menubar {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
|
||
.headingContainer {
|
||
flex: 0 0 auto;
|
||
margin: 0em 0em 1em 4.5em;
|
||
font-family: 'Overpass', var(--fnt-defs) !important;
|
||
font-style: italic;
|
||
font-size: 1rem !important;
|
||
font-weight: 800;
|
||
color: white;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
line-height: 1.25em;
|
||
/* white-space: nowrap; */
|
||
}
|
||
|
||
.headingContainer::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
background-color: var(--bng-orange);
|
||
transform-origin: bottom left;
|
||
transform: skewX(-20deg);
|
||
left: -4.5em;
|
||
width: 2em;
|
||
height: 4.75em;
|
||
z-index: 1;
|
||
}
|
||
|
||
.headingContainer > div {
|
||
background:rgba(0, 0, 0, 0.6);
|
||
display: inline-flex;
|
||
padding: 0 0.5em 0 0.5rem;
|
||
border-radius: 0.25em 0.25em 0.25em 0;
|
||
}
|
||
|
||
.headingContainer h3,
|
||
.headingContainer h4,
|
||
.headingContainer h5,
|
||
.headingContainer h6 {
|
||
margin: 0.25em 0;
|
||
display: inline-block;
|
||
line-height: 1.25em;
|
||
}
|
||
|
||
.headingContainer h1,
|
||
.headingContainer h2 {
|
||
margin: 0;
|
||
display: inline-block;
|
||
background:rgba(0, 0, 0, 0.6);
|
||
padding: 0.25em 0.75em 0.25em 0.5rem;
|
||
border-radius: 0 0.25em 0.25em 0.25em;
|
||
font-weight: 800;
|
||
letter-spacing: 0.01em;
|
||
line-height: 1.25em;
|
||
}
|
||
|
||
.headingContainer h2 {
|
||
font-size: 1.75em;
|
||
line-height: 1.25em;
|
||
}
|
||
|
||
.fixd-ratio {
|
||
display: grid;
|
||
}
|
||
.fixd-ratio > * {
|
||
grid-area: 1/1;
|
||
}
|
||
|
||
/* override hard-coded colours and paddings in md stylesheets */
|
||
|
||
md-select-menu md-option {
|
||
padding: 0 0.625em;
|
||
}
|
||
|
||
md-select-menu md-option:focus:not([selected]) {
|
||
background: transparent !important;
|
||
}
|
||
md-select-menu md-option[selected] {
|
||
color: var(--bng-orange) !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
md-select-menu > md-content {
|
||
padding: 0.5em;
|
||
background-color: var(--bng-add-blue-900);
|
||
}
|
||
|
||
.uiapps-hidden {
|
||
/*
|
||
when canvas or apps are hidden with display:none - apps are glitching
|
||
when apps or their controls have no pointer-events (none) - app's md-tooltips are glitching
|
||
therefore we have to just move it offscreen
|
||
*/
|
||
transform: translateY(500%);
|
||
overflow: hidden;
|
||
}
|
||
|
||
md-list-item {
|
||
position: relative;
|
||
}
|
||
|
||
|
||
|
||
.dialog:not(.experimental) {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
height: auto;
|
||
max-width: 25%;
|
||
padding: 15px;
|
||
border: 5px;
|
||
border-color: var(--bng-orange);
|
||
border-radius: 20px;
|
||
color: white;
|
||
background-color: var(--dark-neutral-grey);
|
||
text-align: center;
|
||
}
|
||
.dialog.dialog:not(.experimental) .broken_mods {
|
||
list-style-type: none;
|
||
text-align: left;
|
||
max-height:15em;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.dialog.brokenModPrompt {
|
||
max-width: 80%;
|
||
}
|
||
|
||
.dialog .options {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.dialog.experimental {
|
||
border: 3px solid rgba(255,0,0, 0.4);
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
color: #FFF;
|
||
background: var(--dark-neutral-grey);
|
||
background-clip: padding-box;
|
||
border: solid 6px transparent;
|
||
border-radius: 1em;
|
||
padding: 0;
|
||
position: relative;
|
||
left: unset;
|
||
margin: auto;
|
||
width: 80ch;
|
||
max-width: 80%;
|
||
height: auto;
|
||
max-height: 80%;
|
||
top:40%;
|
||
}
|
||
|
||
.dialog.experimental:after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
margin: -6px;
|
||
border-radius: inherit;
|
||
z-index: -1;
|
||
background: repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3), 10px, red 10px, red 20px);
|
||
}
|
||
|
||
.dialog.experimental .bng-button:not(:last-child) {
|
||
margin-right: 0.8em;
|
||
}
|
||
|
||
.dialog.experimental .header {
|
||
background: rgba(255,0,0, 0.4);
|
||
border-radius: 0.6em 0.6em 0 0;
|
||
padding: 0.3em;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.dialog.experimental .content {
|
||
border-radius: 0 0 0.6em 0.6em;
|
||
padding: 1em;
|
||
}
|
||
|
||
.dialog.experimental .text {
|
||
margin-bottom: 1em;
|
||
padding: 0 2.5vw;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.vertical-divider {
|
||
margin: 0.4em 0.4em 0.4em 0.5em;
|
||
padding-left: 2px;
|
||
background: #fff;
|
||
transform: skewX(-20deg);
|
||
align-self: stretch;
|
||
}
|
||
|
||
/* Career-styles */
|
||
|
||
.career-content, .career-card-buttons, .career-manage {
|
||
background: var(--bng-black-6);
|
||
}
|
||
|
||
.career-content {
|
||
flex: 0.0001 1 auto;
|
||
display: flex;
|
||
flex-flow: column;
|
||
padding: 0 1em 1em;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.career-status-progress {
|
||
padding: 0.25em 0;
|
||
}
|
||
|
||
.career-status-value {
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 0;
|
||
align-items: flex-start;
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.career-status-progress .career-status-value {
|
||
font-size: 2.25em;
|
||
line-height: 1.25em;
|
||
font-weight: 900;
|
||
padding-right: 0.05em;
|
||
}
|
||
|
||
.career-status-progress .career-status-value > :first-child {
|
||
margin-right: 0.25em;
|
||
}
|
||
|
||
.career-status-progress, .career-status-stars {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.career-status-stars {
|
||
flex: 1 0 auto;
|
||
font-size: 1.5em;
|
||
line-height: 1em;
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
display: none; /* Because we need some data first =( */
|
||
}
|
||
|
||
.career-status-stars .vertical-divider {
|
||
margin-top: 0.25em;
|
||
margin-bottom: 0.25em;
|
||
}
|
||
|
||
.career-main-star, .career-bonus-star {
|
||
width: 1em;
|
||
height: 1em;
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
-webkit-mask-position: 50% 50%;
|
||
margin-left: 0.25em;
|
||
margin-bottom:0.1em;
|
||
}
|
||
|
||
.career-main-star {
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/star.svg);
|
||
background: #ffffff;
|
||
}
|
||
|
||
.career-bonus-star {
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/star-secondary.svg);
|
||
background: hsl(240, 100%, 85%)
|
||
}
|
||
|
||
.career-status-stars .label {
|
||
flex: 1 0 auto;
|
||
}
|
||
|
||
.levels-progress {
|
||
padding: 0.5em 0 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.levels-progressbar-wrapper {
|
||
flex: 1 0 auto;
|
||
}
|
||
|
||
.branch-icon-assembly {
|
||
width: 2.25em;
|
||
height: 2.25em;
|
||
flex: 0 0 auto;
|
||
position: relative;
|
||
margin-right: 0.5em;
|
||
}
|
||
|
||
.branch-icon, .branch-bgcolor {
|
||
position: absolute !important;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
-webkit-mask-position: 50% 50%;
|
||
}
|
||
|
||
.branch-icon {
|
||
background-color: #fff;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/branchXP-generic.svg);
|
||
filter: drop-shadow(0 0 0.5em #000);
|
||
}
|
||
|
||
.branch-bgcolor {
|
||
background-color: #505050;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/branchXP-bg.svg);
|
||
}
|
||
|
||
.levels-progressbar-wrapper .progressbar-labels {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
font-style: italic;
|
||
font-weight: 700;
|
||
font-size: 1em;
|
||
line-height: 1.25em;
|
||
}
|
||
|
||
.levels-progressbar-wrapper .progressbar-labels :first-child {
|
||
flex:1 0 auto;
|
||
}
|
||
|
||
.progressbar-background {
|
||
/* height: 0.5em; */
|
||
background: var(--bng-black-6);
|
||
overflow: hidden;
|
||
padding: 0.125em;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.progressbar-background .progressbar-fill {
|
||
padding:0.25em 0;
|
||
background-color: var(--bng-orange-b400);
|
||
box-shadow: #000 1em;
|
||
overflow: visible;
|
||
}
|
||
|
||
.progressbar-value {
|
||
color:#fff;
|
||
font-size: 0.75em;
|
||
text-shadow: rgba(0,0,0, 0.2) 0 2px 8px;
|
||
/* position: static; */
|
||
font-weight: 700;
|
||
padding-right: 0.5em;
|
||
}
|
||
|
||
.levels-progress.inactive {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.beamxp-label :first-child {
|
||
font-size: 0.75em;
|
||
line-height: 1em;
|
||
padding-left: 0.25em;
|
||
}
|
||
|
||
.beamxp-label :nth-child(2) {
|
||
font-weight: 800;
|
||
padding-bottom: 0.1em;
|
||
font-size: 1.5em;
|
||
line-height: 1em;
|
||
}
|
||
|
||
.money-label {
|
||
padding-bottom: 0.1em;
|
||
font-weight: 800;
|
||
font-size: 1.5em;
|
||
line-height: 1em;
|
||
order: -1;
|
||
}
|
||
|
||
.career-modded-badge {
|
||
position: absolute !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
top: 0.5em;
|
||
right: -7.7em;
|
||
width: 20em;
|
||
padding: 0.2em 0 0.1em 0;
|
||
text-align: center;
|
||
font-family: "Overpass", var(--fnt-defs);
|
||
font-size: 0.75em;
|
||
font-weight: 600;
|
||
background: #2F4858;
|
||
transform: rotate(45deg);
|
||
transform-origin: center;
|
||
}
|
||
|
||
/* star icon defaults */
|
||
|
||
.mission-star-wrapper {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
padding-left: 0.6em;
|
||
}
|
||
.mission-star-container {
|
||
flex: 0 1 auto;
|
||
}
|
||
.mission-star-container > * {
|
||
display: block;
|
||
}
|
||
|
||
.mission-star {
|
||
flex: 0 0 auto;
|
||
width: 1.5em;
|
||
height: 1.5em;
|
||
background-color: #666;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/star.svg);
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
-webkit-mask-position: 50% 50%;
|
||
align-self: flex-start;
|
||
|
||
}
|
||
|
||
.mission-star-with-content .mission-star {
|
||
width: 3em;
|
||
height: 3em;
|
||
}
|
||
.mission-star.tiny {
|
||
width: 0.5em;
|
||
height: 0.5em;
|
||
}
|
||
.mission-star-with-content .mission-star.tiny {
|
||
width: 1em;
|
||
height: 1em;
|
||
}
|
||
|
||
.mission-star.unlocked {
|
||
background-color: #fff;
|
||
|
||
}
|
||
|
||
|
||
|
||
.mission-star.bonus-star {
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/star-secondary.svg);
|
||
}
|
||
.mission-star.multi-stars-1 {
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/1-star.svg);
|
||
}
|
||
.mission-star.multi-stars-2 {
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/2-star.svg);
|
||
}
|
||
.mission-star.multi-stars-3 {
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/3-star.svg);
|
||
}
|
||
|
||
|
||
|
||
.mission-reward-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.mission-reward-list .unlocked {
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.mission-reward-tuple {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.mission-amount-container {
|
||
flex: 0 1 auto;
|
||
font-size: 0.75em;
|
||
margin-right: 1em;
|
||
}
|
||
.mission-star-container > * {
|
||
display: block;
|
||
}
|
||
|
||
.mission-tiny-attribute-icon {
|
||
flex: 0 0 auto;
|
||
width: 0.75em;
|
||
height: 0.75em;
|
||
background-color: #fff;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/star.svg);
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
-webkit-mask-position: 50% 50%;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.icon-mask {
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
-webkit-mask-position: 50% 50%;
|
||
}
|
||
|
||
.icon-beamxp-large {
|
||
width: 1em;
|
||
height: 1em;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/beamXP-full.svg);
|
||
background: #fff;
|
||
}
|
||
|
||
.icon-beamxp-small {
|
||
width: 1em;
|
||
height: 1em;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/beamXP-small.svg);
|
||
background: #fff;
|
||
}
|
||
|
||
.icon-beambucks {
|
||
width: 1em;
|
||
height: 1em;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/beambucks.svg);
|
||
background: #fff;
|
||
}
|
||
|
||
/* Card style defaults */
|
||
|
||
|
||
.card {
|
||
display: flex;
|
||
flex-flow: column;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
/* padding: 0.25em; */
|
||
color: white;
|
||
background-color: var(--bng-black-6);
|
||
/* background: center / cover no-repeat url(/ui/images/noimage.png); */
|
||
border-radius: 0.25em;
|
||
text-align: left;
|
||
text-decoration: none;
|
||
cursor: default;
|
||
font-family: "Overpass", var(--fnt-defs) !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.card-title {
|
||
font-family: "Overpass", var(--fnt-defs);
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
font-size: 1.5em;
|
||
letter-spacing: 0.02em;
|
||
line-height: 1.2em;
|
||
padding: 0.5em 2em 0.5em 1em;
|
||
align-self: stretch;
|
||
overflow-wrap: break-word;
|
||
overflow: hidden;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.card-title::before {
|
||
content: "";
|
||
position: absolute;
|
||
background-color: var(--bng-orange);
|
||
transform: skewX(-20deg);
|
||
left: -1.25em;
|
||
width: 2em;
|
||
height: 1.2em;
|
||
z-index: 1;
|
||
}
|
||
|
||
.card-content-slot:first-child {
|
||
border-radius: 0.25em 0.25em 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-content-slot {
|
||
align-self: stretch;
|
||
}
|
||
|
||
.mission-gallery:not(last-child) {
|
||
padding-bottom: 0.5em;
|
||
}
|
||
|
||
.card-actions-wrapper {
|
||
padding: 1em 0.75em;
|
||
align-self: flex-end;
|
||
}
|
||
|
||
/* define card styles as card-style-NAME, where NAME is the one you specify on a card */
|
||
.card-style-default { /* default style if required */
|
||
}
|
||
.card-style-hero .card-actions-wrapper { /* default style if required */
|
||
align-self: stretch;
|
||
/* align-self: center; */
|
||
margin-bottom: 0.25em;
|
||
text-align: center;
|
||
font-weight: 800;
|
||
font-style: italic;
|
||
font-size: 1.25em;
|
||
background-color: var(--bng-orange);
|
||
}
|
||
|
||
/* Reward meter (3 stars with linear gradient fill) If you want to show more stars — override the width.
|
||
If you want to change the size of the whole block — use font-size */
|
||
.reward-stars-meter {
|
||
background: no-repeat linear-gradient(90deg, rgb(200, 200, 0) 50%, rgba(255, 255, 255, 0.2) 50%) 0 0 / 200% 200%;
|
||
-webkit-mask-image: url(/ui/assets/SVG/24/star-nopaddings.svg);
|
||
-webkit-mask-repeat: space;
|
||
width:3.2em;
|
||
height:1em;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
}
|
||
|
||
.flex-column {
|
||
display: flex;
|
||
flex-flow: column wrap;
|
||
}
|
||
|
||
.flex-nowrap {
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.align-center {
|
||
align-items: center;
|
||
}
|
||
|
||
.align-stretch {
|
||
align-items: stretch;
|
||
}
|
||
|
||
.mission-rewards-label {
|
||
margin-right: 2em;
|
||
}
|
||
|
||
.beamng-message-toast {
|
||
background-color: var(--bng-orange) !important;
|
||
opacity: 1 !important;
|
||
}
|
||
|
||
@keyframes flashing-animation {
|
||
50% {
|
||
fill: #000;
|
||
}
|
||
}
|
||
.flashing {
|
||
animation: flashing-animation 1.4s linear infinite;
|
||
}
|
||
|
||
.ui-sheet {
|
||
height: 100vh;
|
||
position: absolute !important;
|
||
width: 100vw;
|
||
z-index: -100;
|
||
left: 0;
|
||
opacity: 0.1;
|
||
background-color: black;
|
||
}
|
||
|
||
.binding-icon-mask {
|
||
height: 1.5em;
|
||
width: 1.5em;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
mask-size: contain;
|
||
mask-repeat: no-repeat;
|
||
-webkit-mask-repeat: no-repeat;
|
||
-webkit-mask-size: contain;
|
||
}
|
||
|
||
.icon-light {
|
||
background-color: rgba(255, 255, 255, 1);
|
||
}
|
||
|
||
.icon-dark {
|
||
background-color: rgba(0, 0, 0, 1);
|
||
}
|
||
|
||
.bng-horizontal-divider {
|
||
margin: 0.5em;
|
||
border-top: 1px solid var(--bng-cool-gray-600);
|
||
}
|
||
|
||
bng-accordion-pane.pane-vertical {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: flex-start;
|
||
padding-left: 1.5em;
|
||
min-height: 3em;
|
||
}
|
||
|
||
.warning * {
|
||
flex: auto;
|
||
flex-grow: 1;
|
||
flex-shrink: 1;
|
||
flex-basis: auto;
|
||
}
|
||
.warning {
|
||
background-color: var(--bng-add-red-600);
|
||
padding: 0.75em 1em;
|
||
border-radius: var(--bng-corners-2);
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
margin: 0.5em 0;
|
||
}
|
||
|
||
/* md-switch tweaks */
|
||
|
||
md-switch {
|
||
margin: 0;
|
||
padding: 0.5em;
|
||
border-radius: var(--bng-corners-1);
|
||
position: relative;
|
||
}
|
||
|
||
md-switch.md-checked .md-bar {
|
||
background-color: var(--bng-orange-600);
|
||
}
|
||
|
||
md-switch.md-checked .md-thumb {
|
||
background-color: var(--bng-orange-b400);
|
||
}
|
||
|
||
md-switch .md-bar {
|
||
background-color: var(--bng-cool-gray-800);
|
||
}
|
||
|
||
md-switch .md-thumb {
|
||
background-color: var(--bng-cool-gray-500);
|
||
}
|
||
|
||
md-switch:focus .md-thumb {
|
||
background-color: var(--bng-cool-gray-300);
|
||
}
|
||
|
||
md-switch.md-checked:focus .md-thumb {
|
||
background-color: var(--bng-orange-300);
|
||
}
|
||
|
||
.lottie-animation {
|
||
width: 3em;
|
||
height: 3em;
|
||
margin: -0.5em;
|
||
} |