New Panel

Button Button Dropdown

New Panel-NoScroller y

Panel Content

About Osekai UI

What is Osekai UI?

How to use

Accent Colours

This part is really simple. At the top of the css file are these lines.

--accent: #aa66ff;
--accenttrans: #aa66ffee;
--accenttranser: #aa66ffaa;

you can either just edit these in the osekai ui css file, or if your including the raw github file, add this into another css file:

html,
body {
    --accent: #66498a;
    --accenttrans: #66498aee;
    --accenttranser: #66498aaa
}

Button

There are three types of buttons, the default, the light, and the dark. The dark one is a slightly transparent one, using the accent colour, the light one is just a white one, and the default one is just the accent colour.

You can see them in use here.

<button class="oui-button">Button</button>
<button class="oui-button oui-b-dark">Dark Button</button>
<button class="oui-button oui-b-light">Light/White button</button>

Dark: oui-b-dark
Light: oui-b-light

You can use oui-button on any type of button, for example here.

<button class="oui-button">Button</button>

You can just surround this in an <a> to link it.

In Action:



Inputs

Text

There are two types of text inputs, expandable and fixed.

Expandable 
<div class="oui-tbcontainer"> 
    <span class="oui-textbox oui-textbox-100" role="textbox" contenteditable="">9646336</span>
</div>

Non-expandable
<div class="oui-tbcontainer">
    <input class="oui-textbox" type="text" id="te" name="te"><br><br>
</div>

Dropdown

Dropdowns are super easy to do. Here's an example:

<select class="oui-dropdown" id="example" name="example">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
</select>

In Action:

Expandable
9646336

Non-expandable



Navbar

Here's the navbar for Osekai Medals, you can most likely adapt this for your own website.

<div class="oui-navbar">
    <div class="oui-nav-inner">
        <a href="index"><img alt="Osekai"
        src="https://osekai.net/medals/img/omlogo.svg" class="oui-navlogo"></a>
    </div>
</div>

Panels

Panels are used to display content.

This is an example content used on an example website.

<div class="oui-panelscroller">
    <div class="oui-paneloutside">
        <h1 class="oui-p-header">Panel 1</h1>
        <div class="oui-panel">
            <div class="oui-panel-insidecont">
                This is a simple panel!<br>You can use these to display info
            </div>
        </div>
    </div>
    <div class="oui-paneloutside">
        <h1 class="oui-p-header">Panel 2</h1>
        <div class="oui-panel">
            <div class="oui-panel-insidecont">
                You can put anything you want in these<br>They're just divs.
            </div>
        </div>
    </div>
</div>

Panels automatically scale depending on the screen size.

You can also add a subtitle to the panels, using <h1 class="oui-p-subheader"></h1>

<div class="oui-paneloutside">
    <h1 class="oui-p-header">Panel 1</h1>
    <h1 class="oui-p-subheader">Sub</h1>
    <div class="oui-panel">
        <div class="oui-panel-insidecont">
            Here's a panel with a subtitle!
        </div>
    </div>
</div>

From the Github Wiki