mambax7/moduleinstaller

View on GitHub
assets/css/style.css

Summary

Maintainability
Test Coverage
@charset "UTF-8";
/* ----- Main layout ----- */
html {
    margin: 0;
    padding: 0;
    height: 100%;
}

img {
    border: none;
}

/* header */

#xo-version img {
    margin-top: -8px;
}

#xo-support {
    float: right;
    margin-right: 10px;
    padding-top: 25px;
    font-size: 10pt !important;
    vertical-align: middle;
    color: #000;
}

/* ----- Wizard layout ----- */
#wizard {
    margin: 0 auto;
    padding: .5em;
    text-align: left;
    background: #f3f3f3 url(../img/wizard_bg.png) no-repeat 0 90px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 2px solid #ccc;
    border-top: 1px #e3e3e3;
}

#pageslist {
    float: left;
    width: 250px;
    margin: 10px 0 0 0;
    padding: .5em;
    border-right: 1px solid #e4e4e4;
    list-style-type: none;
    min-height: 350px;

}

.page {
    min-height: 350px;
    margin: 5px 0 0 260px;
    padding: .5em;
    background-color: transparent;
}

* html .page {
    height: 350px;
}

h1 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
    font-size: 1.5em;
}

#header {
    height: 40px;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
    font-size: 1.5em;
}

#title {
    margin: 5px 11px;
    width: auto;
    background: url(../img/dark-navcp.png) repeat-x;
    height: 40px;
    padding: 0.1em 1em 0 1em;
    text-shadow: 1px 1px 2px #ccc;
    border-radius: 8px;
}

#step {
    float: right;
    margin: 5px;
}

#step2 {
    float: left;
    margin: 5px;
}

ul, ol {
    margin: 0;
    padding: 0 20px;
}

/* ----- Styling ----- */

#pageslist li {
    padding-left: 15px;
    padding-top: 1px;
    padding-bottom: 2px;
    background: url(../img/bullet.png) no-repeat left center;
}

#pageslist li.current {
    background: #E9FF8F url(../img/bullet-current.png);
    filter: alpha(opacity=60);
    opacity: 0.6;
    margin-bottom: 2px;
}

#pageslist li.disabled {
    background-image: url(../img/bullet-disabled.png);
}

#buttons {
    clear: both;
    text-align: right;
    padding: .5em;
}

form {
    margin: 0;
}

select#support {
    border-color: #ccc;
}

h1, h2 {
    font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
    text-shadow: 1px 1px 2px #ccc;
}

h2 {
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-left: .5em;
    text-align: left;
}

h3 {
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em .5em .5em;
}

p {
    margin: .5em;
}

a {
    text-decoration: none;
    color: #666;
    font-weight: bold;
    background-color: transparent;
}

a:hover {
    text-decoration: none;
    color: #ff9966;
    font-weight: bold;
    background-color: transparent;
}

table {
    width: 99%;
    border-spacing: 0;
    border-collapse: collapse;
    margin-bottom: 1em;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

caption, .caption {
    background: #fff url(../img/table-caption-grey.png) repeat-x;
    padding: 2px .25em;
    color: #000;
    font-size: 1.1em;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
}

table thead th {
    background-color: #f4f4f4;
}

td, th {
    padding: 2px .25em;
    background-color: #fcfcfc;
    border: 1px solid #efefef;
}

fieldset {
    margin: .5em;
    padding: 1em;
    border: 1px solid #333;
    color: #000;
    border-radius: 6px;
}

legend {
    margin: 0;
    padding: 0 10px;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #ccc;
}

.xolabel {
    clear: both;
    display: block;
    padding: .5em 0;
}

#xolabel.center {
    clear: both;
    text-align: center;
    display: block;
    padding: .5em 0;
}

#help_button {
    float: right;
    cursor: help;
}

.xoform-help {
    display: none;
    margin: 5px;
    padding: 5px;
    color: #333;
    list-style-type: none;
    background-color: #F4FAFF;
    border: 1px solid #E4EAEF;
    border-radius: 8px;
}

body.show-help .xoform-help {
    display: block;
}

#langselect.page {
    text-align: center;
}

/*================================================*/
ul.diags1 {
    overflow: auto;
    width: 60%;
    padding: 5px;
    margin: 0;
    border: 1px solid #d0d0d0;
    list-style-type: none;
    border-radius: 8px;
    background-color: #FBE3E4;
}

/*================================================*/

ul.diags, ul.log {
    /*    height:                     310px;*/
    overflow: auto;
    padding: 5px;
    margin: 0;
    border: 1px solid #d0d0d0;
    list-style-type: none;
    border-radius: 8px;
}

/*ul.log {
    height:                     280px;
}*/
ul.diags li, ul.log li {
    color: #000;
    padding-left: 20px;
}

ul.diags li.success, ul.log li.success {
    background-image: url(../img/yes.png);
}

ul.diags li.failure, ul.log li.failure {
    background-image: url(../img/no.png);
    font-weight: bold;
    color: #f66;
}

.module {
    background-color: #fff;
}

.module td {
    margin: 0;
    padding: 2px;
    background-color: transparent;
}

.module td.img {
    width: 100px;
}

.module td.yesno {
    width: 100px;
}

/*  Xoops french installer */

/* ===== messages ===== */
.pathmessage {
    position: absolute;
    float: right;
    margin-left: 5px;
    width: 220px;
}

