PURE CSS THEME / MPL-2.0

Ore

A block-built interface theme for ApricityUI, adapted from Minecraft-CSS and extended with the OreUI community variants.

Pure CSS No CDN MPL-2.0

O

01 / MATERIAL PALETTE

Color tokens

Deep stone

Emerald

Amethyst

Gold

Redstone

Lapis

Gray scale --ore-gray-10..100 plus hue steps, all exposed as tokens on .ore-theme.

02 / TYPE SYSTEM

Typography

Ore Display carries headings and controls. Ore Regular handles body copy, data, and longer labels.

Heading scale

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Body styles

Standard copy stays readable over deep stone surfaces. Strong text increases emphasis without changing the typeface.

Muted copy is intended for descriptions, metadata, and secondary status.

Small text: coordinates 124 / 68 / -32

Large text: Diamond level reached

Inline link and /give @s diamond

Text colors & alignment

Success text, left aligned

Warning text, centered

Danger text, right aligned

Info text, centered

Muted text, right aligned

Code block

<link rel="stylesheet" href="ore.css">

<body class="ore-theme">
  <button class="button button-primary">
    Create world
  </button>
</body>

INTERACTION STATES

Actions

Hover and press each control to inspect its face, inset edge, and depth response. Disabled states override hover and active.

Base buttons

Sizing & composition

icon buttons

Flat buttons (-2)

Unit bevel buttons (-3)

NAVIGATION STATES

Navigation components preserve the same stone surfaces; the -2 and -3 tab sets are opt-in variants.

Tabs (base / -2 dark bevel / -3 indicator bar)

Pagination component

INPUT & SELECTION

Forms

Labels, help text, validation, selection controls, and grouped actions share one pixel-aligned rhythm.

VALIDATION & GROUPING

Validation & input groups

Validation

Valid value

This name can be used.

Invalid value

Choose a different name.

Disabled

Input group

Command

Disabled fields

NATIVE CHOICES

Native radios & checkboxes

World options

Difficulty

Peaceful Easy Normal Hard

Generate structures Bonus chest Locked option

CUSTOM CHOICE CONTROLS

Switch, checkbox, radio, slider

Pure CSS controls: on state via .on / :checked / aria-checked / data-state, disabled via .disabled or [disabled].

Switches (katorlys ore-switch)

default (primary green)

icons variant (on bar / off ring)

color variants (checked track)

With label label inside the host (8px gap)

bounce modifiers (play on load)

Checkboxes & radios

Checked Empty Disabled

Selected Empty Disabled

Diamond Empty Disabled

Slider (-1)

Slider -2 (segmented)

FORM VARIANTS

Inputs -2

Flat input states

World name

Inset top shadow, green caret, white focus ring.

Valid value

Invalid value

Disabled

Select & textarea -2

Game mode

Notes

SURFACES

Cards & panels

Card and panel are interchangeable surfaces; accent bars, the -2 bevel variants, and media blocks are opt-in.

Overworld

Base Camp

Last played today

Online Survival

Nether

Fortress Route

Coordinates 84 / 63 / -210

Portal Hazard

The End

Outer Islands

Gateway route saved

Rare Mapped

Card -2 with media

Katorlys card surface: highlight top-left, shadow bottom-right, offset ground lip.

card-muted renders quiet metadata inside card-2.

Panel -2mcui panel surface

Soft inner bevel, hard offset ground shadow, header and footer bands.

Base .panel and .panel-2 share the same header / body / footer split.

Base panel

The plain panel surface, equivalent to a card.

panel-footer

Tags & badge dots

Default Primary Outlined Informative Notice Warning Realms

Green Blue Yellow Red Black

Default Success Warning Danger Purple

DENSE DATA

Tables & lists

Resource ledger

Resource	Layer	Stock	Status
Coal	96	384	Stable
Iron	32	128	Processing
Gold	-16	54	Low
Diamond	-54	12	Rare
Redstone	-59	512	Full

