diff --git a/resources/extensions/VisualEditor.article.less b/resources/extensions/VisualEditor.article.less new file mode 100644 index 0000000..0f5e5a7 --- /dev/null +++ b/resources/extensions/VisualEditor.article.less @@ -0,0 +1,25 @@ +@import "../variables.less"; + +@media screen { + .client-js { + .mw-editsection a { + .background-image-svg('../images/brackets-grey.svg', '../images/brackets-grey.png'); + margin-right: 1.25em; + } + .mw-editsection a.mw-editsection-visualeditor { + .background-image-svg('../images/pencil-grey.svg', '../images/pencil-grey.png'); + } + .mw-editsection-divider { + display: none; + } + + @media (max-width: @mobile-width) { + #ca-ve-edit a { + .background-image-svg('../images/pencil-grey.svg', '../images/pencil-grey.png'); + } + #ca-edit a { + .background-image-svg('../images/brackets-grey.svg', '../images/brackets-grey.png'); + } + } + } +} diff --git a/resources/extensions/VisualEditor.core.less b/resources/extensions/VisualEditor.core.less new file mode 100644 index 0000000..d9c50ba --- /dev/null +++ b/resources/extensions/VisualEditor.core.less @@ -0,0 +1,29 @@ +@import "../variables.less"; + +@media screen { + .ve-ui-toolbar { + margin: -.8em -2em 0; + } + + // Still need a way to make it show up right away (instead of initially disappearin under the page header) + .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { + top: @fixed-header-height + @color-height; + } + + // Apparently the margin is normally removed/negated elsewhere in other skins (T162493) + .ve-ce-documentNode { + padding: 0.94em 1.88em; + margin: auto -1.88em; + } + + @media (min-width: @desktop-small-floor) and (max-width: @desktop-small-width) { + .ve-ui-toolbar { + margin-top: -.5em; + } + } + @media (max-width: @mobile-width) { + .ve-ui-toolbar-floating > .oo-ui-toolbar-bar { + top: 0; + } + } +} diff --git a/resources/images/brackets-grey.png b/resources/images/brackets-grey.png new file mode 100644 index 0000000..5e7a458 Binary files /dev/null and b/resources/images/brackets-grey.png differ diff --git a/resources/images/brackets-grey.svg b/resources/images/brackets-grey.svg new file mode 100644 index 0000000..a5353a8 --- /dev/null +++ b/resources/images/brackets-grey.svg @@ -0,0 +1,47 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/resources/images/editing icons.svg b/resources/images/editing icons.svg index 1007981..0868f76 100644 --- a/resources/images/editing icons.svg +++ b/resources/images/editing icons.svg @@ -12,7 +12,7 @@ version="1.1" viewBox="0 0 20.015762 20.015762" id="svg4136" - inkscape:version="0.91 r13725" + inkscape:version="0.92.0 r" sodipodi:docname="editing icons.svg" inkscape:export-filename="/media/shintaiden/home/rahah/mediawiki/skins/Timeless/resources/images/gear-large-grey.png" inkscape:export-xdpi="90" @@ -25,7 +25,7 @@ image/svg+xml - + @@ -43,12 +43,12 @@ inkscape:window-width="2492" inkscape:window-height="2034" id="namedview4144" - showgrid="false" - inkscape:zoom="8.4344705" - inkscape:cx="-10.159905" - inkscape:cy="12.402323" - inkscape:window-x="3225" - inkscape:window-y="43" + showgrid="true" + inkscape:zoom="4.2172353" + inkscape:cx="1.5845383" + inkscape:cy="4.9358551" + inkscape:window-x="3586" + inkscape:window-y="92" inkscape:window-maximized="0" inkscape:current-layer="svg4136" inkscape:snap-bbox="true" @@ -181,20 +181,19 @@ + id="text4369" + transform="scale(1.0007881,1.0007881)" /> + id="text4375" + transform="scale(1.0007881,1.0007881)" /> + + + + + diff --git a/resources/screen-common.less b/resources/screen-common.less index 07f90ae..689888c 100644 --- a/resources/screen-common.less +++ b/resources/screen-common.less @@ -454,7 +454,6 @@ table.wikitable > * > tr > th { .color-bar { width: 100%; } -@color-height: 4px; .color-left { height: @color-height; background: @red-dark; diff --git a/resources/variables.less b/resources/variables.less index 1cfff51..04a8471 100644 --- a/resources/variables.less +++ b/resources/variables.less @@ -51,10 +51,14 @@ // Widths // Remember to also update skin.json (and possibly mobile.js) if you change these -// These are all max widths; get the min by subtrcting 1px from the previous thing. +// For some reason doing @mobile-width + 1px doesn't seem to actually work, +// so we need both for each thing @mobile-width: 850px; +@desktop-small-floor: 851px; @desktop-small-width: 1099px; +@desktop-mid-floor: 1100px; @desktop-mid-width: 1339px; +@desktop-large-floor: 1340px; // The max-width for the content @content-width: 100em; @@ -65,7 +69,7 @@ @column-right-size: 16em; @fixed-header-height: 3.125em; - +@color-height: .35em; // Miscellaneous functions diff --git a/skin.json b/skin.json index cd93a63..5257150 100644 --- a/skin.json +++ b/skin.json @@ -74,6 +74,12 @@ "localBasePath": "", "remoteSkinPath": "Timeless" }, + "ResourceModuleSkinStyles": { + "timeless": { + "+ext.visualEditor.core": "resources/extensions/VisualEditor.core.less", + "+ext.visualEditor.desktopArticleTarget.noscript": "resources/extensions/VisualEditor.article.less" + } + }, "AutoloadClasses": { "SkinTimeless": "Timeless.skin.php", "TimelessTemplate": "TimelessTemplate.php"