Glue - Globalrun User Environment

title

Use 'sticky' to hold the Navigation on top of the viewport.

<div class="nav row">
    <div class="col-40 center toggle active">
        <span class="icon-menu icon icon-invert"></span>
    </div>

    <div class="col-auto title">title</div>

    <div class="col-40 center toggle bg-primary">
        <span class="">GL</span>
    </div>
</div>

Main Menu

User Menu

List

Simple List

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

<div class="table">
    <div class="row header">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row footer">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>
</div>

Paging

<div class="row">
    <div class="col-25 ml-5 center"><i class="icon-first"></i></div>
    <div class="col-25 center"><i class="icon-left"></i></div>
    <div class="col-25 center">1</div>
    <div class="col-25 center">2</div>
    <div class="col-auto"></div>
    <div class="col-25 center"><i class="icon-right"></i></div>
    <div class="col-25 mr-5 center"><i class="icon-last"></i></div>
</div>

<div class="row bg-nav-background white-color">
    <div class="col-25 ml-5 center"><i class="icon-first bg-white"></i></div>
    <div class="col-25 center"><i class="icon-left bg-white"></i></div>
    <div class="col-25 center">1</div>
    <div class="col-25 center">2</div>
    <div class="col-auto"></div>
    <div class="col-25 center"><i class="icon-right bg-white"></i></div>
    <div class="col-25 mr-5 center"><i class="icon-last bg-white"></i></div>
</div>

Filtered List

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

<div class="filtered-list">
    <div class="filter-form form">
        <div class="row">
            <div class="col-6">
                <div class="form-input">col-6</div>
            </div>
            
            <div class="col-6">
                <div class="form-input">col-6</div>
            </div>
        </div>
    </div>

    <div class="list">
        <div class="table">
            <div class="row header">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row footer">
                <div class="col-25 ml-5 center"><i class="icon-first"></i></div>
                <div class="col-25 center"><i class="icon-left"></i></div>
                <div class="col-25 center">1</div>
                <div class="col-25 center">2</div>
                <div class="col-auto"></div>
                <div class="col-25 center"><i class="icon-right"></i></div>
                <div class="col-25 mr-5 center"><i class="icon-last"></i></div>
            </div>
        </div>
    </div>
</div>

Details

details

'footer' sticks to the bottom of the page.

<div class="details">
    details

    <div class="footer">
        footer
    </div>
</div>

Activities

01.01.24 01:01 - Test User activity

01.01.24 01:01 - Test User activity success

01.01.24 01:01 - Test User activity warning

01.01.24 01:01 - Test User activity error

<div class="activities">
    <div class="activity">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity
        </div>
        
        <div class="activity-icon">
            <i class="icon-activities icon-invert"></i>
        </div>
    </div>
    
    <div class="activity success">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity success
        </div>
        
        <div class="activity-icon">
            <i class="icon-todos icon-invert"></i>
        </div>
    </div>
    
    <div class="activity warning">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity warning
        </div>
        
        <div class="activity-icon">
            <i class="icon-settings icon-invert"></i>
        </div>
    </div>
    
    <div class="activity error">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity error
        </div>
        
        <div class="activity-icon">
            <i class="icon-bug icon-invert"></i>
        </div>
    </div>
</div>

Grid

Simple Grid

col-2

col-4

col-6

<div class="row">
    <div class="col-2 bg-blue">col-2</div>
    <div class="col-4 bg-cyan">col-4</div>
    <div class="col-6 bg-teal">col-6</div>
</div>

Fixed Column/Auto Column

col-75

col-150

col-auto

col-10 to col-250 in 5 steps.

<div class="row">
    <div class="col-75 bg-blue">col-75</div>
    <div class="col-150 bg-cyan">col-150</div>
    <div class="col-auto bg-teal">col-auto</div>
</div>

Fixed Row

row-50

row-75

row-100

row-10 to row-250 in 5 steps.

<div class="row-50">
    <div class="col-12 bg-blue">row-50</div>
</div>

<div class="row-75">
    <div class="col-12 bg-cyan">row-75</div>
</div>

