X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.widgets.datetime%2FDateTimeInputWidget.less;h=042d795258e2ffe79f003ad2795bc4b53526bafa;hb=7462d3075a23095fd627cebeb0f66e081ad2bede;hp=2b61b65a5235b8a60684abe98fe3be27eb2e15f5;hpb=c4088ae0efb8196bf8f4e5b689fdbc208bc4645b;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
index 2b61b65a52..042d795258 100644
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
@@ -5,7 +5,8 @@
 	display: inline-block;
 	position: relative;
 	width: 100%;
-	max-width: @max-width-input;
+	// Hack: Set maximum width equivalent to DateInputWidgets calendar popup
+	max-width: 24.275em;
 	.oo-ui-inline-spacing( 0.5em );
 	vertical-align: middle;
 
@@ -59,10 +60,6 @@
 		}
 	}
 
-	&-empty &-handle {
-		color: @color-base--subtle;
-	}
-
 	&.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
 		padding-left: @padding-start-input-text-icon-label;
 	}
@@ -77,8 +74,7 @@
 		.oo-ui-box-sizing( border-box );
 		border: 0;
 		border-radius: @border-radius-base;
-		// Provide more top padding due to border not being part of the calculation
-		padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
+		padding-top: @padding-top-base;
 		padding-bottom: @padding-bottom-base;
 		box-shadow: none;
 		font-size: inherit;
@@ -86,6 +82,17 @@
 		line-height: @line-height-widget-singleline;
 		text-align: center;
 		vertical-align: top;
+
+		// Day field, f.e. “Sat”
+		&:first-child {
+			cursor: pointer;
+		}
+
+		// Day field & time zome field, f.e. “Sat” & “Z”
+		&[ tabindex='-1' ] {
+			// Support: Firefox, Chrome
+			outline: 0;
+		}
 	}
 
 	&-editField {
@@ -101,13 +108,31 @@
 	}
 
 	&-clearButton {
+		// Override `&-field` from above
 		padding-top: 0;
+		padding-bottom: 0;
+		padding-left: @padding-start-button-clear;
+
+		// `&.oo-ui-iconElement` needed for specificity
+		&.oo-ui-iconElement > .oo-ui-buttonElement-button {
+			padding-top: @padding-top-button-clear;
+		}
 
 		.oo-ui-iconElement-icon {
 			background-size: @size-indicator @size-indicator;
 		}
 	}
 
+	&-empty {
+		.mw-widgets-datetime-dateTimeInputWidget-handle {
+			color: @color-base--subtle;
+		}
+
+		.mw-widgets-datetime-dateTimeInputWidget-clearButton {
+			display: none;
+		}
+	}
+
 	&.oo-ui-widget-enabled {
 		.mw-widgets-datetime-dateTimeInputWidget-handle {
 			.oo-ui-transition( border-color @transition-ease-medium );