Styling map containers

ALS wraps Leaflet maps into the div with als-map-container class. Style it the way you style Leaflet maps.

To make a map fullscreen, set SystemOptions.makeMapFullscreen property to true. Don't style the container yourself, use that option!

ALS classes

ALS sets following classes to the body if:

1. als-dark - dark theme is selected.
2. mobile - user's device is a phone, i.e. when L.ALS.Helpers.isMobile is true.
3. not-mobile - user's device is a desktop, i.e. when L.ALS.Helpers.isMobile is false.
4. ie-lte-9 - user's browser is IE9 or less, i.e. when L.ALS.Helpers.isIElte9 is true.
5. als-fullscreen-map - SystemOptions.makeMapFullscreen is true.
6. als-electron-toolbar-as-frame - SystemOptions.makeMapFullscreen and ElectronIntegration.useToolbarAsFrame are true.
7. als-no-scroll - L.ALS.WidgetableWindow is open.

Global styles

ALS sets following global styles to match aesthetics and normalize elements' behavior:

body {
	padding: 0;
	margin: 0;
	font-family: arial, sans-serif;
	background: var(--background);
	color: var(--text-color);
}

* {
	outline: none;
}

input, select {
	font-size: 1rem;
	padding: 0;
	background: var(--background);
	color: var(--text-color);
	border: var(--border);
}

input, select {
	font-size: 1rem;
	padding: 0;
	background: var(--background);
	color: var(--text-color);
	border: var(--border);
}

input:invalid {
	box-shadow: none;
}

input:disabled {
	background: var(--fixed-element-bg);
}

input[type="color"] {
	padding: 0;
	height: 1.3rem;
}

select {
	height: 1.5rem;
}

select > * {
	background: var(--background);
}

ALS will set :root {font-size: 16pt;} for mobile devices. To prevent it, pass false as the L.ALS.System.initializeSystem argument.