<div class="row-100">
    <div class="col-12 bg-teal">row-100</div>
</div>

Align Rows

col-6

col-4

<div class="row">
    <div class="col-6 bg-blue">col-6</div>
</div>

<div class="row center">
    <div class="col-6 bg-cyan">col-6</div>
</div>

<div class="row right">
    <div class="col-6 bg-teal">col-6</div>
</div>

<div class="row">
    <div class="col-4 top">
        <div class="row">
            <div class="col-12 bg-blue">col-4</div>
        </div>
    </div>
    
    <div class="col-4">
        <div class="row">
            <div class="col-12 bg-cyan">col-4</div>
        </div>
    </div>

    <div class="col-4 bottom">
        <div class="row">
            <div class="col-12 bg-teal">col-4</div>
        </div>
    </div>
</div>

Align Column

col-4

col-4 center

col-4 right

<div class="row">
    <div class="col-4 bg-blue">col-4</div>
    <div class="col-4 center bg-cyan">col-4 center</div>
    <div class="col-4 right bg-teal">col-4 right </div>
</div>

Break Columns

col-auto

col-3

col-6

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-auto bg-blue">col-auto</div>
    <div class="row-break-sm"></div>
    <div class="col-3 bg-cyan">col-3</div>
    <div class="row-break"></div>
    <div class="col-6 bg-teal">col-6</div>
</div>

Grid Gap

col-6

col-auto

col-6

col-auto

col-6

col-auto

gap-5: 5rem gap
gap-10: 10rem gap

Warning! gap-5 and gap-10 only work, if there is a col-auto in the row.

<div class="row gap-10">
    <div class="col-6 bg-blue">col-6</div>
    <div class="col-auto bg-blue">col-auto</div>
    <div class="col-6 bg-cyan">col-6</div>
    <div class="col-auto bg-cyan">col-auto</div>
    <div class="col-6 bg-teal">col-6</div>
    <div class="col-auto bg-teal">col-auto</div>
</div>

Hide Columns

col-3 col-6-md

col-6 col-hide-md

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-3 bg-cyan">col-3</div>
    <div class="row-break-sm"></div>
    <div class="col-3 bg-teal">col-3</div>
    <div class="row-break"></div>
    <div class="col-6 bg-red">col-6</div>
    <div class="col-auto bg-orange">col-auto</div>
</div>

Margin Columns

col-3 col-mr-2

col-2

col-3 col-ml-2

col-1 col-ml-auto col-mr-3

col-5 col-ml-2

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-3 bg-blue col-mr-2">col-3 col-mr-2</div>
    <div class="col-2 bg-cyan">col-2</div>
    <div class="col-3 bg-teal col-ml-2">col-3 col-ml-2</div>
</div>

<div class="row">
    <div class="col-1 bg-blue col-ml-auto col-mr-3">col-1 col-ml-auto col-mr-3</div>
    <div class="col-5 bg-teal col-ml-2">col-5 col-ml-2</div>
</div>

Responsive Columns

col-3 col-12-md

col-auto col-12-md

col-3 col-12-md

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-3 col-12-md bg-blue">col-3 col-12-md</div>
    <div class="col-auto col-12-md bg-cyan">"col-auto col-12-md</div>
    <div class="col-3 col-12-md bg-teal">col-3 col-12-md</div>
</div>

Nested Columns

col-3 col-12-md

col-6 col-12-sm

col-6

<div class="row">
    <div class="col-3 col-12-md bg-blue">col-3 col-12-md</div>

    <div class="col-auto col-12-md">
        <div class="row bg-cyan">
            <div class="col-6 col-12-sm">col-6 col-12-sm</div>

            <div class="col-6 col-12-sm">
                <div class="row bg-teal">
                    <div class="col-6">col-6</div>
                    <div class="col-6">col-6</div>
                </div>
            </div>
        </div>
    </div>
</div>

Form

Simple Form

Text Input

Number Input

<div class="form">
    <div class="row">
        <div class="col-2">Text Input</div>
        <div class="col-10"><input type="text" placeholder="Text Input" /></div>
        <div class="col-2">Number Input</div>
        <div class="col-10"><input type="number" placeholder="Number Input" /></div>
    </div>
