Content added Content deleted
mNo edit summary |
(adding navbutton css) |
||
(16 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.nav-button { |
.mp-nav-button { |
||
display: inline-block; |
display: inline-block; |
||
position: relative; |
position: relative; |
||
height: 3em; |
|||
height: 50px; |
|||
⚫ | |||
⚫ | |||
box-sizing: border-box; |
box-sizing: border-box; |
||
border: 1px solid var(--theme-primary-0); |
|||
background-color: rgba(47, 217, 227, 0.1); |
|||
} |
} |
||
.nav-button a { |
.mp-nav-button a { |
||
display: inline-block; |
display: inline-block; |
||
position: relative; |
position: relative; |
||
z-index: 1; |
|||
width: 100%; |
width: 100%; |
||
height: 100%; |
height: 100%; |
||
padding: |
padding: 0.6em 0 0.6em 48px; |
||
box-sizing: border-box; |
|||
} |
} |
||
.nav-button img { |
.mp-nav-button img { |
||
position: absolute; |
position: absolute; |
||
left: 15px; |
|||
top: 0.8em; |
|||
} |
} |
||
/* |
|||
.nav-button span { |
|||
* Vector skin |
|||
position: absolute; |
|||
*/ |
|||
left: 64px; |
|||
top: 12px; |
|||
/* |
|||
* Citizen skin |
|||
*/ |
|||
body.skin-citizen .mp-nav-button { |
|||
background-color: var(--color-surface-2); |
|||
⚫ | |||
border-radius: var(--border-radius--medium); |
|||
} |
|||
body.skin-citizen .mp-nav-button:hover { |
|||
background-color: var(--color-surface-3); |
|||
border: 1px solid var(--color-surface-4); |
|||
transition: 0.15s ease-in-out; |
|||
} |
|||
body.skin-citizen .mp-nav-button a { |
|||
color: var(--color-base); |
|||
} |
|||
/* |
|||
* Cosmos skin |
|||
*/ |
|||
body.skin-cosmos .mp-nav-button { |
|||
⚫ | |||
background-color: white; |
|||
} |
} |
Latest revision as of 02:33, 6 February 2023
.mp-nav-button {
display: inline-block;
position: relative;
height: 3em;
box-sizing: border-box;
border: 1px solid var(--theme-primary-0);
background-color: rgba(47, 217, 227, 0.1);
}
.mp-nav-button a {
display: inline-block;
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 0.6em 0 0.6em 48px;
box-sizing: border-box;
}
.mp-nav-button img {
position: absolute;
left: 15px;
top: 0.8em;
}
/*
* Vector skin
*/
/*
* Citizen skin
*/
body.skin-citizen .mp-nav-button {
background-color: var(--color-surface-2);
border: 1px solid var(--color-surface-3);
border-radius: var(--border-radius--medium);
}
body.skin-citizen .mp-nav-button:hover {
background-color: var(--color-surface-3);
border: 1px solid var(--color-surface-4);
transition: 0.15s ease-in-out;
}
body.skin-citizen .mp-nav-button a {
color: var(--color-base);
}
/*
* Cosmos skin
*/
body.skin-cosmos .mp-nav-button {
border-radius: 4px;
background-color: white;
}