.error, .warning, .failure {
    background: url(../img/no.png) no-repeat;
    padding-left: 20px;
}

.success {
    background: url(../img/yes.png) no-repeat;
    padding-left: 20px;
}

.warning {
    color: #ff0000;
    background-color: transparent;
}

.errorMsg, .confirmMsg, .resultMsg, .successMsg {
    margin: 5px 2px;
    padding: 5px;
    border: 1px solid #ccc;
}

.confirmMsg {
    background-color: #FFF6BF;
    color: #817134;
    border: 1px solid #ccc;
    list-style-type: none;
    border-radius: 8px;
}

.resultMsg, .successMsg {
    background-color: #E6EFC2;
    color: #529214;
    border-color: #C6D880;
    border-radius: 8px;
}

.errorMsg a {
    background-color: transparent;
    color: #D12F19;
}

.confirmMsg a {
    background-color: transparent;
    color: #817134;
}

.successMsg a {
    background-color: transparent;
    color: #529214;
}

.errorMsg {
    background: #FBE3E4 no-repeat 10px;
    color: #D12F19;
    border-color: #FBC2C4;
    border-radius: 8px;
}

.directory, .files {
    padding-left: 20px;
    font-weight: bold;
    font-style: italic;
}

.directory {
    background: url(../img/folder.png) no-repeat left;
}

.files {
    background: url(../img/document.png) no-repeat left;
}

#screenshot {
    text-align: center;
}

#screenshot img {
    max-width: 500px;
    margin-top: 5px;
}

/* Form element */
input[type=submit], input[type=reset], input[type=button], .xo-formbuttons, .formButton, button {
    margin: 2px 5px 2px 5px;
    background-color: #D3D2D6;
    padding: 4px 8px;
    color: #405A80;
    font-size: 1em;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 20px 10px -10px rgba(255, 255, 255, 0.3) inset;
    cursor: pointer;
}

input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, .xo-formbuttons:hover, .formButton:hover, button:hover {
    background-color: #E6EBFF;
    padding: 4px 8px;
    color: inherit;
    cursor: pointer;
}

input[type=text], input[type=password], input[type=checkbox], input[type=file], textarea {
    border: 1px solid #ccc;
    margin: 2px 5px 2px 0;
    background-color: #f7f7f7;
    padding: 2px 2px 2px .2em;
    color: inherit;
    border-radius: 5px;

}

input[type=text], input[type=password], input[type=file] {
    width: 60%;
    margin-bottom: .25em;
    background: #f7f7f7 url(../img/form-input.png) no-repeat left top;
    padding: 1px .25em;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

input[type=text]:hover, input[type=password]:hover, input[type=file]:hover, input[type=checkbox]:hover, textarea:hover {
    background-color: #EFEFEF;
    color: inherit;
    border: 1px solid #E9CB38;
}

input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=checkbox]:focus, textarea:focus {
    background-color: #F4FAFF;
    color: #333;
    border: #139EE8 solid 1px;
    outline: 1px solid #139EE8;
    border-outline: 5px;
}

input[type=checkbox], input[type=radio] {
    margin: 3px;
    padding: 2px;
}

select {
    width: 200px;
    background-color: #f7f7f7;
    font: 8pt verdana, arial, helvetica;
    color: #000;
    border: 1px solid #000;
    filter: alpha(opacity=80);
    opacity: 0.8;
}

select[name=lang] {
    min-width: 10em;
}

.option {
    padding-left: 27px;
    font-size: 1.1em;
    margin: 2px 0;
}

textarea {
    width: 95%;
}

/* Password streng */
#password {
    position: relative;
    min-height: 120px;
}

#passwordinput {
    position: absolute;
    width: 100%;
}

#passwordmetter {
    position: absolute;
    right: -7px;
    top: -17px;
    width: 200px;
    padding: 0 5px 5px;
    border: 1px solid #555;
    background: none;
}

#passwordmetter label, #passwordgenerator, #passwordgenerator input {
    text-align: center;
}

#passwordDescription {
    text-align: center;
    position: relative;
    top: 2px;
    /*    left:                       5px;*/
}

#passwordStrength {
    text-align: center;
    height: 20px;
    display: block;
    margin-bottom: .25em;
    font-weight: bold;
}

.strength0 {
    width: auto;
    background: #ccc;
}

.strength1 {
    width: auto;
    background: #ccc;
}

.strength2 {
    width: auto;
    background: #f00;
}

.strength3 {
    width: auto;
    background: #ff5f5f;
}

.strength4 {
    width: auto;
    background: #56e500;
}

.strength5 {
    width: auto;
    background: #4dcd00;
}

.strength6 {
    width: auto;
    background: #399800;
}

.strength0 span {
    color: #000;
}

.strength1 span {
    color: #000;
}

.strength2 span {
    color: #fff;
}

.strength3 span {
    color: #fff;
}

.strength4 span {
    color: #000;
}

.strength5 span {
    color: #000;
}

.strength6 span {
    color: #fff;
}

/*==================== logger ============================*/
#xo-logger-tabs {
    margin: 5px;
    padding-top: 10px;
    font-size: 95%;
}

#xo-logger-tabs a {
    text-decoration: none;
    color: #f7f7f7;
    font-weight: bold;
    background-color: transparent;
}

#xo-logger-tabs a:hover {
    text-decoration: none;
    color: #FF0000;
    font-weight: bold;
    background-color: transparent;
}

.noininstall {
    display: none;
}