</div></code>

Nested Form

Text Input

Number Input

Text Input

Number Input

<div class="form">
    <div class="row">
        <div class="col-2">Text Input</div>
        <div class="col-10"><input type="text" placeholder="Text Input" /></div>
        <div class="col-2">Number Input</div>
        <div class="col-10"><input type="number" placeholder="Number Input" /></div>
        <div class="col-12 ">
            <div class="row">
                <div class="col-2">Text Input</div>
                <div class="col-4"><input type="text" placeholder="Text Input" /></div>
                <div class="col-2">Number Input</div>
                <div class="col-4"><input type="number" placeholder="Number Input" /></div>
            </div>
        </div>
    </div>
</div>

Table

filter sticky

success

active/selected

disabled

<div class="table">
    <div class="row header sticky">
        <div class="col-2">Test</div>
        <div class="col-auto">Test</div>
        <div class="col-2">Test</div>
    </div>

    <div class="row filter sticky">
        <div class="col-12">filter sticky</div>
    </div>
    
    <div class="row">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" placeholder="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>
    
    <div class="row success">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>
    
    <div class="row disabled">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row footer sticky">
        <div class="col-2">Total</div>
        <div class="col-auto"></div>
        <div class="col-2 text-right"><span class="form-input">0</span></div>
    </div>
</div>

<div class="table">
    <div class="row header sticky">
        <div class="col-2">Test</div>
        <div class="col-auto">Test</div>
        <div class="col-2">Test</div>
    </div>

    <div class="row filter sticky">
        <div class="col-12">Filter</div>
    </div>
    
    <div class="row">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" placeholder="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>
    
    <div class="row success">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>
    
    <div class="row disabled">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row footer sticky">
        <div class="col-2">Total</div>
        <div class="col-auto"></div>
        <div class="col-2 text-right"><span class="form-input">0</span></div>
    </div>
</div>

Modal

<div class="modal active">
    <div class="modal-overlay"></div>

    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">Title</div>
            <i class="icon-x hand"></i>
        </div>

        <div class="modal-body">
            Body
        </div>

        <div class="modal-footer">
            <button>btn</button>
        </div>
    </div>
</div>

Default alignment of the buttons is left. To align the buttons to the right, add buttons to a container with the class .modal-footer-right.

<div class="modal active">
    <div class="modal-overlay"></div>

    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">Title</div>
            <i class="icon-x hand"></i>
        </div>

        <div class="modal-body">
            Body
        </div>

        <div class="modal-footer">
            <button class="primary">btn primary</button>

            <div class="modal-footer-right">
                <button>btn</button>
            </div>
        </div>
    </div>
</div>

Default: 25rem
modal-50: 50rem
modal-75: 75rem
modal-100: 100rem
modal-max: 90vw

<div class="modal active">
    <div class="modal-overlay"></div>

    <div class="modal-container modal-50">
        <div class="modal-header">
            <div class="modal-title">Title</div>
            <i class="icon-x hand"></i>
        </div>

        <div class="modal-body">
            Body
        </div>

        <div class="modal-footer">
            <button>btn</button>
        </div>
    </div>
</div>

Variables

Name

Value

modal-overlay

rgba(0, 0, 0, 0.5)

modal-background

#ffffff

Notifications

Success Message

Warning Message

Error Message

Durations:
countdown-5: 5s
countdown-10: 10s
countdown-20: 20s
countdown-30: 30s

<div class="notifications">
    <div class="notification success">
        <div class="notification-body">
            <b>Success</b>
            Message
        </div>

        <i class="icon-x hand"></i>

        <div class="countdown-bar">
            <div class="countdown-5"></div>
        </div>
    </div>

    <div class="notification warning">
        <div class="notification-body">
            <b>Warning</b>
            Message
        </div>

        <i class="icon-x hand"></i>

        <div class="countdown-bar">
            <div class="countdown-10"></div>
        </div>
    </div>

    <div class="notification error">
        <div class="notification-body">
            <b>Error</b>
            Message
        </div>
        
        <i class="icon-x hand"></i>

        <div class="countdown-bar">
            <div class="countdown-30"></div>
        </div>
    </div>