Server list

Builders18 / 40
Redstone Lab7 / 20
Adventure32 / 64
Offline archiveOffline

List group -2 (mcui bevel rows)

Selected item
Plain item
Disabled item

Inventory slots

Fe

Au

C

Cu

L

R

Q

E

D

64

32

18

8

SYSTEM RESPONSE

Alerts, progress & banners

World saved. All region files were written successfully.

Resource reload. New theme assets are now available.

Storage warning. Only 12 slots remain in this chest.

Connection lost. Reconnect before continuing.

Progress (base / purple / -2)

Terrain82%

Resources56%

Flat track -266%

Danger -230%

Indeterminate -2...

OVERLAYS

Tooltip, dropdown & modal

Tooltips (top / bottom / left / right / -2)

Dropdowns (closed / open / dark -2)

Modal dialog

Ore includes the structural styles for backdrop, header, content, and footer.

Open dialog

Loading (spinner sizes / mask / error)

Loading... Failed to load

Loading chunks...

loading-mask is position:fixed in production; shown here inside a clipped box.

NOTIFICATIONS

Toasts

Pop toasts (-1)

Plain pop toast

Success toast

Warning toast

Danger toast

Info toast

VIP toast

Debug toast

Tinted toasts (-2)

Dark toast

Secondary toast

Primary toast

Informative toast

Notice toast

Warning toast

Realms toast

Toast area (stacking container)

Newest toast on top

Older toast below

toast-area is fixed bottom-center in production (column-reverse stacking); shown here inside a clipped box.

GRID SYSTEM

Twelve-column grid

The grid collapses for narrow viewports; col-full always spans the row.

col-1 .. col-12, col-full

col-12

col-11

1

col-10

2

col-9

3

col-8

4

col-7

5

col-6

col-full

Containers

This page sits in .container (centered, max 1180px).

.container-fluid spans the full width with 20px padding.

Flow helpers & dividers

clusterwrapshorizontally

splitapart

stack vertical

ore-divider above, ore-divider-2 below.

FIXED OVERLAYS

Drawers

Drawers are position:fixed in production; shown here open inside clipped boxes. drawer-overlay dims the page behind them.

drawer-left + overlay

Drawer body content.

drawer-right

Anchored to the right edge.

drawer-top

Drops from the top edge.

drawer-bottom

Rises from the bottom edge.

NAVIGATION PANELS

Sidebars & scrollbars

Sidebar + mask + scrollbar

Sidebar -2 (paraore) + mask

UTILITY CLASSES

Utilities

Spacing, width & visibility

p-1 p-2 p-3 p-4

panel with p-4 and text-center

mt-1, text-left

mt-2, mb-4, text-right

w-full + m-0 alert

invisible (keeps space) ← one hidden and one invisible badge sit in this row

NUMBERED VARIANTS

Variant contract

Numbered visuals ported from katorlys/OreUI, Spectrollay-OreUI, ParaOre-UI and mcui-oreui. Base classes never change; -2 and -3 are opt-in per element. New classes only create new effects.

Naming contract

Base class.button-primary
Flat variant.button-primary-2
Bevel variant.button-primary-3
Theme scope.ore-theme
Tokens--ore-*
LicenseMPL-2.0

State hooks

Attribute states: :checked [disabled] [aria-pressed] [aria-selected] [aria-expanded] [aria-invalid] [data-state] details[open]

Class states: .on .active .show .open .disabled .hidden

Disabled always overrides hover and active.

STATE HOOKS IN ACTION

Attribute-driven states

aria-* states

data-state / aria-checked

details[open] dropdown

A details element with the dropdown classes opens through its native [open] attribute.

TOKEN OVERRIDES

Reskinning with tokens

Every component reads --ore-* tokens, so a scoped override recolors a whole subtree without touching the stylesheet.

Default tokens

Lapis override

Ore