mopidy-pummeluff/mopidy_pummeluff/webui/style.css

/*
 * Main Elements
 */

*,
*:before,
*:after
{
    box-sizing: border-box;
}

html,
body
{
    margin : 0;
    padding: 0;
}

body
{
    background-color: #222;
    color           : #eee;
    font-family     : sans-serif;
    font-size       : 14px;
    min-height      : 100vh;
}

/*
 * Headings
 */

h1,
h2
{
    margin: 0 0 10px 0;
}

/*
 * Structural page elements
 */

main
{
    display: flex;
}

header
{
    padding: 20px 20px 10px 20px;
}

main > div
{
    padding: 20px;
}

/*
 * Register Form
 */

form
{
    background-color: #333;
    padding         : 20px;
    width           : 250px;
}

label
{
    display: block;
    margin : 10px 0 5px 0;
}

label:first-child
{
    margin-top: 0;
}

input,
select,
button
{
    background-color: #222;
    border          : 0;
    border-color    : #333;
    border-style    : solid;
    border-width    : 0 0 2px 0;
    color           : #eee;
    outline         : none;
    padding         : 10px;
    width           : 100%;
}

select
{
    height: 35px;
}

input::placeholder
{
    color: #666;
}

input:focus
{
    border-bottom-color: #8ff;
}

button
{
    color      : #eee;
    cursor     : pointer;
    font-weight: bold;
    margin-top : 10px;
}

button#register-button
{
    background-color: #4a4;
}

button#unregister-button
{
    background-color: #a20;
}

#read-rfid-tag
{
    color          : #8ff;
    font-size      : 11px;
    text-decoration: none;
}

#read-rfid-tag.reading {
    animation: blink 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blink { to { opacity: 0.25; } }

/*
 * Registered Tags
 */

div.tag
{
    background-color: #eee;
    box-shadow      : 1px 1px 5px #000;
    color           : #222;
    cursor          : pointer;
    display         : inline-block;
    line-height     : 20px;
    margin          : 0 20px 20px 0;
    padding         : 10px;
    width           : 400px;
}

div.tag span.uid,
div.tag span.action-class,
div.tag span.parameter
{
    font-family: Courier New, monospace;
}

div.tag span.action-class
{
    background-color: #888;
    border-radius   : 10px;
    color           : #eee;
    display         : inline-block;
    font-size       : 11px;
    line-height     : 11px;
    margin-left     : 5px;
    padding         : 3px 5px;
}

div.tag span.alias,
div.tag span.parameter
{
    display: block;
}