From 0ae9d2a8dffdb30084105be413323ccf200cb65e Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 8 Sep 2021 23:30:11 +0000 Subject: [PATCH] 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. --- .../intranet-tmpl/prog/css/src/installer.scss | 299 ++++++++++++++++++ 1 file changed, 299 insertions(+) create mode 100644 koha-tmpl/intranet-tmpl/prog/css/src/installer.scss diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss new file mode 100644 index 0000000000..19301fcec1 --- /dev/null +++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss @@ -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; +} -- 2.20.1