wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-25 19:26:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some basic link inspector style changes

Browse source 
Some of the HTML structure in the suggestions might need to be changed to pull off pixel-perfect reproduction of the original design, but this gets us very close.

Change-Id: Ie574577af4815e4f0fc9f8a03e57759dd9dfff84
This commit is contained in:
Trevor Parscal 2012-08-20 12:32:42 -07:00
parent fcf4e53f14
commit 7576c0fa5f
2 changed files with 44 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
modules/ve/ui/inspectors/ve.ui.LinkInspector.js
View file

@ -29,7 +29,10 @@ ve.ui.LinkInspector = function ( toolbar, context ) {
.text( ve.msg( 'visualeditor-linkinspector-title' ) ) .text( ve.msg( 'visualeditor-linkinspector-title' ) )
); );
// Target // Target
this.$locationInput = $( '<input type="text">', context.inspectorDoc ).appendTo( this.$form ); this.$locationInput = $( '<input>', context.inspectorDoc )
.attr( 'type', 'text' )
.prop( 'class', 've-ui-linkInspector-location' )
.appendTo( this.$form );
this.initialValue = null; this.initialValue = null;

66
modules/ve/ui/styles/ve.ui.Inspector.css
View file

@ -13,10 +13,11 @@
-moz-border-radius: 0.25em; -moz-border-radius: 0.25em;
-o-border-radius: 0.25em; -o-border-radius: 0.25em;
border-radius: 0.25em; border-radius: 0.25em;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.95);
-webkit-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
padding: 0.75em; padding: 0.75em;
padding-top: 2.5em; padding-top: 2.5em;
min-width: 15em; min-width: 15em;
@ -69,13 +70,31 @@
padding: 0.75em 0 0 0; padding: 0.75em 0 0 0;
border-top: solid 1px #ddd; border-top: solid 1px #ddd;
white-space: nowrap; white-space: nowrap;
font-size: 0.8em;
} }
.es-inspector form input { .es-inspector form input {
display: inline-block; display: inline-block;
width: 20em; width: 20em;
font-size: 1em; font-size: 1em;
padding: 0.25em; font-family: sans-serif;
background-color: #fff;
border: solid 1px #cccccc;
padding: 0.5em;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
-o-border-radius: 0.25em;
border-radius: 0.25em;
}
.es-inspector form input:focus {
outline: none;
}
.ve-ui-linkInspector-location {
/* @embed */
background-image: url(images/arrow-down.png);
background-position: 18.75em center;
background-repeat: no-repeat;
} }
.es-inspector form label { .es-inspector form label {
@ -106,26 +125,22 @@
background-image: url(images/gray.png); background-image: url(images/gray.png);
background-position: 8em top; background-position: 8em top;
background-repeat: repeat-y; background-repeat: repeat-y;
padding: 0.5em 0 0 0;
width: 20em; width: 20em;
font-size: 1em; margin-top: -1px;
font-size: 0.8em;
z-index: 101; z-index: 101;
-webkit-border-bottom-left-radius: 0.25em; border: solid 1px #ccc;
-webkit-border-bottom-right-radius: 0.25em; -webkit-border-radius: 0 0 0.25em 0.25em;
-moz-border-bottom-left-radius: 0.25em; -moz-border-radius: 0 0 0.25em 0.25em;
-moz-border-bottom-right-radius: 0.25em; -o-border-radius: 0 0 0.25em 0.25em;
-o-border-bottom-left-radius: 0.25em; border-radius: 0 0 0.25em 0.25em;
-o-border-bottom-right-radius: 0.25em; -webkit-box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
border-bottom-left-radius: 0.25em; -moz-box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
border-bottom-right-radius: 0.25em; box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
background-color: rgba(255,255,255,0.95);
-webkit-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 .15em .5em 0 rgba(0, 0, 0, 0.2);
} }
.ve-ui-suggest-container { .ve-ui-suggest-container {
margin-bottom: 0.5em; margin: 0.5em 0;
} }
.ve-ui-suggest-label { .ve-ui-suggest-label {
@ -133,11 +148,11 @@
width: 6.5em; width: 6.5em;
padding: 0.33em 0.75em; padding: 0.33em 0.75em;
text-align: right; text-align: right;
color: rgb(78, 78, 78); color: #888;
} }
.ve-ui-suggest-wrap { .ve-ui-suggest-wrap {
float:left; float: left;
} }
.ve-ui-suggest-dummy-item { .ve-ui-suggest-dummy-item {
@ -148,7 +163,7 @@
.ve-ui-suggest-item { .ve-ui-suggest-item {
padding: 0.33em 0.75em; padding: 0.33em 0.75em;
width: 10.5em; width: 10.5em;
cursor: pointer;
/* CSS Elipsis */ /* CSS Elipsis */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -159,15 +174,14 @@
.ve-ui-suggest-item.new { .ve-ui-suggest-item.new {
color: #BA0000; color: #BA0000;
} }
.ve-ui-suggest-item.existing { .ve-ui-suggest-item.existing {
color: rgb(68, 125, 214); color: #0645AD;
} }
.ve-ui-suggest-item.selected { .ve-ui-suggest-item.selected {
background-color: rgb(68, 125, 214); background-color: #b3d6f6;
color: #FFFFFF;
} }
.ve-ui-suggest-item > a { .ve-ui-suggest-item > a {
text-decoration: none; text-decoration: none;
} }