diff options
Diffstat (limited to 'resources/mediawiki.ui')
22 files changed, 1187 insertions, 0 deletions
diff --git a/resources/mediawiki.ui/mediawiki.ui.default.css b/resources/mediawiki.ui/mediawiki.ui.default.css new file mode 100644 index 00000000..b0726165 --- /dev/null +++ b/resources/mediawiki.ui/mediawiki.ui.default.css @@ -0,0 +1,272 @@ +@charset "UTF-8"; +/** + * Provide Agora appearance for mw-ui-* classes when using a skin other than + * Vector. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ +/* _effects.scss */ +/* Mixins for visual effects in CSS3 */ +/* line 7, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +/* line 11, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +/* line 15, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* line 4, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + padding: 0.4em 1em 0.4em 1em; + margin: 0; + background-color: #c9c9c9; + *background-color: #c9c9c9; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9)); + background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: linear-gradient(top, #dcdcdc, #c9c9c9); + color: black; + text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3); + border: 1px solid #c4c4c4; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + vertical-align: middle; + text-align: center; + text-decoration: none; + font-weight: bold; + cursor: pointer; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:hover, .mw-ui-button.mw-ui-hover { + background-color: gainsboro; + *background-color: gainsboro; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc)); + background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: linear-gradient(top, #e9e9e9, #dcdcdc); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:active, .mw-ui-button.mw-ui-active { + background-image: none; + background-color: #c1c1c1; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + background-image: none; + background-color: #c9c9c9; + opacity: 0.5; + text-shadow: none; +} +/* line 30, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + cursor: default; +} +/* line 36, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-big { + font-size: 1.3em; +} +/* line 41, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-block { + display: block; + width: 100%; +} + +/* line 49, sourcefiles/scss/components/default/_buttons.scss */ +a.mw-ui-button { + text-decoration: none; +} + +/* line 56, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > * { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + float: left; +} +/* line 60, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:first-child { + -moz-border-radius-topleft: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; +} +/* line 65, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:last-child { + -moz-border-radius-topright: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +/* line 14, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 290px; +} +/* line 20, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} +/* line 28, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input, +.mw-ui-vform > div .mw-ui-button { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 100%; +} +/* line 37, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) { + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 11, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} +/* line 13, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) { + outline: 0; +} +/* line 41, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div label { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0.9em; + color: #4a4a4a; + width: auto; + margin: 0 0 0.2em 0; + padding: 0; +} +/* line 38, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div label * { + font-weight: normal; +} +/* line 52, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input[type="checkbox"], +.mw-ui-vform > div input[type="radio"] { + display: inline; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + width: auto; +} +/* line 63, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform .error { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0.9em; + margin: 0 0 1em 0; + padding: 0.5em; + color: #cc0000; + border: 1px solid #fac5c5; + background-color: #fae3e3; + text-shadow: 0 1px #fae3e3; + word-wrap: break-word; +} + +/* line 86, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform-div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} + +/* line 96, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-input { + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 11, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-input:focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} +/* line 13, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-input:focus:not([type=checkbox]):not([type=radio]) { + outline: 0; +} + +/* line 103, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-label { + font-size: 0.9em; + color: #4a4a4a; +} +/* line 38, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-label * { + font-weight: normal; +} + +/* line 112, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-checkbox-label, .mw-ui-radio-label { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + font-weight: normal; +} +/* line 54, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} diff --git a/resources/mediawiki.ui/mediawiki.ui.vector.css b/resources/mediawiki.ui/mediawiki.ui.vector.css new file mode 100644 index 00000000..fd9e0915 --- /dev/null +++ b/resources/mediawiki.ui/mediawiki.ui.vector.css @@ -0,0 +1,414 @@ +@charset "UTF-8"; +/** + * Provide Agora appearance for mw-ui-* classes when using the Vector skin. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ +/* _effects.scss */ +/* Mixins for visual effects in CSS3 */ +/* line 7, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-left { + float: left; + margin-left: 0; + padding-left: 0; +} + +/* line 11, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-flush-right { + float: right; + margin-right: 0; + padding-right: 0; +} + +/* line 15, sourcefiles/scss/components/_utilities.scss */ +.mw-ui-center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +/* line 4, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button { + display: -moz-inline-stack; + display: inline-block; + vertical-align: middle; + *vertical-align: auto; + zoom: 1; + *display: inline; + padding: 0.4em 1em 0.4em 1em; + margin: 0; + background-color: #c9c9c9; + *background-color: #c9c9c9; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFDCDCDC', endColorstr='#FFC9C9C9'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdcdc), color-stop(100%, #c9c9c9)); + background-image: -webkit-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -moz-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: -o-linear-gradient(top, #dcdcdc, #c9c9c9); + background-image: linear-gradient(top, #dcdcdc, #c9c9c9); + color: black; + text-shadow: 0 1px 1px rgba(201, 201, 201, 0.3); + border: 1px solid #c4c4c4; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + vertical-align: middle; + text-align: center; + text-decoration: none; + font-weight: bold; + cursor: pointer; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:hover, .mw-ui-button.mw-ui-hover { + background-color: gainsboro; + *background-color: gainsboro; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE9E9E9', endColorstr='#FFDCDCDC'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e9e9e9), color-stop(100%, #dcdcdc)); + background-image: -webkit-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -moz-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: -o-linear-gradient(top, #e9e9e9, #dcdcdc); + background-image: linear-gradient(top, #e9e9e9, #dcdcdc); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:active, .mw-ui-button.mw-ui-active { + background-image: none; + background-color: #c1c1c1; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + background-image: none; + background-color: #c9c9c9; + opacity: 0.5; + text-shadow: none; +} +/* line 30, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button:disabled, .mw-ui-button.mw-ui-disabled { + cursor: default; +} +/* line 36, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-big { + font-size: 1.3em; +} +/* line 41, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button.mw-ui-block { + display: block; + width: 100%; +} + +/* line 49, sourcefiles/scss/components/default/_buttons.scss */ +a.mw-ui-button { + text-decoration: none; +} + +/* line 56, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > * { + -webkit-border-radius: 0; + -moz-border-radius: 0; + -ms-border-radius: 0; + -o-border-radius: 0; + border-radius: 0; + float: left; +} +/* line 60, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:first-child { + -moz-border-radius-topleft: 3px; + -webkit-border-top-left-radius: 3px; + border-top-left-radius: 3px; + -moz-border-radius-bottomleft: 3px; + -webkit-border-bottom-left-radius: 3px; + border-bottom-left-radius: 3px; +} +/* line 65, sourcefiles/scss/components/default/_buttons.scss */ +.mw-ui-button-group > *:last-child { + -moz-border-radius-topright: 3px; + -webkit-border-top-right-radius: 3px; + border-top-right-radius: 3px; + -moz-border-radius-bottomright: 3px; + -webkit-border-bottom-right-radius: 3px; + border-bottom-right-radius: 3px; +} + +/* line 3, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button { + font-size: 1em; + line-height: 1.4em; +} +/* line 6, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button.mw-ui-primary { + background-color: #3366bb; + *background-color: #3366bb; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF4779CD', endColorstr='#FF3366BB'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4779cd), color-stop(100%, #3366bb)); + background-image: -webkit-linear-gradient(top, #4779cd, #3366bb); + background-image: -moz-linear-gradient(top, #4779cd, #3366bb); + background-image: -o-linear-gradient(top, #4779cd, #3366bb); + background-image: linear-gradient(top, #4779cd, #3366bb); + color: white; + text-shadow: 0 1px 1px rgba(51, 102, 187, 0.75); + border: 1px solid #3162b3; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-primary:hover, .mw-ui-button.mw-ui-primary.mw-ui-hover { + background-color: #4779cd; + *background-color: #4779cd; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5B88D2', endColorstr='#FF4779CD'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5b88d2), color-stop(100%, #4779cd)); + background-image: -webkit-linear-gradient(top, #5b88d2, #4779cd); + background-image: -moz-linear-gradient(top, #5b88d2, #4779cd); + background-image: -o-linear-gradient(top, #5b88d2, #4779cd); + background-image: linear-gradient(top, #5b88d2, #4779cd); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-primary:active, .mw-ui-button.mw-ui-primary.mw-ui-active { + background-image: none; + background-color: #305faf; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-primary:disabled, .mw-ui-button.mw-ui-primary.mw-ui-disabled { + background-image: none; + background-color: #3366bb; + opacity: 0.5; + text-shadow: none; +} +/* line 10, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button.mw-ui-constructive { + background-color: #27aa65; + *background-color: #27aa65; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF2EC977', endColorstr='#FF27AA65'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ec977), color-stop(100%, #27aa65)); + background-image: -webkit-linear-gradient(top, #2ec977, #27aa65); + background-image: -moz-linear-gradient(top, #2ec977, #27aa65); + background-image: -o-linear-gradient(top, #2ec977, #27aa65); + background-image: linear-gradient(top, #2ec977, #27aa65); + color: white; + text-shadow: 0 1px 1px rgba(39, 170, 101, 0.75); + border: 1px solid #25a260; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-constructive:hover, .mw-ui-button.mw-ui-constructive.mw-ui-hover { + background-color: #2ec977; + *background-color: #2ec977; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF3ED384', endColorstr='#FF2EC977'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3ed384), color-stop(100%, #2ec977)); + background-image: -webkit-linear-gradient(top, #3ed384, #2ec977); + background-image: -moz-linear-gradient(top, #3ed384, #2ec977); + background-image: -o-linear-gradient(top, #3ed384, #2ec977); + background-image: linear-gradient(top, #3ed384, #2ec977); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-constructive:active, .mw-ui-button.mw-ui-constructive.mw-ui-active { + background-image: none; + background-color: #249e5e; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-constructive:disabled, .mw-ui-button.mw-ui-constructive.mw-ui-disabled { + background-image: none; + background-color: #27aa65; + opacity: 0.5; + text-shadow: none; +} +/* line 14, sourcefiles/scss/components/vector/_buttons.scss */ +.mw-ui-button.mw-ui-destructive { + background-color: #cc0000; + *background-color: #cc0000; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF20000', endColorstr='#FFCC0000'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f20000), color-stop(100%, #cc0000)); + background-image: -webkit-linear-gradient(top, #f20000, #cc0000); + background-image: -moz-linear-gradient(top, #f20000, #cc0000); + background-image: -o-linear-gradient(top, #f20000, #cc0000); + background-image: linear-gradient(top, #f20000, #cc0000); + color: white; + text-shadow: 0 1px 1px rgba(204, 0, 0, 0.75); + border: 1px solid #c20000; +} +/* line 38, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-destructive:hover, .mw-ui-button.mw-ui-destructive.mw-ui-hover { + background-color: #f20000; + *background-color: #f20000; + *zoom: 1; + filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF0D0D', endColorstr='#FFF20000'); + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0d0d), color-stop(100%, #f20000)); + background-image: -webkit-linear-gradient(top, #ff0d0d, #f20000); + background-image: -moz-linear-gradient(top, #ff0d0d, #f20000); + background-image: -o-linear-gradient(top, #ff0d0d, #f20000); + background-image: linear-gradient(top, #ff0d0d, #f20000); + text-decoration: none; +} +/* line 44, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-destructive:active, .mw-ui-button.mw-ui-destructive.mw-ui-active { + background-image: none; + background-color: #bd0000; + text-shadow: none; +} +/* line 54, sourcefiles/scss/mixins/_effects.scss */ +.mw-ui-button.mw-ui-destructive:disabled, .mw-ui-button.mw-ui-destructive.mw-ui-disabled { + background-image: none; + background-color: #cc0000; + opacity: 0.5; + text-shadow: none; +} + +/* line 14, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 290px; +} +/* line 20, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} +/* line 28, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input, +.mw-ui-vform > div .mw-ui-button { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + width: 100%; +} +/* line 37, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]) { + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 11, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} +/* line 13, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div input:not([type=button]):not([type=submit]):not([type=file]):focus:not([type=checkbox]):not([type=radio]) { + outline: 0; +} +/* line 41, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div label { + display: block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0.9em; + color: #4a4a4a; + width: auto; + margin: 0 0 0.2em 0; + padding: 0; +} +/* line 38, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-vform > div label * { + font-weight: normal; +} +/* line 52, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform > div input[type="checkbox"], +.mw-ui-vform > div input[type="radio"] { + display: inline; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + width: auto; +} +/* line 63, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform .error { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0.9em; + margin: 0 0 1em 0; + padding: 0.5em; + color: #cc0000; + border: 1px solid #fac5c5; + background-color: #fae3e3; + text-shadow: 0 1px #fae3e3; + word-wrap: break-word; +} + +/* line 86, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-vform-div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} + +/* line 96, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-input { + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + color: #252525; + padding: 0.35em 0 0.35em 0.5em; +} +/* line 11, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-input:focus { + box-shadow: #4091ed 0px 0px 5px; + border-color: #4091ed; +} +/* line 13, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-input:focus:not([type=checkbox]):not([type=radio]) { + outline: 0; +} + +/* line 103, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-label { + font-size: 0.9em; + color: #4a4a4a; +} +/* line 38, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-label * { + font-weight: normal; +} + +/* line 112, sourcefiles/scss/components/default/_forms.scss */ +.mw-ui-checkbox-label, .mw-ui-radio-label { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + font-weight: normal; +} +/* line 54, sourcefiles/scss/mixins/_forms.scss */ +.mw-ui-checkbox-label > input[type="checkbox"], .mw-ui-checkbox-label > input[type="radio"], .mw-ui-radio-label > input[type="checkbox"], .mw-ui-radio-label > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border-style: solid; + border-width: 1px; + border-color: #c9c9c9; + cursor: pointer; +} + +/* line 5, sourcefiles/scss/components/vector/_forms.scss */ +.mw-ui-vform, +.mw-ui-vform > div input, +.mw-ui-input { + font-size: 1em; + line-height: 1.4em; +} + +/* line 3, sourcefiles/scss/components/vector/_containers.scss */ +.mw-ui-container { + font-size: 1em; + line-height: 1.4em; +} diff --git a/resources/mediawiki.ui/sourcefiles/Makefile b/resources/mediawiki.ui/sourcefiles/Makefile new file mode 100644 index 00000000..dea90139 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/Makefile @@ -0,0 +1,24 @@ +DATE=$(shell date +%I:%M%p) +CHECK=\033[32m✔\033[39m +HR=\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\# + +build: + @echo "\n${HR}" + @echo "Building Agora..." + @echo "${HR}\n" + @compass compile + @echo "Compiling Compass project... ${CHECK} Done" + @rm -rf .sass-cache + @echo "Removing .sass-cache... ${CHECK} Done" + @echo "\n${HR}" + @echo "Agora successfully built at ${DATE}." + @echo "${HR}\n" + +all: build + +watch: + @echo "\n${HR}" + @echo "Watching SCSS files for Agora..." + @echo "${HR}\n" + @compass watch + @echo "Started watching modules/scss at ${DATE}..." diff --git a/resources/mediawiki.ui/sourcefiles/config.rb b/resources/mediawiki.ui/sourcefiles/config.rb new file mode 100644 index 00000000..28c65240 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/config.rb @@ -0,0 +1,27 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +# (unused so far): http_path = "/" + +# Output to parent of build directory +css_dir = ".." +sass_dir = "scss" +# (unused so far): images_dir = "modules/img" +# (unused so far): javascripts_dir = "modules/js" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +line_comments = true + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss new file mode 100644 index 00000000..e7090ebc --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_default.scss @@ -0,0 +1,3 @@ +@import "utilities"; +@import "default/buttons"; +@import "default/forms";
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss new file mode 100644 index 00000000..4f1dba2f --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_utilities.scss @@ -0,0 +1,17 @@ +// Generic helper classes that could be used in many elements/layouts + +// -------------------------------------------------------------------------- +// Positioning +// -------------------------------------------------------------------------- + +.mw-ui-flush-left { + @include agora-flush-left; +} + +.mw-ui-flush-right { + @include agora-flush-right; +} + +.mw-ui-center-block { + @include agora-center-block; +}
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss new file mode 100644 index 00000000..d7cb34ae --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/_vector.scss @@ -0,0 +1,4 @@ +@import "utilities"; +@import "vector/buttons"; +@import "vector/forms"; +@import "vector/containers"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss new file mode 100644 index 00000000..d67810f7 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_buttons.scss @@ -0,0 +1,69 @@ +$buttonBorderRadius: 3px; + +// Button styling +.mw-ui-button { + // Container layout + @include inline-block; + padding: 0.4em 1em 0.4em 1em; + margin: 0; + + // Container styling + @include buttonColors($agoraGray); + @include border-radius($buttonBorderRadius); + + // Content styling + vertical-align: middle; + + text: { + align: center; + decoration: none; + } + + font: { + weight: bold; + } + + // Interaction styling + cursor: pointer; + + &:disabled, + &.mw-ui-disabled { + cursor: default; + } + + // Button sizes and displays + // ----------------------------------------- + &.mw-ui-big { + font: { + size: $baseFontSize * 1.3; + } + } + &.mw-ui-block { + display: block; + width: 100%; + } +} + +// This overrides an underline declaration on a:hover and a:focus in commonElements.css, which the +// class alone isn't specific enough to do +a.mw-ui-button { + text: { + decoration: none; + } +} + +// Button groups +.mw-ui-button-group > * { + @include border-radius(0); + float: left; + + &:first-child{ + @include border-top-left-radius($buttonBorderRadius); + @include border-bottom-left-radius($buttonBorderRadius); + } + + &:last-child{ + @include border-top-right-radius($buttonBorderRadius); + @include border-bottom-right-radius($buttonBorderRadius); + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss new file mode 100644 index 00000000..a9cec39a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/default/_forms.scss @@ -0,0 +1,114 @@ +// Form elements and layouts + +// -------------------------------------------------------------------------- +// Layouts +// -------------------------------------------------------------------------- + +// The FancyCaptcha image CAPTCHA used on WMF wikis drives the width of the +// 'VForm' design, the form can't be narrower than this. +$captchaContainerWidth: 290px; +$defaultFormWidth: $captchaContainerWidth; + +// Style a compact vertical stacked form ("VForm") and the elements in divs +// within it. +.mw-ui-vform { + @include box-sizing(border-box); + + width: $defaultFormWidth; + + // Immediate divs in a vform are block and spaced-out. + & > div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; + + // MW currently doesn't use the type attribute everywhere on inputs. + input, + .mw-ui-button { + display: block; + @include box-sizing(border-box); + margin: 0; + width: 100%; + } + + // We exclude these because they'll generally use mw-ui-button. + // Otherwise, we'll unintentionally override that. + input:not([type=button]):not([type=submit]):not([type=file]), { + @include agora-field-styling; // mixins/_forms.scss + } + + label { + display: block; + @include box-sizing(border-box); + @include agora-label-styling; + width: auto; + margin: 0 0 0.2em 0; + padding: 0; + } + + // Override input styling just for checkboxes and radio inputs. + input[type="checkbox"], + input[type="radio"] { + display: inline; + @include box-sizing(content-box); + width: auto; + } + + } + + // HTMLForm uses error, SpecialUserlogin (login and create account) uses + // errorbox. + // TODO move errorbox from mediawiki.special.vforms.css into here. + .error { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + font-size: 0.9em; + margin: 0 0 1em 0; + padding: 0.5em; + color: #cc0000; + border: 1px solid #fac5c5; + background-color: #fae3e3; + text-shadow: 0 1px #fae3e3; + word-wrap: break-word; + } +} + +// -------------------------------------------------------------------------- +// Elements +// -------------------------------------------------------------------------- + +// Apply this to individual elements to style them. +// You generally don't need to use this class on divs within an Agora +// form container such as mw-ui-vform +// XXX DRY: This repeats earlier styling, use an @include agora-div-styling ? +.mw-ui-vform-div { + display: block; + margin: 0 0 15px 0; + padding: 0; + width: 100%; +} + +// Apply mw-ui-input to individual input fields to style them. +// You generally don't need to use this class if <input> is within an Agora +// form container such as mw-ui-vform +.mw-ui-input { + @include agora-field-styling; // mixins/_forms.scss +} + +// Apply mw-ui-label to individual elements to style them. +// You generally don't need to use this class if <label> is within an Agora +// form container such as mw-ui-vform +.mw-ui-label { + @include agora-label-styling; // mixins/_forms.scss +} + +// Nesting an input checkbox or radio button inside a label with this class +// improves alignment, e.g. +// <label class="mw-ui-checkbox-label"> +// <input type="checkbox">The label text +// </label> +.mw-ui-checkbox-label, .mw-ui-radio-label { + @include agora-inline-label-styling; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss new file mode 100644 index 00000000..8d5f0b6a --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_buttons.scss @@ -0,0 +1,19 @@ +@import "../default/buttons"; // Layer Vector on top of the default settings. + +.mw-ui-button { + // Button colors determined by function. + // ----------------------------------------- + &.mw-ui-primary { + @include buttonColors($agoraBlue); + } + + &.mw-ui-constructive { + @include buttonColors($agoraGreen); + } + + &.mw-ui-destructive { + @include buttonColors($agoraRed); + } + + @include vector-type; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss new file mode 100644 index 00000000..ed01603d --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_containers.scss @@ -0,0 +1,5 @@ +// No default settings for containers yet. + +.mw-ui-container { + @include vector-type; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss new file mode 100644 index 00000000..73ea24e2 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/components/vector/_forms.scss @@ -0,0 +1,7 @@ +@import "../default/forms"; // Layer Vector on top of the default settings. + +.mw-ui-vform, +.mw-ui-vform > div input, +.mw-ui-input { + @include vector-type; +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss new file mode 100644 index 00000000..e6db5237 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.default.scss @@ -0,0 +1,16 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using a skin other than + * Vector. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ + +@charset "UTF-8"; + +@import "compass"; + +@import "settings/all"; + +@import "mixins/all"; + +@import "components/default"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss new file mode 100644 index 00000000..ac113eec --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mediawiki.ui.vector.scss @@ -0,0 +1,15 @@ +/** + * Provide Agora appearance for mw-ui-* classes when using the Vector skin. + * Compass builds these Agora styles from source Sass files in + * extensions/Agora/modules/scss + */ + +@charset "UTF-8"; + +@import "compass"; + +@import "settings/all"; + +@import "mixins/all"; + +@import "components/vector"; diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss new file mode 100644 index 00000000..adc48cd8 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_all.scss @@ -0,0 +1,4 @@ +@import "utilities"; +@import "type"; +@import "effects"; +@import "forms";
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss new file mode 100644 index 00000000..2efff820 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_effects.scss @@ -0,0 +1,62 @@ +/* _effects.scss */ + +/* Mixins for visual effects in CSS3 */ + +// ---------------------------------------------------------------------------- +// Gradients +// ---------------------------------------------------------------------------- +@mixin vertical-gradient ($startColor: lighten($agoraGray, 95%), $endColor: $agoraGray) { + // Fallback + background-color: $endColor; + *background-color: $endColor; // IE7 + + // IE6-8 + @include filter-gradient($startColor, $endColor, vertical); + + // IE9+, Opera, Gecko, WebKit + @include background-image(linear-gradient(top, $startColor, $endColor)); +} + +// ---------------------------------------------------------------------------- +// Button styling +// ---------------------------------------------------------------------------- +@mixin buttonColors ($baseColor: $agoraGray) { + // Background color + @include vertical-gradient(lighten($baseColor, 7.5%), $baseColor); + + @if $baseColor == $agoraGray { + color: black; + @include text-shadow(0 1px 1px rgba($baseColor, 0.3)); + } @else { + color: white; + @include text-shadow(0 1px 1px rgba($baseColor, 0.75)); + } + + border: 1px solid darken($baseColor, 2%); + + &:hover, + &.mw-ui-hover { + @include vertical-gradient(lighten($baseColor, 12.5%), lighten($baseColor, 7.5%)); + text-decoration: none; + } + + &:active, + &.mw-ui-active { + background: { + image: none; + color: darken($baseColor, 3%); + } + + text-shadow: none; + } + + &:disabled, + &.mw-ui-disabled { + background: { + image: none; + color: $baseColor; + } + opacity: 0.5; + text-shadow: none; + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss new file mode 100644 index 00000000..0f3f6ad3 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_forms.scss @@ -0,0 +1,66 @@ +// Font is not included. +// For Vector, that should be layered on top with vector-type +@mixin agora-field-styling() { + + border: { + style: solid; + width: 1px; + color: $agoraGray; + }; + + &:focus { + // Styling focus of native checkboxes etc on Mac is almost impossible. + &:not([type=checkbox]):not([type=radio]) { + @include reset-focus; // Removes OS field focus + }; + + // @include box-shadow generates unneeded prefixes + // https://github.com/chriseppstein/compass/issues/1054 , so specify + // directly. + box-shadow: $agoraBlueShadow 0px 0px 5px; + + border: { + color: $agoraBlueShadow; + }; + } + + color: $agoraTextColor; + padding: 0.35em 0 0.35em 0.5em; +} + +@mixin agora-label-styling() { + font: { + //weight: bold; + size: 0.9em; + }; + color: darken($agoraGray, 50%); + + & * { + font-weight: normal; + } +} + +@mixin agora-inline-label-styling() { + margin-bottom: 0.5em; + cursor: pointer; + vertical-align: bottom; + line-height: normal; + + font: { + weight: normal; + }; + + & > input[type="checkbox"], + & > input[type="radio"] { + width: auto; + height: auto; + margin: 0 0.1em 0em 0; + padding: 0; + border: { + style: solid; + width: 1px; + color: $agoraGray; + } + cursor: pointer; + } +} diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss new file mode 100644 index 00000000..8a93a08b --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_type.scss @@ -0,0 +1,6 @@ +@mixin vector-type { + font: { + size: $baseFontSize; + } + line-height: $baseLineHeight; +}
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss b/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss new file mode 100644 index 00000000..71a93b60 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/mixins/_utilities.scss @@ -0,0 +1,19 @@ +@mixin agora-flush-left() { + float: left; + margin-left: 0; + padding-left: 0; +} + +@mixin agora-flush-right() { + float: right; + margin-right: 0; + padding-right: 0; +} + +@mixin agora-center-block() { + display: block; + margin: { + left: auto; + right: auto; + }; +}
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss new file mode 100644 index 00000000..21ac292f --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_all.scss @@ -0,0 +1,2 @@ +@import "colors"; +@import "typography";
\ No newline at end of file diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss new file mode 100644 index 00000000..0c18bdb4 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_colors.scss @@ -0,0 +1,17 @@ +// Grays +// ----------------------------------------- +$agoraGray: #c9c9c9; +$agoraTextColor: #252525; + +// Blues +// ----------------------------------------- +$agoraBlue: #3366bb; +$agoraBlueShadow: #4091ed; + +// Greens +// ----------------------------------------- +$agoraGreen: #27aa65; + +// Reds +// ----------------------------------------- +$agoraRed: #cc0000; diff --git a/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss new file mode 100644 index 00000000..013d12b3 --- /dev/null +++ b/resources/mediawiki.ui/sourcefiles/scss/settings/_typography.scss @@ -0,0 +1,5 @@ +$baseFontSize: 1em; +$baseLineHeight: 1.4 * $baseFontSize; +$baseFontColor: $agoraTextColor; + +$smallFontSize: 0.75em;
\ No newline at end of file |