mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/WikiEditor
synced 2024-11-27 17:50:44 +00:00
1a61bea0d0
This is relevant for the two colapsible panels with the list of characters, as well as the help panel. Both have an index on the right that can be resized. As of now it can be collapsed so much that it disappears entirely, and enlarged so much that it is larger than 100%. Both situations look broken and confusing. I think these are sensible limits. Also remove the horizontal scrollbar. It appears only when the index is very narrow, but is especially in the way and not useful in this situation. Just enlarge the index when you need to see the full words. Change-Id: I92d11ddbe4976cf218b30689604ed91b0f288eae
421 lines
6.5 KiB
Plaintext
421 lines
6.5 KiB
Plaintext
@import 'mediawiki.mixins';
|
|
@import 'mediawiki.skin.variables.less';
|
|
|
|
/**
|
|
* CSS for WikiEditor Toolbar jQuery plugin
|
|
*/
|
|
|
|
.wikiEditor-ui-toolbar {
|
|
position: relative;
|
|
display: block;
|
|
z-index: 7;
|
|
|
|
.empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Expandable Sections */
|
|
.sections {
|
|
float: left;
|
|
width: 100%;
|
|
clear: both;
|
|
|
|
.section {
|
|
float: left;
|
|
width: 100%;
|
|
border-top: @border-subtle;
|
|
}
|
|
|
|
.section-hidden {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Top Level Containers */
|
|
/* Tabs */
|
|
.tabs {
|
|
float: left;
|
|
height: 100%;
|
|
list-style: none;
|
|
margin: 0 3px;
|
|
min-height: 32px;
|
|
position: relative;
|
|
|
|
span.tab {
|
|
position: relative;
|
|
float: left;
|
|
/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
|
|
line-height: 32px;
|
|
|
|
a {
|
|
color: @color-progressive;
|
|
cursor: pointer;
|
|
display: block;
|
|
height: 32px;
|
|
padding-left: 18px;
|
|
padding-right: 12px;
|
|
|
|
&::before {
|
|
content: '';
|
|
background: url( images/toolbar/arrow-down.svg ) center no-repeat;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 16px;
|
|
height: 32px;
|
|
transition: transform 100ms;
|
|
|
|
body.ltr & {
|
|
transform: rotate( -90deg );
|
|
}
|
|
|
|
body.rtl & {
|
|
transform: rotate( 90deg );
|
|
}
|
|
}
|
|
}
|
|
|
|
a:visited {
|
|
color: @color-progressive;
|
|
}
|
|
|
|
a.current,
|
|
a.current:visited {
|
|
color: @color-base;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&::before {
|
|
body.ltr &,
|
|
body.rtl & {
|
|
transform: rotate( 0 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Top Level Containers */
|
|
.tabs,
|
|
.section-main,
|
|
.section-secondary {
|
|
position: relative;
|
|
float: left;
|
|
min-height: 32px;
|
|
height: 100%;
|
|
}
|
|
|
|
.section-secondary {
|
|
float: right;
|
|
|
|
.group {
|
|
padding-right: 0;
|
|
margin-left: 6px;
|
|
border-left: @border-subtle;
|
|
}
|
|
}
|
|
|
|
/* Groups */
|
|
.group {
|
|
float: left;
|
|
display: flex;
|
|
min-height: 26px;
|
|
padding-right: 6px;
|
|
border-right: @border-subtle;
|
|
margin: 3px;
|
|
|
|
/* Toolbar */
|
|
.label {
|
|
float: left;
|
|
border: 0;
|
|
height: 22px;
|
|
/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
|
|
line-height: 22px;
|
|
margin: 2px 8px 2px 5px;
|
|
color: @color-subtle;
|
|
cursor: default;
|
|
}
|
|
|
|
img.tool {
|
|
float: left;
|
|
border: 0;
|
|
height: 22px;
|
|
width: 22px;
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tool-select {
|
|
float: left;
|
|
margin: 2px 0 2px 2px;
|
|
height: 22px;
|
|
cursor: pointer;
|
|
border: @border-subtle;
|
|
padding: 0;
|
|
background-color: @background-color-base;
|
|
|
|
.label {
|
|
position: relative;
|
|
padding: 0 26px 0 4px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: @color-base;
|
|
|
|
&::after {
|
|
content: '';
|
|
background: url( images/toolbar/arrow-down.svg ) center no-repeat;
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 4px;
|
|
width: 16px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
|
|
&.options-shown .label::after {
|
|
transform: rotate( 180deg );
|
|
}
|
|
|
|
.options {
|
|
position: absolute;
|
|
display: none;
|
|
margin-left: -1px;
|
|
margin-top: 22px;
|
|
border: @border-subtle;
|
|
background-color: @background-color-base;
|
|
z-index: 1;
|
|
|
|
.option {
|
|
display: block;
|
|
padding: 0.5em;
|
|
text-decoration: none;
|
|
color: @color-base;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
background-color: #eaf3ff;
|
|
}
|
|
|
|
&[ rel='heading-2' ] {
|
|
font-size: 150%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&[ rel='heading-3' ] {
|
|
font-size: 132%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&[ rel='heading-4' ] {
|
|
font-size: 116%;
|
|
font-weight: normal;
|
|
}
|
|
|
|
&[ rel='heading-5' ] {
|
|
font-size: 100%;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover .options,
|
|
&.options-shown .options {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.group-search {
|
|
float: right;
|
|
border-right: 0;
|
|
border-left: @border-subtle;
|
|
}
|
|
|
|
/* Booklet */
|
|
.booklet {
|
|
> .index {
|
|
float: left;
|
|
width: 20%;
|
|
height: 125px;
|
|
overflow: hidden auto;
|
|
resize: horizontal;
|
|
min-width: 6em;
|
|
max-width: 50%;
|
|
|
|
> div {
|
|
padding: 4px 4px 4px 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wikiEditor-character-highlighted {
|
|
background-color: rgba( 41, 98, 204, 0.1 );
|
|
color: @color-base;
|
|
}
|
|
}
|
|
|
|
.pages {
|
|
height: 125px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
/* Help Pages */
|
|
.page-table {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
|
|
table {
|
|
background: none;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
}
|
|
|
|
th {
|
|
color: @color-subtle;
|
|
}
|
|
|
|
td {
|
|
color: @color-base;
|
|
border-top: @border-subtle;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
margin: 0;
|
|
padding: 5px;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.section-help {
|
|
.page-table {
|
|
.cell {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.cell-syntax {
|
|
font-family: monospace, 'Courier';
|
|
}
|
|
|
|
.cell-syntax,
|
|
.cell-result {
|
|
width: 40%;
|
|
}
|
|
|
|
.cell-description {
|
|
width: 20%;
|
|
}
|
|
|
|
/* T33649 */
|
|
.table-link {
|
|
.cell-syntax,
|
|
span.pre-wrap {
|
|
white-space: pre;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cell-result {
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5 {
|
|
margin-bottom: 0;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Characters Pages */
|
|
.page-characters {
|
|
padding-bottom: 5px;
|
|
|
|
div {
|
|
span {
|
|
border: @border-subtle;
|
|
padding: 5px 8px;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
height: 1em;
|
|
display: inline-block;
|
|
color: @color-base;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
font-family: monospace, 'Courier';
|
|
font-size: 1.25em;
|
|
line-height: 1;
|
|
|
|
&:hover {
|
|
background-color: @background-color-base;
|
|
text-decoration: none;
|
|
border-color: @border-color-interactive;
|
|
}
|
|
}
|
|
|
|
.wikiEditor-character-highlighted {
|
|
background-color: #7db1c5;
|
|
color: @color-base;
|
|
}
|
|
}
|
|
|
|
div[ dir='rtl' ] span {
|
|
/* @noflip */
|
|
direction: rtl;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tool-button {
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
vertical-align: middle;
|
|
width: 24px;
|
|
height: 24px;
|
|
text-indent: -9999px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* OOUI buttons */
|
|
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement {
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-widget {
|
|
table {
|
|
td.wikieditor-toolbar-table-preview-wrapper {
|
|
background: @background-color-neutral;
|
|
padding: 10px;
|
|
|
|
span {
|
|
padding: 4px 6px 0;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.wikieditor-toolbar-table-preview-frame {
|
|
width: 340px;
|
|
background: @background-color-base;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.wikieditor-toolbar-table-preview-content {
|
|
width: 375px;
|
|
display: block;
|
|
}
|
|
|
|
.wikieditor-toolbar-table-preview {
|
|
width: 340px;
|
|
}
|
|
}
|
|
}
|