https://wiki.runerealm.org/index.php?action=history&feed=atom&title=MediaWiki%3AVector-darkmode.less%2Fvisualeditor.less 2026-04-26T06:44:24Z Revision history for this page on the wiki MediaWiki 1.41.1 https://wiki.runerealm.org/index.php?title=MediaWiki:Vector-darkmode.less/visualeditor.less&diff=34876&oldid=prev 2024-10-16T23:11:28Z

<p>Created page with &quot;<span dir="auto"><span class="autocomment">========================== VisualEditor ==========================: </span> <span dir="auto"><span class="autocomment">------------------ editing area ------------------: </span> .ve-activated &amp; { // toolbar .oo-ui-toolbar-bar { background-color: @ooui-interface; } // undo invert from /ooui.less on certain icons .oo-ui-iconElement-icon.oo-ui-icon-cancel, // image preview when link is clicked .ve-ui-mwInternalLinkContextItem-withImage .oo-ui-iconElement-icon { filter: invert(0%); }...&quot;</span></span></p> <p><b>New page</b></p><div>/* ==========================<br /> VisualEditor<br /> ========================== */<br /> <br /> /* ------------------<br /> editing area<br /> ------------------ */<br /> <br /> .ve-activated &amp; {<br /> <br /> // toolbar<br /> .oo-ui-toolbar-bar {<br /> background-color: @ooui-interface;<br /> }<br /> <br /> // undo invert from /ooui.less on certain icons<br /> .oo-ui-iconElement-icon.oo-ui-icon-cancel,<br /> // image preview when link is clicked<br /> .ve-ui-mwInternalLinkContextItem-withImage .oo-ui-iconElement-icon {<br /> filter: invert(0%);<br /> }<br /> <br /> // toolbar cite icon when link is selected<br /> .oo-ui-tool:not(.oo-ui-toolGroupTool).oo-ui-tool-active {<br /> background: @ooui-normal;<br /> }<br /> <br /> // hovering over toolbar buttons<br /> .oo-ui-popupToolGroup-handle:hover,<br /> .oo-ui-tool:not(.oo-ui-toolGroupTool).oo-ui-widget-enabled:hover,<br /> .oo-ui-toolbar-actions .oo-ui-popupToolGroup.oo-ui-widget-enabled &gt; .oo-ui-popupToolGroup-handle:hover {<br /> background: @ooui-normal--hover;<br /> border-color: @ooui-normal--hover; // border is the same as background in light mode<br /> }<br /> <br /> // toolbar button when dropdown is open<br /> .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active &gt; .oo-ui-popupToolGroup-handle {<br /> background: @ooui-normal;<br /> }<br /> <br /> // selected option in dropdown<br /> .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-tool-active,<br /> .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {<br /> background: @ooui-normal--hover;<br /> }<br /> <br /> // dropdown<br /> .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {<br /> background: @ooui-interface;<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> // dropdown option text<br /> .oo-ui-tool-title {<br /> color: @ooui-text;<br /> }<br /> <br /> // dropdown shortcut info on right<br /> .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {<br /> color: fade( @ooui-text, 50% );<br /> }<br /> <br /> // toolbar borders<br /> .oo-ui-toolbar-position-top &gt; .oo-ui-toolbar-bar {<br /> border-bottom-color: @ooui-interface-border;<br /> }<br /> <br /> // left-hand tool group<br /> .oo-ui-menuToolGroup {<br /> border-right-color: @ooui-interface-border;<br /> border-left-color: @ooui-interface-border;<br /> }<br /> <br /> // right-hand tool group<br /> .oo-ui-toolbar-actions .oo-ui-toolGroup {<br /> border-left-color: @ooui-interface-border;<br /> }<br /> <br /> // border between right-hand tool group and save button<br /> .oo-ui-toolbar-actions &gt; .oo-ui-toolbar:not(:last-child) {<br /> border-right-color: @ooui-interface-border;<br /> }<br /> <br /> .oo-ui-tool.oo-ui-widget-enabled &gt; .oo-ui-tool-link:hover {<br /> background-color: #384766;<br /> }<br /> <br /> // more menus<br /> .ve-ui-toolbar .oo-ui-toolbar-popups .oo-ui-toolGroup-tools {<br /> background-color: @ooui-normal;<br /> border: none;<br /> .oo-ui-widget-disabled {<br /> opacity: 0.34;<br /> }<br /> .oo-ui-tool-active .oo-ui-tool-link {<br /> background-color: @ooui-normal;<br /> }<br /> }<br /> .oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above, <br /> .oo-ui-bookletLayout &gt; .oo-ui-menuLayout-menu {<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> // probably all disabled buttons<br /> .oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary &gt; .oo-ui-tool-link,<br /> .oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary &gt; .oo-ui-tool-link {<br /> background-color: @ooui-disabled;<br /> border-color: @ooui-disabled;<br /> }<br /> <br /> .oo-ui-widget-disabled .oo-ui-tool &gt; .oo-ui-tool-link span.oo-ui-tool-title {<br /> color: rgba(203,217,244,0.5);<br /> }<br /> <br /> // bad thumbnails<br /> figure[typeof~=&#039;mw:Image/Thumb&#039;],<br /> figure[typeof~=&#039;mw:Video/Thumb&#039;],<br /> figure[typeof~=&#039;mw:Audio/Thumb&#039;],<br /> figure[typeof~=&#039;mw:Image/Frame&#039;],<br /> figure[typeof~=&#039;mw:Video/Frame&#039;],<br /> figure[typeof~=&#039;mw:Audio/Frame&#039;] {<br /> background: none;<br /> border: none;<br /> }<br /> }<br /> <br /> // &quot;Insert paragraph&quot; button, maybe other things<br /> .ve-ce-branchNode-blockSlug,<br /> .ve-ce-branchNode-newSlug {<br /> outline-color: @ooui-interface-border;<br /> background-color: @ooui-interface;<br /> }<br /> <br /> // special characters menu buttons<br /> .ve-ui-specialCharacterPage-character {<br /> border-color: @ooui-interface-border;<br /> color: @ooui-text;<br /> }<br /> <br /> // when a link is selected<br /> .ve-ce-linkAnnotation.ve-ce-annotation-active {<br /> background: @cloud-burst;<br /> box-shadow: 0 0 0 1px @pickled-bluewood;<br /> }<br /> <br /> /* ------------------<br /> modals<br /> ------------------ */<br /> <br /> // template editor modal<br /> .ve-ui-mwTemplatePage-description,<br /> .ve-ui-mwParameterPage-label,<br /> .ve-ui-mwParameterPage-description-required,<br /> .ve-ui-mwParameterPage-description-deprecated {<br /> color: @ooui-text;<br /> }<br /> <br /> // gallery modal<br /> .ve-ui-mwGalleryDialog-menuLayout &gt; .oo-ui-menuLayout-menu,<br /> .ve-ui-mwGalleryDialog-innerMenuLayout &gt; .oo-ui-menuLayout-menu,<br /> .ve-ui-mwGalleryDialog .ve-ui-mwGalleryDialog-image-container,<br /> .ve-ui-targetWidget {<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> // large thumbnail preview<br /> .ve-ui-mwGalleryDialog-highlighted-image {<br /> background-color: @ooui-interface;<br /> }<br /> <br /> // &quot;Save your changes&quot; modal<br /> .ve-ui-mwSaveDialog {<br /> color: @ooui-text;<br /> }<br /> <br /> .ve-ui-mwSaveDialog-options {<br /> background-color: @ooui-interface;<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> .ve-ui-mwSaveDialog-editSummary-count {<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> .ve-ui-mwSaveDialog-license {<br /> color: @ooui-text;<br /> }<br /> <br /> .ve-ui-mwReferenceContextItem-muted {<br /> color: @ooui-text;<br /> }<br /> <br /> [data-diff-action=&#039;remove&#039;],<br /> table[data-diff-action=&#039;remove&#039;] &gt; caption,<br /> figure[data-diff-action=&#039;remove&#039;] &gt; figcaption {<br /> color: @white;<br /> background: @old-brick !important;<br /> box-shadow: 0 0 0 1px @old-brick;<br /> }<br /> <br /> [data-diff-action=&#039;insert&#039;],<br /> table[data-diff-action=&#039;insert&#039;] &gt; caption,<br /> figure[data-diff-action=&#039;insert&#039;] &gt; figcaption {<br /> color: @white;<br /> background: @la-palma !important;<br /> box-shadow: 0 0 0 1px @la-palma;<br /> }<br /> <br /> .ve-ui-mwLatexPage-symbol {<br /> filter: invert(1);<br /> }<br /> <br /> .ve-ce-mwBlockImageNode {<br /> figcaption {<br /> background-color: @ooui-interface;<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> .image,<br /> .ve-ce-mwBlockImageNode-thumbimage {<br /> background-color: @ooui-interface;<br /> }<br /> }<br /> <br /> .ve-ui-overlay {<br /> color: @ooui-text;<br /> }<br /> <br /> // borders inside edit notices<br /> .ve-ui-mwNoticesPopupTool-items &gt; div:not(:first-child),<br /> .ve-ui-mwHelpPopupTool-item:not(:first-child) {<br /> border-color: @ooui-interface-border;<br /> }<br /> <br /> // Templates config window<br /> .ve-ui-mwTransclusionDialog-multiple {<br /> <br /> .oo-ui-outlineControlsWidget {<br /> background: none;<br /> }<br /> <br /> .oo-ui-bookletLayout-outlinePanel &gt; .oo-ui-outlineControlsWidget,<br /> .ve-ui-mwTransclusionDialog-addParameterFieldset .ve-ui-mwParameterSearchWidget,<br /> .oo-ui-searchWidget-query {<br /> border-color: @ooui-interface-border;<br /> }<br /> }</div>

Alex