</div>

Tabs

tab active

label

tab

<div class="row p-10">
    <div class="col-12 tabs">
        <div class="tab active">tab active <div class="label rounded mr-5">label</div></div>
        <div class="tab">tab</div>
        <div class="tab">tab</div>
    </div>
</div>

Buttons

Alternative the Class .btn can be used instead of the HTML Tag button.

<button class="primary">Primary</button>
<button><i class="icon-print"></i> Default</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="error">Error</button>
<button class="disabled">Disabled</button>
<button class="btn-small">btn-small</button>
<button class="btn-large">btn-large</button>

Labels

label

label rounded

label primary

label default

label success

label warning

label error

label bug

label priority-1

label priority-2

label priority-3

label priority-4

<div class="label">label</div>
<div class="label rounded">label rounded</div>
<div class="label primary">label primary</div>
<div class="label default">label default</div>
<div class="label success">label success</div>
<div class="label warning">label warning</div>
<div class="label error">label error</div>
<div class="label bug">label bug</div>
<div class="label priority-5">label priority-1</div>
<div class="label priority-5">label priority-2</div>
<div class="label priority-5">label priority-3</div>
<div class="label priority-5">label priority-4</div>

Switches

form-Switch

form-Switch active

<i class="form-switch"></i> form-Switch
<i class="form-switch active"></i> form-Switch active

Icons

Icon List

icon-activities

icon-add, icon-plus

icon-minus

icon-archive

icon-arrow-down

icon-arrow-up

icon-barcode

icon-bug

icon-change

icon-check

icon-unchecked

icon-check-list

icon-copy

icon-delete

icon-download

icon-edit

icon-error

icon-favorites

icon-filter

icon-folder

icon-goto-split

icon-goto

icon-info

icon-keyboard

icon-logout

icon-mail

icon-map

icon-menu

icon-merge

icon-messages

icon-note

icon-phone

icon-print

icon-reset

icon-rewind

icon-forward

icon-scan

icon-search

icon-settings

icon-text-message

icon-timesheet

icon-todos

icon-upload

icon-x

icon-up

icon-down

icon-first

icon-left

icon-right

icon-last

icon-play

icon-pause

icon-stop

icon-file-doc

icon-file-gif

icon-file-jpg

icon-file-pdf

icon-file-png

icon-file-ppt

icon-file-txt

icon-file-unknown

icon-file-xls

icon-success

icon-failed

icon-warning

<i class="icon-bug"></i>

Icon Styles

icon-bug icon-s

icon-bug

icon-bug icon-l

icon-bug icon-xl

icon-bug icon-invert

icon-bug icon-disabled

Icons Colors

icon-bug bg-black

icon-bug bg-green

icon-bug bg-red

Utilities

Margins

m-5 to m-25 in 5 steps.

<div class="m-10">m-10 (margin)</div>
<div class="ml-10">ml-10 (margin-left)</div>
<div class="mr-10">mr-10 (margin-right)</div>
<div class="mt-10">mt-10 (margin-top)</div>
<div class="mb-10">mb-10 (margin-bottom)</div>

Paddings

p-5 to p-25 in 5 steps.

<div class="p-10">p-10 (padding)</div>
<div class="pl-10">pl-10 (padding-left)</div>
<div class="pr-10">pr-10 (padding-right)</div>
<div class="pt-10">pt-10 (padding-top)</div>
<div class="pb-10">pb-10 (padding-bottom)</div>

Colors

Color Palette

red-50

#ffebee

red-100

#ffcdd2

red-200

#ef9a9a

red-300

#e57373

red-400

#ef5350

red-500

#f44336

red-600

#e53935

red-700

#d32f2f

red-800

#c62828

red-900

#b71c1c

red-a100

#ff8a80

red-a200

#ff5252

red-a400

#ff1744

red-a700

#d50000

pink-50

#fce4ec

pink-100

#f8bbd0

pink-200

#f48fb1

pink-300

#f06292

pink-400

#ec407a

pink-500, pink

#e91e63

pink-600

#d81b60

pink-700

#c2185b

