mediawiki-extensions-Multim.../resources/mmv/mmv.variables.less

@import 'mediawiki.skin.variables.less';

// MultimediaViewer specific global variables
// Height of the area of the metadata bar which is visible without scrolling.
@metadatabar-above-fold-height: 86px;

// adjust for @metadatabar-below-fold-pushup-height wide bottom padding - that area will be overlapped
// by the revealed part of the below-the-fold content
@metadatabar-above-fold-inner-height: @metadatabar-above-fold-height - @metadatabar-below-fold-pushup-height;

// Height of the top part of the "below-fold" content which is actually above the fold, as a scrolling affordance
@metadatabar-below-fold-pushup-height: 30px;

@panel-above-fold-background-color: @background-color-base;

// Height of the progress bar
@progress-bar-height: 14px;

// Height of dialogs
@dialog-height: 350px;

// Arrow size for dialogs
@arrow-size: 20px;
@arrow-border-size: 2px;

// Some button things that get included all over
@buttons-size: 32px;
@buttons-size-large: 44px;
@buttons-gap: 10px;
@buttons-offset-edge: 14px;
@buttons-offset-each: @buttons-size + @buttons-gap;

@buttons-icon-size: 20px; //icon size medium
@buttons-icon-size-large: 30px;

// dark mode version of --background-color-interactive-subtle
@buttons-background-color: #202122;
// dark mode version of --background-color-interactive-subtle: #202122;
@buttons-background-color-faded: ~'#20212274';
Use Codex colors to fix dark mode Bug: T363776 Change-Id: Iab9a7ffc7dd707c453522fab25c4bb6061645616 2024-05-03 18:24:00 +00:00			`@import 'mediawiki.skin.variables.less';`

Amend Base10 color from `#222` to `#202122` Amending Base10 to slightly darker `#202122` to fulfill WCAG requirements in connection to Accent50. Also adding it as WikimediaUI Base equivalent variable for future replacement. Also removing variables not in use any more. Bug: T248393 Change-Id: I6fb5c288cfeb2bd3c786c2f5ab771074203b8fc0 2020-04-18 04:22:52 +00:00			`// MultimediaViewer specific global variables`
Make the metadata panel opening affordance more obvious - rearrange DOM structure of above-fold part of the metadata panel: - rename .mw-mmv-controls to .mw-mmv-above-fold - the above-fold part is a single positioned div now, with height explitcitly set - less LESS gymnastics, above-fold height is a single variable - add paddings to the p elements instead of the containers - make all title elements align to baseline (except the logo which would look horrible) - discard some CSS which was superfluous - overspecified sizes/positions - some top/bottoms for staticly positioned elements - get rid of the .mw-mmv-drag-affordance div, since a full-width bar wouldn't really make sense on the bottom of the above-fold section - flip the chevron and place it to the bottom of the above-fold part; add colors etc. per spec - fix stripe button horizontal spacing Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/706 Change-Id: Ic37b4150288055c3fae8d22919ed7b1249db1f09 2014-06-17 22:23:18 +00:00			`// Height of the area of the metadata bar which is visible without scrolling.`
Change above-the-fold layout - step 3 * make top of "below-the-fold" be actually above the fold * put all above-the-fold content except title and more details button into that area * kep below-the-fold area in fullscreen mode when title/credit gets untruncated * increase title length to 180 (140 before reducing font size) - works nicely on my 1600x900 laptop * remove old styles which were intended to make the button smaller when the panel is close but were mostly broken anyway and only caused the button to twitch To avoid redoing all the size calculation logic, we cheat and use a negative margin to pull the below-the-fold content above the fold. Change-Id: I18d7bdb7dbbdfb8201c0d66257731febfac31263 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833 2014-10-27 16:17:49 +00:00			`@metadatabar-above-fold-height: 86px;`
Create StripeButtons class, convert reuse button to use it Also do a bunch of refactoring to: * keep LESS rules in more sane locations so it is not as hard to get an overview (most of the metadata panel rules were in mmv.less) * move mmv.mixins.less up one directory as it is not specific to the UI * move the SVG icons as all of them were related to the UI * remove the marging-right hack which was used to keep the title text from overflowing the button; instead use a float and overflow properties to make sure text that is too long gets hidden Change-Id: Icc8ea2e766be67d86ae98c734721b2185bd6c36e 2014-04-01 01:41:57 +00:00
Change above-the-fold layout - step 3 * make top of "below-the-fold" be actually above the fold * put all above-the-fold content except title and more details button into that area * kep below-the-fold area in fullscreen mode when title/credit gets untruncated * increase title length to 180 (140 before reducing font size) - works nicely on my 1600x900 laptop * remove old styles which were intended to make the button smaller when the panel is close but were mostly broken anyway and only caused the button to twitch To avoid redoing all the size calculation logic, we cheat and use a negative margin to pull the below-the-fold content above the fold. Change-Id: I18d7bdb7dbbdfb8201c0d66257731febfac31263 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833 2014-10-27 16:17:49 +00:00			`// adjust for @metadatabar-below-fold-pushup-height wide bottom padding - that area will be overlapped`
			`// by the revealed part of the below-the-fold content`
			`@metadatabar-above-fold-inner-height: @metadatabar-above-fold-height - @metadatabar-below-fold-pushup-height;`

			`// Height of the top part of the "below-fold" content which is actually above the fold, as a scrolling affordance`
			`@metadatabar-below-fold-pushup-height: 30px;`
