bluelib/skeleton.css

/*
    This file should contain ONLY positioning and layout rules.
    Colors and theme should go in skin.css!
*/


/*
    From here on, rules will be defined as

    inherits1, inherits2, inherits3, ...,
    .rulename {
        ...
    }
*/

/* Use border boxes in all elements instead of the insane content box measuring */
* {
    box-sizing: border-box;

    /* Set the default border color and style on all elements, and allow skins to override them */
    border-style: solid;
    border-width: 0;  /* Removing this means all elements will have a 2px border-width */
}

/* --- Main container --- */

main,
.main {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

/* --- Horizontal split --- */

.splitter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    justify-content: center;
}

.splitted {  /* Yes I know split is irregular, but it allows to disambiguate better between splitter and split */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
}

/* --- Text positions --- */

.align-left {
    text-align: left;
}

h1, h2, h3, h4, h5, h6,  /* Align titles to the center */
.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

/* --- Text style --- */

h1,
.size-xxl {
    font-size: xx-large;
}

h2,
.size-xl {
    font-size: x-large;
}

h3,
.size-l {
    font-size: large;
}

h4,
.size-m {
    font-size: medium;
}

h5,
.size-s {
    font-size: small;
}

h6,
.size-xs {
    font-size: x-small;
}

.size-xxs {
    font-size: xx-small;
}

b,
.style-bold {
    font-weight: bold;
}

i,
.style-italic {
    font-style: italic;
}

/* --- Text colors --- */

.color-red {
    color: red;
}

.color-orange {
    color: orange;
}

.color-yellow {
    color: #dddd00;  /* Yellow isn't readable on a white background */
}

.color-lime {
    color: lime;
}

.color-cyan {
    color: cyan;
}

.color-blue {
    color: blue;
}

.color-magenta {
    color: magenta;
}

/* --- Text mode --- */

pre, code, kbd,
.monospace {
    font-family: monospace;
}

.spoiler {
    filter: blur(5px);
    cursor: help;
}

.spoiler:hover {
    filter: none;
}

/* --- Containers --- */

.panel {
    margin: 8px 0;
    padding: 8px;
    border-radius: 4px;
    border-width: 2px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.025);
}

/* Dirty hack to have uniform margins */
.splitter > .panel, .panel > .panel, .panel > .splitter {
    margin: 0;
}

.panel p:first-child, /* Remove the margin from the first paragraph of a panel */
.no-margin-top {
    margin-top: 0;
}

.panel p:last-child, /* Remove the margin from the last paragraph of a panel */
.no-margin-bottom {
    margin-bottom: 0;
}

.no-margin-vertical {
    margin-top: 0;
    margin-bottom: 0;
}

.no-margin-left {
    margin-left: 0;
}

.no-margin-right {
    margin-right: 0;
}

.no-margin-horizontal {
    margin-left: 0;
    margin-right: 0;
}

.no-margin-all {
    margin: 0;
}

.panel h1:first-child, /* Add a slight margin to the first title of a panel */
.panel h2:first-child, /*                                                   */
.panel h3:first-child, /*                                                   */
.panel h4:first-child, /*                                                   */
.panel h5:first-child, /*                                                   */
.panel h6:first-child, /*                                                   */
.slight-margin-top {
    margin-top: 4px;
}

.panel h1:last-child, /* Add a slight margin to the last title of a panel */
.panel h2:last-child, /*                                                  */
.panel h3:last-child, /*                                                  */
.panel h4:last-child, /*                                                  */
.panel h5:last-child, /*                                                  */
.panel h6:last-child, /*                                                  */
.slight-margin-bottom {
    margin-bottom: 4px;
}

/* Blockquote panels */
blockquote.panel,
.panel.panel-blockquote {
    border-radius: 4px;
    border-left-width: 2px;
    border-top-width: 0;
    border-bottom-width: 0;
    border-right-width: 0;
}

/* Table panels */
table.panel,
.panel-table.panel {
    border-spacing: 0;
    border-width: 2px;
    border-collapse: collapse;
}

/* Aside panels */
aside.panel,
.aside.panel {
    border-width: 0;
    font-size: smaller;
}

th, td,
.table-cell {
    padding: 4px;
    border-width: 1px;
}

/* Limited panels */
.limited {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

img.limited {
    max-width: 420px;
    max-height: 420px;
}

/* --- Separators --- */

hr,
.separator {
    border-width: 1px;
}

/* --- Lists --- */

li,
.list-element {
    margin: 10px 0;
}

/* --- Misc --- */

*[title],
.with-title-text {
    cursor: help;
}