pink-800

#ad1457

pink-900

#880e4f

pink-a100

#ff80ab

pink-a200

#ff4081

pink-a400

#f50057

pink-a700

#c51162

purple-50

#f3e5f5

purple-100

#e1bee7

purple-200

#ce93d8

purple-300

#ba68c8

purple-400

#ab47bc

purple-500, purple

#9c27b0

purple-600

#8e24aa

purple-700

#7b1fa2

purple-800

#6a1b9a

purple-900

#4a148c

purple-a100

#ea80fc

purple-a200

#e040fb

purple-a400

#d500f9

purple-a700

#aa00ff

deep-purple-50

#ede7f6

deep-purple-100

#d1c4e9

deep-purple-200

#b39ddb

deep-purple-300

#9575cd

deep-purple-400

#7e57c2

deep-purple-500, deep-purple

#673ab7

deep-purple-600

#5e35b1

deep-purple-700

#512da8

deep-purple-800

#4527a0

deep-purple-900

#311b92

deep-purple-a100

#b388ff

deep-purple-a200

#7c4dff

deep-purple-a400

#651fff

deep-purple-a700

#6200ea

indigo-50

#e8eaf6

indigo-100

#c5cae9

indigo-200

#9fa8da

indigo-300

#7986cb

indigo-400

#5c6bc0

indigo-500, indigo

#3f51b5

indigo-600

#3949ab

indigo-700

#303f9f

indigo-800

#283593

indigo-900

#1a237e

indigo-a100

#8c9eff

indigo-a200

#536dfe

indigo-a400

#3d5afe

indigo-a700

#304ffe

blue-50

#e3f2fd

blue-100

#bbdefb

blue-200

#90caf9

blue-300

#64b5f6

blue-400

#42a5f5

blue-500, blue

#2196f3

blue-600

#1e88e5

blue-700

#1976d2

blue-800

#1565c0

blue-900

#0d47a1

blue-a100

#82b1ff

blue-a200

#448aff

blue-a400

#2979ff

blue-a700

#2962ff

light-blue-50

#e1f5fe

light-blue-100

#b3e5fc

light-blue-200

#81d4fa

light-blue-300

#4fc3f7

light-blue-400

#29b6f6

light-blue-500, light-blue

#03a9f4

light-blue-600

#039be5

light-blue-700

#0288d1

light-blue-800

#0277bd

light-blue-900

#01579b

light-blue-a100

#80d8ff

light-blue-a200

#40c4ff

light-blue-a400

#00b0ff

light-blue-a700

#0091ea

cyan-50

#e0f7fa

cyan-100

#b2ebf2

cyan-200

#80deea

cyan-300

#4dd0e1

cyan-400

#26c6da

cyan-500, cyan

#00bcd4

cyan-600

#00acc1

cyan-700

#0097a7

cyan-800

#00838f

cyan-900

#006064

cyan-a100

#84ffff

cyan-a200

#18ffff

cyan-a400

#00e5ff

cyan-a700

#00b8d4

teal-50

#e0f2f1

teal-100

#b2dfdb

teal-200

#80cbc4

teal-300

#4db6ac

teal-400

#26a69a

teal-500, teal

#009688

teal-600

#00897b

teal-700

#00796b

teal-800

#00695c

teal-900

#004d40

teal-a100

#a7ffeb

teal-a200

#64ffda

teal-a400

#1de9b6

teal-a700

#00bfa5

green-50

#e8f5e9

green-100

#c8e6c9

green-200

#a5d6a7

green-300

#81c784

green-400

#66bb6a

green-500, green

#4caf50

green-600

#43a047

green-700

#388e3c

green-800

#2e7d32

green-900

#1b5e20

green-a100

#b9f6ca

green-a200

#69f0ae

green-a400

#00e676

green-a700

#00c853

light-green-50

#f1f8e9

light-green-100

#dcedc8

light-green-200

#c5e1a5

light-green-300

#aed581

light-green-400

#9ccc65

light-green-500, light-green

#8bc34a

light-green-600

#7cb342

light-green-700

#689f38

light-green-800

#558b2f

light-green-900

#33691e

light-green-a100

