Bug 28978: Convert installer CSS to SCSS
This patch creates a new SCSS file, installer.scss, from which installer.css will be compiled. Most of the resulting CSS is unchanged, but some minor sections were removed because they were obsolete. The jQueryUI-specific section isn't fully converted to SCSS because it's going to go away with the addition of Flatpickr. To test, apply the patch and rebuild the staff client SCSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Confirm that koha-tmpl/intranet-tmpl/prog/css/installer.css is updated. - Go through the complete web installation process, including onboarding, to confirm that everything is styled as before. Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
parent
18f96e95a2
commit
790dc699b0
1 changed files with 299 additions and 0 deletions
299
koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
Normal file
299
koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
Normal file
|
|
@ -0,0 +1,299 @@
|
|||
body {
|
||||
background-color: #EEE;
|
||||
font-family: arial, verdana, helvetica, sans-serif;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 161.6%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
font-size: 146.5%;
|
||||
font-weight: bold;
|
||||
padding: .5em;
|
||||
text-shadow: 1px 1px 0 #FFF;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #003366;
|
||||
font-size: 131%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-bottom: .5em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
.installer-main {
|
||||
background-color: #FFF;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 2px 0 rgba(50, 50, 50, 0.5);
|
||||
margin-bottom: 3%;
|
||||
margin-top: 3%;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 5px 5px 5px 20px;
|
||||
}
|
||||
|
||||
#logo {
|
||||
background: url(../img/koha-logo.gif) no-repeat top center;
|
||||
margin-bottom: .5em;
|
||||
margin-top: 0;
|
||||
|
||||
a {
|
||||
border-bottom: none;
|
||||
display: block;
|
||||
height: 74px;
|
||||
text-indent: -1000px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bg-danger {
|
||||
padding: .2em .4em;
|
||||
}
|
||||
|
||||
.step a,
|
||||
.step input {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
td {
|
||||
input {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.step,
|
||||
th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#footer {
|
||||
border-top: 1px solid #ccc;
|
||||
font-style: italic;
|
||||
padding-top: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.update_error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
&.rows {
|
||||
border-width: 0;
|
||||
clear: left;
|
||||
float: left;
|
||||
font-size: 90%;
|
||||
margin: .9em 0 0 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
font-size: 110%;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
margin-right: 1em;
|
||||
text-align: right;
|
||||
width: 9em;
|
||||
|
||||
&.error {
|
||||
color: #cc0000;
|
||||
float: none;
|
||||
margin-left: 1em;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
span.label {
|
||||
border-radius: 0;
|
||||
color: inherit;
|
||||
display: inline;
|
||||
float: left;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-right: 1em;
|
||||
padding: .2em .6em .3em;
|
||||
text-align: right;
|
||||
vertical-align: baseline;
|
||||
white-space: normal;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: transparent;
|
||||
font-size: 100%;
|
||||
margin: 1em;
|
||||
padding: .3em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
padding: 0 1em 0 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
clear: left;
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
padding-bottom: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #666;
|
||||
font-size: 96%;
|
||||
margin-left: 10.5em;
|
||||
margin-right: 4em;
|
||||
margin-top: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
label.required,
|
||||
span.required {
|
||||
color : #C00;
|
||||
}
|
||||
|
||||
span.required {
|
||||
font-style : italic;
|
||||
margin-left : .5em;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
background-color: #e6f0f2;
|
||||
margin: 1em 0;
|
||||
padding: .4em 2em;
|
||||
}
|
||||
|
||||
|
||||
/* Override core jQueryUI widgets */
|
||||
.ui-widget-content {
|
||||
border: 1px solid #B9D8D9;
|
||||
background: #ffffff none;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.ui-widget-header {
|
||||
border: 1px solid #B9D8D9;
|
||||
background: #E6F0F2 none;
|
||||
color: #222222;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default {
|
||||
border: 1px solid #B9D8D9;
|
||||
background: #F4F8F9 none;
|
||||
font-weight: normal;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus {
|
||||
border: 1px solid #B9D8D9;
|
||||
background: #E6F0F2 none;
|
||||
font-weight: normal;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
border: 1px solid #aaaaaa;
|
||||
background: #ffffff none;
|
||||
font-weight: normal;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.ui-state-highlight,
|
||||
.ui-widget-content .ui-state-highlight,
|
||||
.ui-widget-header .ui-state-highlight {
|
||||
border: 1px solid #FED22F;
|
||||
background: #FFF4C6;
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error,
|
||||
.ui-widget-header .ui-state-error {
|
||||
border: 1px solid #cd0a0a;
|
||||
background: #fef1ec;
|
||||
color: #cd0a0a;
|
||||
}
|
||||
|
||||
.ui-widget,
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family : inherit;
|
||||
font-size : inherit;
|
||||
}
|
||||
|
||||
/* jQuery UI Datepicker */
|
||||
.ui-datepicker table {
|
||||
width: 100%;
|
||||
font-size: .9em;
|
||||
border : 0;
|
||||
border-collapse: collapse;
|
||||
margin:0 0 .4em;
|
||||
}
|
||||
|
||||
.ui-datepicker th {
|
||||
background : transparent none;
|
||||
padding: .7em .3em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ui-datepicker-trigger {
|
||||
vertical-align: middle;
|
||||
margin : 0 3px;
|
||||
}
|
||||
.ui-datepicker {
|
||||
box-shadow: 1px 1px 3px 0 #666;
|
||||
}
|
||||
|
||||
span.breadcrumbs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.selectall,
|
||||
.deselectall {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.selectall.mandatory,
|
||||
.deselectall.optional {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in a new issue