BeamMP/Docs
1
0
Fork 0
mirror of https://github.com/BeamMP/Docs.git synced 2026-05-19 00:00:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Attempt to fix content tabs

Browse Source 
- Remove march-28-outage.md
This commit is contained in:
RainlessSky
2026-05-13 17:37:01 -07:00
parent a552a6d518
commit e512389ddc
3 changed files with 182 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/en/beamng/css-snippets.md
+153 -147
View File
@@ -12,168 +12,174 @@
=== BeamNG Orange
```css
var(--bng-orange) /*Common orange*/
var(--bng-orange-shade1) /*70% opacity*/
var(--bng-orange-shade2) /*40% opacity*/
var(--bng-orange-shade1opaque)
var(--bng-orange-shade2opaque)
```
```css
var(--bng-orange) /*Common orange*/
var(--bng-orange-shade1) /*70% opacity*/
var(--bng-orange-shade2) /*40% opacity*/
var(--bng-orange-shade1opaque)
var(--bng-orange-shade2opaque)
```
=== Monochrome
```css
--- Monochrome
var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/
```css
--- Monochrome
var(--bng-black-8) /*80% opacity (duplicate --bng-black-o8)*/
var(--bng-black-6) /*60% opacity (duplicate --bng-black-o6)*/
var(--bng-black-4) /*40% opacity (duplicate --bng-black-o4)*/
var(--bng-black-2) /*20% opacity (duplicate --bng-black-o2)*/
var(--dark-neutral-grey)
var(--neutral-grey)
var(--light-neutral-grey)
var(--dark-grey)
var(--dark-grey-alpha) /*80% opacity*/
var(--dark-neutral-grey)
var(--neutral-grey)
var(--light-neutral-grey)
var(--dark-grey)
var(--dark-grey-alpha) /*80% opacity*/
var(--black-1) /*70% opacity*/
var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/
var(--black-1) /*70% opacity*/
var(--black-2) /*40% opacity (duplicate --bng-black-o4)*/
var(--white-1) /*80% opacity*/
var(--white-2) /*40% opacity*/
var(--white-3) /*20% opacity*/
```
var(--white-1) /*80% opacity*/
var(--white-2) /*40% opacity*/
var(--white-3) /*20% opacity*/
```
=== BeamNG UI Color Palette
=== Orange
=== Orange
```css
var(--bng-orange-50)
var(--bng-orange-100)
var(--bng-orange-200)
var(--bng-orange-300)
var(--bng-orange-b400)
var(--bng-orange-500)
var(--bng-orange-600)
var(--bng-orange-700)
var(--bng-orange-800)
var(--bng-orange-900)
```
=== Cool Gray
```css
var(--bng-orange-50)
var(--bng-orange-100)
var(--bng-orange-200)
var(--bng-orange-300)
var(--bng-orange-b400)
var(--bng-orange-500)
var(--bng-orange-600)
var(--bng-orange-700)
var(--bng-orange-800)
var(--bng-orange-900)
```
=== Cool Gray
```css
var(--bng-cool-gray-50)
var(--bng-cool-gray-100)
var(--bng-cool-gray-200)
var(--bng-cool-gray-300)
var(--bng-cool-gray-400)
var(--bng-cool-gray-500)
var(--bng-cool-gray-600)
var(--bng-cool-gray-700)
var(--bng-cool-gray-800)
var(--bng-cool-gray-900)
```
=== Ter Blue
```css
var(--bng-ter-blue-50)
var(--bng-ter-blue-100)
var(--bng-ter-blue-200)
var(--bng-ter-blue-300)
var(--bng-ter-blue-400)
var(--bng-ter-blue-500)
var(--bng-ter-blue-600)
var(--bng-ter-blue-700)
var(--bng-ter-blue-800)
var(--bng-ter-blue-900)
```
=== Add Blue
```css
var(--bng-add-blue-50)
var(--bng-add-blue-100)
var(--bng-add-blue-200)
var(--bng-add-blue-300)
var(--bng-add-blue-400)
var(--bng-add-blue-500)
var(--bng-add-blue-600)
var(--bng-add-blue-700)
var(--bng-add-blue-800)
var(--bng-add-blue-900)
```
=== Add Green
```css
var(--bng-add-green-50)
var(--bng-add-green-100)
var(--bng-add-green-200)
var(--bng-add-green-300)
var(--bng-add-green-400)
var(--bng-add-green-500)
var(--bng-add-green-600)
var(--bng-add-green-700)
var(--bng-add-green-800)
var(--bng-add-green-900)
```
=== Add Yellow
```css
var(--bng-add-yellow-50)
var(--bng-add-yellow-100)
var(--bng-add-yellow-200)
var(--bng-add-yellow-300)
var(--bng-add-yellow-400)
var(--bng-add-yellow-500)
var(--bng-add-yellow-600)
var(--bng-add-yellow-700)
var(--bng-add-yellow-800)
var(--bng-add-yellow-900)
```
=== Add Peach
```css
var(--bng-add-peach-50)
var(--bng-add-peach-100)
var(--bng-add-peach-200)
var(--bng-add-peach-300)
var(--bng-add-peach-400)
var(--bng-add-peach-500)
var(--bng-add-peach-600)
var(--bng-add-peach-700)
var(--bng-add-peach-800)
var(--bng-add-peach-900)
```
```css
var(--bng-cool-gray-50)
var(--bng-cool-gray-100)
var(--bng-cool-gray-200)
var(--bng-cool-gray-300)
var(--bng-cool-gray-400)
var(--bng-cool-gray-500)
var(--bng-cool-gray-600)
var(--bng-cool-gray-700)
var(--bng-cool-gray-800)
var(--bng-cool-gray-900)
```
=== Ter Blue
=== Add Red
```css
var(--bng-add-red-50)
var(--bng-add-red-100)
var(--bng-add-red-200)
var(--bng-add-red-300)
var(--bng-add-red-400)
var(--bng-add-red-500)
var(--bng-add-red-600)
var(--bng-add-red-700)
var(--bng-add-red-800)
var(--bng-add-red-900)
```
```css
var(--bng-ter-blue-50)
var(--bng-ter-blue-100)
var(--bng-ter-blue-200)
var(--bng-ter-blue-300)
var(--bng-ter-blue-400)
var(--bng-ter-blue-500)
var(--bng-ter-blue-600)
var(--bng-ter-blue-700)
var(--bng-ter-blue-800)
var(--bng-ter-blue-900)
```
=== Add Blue
```css
var(--bng-add-blue-50)
var(--bng-add-blue-100)
var(--bng-add-blue-200)
var(--bng-add-blue-300)
var(--bng-add-blue-400)
var(--bng-add-blue-500)
var(--bng-add-blue-600)
var(--bng-add-blue-700)
var(--bng-add-blue-800)
var(--bng-add-blue-900)
```
=== Add Green
```css
var(--bng-add-green-50)
var(--bng-add-green-100)
var(--bng-add-green-200)
var(--bng-add-green-300)
var(--bng-add-green-400)
var(--bng-add-green-500)
var(--bng-add-green-600)
var(--bng-add-green-700)
var(--bng-add-green-800)
var(--bng-add-green-900)
```
=== Add Yellow
```css
var(--bng-add-yellow-50)
var(--bng-add-yellow-100)
var(--bng-add-yellow-200)
var(--bng-add-yellow-300)
var(--bng-add-yellow-400)
var(--bng-add-yellow-500)
var(--bng-add-yellow-600)
var(--bng-add-yellow-700)
var(--bng-add-yellow-800)
var(--bng-add-yellow-900)
```
=== Add Peach
```css
var(--bng-add-peach-50)
var(--bng-add-peach-100)
var(--bng-add-peach-200)
var(--bng-add-peach-300)
var(--bng-add-peach-400)
var(--bng-add-peach-500)
var(--bng-add-peach-600)
var(--bng-add-peach-700)
var(--bng-add-peach-800)
var(--bng-add-peach-900)
```
=== Add Red
```css
var(--bng-add-red-50)
var(--bng-add-red-100)
var(--bng-add-red-200)
var(--bng-add-red-300)
var(--bng-add-red-400)
var(--bng-add-red-500)
var(--bng-add-red-600)
var(--bng-add-red-700)
var(--bng-add-red-800)
var(--bng-add-red-900)
```
=== Extra color presets
```css
var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
var(--bng-black-o8) /*80% opacity*/
var(--bng-black-o6) /*60% opacity*/
var(--bng-black-o4) /*40% opacity*/
var(--bng-black-o2) /*20% opacity*/
```
```css
var(--bng-filter-orange) /*Filter preset to force SVGs to use bng-orange*/
var(--bng-black-o8) /*80% opacity*/
var(--bng-black-o6) /*60% opacity*/
var(--bng-black-o4) /*40% opacity*/
var(--bng-black-o2) /*20% opacity*/
```
=== Corner rounding presets
```css
var(--bng-corners-1) /*0.25rem*/
var(--bng-corners-2) /*0.50rem*/
var(--bng-corners-3) /*1.00rem*/
```
```css
var(--bng-corners-1) /*0.25rem*/
var(--bng-corners-2) /*0.50rem*/
var(--bng-corners-3) /*1.00rem*/
```