mediawiki-skins-Citizen/resources/skins.citizen.styles/Pagetools.less
alistair3149 4beb15e43d
feat: update layout in different breakpoints (#227)
* feat: update layout in different breakpoints

* ci: lint code to MediaWiki standards

Check commit and GitHub actions for more details

* feat: remove negative margin for namespace and catlinks

* ci: lint code to MediaWiki standards

Check commit and GitHub actions for more details

Co-authored-by: github-actions <github-actions@users.noreply.github.com>
2021-01-18 15:18:39 -05:00

116 lines
1.7 KiB
Plaintext

#page-tools {
display: flex;
margin-left: 10px;
float: right;
ul {
display: flex;
margin: 0;
list-style: none;
}
li {
margin: 0;
}
}
#p-views {
li > a {
.resource-loader-icon-link;
padding: 5px;
font-size: 0;
opacity: var( --opacity-icon-base );
transition: @transition-opacity-quick;
&:hover {
opacity: var( --opacity-icon-base--hover );
}
&:active {
opacity: var( --opacity-icon-base--active );
}
&:after {
.resource-loader-icon;
}
span {
.mixin-screen-reader-text;
}
}
}
#p-actions {
.resource-loader-icon-link;
padding: 5px;
cursor: pointer;
// transition: @transition-opacity-quick; - Hidden behind the menu anyways
// TODO: Need to make value more flexible
ul {
position: absolute;
z-index: -1;
right: @padding-page / 2;
opacity: 0;
pointer-events: none;
transition: @transition-opacity-quick, @transition-box-shadow-quick;
.menu-container;
.boxshadow(4);
a {
.menu-item-link;
justify-content: space-between;
padding: @padding-menu-item;
font-size: @ui-menu-text;
&:after {
.resource-loader-list-icon;
margin-left: @icon-padding;
opacity: var( --opacity-icon-base );
}
&:hover {
.menu-item-link-hover;
&:after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
.menu-item-link-active;
&:after {
opacity: var( --opacity-icon-base--active );
}
}
}
}
&:before {
.resource-loader-menu-icon;
opacity: var( --opacity-icon-base );
}
&:hover ul {
z-index: 5;
opacity: 1;
pointer-events: auto;
}
}
.skin-citizen-dark {
#p-actions {
&:before {
filter: invert( 1 );
}
}
#p-views,
#p-actions {
li > a:after {
filter: invert( 1 );
}
}
}