WikiLerni/front/public/themes/default/CSS/wikilerni.css

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body
{
    line-height: 1.7em;
    color: #C1B654;
    font-size: 13px;
}

h1,h2,h3,h4,h5,h6,label
{
    color: #34495e;
}

.pure-img-responsive
{
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box
{
    padding: 1em;
}

.l-box-lrg
{
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center
{
    text-align: center;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button
{
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary
{
    background: white;
    color: #8D847B;
    border-radius: 5px;
    font-size: 130%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.menu
{
    padding: 0.5em;
    margin-bottom:0;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
    background: #D8AD32;
}
.menu .menu-heading
{
    padding: 0.5em 0 0.5em 0;
}
.menu .pure-menu-heading
{
    color: white;
    font-weight: 400;
    font-size: 120%;
}
.menu .pure-menu-selected a
{
    color: white;
}
.menu a
{
    color: #8F543B;
}
.menu li a:hover, .menu li a:focus
{
    background: none;
    border: none;
    color: #8D847B;
}

/* Header */
#main-header
{
    background: #FCF6EC;
    min-height: 20%;
    padding-top:2em;
    text-align: center;
}

#main-header h1
{
    width:80%;
    margin:auto;
    border: 3px solid #DDE023;
    border-radius: 5px;
    padding: 1em 1.6em;
    font-size:20px;
    font-weight: bold;
    color: #DDE023;
    font-weight: 100;
    line-height: 0.5em;
}

#main-header p
{
    color: #8F543B;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #8D847B;
    border-radius: 5px;
    font-size: 130%;
}

#quizsPagination a
{
    background: #E7DEDE;
    color: #7F7F7F;
    border-radius: 5px;
    font-size: 130%;
    margin: 0.5em;
}

/* We want to give the content area some more padding */
.content
{
    padding: 1em 1em 3em;
}

/* This is the class used for the main content headers (<h2>) */
.content-head
{
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-questionnaire
{
    color: white;
}

/* This is the class used for the dark-background areas. */
.questionnaire-listed, .questionnaire-intro
{
    background: #2d3e50;
    color: #aaa;
}

.questionnaire-intro img
{
    max-height:500px;
    width:auto;
}

.questionnaire-listed img
{
    max-height:200px;
    width:auto;
}

nav#pagination
{
clear:both;
}

/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form
{
    width:90%;
    margin-left:1em;
}
.pure-form label
{
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type]
{
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    margin-bottom: 1em;
}
.error
{
    color: rgb(202, 60, 60);
}
.success
{
    color: rgb(28, 184, 65);
}
.information
{
    color: rgb(66, 184, 221);
}
#helpClassification a
{
    margin-right:1em;
}

.needJS
{
   display:none;
}

#links
{
    margin:1em 0;
}
#response
{
margin:0.5em 1em;
padding:0.5em;
}

/* Bouton permettant de demander l'affichage du quiz */
#showQuestionnaire
{
    display:none;
}

/* Boutons inscription/connexion suite réponse quiz */
.subcribeBtns
{
    display:none;
}
.subcribeBtns .pure-button
{
    background-color: #1f8dd6;
    color: white;
    font-size: 1.1em;
    margin:0 0.5em;
}
.accountBtns .pure-button
{
    background-color: #1f8dd6;
    color: white;
    font-size: 1.1em;
    margin:0 0.5em;
}

.quizs, .help
{
    display: none;
}

#main-content
{
    padding-bottom:3em;
}

.footer
{
    background: #111;
    width: 100%;
}
.footer a
{
    color:white;
    font-weight:normal;
}
.footer ul
{
    margin:0;
    padding:0;
}

.fab, .fas, .far
{
    margin-right:0.5em;
}


/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em)
{
    body
    {
        font-size: 16px;
    }
    .menu
    {
        text-align: left;
    }
    .menu ul
    {
        float: right;
    }
    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg
    {
        border: none;
    }
    .footer
    {
        position: fixed;
        bottom: 0;
        height:3em;
    }
}