Make the reuse button part of the canvas Moves it out of stripeButtons and into canvasButtons. Will move download to its own thing later. Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834 2014-09-12 18:05:13 +00:00
Use Codex colors to fix dark mode Bug: T363776 Change-Id: Iab9a7ffc7dd707c453522fab25c4bb6061645616 2024-05-03 18:24:00 +00:00			`@panel-above-fold-background-color: @background-color-base;`
Make the ellipsis of truncated texts more prominent Also fixes popup texts which should have been updated in the parent commit and the panel opening mechanism which did not work when the below-the-fold description box was display:none-d. Change-Id: I5fc37429a7dc7a8f1517fa42375cd140d7d11674 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/589 2014-10-29 19:50:53 +00:00
Make the reuse button part of the canvas Moves it out of stripeButtons and into canvasButtons. Will move download to its own thing later. Change-Id: Iaf18914b29a6283c3bade954f1adb3f206c9c911 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/834 2014-09-12 18:05:13 +00:00			`// Height of the progress bar`
			`@progress-bar-height: 14px;`
Make the download pane into its own dialog Change-Id: Ia92545ed1ef7f2e4ba7934c682eef684a22ca17f Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/841 2014-09-16 20:33:05 +00:00
			`// Height of dialogs`
			`@dialog-height: 350px;`

			`// Arrow size for dialogs`
			`@arrow-size: 20px;`
			`@arrow-border-size: 2px;`
Add viewing options panel Enable, disable, and get confirmations. Lots of UI work on this one. Change-Id: I1f731992bd240e7ea403592872f7c7e270158753 2014-07-23 23:00:37 +00:00
			`// Some button things that get included all over`
MMV square buttons - Use square cdx icon only buttons - gray transparent brackground - opaque background on hover, active, focus - Some fixes to the positioning and offsets of buttons and dialogs - Move the dialogs to be in the same container as the buttons This is better for accessibility but also fixes the z-index issue Bug: T365192 Change-Id: Idbc2a309fbca15bd528aaed7ca9bed584487c4f3 2024-06-12 22:59:08 +00:00			`@buttons-size: 32px;`
			`@buttons-size-large: 44px;`
			`@buttons-gap: 10px;`
			`@buttons-offset-edge: 14px;`
			`@buttons-offset-each: @buttons-size + @buttons-gap;`

			`@buttons-icon-size: 20px; //icon size medium`
			`@buttons-icon-size-large: 30px;`

			`// dark mode version of --background-color-interactive-subtle`
			`@buttons-background-color: #202122;`
			`// dark mode version of --background-color-interactive-subtle: #202122;`
			`@buttons-background-color-faded: ~'#20212274';`