Files
luxtools-template/css/design.less
2026-03-12 17:22:10 +01:00

492 lines
9.2 KiB
Plaintext
Executable File

/**
* This file provides the main design styles for the
* bits that surround the content.
*
* @author Anika Henke <anika@selfthinker.org>
* @author Andreas Gohr <andi@splitbrain.org>
* @author Clarence Lee <clarencedglee@gmail.com>
*/
.dokuwiki.export {
background-color: @ini_background;
}
/* header
********************************************************************/
#dokuwiki__header {
padding: 0;
border-bottom: 1px solid @ini_border;
margin-bottom: .35em;
.pad {
padding-top: 0;
padding-bottom: 0;
}
.header__bar {
height: 34px;
align-items: center;
}
.headings {
display: flex;
align-items: center;
gap: 1em;
overflow: hidden;
}
.logo {
margin: 0;
font-size: 1em;
font-weight: normal;
line-height: 1;
flex: 0 0 auto;
a {
display: inline-flex;
align-items: center;
gap: .5em;
text-decoration: none;
color: @ini_text;
background-color: inherit;
white-space: nowrap;
}
img {
display: block;
height: 1.5em;
width: auto;
}
.logo__image {
display: inline-flex;
align-items: center;
justify-content: center;
height: 1.5em;
width: 1.5em;
color: @ini_theme_color;
svg {
display: block;
width: 100%;
height: 100%;
}
}
span {
display: block;
}
}
/* make all links in header (including breadcrumb and interwiki) same colour as the rest */
a {
color: @ini_link;
background-color: inherit;
}
}
[dir=rtl] #dokuwiki__header .logo img {
margin-left: 0;
margin-right: 0;
}
[dir=rtl] #dokuwiki__header .logo .logo__image {
margin-left: 0;
margin-right: 0;
}
/* tools
********************************************************************/
/* highlight selected tool */
.mode_admin .action.admin a,
.mode_login .action.login a,
.mode_register .action.register a,
.mode_profile .action.profile a,
.mode_recent .action.recent a,
.mode_index .action.index a,
.mode_media .action.media a,
.mode_revisions .action.revs a,
.mode_backlink .action.backlink a,
.mode_subscribe .action.subscribe a {
font-weight: bold;
}
#dokuwiki__header .tools {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .5em;
min-width: 0;
ul {
padding-left: 0;
margin: 0;
}
form.search div.ajax_qsearch li {
font-size: 1em;
margin-left: 0;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
}
[dir=rtl] #dokuwiki__header .tools {
justify-content: flex-start;
}
#dokuwiki__header .mobileTools {
display: none; /* hide mobile tools dropdown to only show in mobile view */
}
/*____________ site tools ____________*/
#dokuwiki__sitetools {
text-align: right;
position: relative;
white-space: nowrap;
form.search {
font-size: 0.875em;
margin: 0;
}
> form.search {
flex: 0 1 auto;
}
> form.search input {
width: 24em;
max-width: 100%;
height: 24px;
margin: 0;
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
> form.search div.ajax_qsearch {
min-width: 18em;
width: 100%;
}
}
[dir=rtl] #dokuwiki__sitetools {
text-align: left;
}
form.search {
display: block;
position: relative;
margin-bottom: 0.5em;
input {
width: 18em;
padding: .35em 22px .35em .1em;
}
button {
background: transparent no-repeat 0 0;
border-width: 0;
width: 19px;
height: 14px;
text-indent: -99999px;
margin-left: -20px;
box-shadow: none;
padding: 0;
}
}
[dir=rtl] form.search {
input {
padding: .35em .1em .35em 22px;
}
button {
background-position: 5px 0;
margin-left: 0;
margin-right: -20px;
position: relative;
}
}
/*____________ breadcrumbs ____________*/
.dokuwiki #dokuwiki__header div.breadcrumbs {
border: 0;
margin: 0;
padding: 0;
font-size: 0.875em;
clear: none;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
div {
padding: 0;
display: inline;
}
.bcsep {
font-size: 0.75em;
}
.bchead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
}
#dokuwiki__header {
.header__menu {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 24px;
margin: 0;
summary {
list-style: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border: 1px solid @ini_border;
background-color: @ini_background;
color: @ini_text;
cursor: pointer;
user-select: none;
border-radius: 2px;
box-sizing: border-box;
line-height: 1;
vertical-align: middle;
}
summary::-webkit-details-marker {
display: none;
}
summary svg {
width: 16px;
height: 16px;
display: block;
fill: @ini_icons;
}
&[open] summary,
summary:hover,
summary:focus {
border-color: @ini_link;
color: @ini_link;
}
&[open] summary svg,
summary:hover svg,
summary:focus svg {
fill: @ini_link;
}
}
.header__menu-panel {
position: absolute;
top: calc(100% + .3em);
right: 0;
min-width: 14em;
padding: .35em 0;
background-color: @ini_background;
border: 1px solid @ini_border;
box-shadow: 0 .25em .75em fade(@ini_text, 15%);
z-index: 30;
white-space: normal;
text-align: left;
}
.header__menu-list {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
list-style: none;
}
li.action a {
display: flex;
align-items: center;
gap: .5em;
padding: .35em .75em;
font-size: .875em;
color: @ini_text;
text-decoration: none;
}
li.action a:hover,
li.action a:focus {
background-color: @ini_background_alt;
color: @ini_link;
}
}
.header__menu-separator {
margin: .35em .75em;
border-top: 1px solid @ini_border;
}
}
[dir=rtl] #dokuwiki__header .header__menu-panel {
left: 0;
right: auto;
text-align: right;
}
/* sidebar
********************************************************************/
.dokuwiki .aside {
overflow: hidden;
word-wrap: break-word;
/* make sidebar more condensed */
h1 {
font-size: 1.714em;
margin-bottom: .292em;
}
h2 {
margin-bottom: .333em;
}
h3 {
margin-bottom: .444em;
}
h4 {
margin-bottom: .5em;
}
h5 {
margin-bottom: .5714em;
}
p,
ul,
ol,
dl,
pre,
table,
fieldset,
hr,
blockquote,
address {
margin-bottom: .7em;
}
ul,
ol {
padding-left: .5em;
}
li ul,
li ol {
margin-bottom: 0;
padding: 0;
}
a:link,
a:visited {
color: @ini_link;
background-color: inherit;
}
}
[dir=rtl] .dokuwiki .aside ul,
[dir=rtl] .dokuwiki .aside ol {
padding-right: .5em;
}
/* content
********************************************************************/
.dokuwiki div.page {
clear: both;
background: @ini_background;
color: inherit;
border: 1px solid @ini_border;
padding: 1.556em 2em 2em;
margin-bottom: .5em;
overflow-x: clip;
overflow-y: visible;
word-wrap: break-word;
}
.dokuwiki .docInfo {
font-size: 0.875em;
text-align: right;
overflow-wrap: break-word;
}
/* license note under edit window */
.dokuwiki div.license {
font-size: 93.75%;
}
[dir=rtl] .dokuwiki .docInfo {
text-align: left;
}
/* footer
********************************************************************/
.dokuwiki .wrapper {
margin-bottom: 1.4em;
}
#dokuwiki__footer {
margin-bottom: 1em;
text-align: center;
> .pad {
font-size: 0.875em;
}
div.license {
margin-bottom: 0.5em;
font-size: 100%;
}
div.buttons a {
img {
opacity: 0.5;
}
&:hover img,
&:active img,
&:focus img {
opacity: 1;
}
}
}
[dir=rtl] #dokuwiki__footer .license img {
margin: 0 0 0 .5em;
}