#ccff90

light-green-a200

#b2ff59

light-green-a400

#76ff03

light-green-a700

#64dd17

lime-50

#f9fbe7

lime-100

#f0f4c3

lime-200

#e6ee9c

lime-300

#dce775

lime-400

#d4e157

lime-500, lime

#cddc39

lime-600

#c0ca33

lime-700

#afb42b

lime-800

#9e9d24

lime-900

#827717

lime-a100

#f4ff81

lime-a200

#eeff41

lime-a400

#c6ff00

lime-a700

#aeea00

yellow-50

#fffde7

yellow-100

#fff9c4

yellow-200

#fff59d

yellow-300

#fff176

yellow-400

#ffee58

yellow-500, yellow

#ffeb3b

yellow-600

#fdd835

yellow-700

#fbc02d

yellow-800

#f9a825

yellow-900

#f57f17

yellow-a100

#ffff8d

yellow-a200

#ffff00

yellow-a400

#ffea00

yellow-a700

#ffd600

amber-50

#fff8e1

amber-100

#ffecb3

amber-200

#ffe082

amber-300

#ffd54f

amber-400

#ffca28

amber-500, amber

#ffc107

amber-600

#ffb300

amber-700

#ffa000

amber-800

#ff8f00

amber-900

#ff6f00

amber-a100

#ffe57f

amber-a200

#ffd740

amber-a400

#ffc400

amber-a700

#ffab00

orange-50

#fff3e0

orange-100

#ffe0b2

orange-200

#ffcc80

orange-300

#ffb74d

orange-400

#ffa726

orange-500, orange

#ff9800

orange-600

#fb8c00

orange-700

#f57c00

orange-800

#ef6c00

orange-900

#e65100

orange-a100

#ffd180

orange-a200

#ffab40

orange-a400

#ff9100

orange-a700

#ff6d00

deep-orange-50

#fbe9e7

deep-orange-100

#ffccbc

deep-orange-200

#ffab91

deep-orange-300

#ff8a65

deep-orange-400

#ff7043

deep-orange-500, deep-orange

#ff5722

deep-orange-600

#f4511e

deep-orange-700

#e64a19

deep-orange-800

#d84315

deep-orange-900

#bf360c

deep-orange-a100

#ff9e80

deep-orange-a200

#ff6e40

deep-orange-a400

#ff3d00

deep-orange-a700

#dd2c00

brown-50

#efebe9

brown-100

#d7ccc8

brown-200

#bcaaa4

brown-300

#a1887f

brown-400

#8d6e63

brown-500, brown

#795548

brown-600

#6d4c41

brown-700

#5d4037

brown-800

#4e342e

brown-900

#3e2723

grey-50

#fafafa

grey-100

#f5f5f5

grey-200

#eeeeee

grey-300

#e0e0e0

grey-400

#bdbdbd

grey-500, grey

#9e9e9e

grey-600

#757575

grey-700

#616161

grey-800

#424242

grey-900

#212121

blue-grey-50

#eceff1

blue-grey-100

#cfd8dc

blue-grey-200

#b0bec5

blue-grey-300

#90a4ae

blue-grey-400

#78909c

blue-grey-500, blue-grey

#607d8b

blue-grey-600

#546e7a

blue-grey-700

#455a64

blue-grey-800

#37474f

blue-grey-900

#263238

white

#ffffff

black

#00000

priority-1

#fe9a2e

priority-2

#ff4000

priority-3

#df0101

priority-4

#b40404

status-1

#2cba00

status-2

#a3ff00

status-3

#fff400

status-4

#ffa700

status-5

#df0101

Background-Color: bg-color
Font-Color: color-color
Variable: var(--color-color)

Color palette by Google.

Color Mode

To change the Color Mode add the class 'light' or 'dark' to the html tag.

<html class="light"></html>

<html class="dark"></html>

Color Variables

Load CSS after the Glue CSS to overwrite the color variables.

:root.light {
    --modal-background-color: pink;
}

:root.dark {
    --modal-background-color: purple;
}

https://glue.rocks/latest/glue.min.css

Glue - Globalrun User Environment - Version 0.2