2024-09-07 07:33:46 +10:00

3515 lines
83 KiB
Plaintext

/**
* DokuWiki Mikio Template CSS
*
* @link http://dokuwiki.org/template:mikio
* @author James Collins <james.collins@outlook.com.au>
* @license GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html)
*/
/* Vendor Prefixes */
.mikio-user-select(@value: none) {
-webkit-user-select: @value;
-moz-user-select: @value;
-ms-user-select: @value;
}
.mikio-appearance(@value: none) {
-webkit-appearance: @value;
-moz-appearance: @value;
-ms-appearance: @value;
}
.mikio-transition(@value: all 0s ease 0s) {
-webkit-transition: @value;
transition: @value;
}
.mikio-text-decoration(@value: none) {
-webkit-text-decoration: @value;
text-decoration: @value;
}
/* CSS Variables */
:root[data-theme-auto="true"] {
--display-theme-light: none !important;
--display-theme-dark: none !important;
--display-theme-auto: inline-block !important;
}
//noinspection ALL
:root[data-theme="theme-light"] {
--text: @ini_text;
--link: @ini_link;
--link-hover: @ini_link_hover;
--link-visited: @ini_link_visited;
--link-active: @ini_link_active;
--existing: @ini_existing;
--existing-hover: @ini_existing_hover;
--existing-visited: @ini_existing_visited;
--existing-active: @ini_existing_active;
--missing: @ini_missing;
--missing-hover: @ini_missing_hover;
--missing-visited: @ini_missing_visited;
--missing-active: @ini_missing_active;
--background: @ini_background;
--admin-background-color: @ini_admin_background_color;
--code-text-color: @ini_code_text_color;
--code-border-color: @ini_code_border_color;
--code-background-color: @ini_code_background_color;
--control-text-color: @ini_control_text_color;
--control-border-color: @ini_control_border_color;
--control-background-color: @ini_control_background_color;
--input-text-color: @ini_input_text_color;
--input-border-color: @ini_input_border_color;
--input-background-color: @ini_input_background_color;
--search-button-border-color: @ini_button_border_color;
--button-text-color: @ini_button_text_color;
--button-background-color: @ini_button_background_color;
--button-border-color: @ini_button_border_color;
--button-text-hover-color: @ini_button_text_hover_color;
--button-background-hover-color: @ini_button_background_hover_color;
--button-border-hover-color: @ini_button_border_hover_color;
--button-search-text-color: @ini_button_search_text_color;
--button-search-background-color: @ini_button_search_background_color;
--button-search-border-color: @ini_button_search_border_color;
--button-search-text-hover-color: @ini_button_search_text_hover_color;
--button-search-background-hover-color: @ini_button_search_background_hover_color;
--button-search-border-hover-color: @ini_button_search_border_hover_color;
--button-default-text-color: @ini_button_default_text_color;
--button-default-background-color: @ini_button_default_background_color;
--button-default-border-color: @ini_button_default_border_color;
--button-default-text-hover-color: @ini_button_default_text_hover_color;
--button-default-background-hover-color: @ini_button_default_background_hover_color;
--button-default-border-hover-color: @ini_button_default_border_hover_color;
--topheader-background-color: @ini_topheader_background_color;
--header-background-color: @ini_header_background_color;
--navbar-background-color: @ini_navbar_background_color;
--navbar-border-color: @ini_navbar_border_color;
--navbar-brand-text-color: @ini_navbar_brand_text_color;
--navbar-brand-tagline-color: @ini_navbar_brand_tagline_color;
--navbar-link-color: @ini_navbar_link_color;
--navbar-link-hover-color: @ini_navbar_link_hover_color;
--subnavbar-text-color: @ini_subnavbar_text_color;
--subnavbar-link-color: @ini_subnavbar_link_color;
--subnavbar-link-hover-color: @ini_subnavbar_link_hover_color;
--subnavbar-background-color: @ini_subnavbar_background_color;
--subnavbar-border-color: @ini_subnavbar_border_color;
--tag-background-color: @ini_tag_background_color;
--tag-text-color: @ini_tag_text_color;
--breadcrumb-background-color: @ini_breadcrumb_background_color;
--breadcrumb-text-color: @ini_breadcrumb_text_color;
--breadcrumb-link-color: @ini_breadcrumb_link_color;
--breadcrumb-link-hover-color: @ini_breadcrumb_link_hover_color;
--hero-title-color: @ini_hero_title_color;
--hero-subtitle-color: @ini_hero_subtitle_color;
--hero-background-color: @ini_hero_background_color;
--sidebar-text-color: @ini_sidebar_text_color;
--sidebar-link-color: @ini_sidebar_link_color;
--sidebar-link-hover-color: @ini_sidebar_link_hover_color;
--sidebar-background-color: @ini_sidebar_background_color;
--sidebar-border-color: @ini_sidebar_border_color;
--content-background: @ini_content_background;
--toc-background-color: @ini_toc_background_color;
--toc-border-color: @ini_toc_border_color;
--toc-link-color: @ini_toc_link_color;
--toc-link-hover-color: @ini_toc_link_hover_color;
--pagetools-color: @ini_pagetools_color;
--pagetools-hover-color: @ini_pagetools_hover_color;
--footer-text-color: @ini_footer_text_color;
--footer-link-color: @ini_footer_link_color;
--footer-link-hover-color: @ini_footer_link_hover_color;
--footer-background-color: @ini_footer_background_color;
--table-header-row-background-color: @ini_table_header_row_background_color;
--table-header-row-text-color: @ini_table_header_row_text_color;
--table-row-border-color: @ini_table_row_border_color;
--table-col-border-color: @ini_table_col_border_color;
--table-odd-row-background-color: @ini_table_odd_row_background_color;
--table-odd-row-text-color: @ini_table_odd_row_text_color;
--table-even-row-background-color: @ini_table_even_row_background_color;
--table-even-row-text-color: @ini_table_even_row_text_color;
--dropdown-color: @ini_dropdown_color;
--dropdown-hover-color: @ini_dropdown_hover_color;
--dropdown-border-color: @ini_dropdown_border_color;
--dropdown-background-color: @ini_dropdown_background_color;
--section-edit-highlight: @ini_section_edit_highlight;
--tree-background-color: @ini_tree_background_color;
--tree-border-color: @ini_tree_border_color;
--tab-color: @ini_tab_color;
--tab-background-color: @ini_tab_background_color;
--tab-border-color: @ini_tab_border_color;
--tab-hover-color: @ini_tab_hover_color;
--tab-background-hover-color: @ini_tab_background_hover_color;
--tab-border-hover-color: @ini_tab_border_hover_color;
--tab-active-color: @ini_tab_active_color;
--tab-active-background-color: @ini_tab_active_background_color;
--tab-active-border-color: @ini_tab_active_border_color;
--display-theme-light: inline-block;
--display-theme-dark: none;
--display-theme-auto: none;
.mikio-dark-only {
display: none;
}
}
:root[data-theme="theme-dark"] {
--text: @ini_darkmode_text;
--link: @ini_darkmode_link;
--link-hover: @ini_darkmode_link_hover;
--link-visited: @ini_darkmode_link_visited;
--link-active: @ini_darkmode_link_active;
--existing: @ini_darkmode_existing;
--existing-hover: @ini_darkmode_existing_hover;
--existing-visited: @ini_darkmode_existing_visited;
--existing-active: @ini_darkmode_existing_active;
--missing: @ini_darkmode_missing;
--missing-hover: @ini_darkmode_missing_hover;
--missing-visited: @ini_darkmode_missing_visited;
--missing-active: @ini_darkmode_missing_active;
--background: @ini_darkmode_background;
--admin-background-color: @ini_darkmode_admin_background_color;
--code-text-color: @ini_darkmode_code_text_color;
--code-border-color: @ini_darkmode_code_border_color;
--code-background-color: @ini_darkmode_code_background_color;
--control-text-color: @ini_darkmode_control_text_color;
--control-border-color: @ini_darkmode_control_border_color;
--control-background-color: @ini_darkmode_control_background_color;
--input-text-color: @ini_darkmode_input_text_color;
--input-border-color: @ini_darkmode_input_border_color;
--input-background-color: @ini_darkmode_input_background_color;
--search-button-border-color: @ini_darkmode_input_border_color;
--button-text-color: @ini_darkmode_button_text_color;
--button-background-color: @ini_darkmode_button_background_color;
--button-border-color: @ini_darkmode_button_border_color;
--button-text-hover-color: @ini_darkmode_button_text_hover_color;
--button-background-hover-color: @ini_darkmode_button_background_hover_color;
--button-border-hover-color: @ini_darkmode_button_border_hover_color;
--button-search-text-color: @ini_darkmode_button_search_text_color;
--button-search-background-color: @ini_darkmode_button_search_background_color;
--button-search-border-color: @ini_darkmode_button_search_border_color;
--button-search-text-hover-color: @ini_darkmode_button_search_text_hover_color;
--button-search-background-hover-color: @ini_darkmode_button_search_background_hover_color;
--button-search-border-hover-color: @ini_darkmode_button_search_border_hover_color;
--button-default-text-color: @ini_darkmode_button_default_text_color;
--button-default-background-color: @ini_darkmode_button_default_background_color;
--button-default-border-color: @ini_darkmode_button_default_border_color;
--button-default-text-hover-color: @ini_darkmode_button_default_text_hover_color;
--button-default-background-hover-color: @ini_darkmode_button_default_background_hover_color;
--button-default-border-hover-color: @ini_darkmode_button_default_border_hover_color;
--topheader-background-color: @ini_darkmode_topheader_background_color;
--header-background-color: @ini_darkmode_header_background_color;
--navbar-background-color: @ini_darkmode_navbar_background_color;
--navbar-border-color: @ini_darkmode_navbar_border_color;
--navbar-brand-text-color: @ini_darkmode_navbar_brand_text_color;
--navbar-brand-tagline-color: @ini_darkmode_navbar_brand_tagline_color;
--navbar-link-color: @ini_darkmode_navbar_link_color;
--navbar-link-hover-color: @ini_darkmode_navbar_link_hover_color;
--subnavbar-text-color: @ini_darkmode_subnavbar_text_color;
--subnavbar-link-color: @ini_darkmode_subnavbar_link_color;
--subnavbar-link-hover-color: @ini_darkmode_subnavbar_link_hover_color;
--subnavbar-background-color: @ini_darkmode_subnavbar_background_color;
--subnavbar-border-color: @ini_darkmode_subnavbar_border_color;
--tag-background-color: @ini_darkmode_tag_background_color;
--tag-text-color: @ini_darkmode_tag_text_color;
--breadcrumb-background-color: @ini_darkmode_breadcrumb_background_color;
--breadcrumb-text-color: @ini_darkmode_breadcrumb_text_color;
--breadcrumb-link-color: @ini_darkmode_breadcrumb_link_color;
--breadcrumb-link-hover-color: @ini_darkmode_breadcrumb_link_hover_color;
--hero-title-color: @ini_darkmode_hero_title_color;
--hero-subtitle-color: @ini_darkmode_hero_subtitle_color;
--hero-background-color: @ini_darkmode_hero_background_color;
--sidebar-text-color: @ini_darkmode_sidebar_text_color;
--sidebar-link-color: @ini_darkmode_sidebar_link_color;
--sidebar-link-hover-color: @ini_darkmode_sidebar_link_hover_color;
--sidebar-background-color: @ini_darkmode_sidebar_background_color;
--sidebar-border-color: @ini_darkmode_sidebar_border_color;
--content-background: @ini_darkmode_content_background;
--toc-background-color: @ini_darkmode_toc_background_color;
--toc-border-color: @ini_darkmode_toc_border_color;
--toc-link-color: @ini_darkmode_toc_link_color;
--toc-link-hover-color: @ini_darkmode_toc_link_hover_color;
--pagetools-color: @ini_darkmode_pagetools_color;
--pagetools-hover-color: @ini_darkmode_pagetools_hover_color;
--footer-text-color: @ini_darkmode_footer_text_color;
--footer-link-color: @ini_darkmode_footer_link_color;
--footer-link-hover-color: @ini_darkmode_footer_link_hover_color;
--footer-background-color: @ini_darkmode_footer_background_color;
--table-header-row-background-color: @ini_darkmode_table_header_row_background_color;
--table-header-row-text-color: @ini_darkmode_table_header_row_text_color;
--table-row-border-color: @ini_darkmode_table_row_border_color;
--table-col-border-color: @ini_darkmode_table_col_border_color;
--table-odd-row-background-color: @ini_darkmode_table_odd_row_background_color;
--table-odd-row-text-color: @ini_darkmode_table_odd_row_text_color;
--table-even-row-background-color: @ini_darkmode_table_even_row_background_color;
--table-even-row-text-color: @ini_darkmode_table_even_row_text_color;
--dropdown-color: @ini_darkmode_dropdown_color;
--dropdown-hover-color: @ini_darkmode_dropdown_hover_color;
--dropdown-border-color: @ini_darkmode_dropdown_border_color;
--dropdown-background-color: @ini_darkmode_dropdown_background_color;
--section-edit-highlight: @ini_darkmode_section_edit_highlight;
--tree-background-color: @ini_darkmode_tree_background_color;
--tree-border-color: @ini_darkmode_tree_border_color;
--tab-color: @ini_darkmode_tab_color;
--tab-background-color: @ini_darkmode_tab_background_color;
--tab-border-color: @ini_darkmode_tab_border_color;
--tab-hover-color: @ini_darkmode_tab_hover_color;
--tab-background-hover-color: @ini_darkmode_tab_background_hover_color;
--tab-border-hover-color: @ini_darkmode_tab_border_hover_color;
--tab-active-color: @ini_darkmode_tab_active_color;
--tab-active-background-color: @ini_darkmode_tab_active_background_color;
--tab-active-border-color: @ini_darkmode_tab_active_border_color;
--display-theme-light: none;
--display-theme-dark: inline-block;
--display-theme-auto: none;
.mikio-light-only {
display: none;
}
}
:root[data-theme=""] {
.mikio-dark-only {
display: none;
}
}
.mikio-sticky {
position: -webkit-sticky;
position: sticky;
}
.mikio-sidebar-sticky {
position: -webkit-sticky;
position: sticky;
top: 1rem;
}
.mikio-pre-wrap {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
}
.mikio-controls {
button,
input,
optgroup,
select,
textarea {
.mikio-control();
.mikio-input-text();
}
button,
input[type=button],
input[type=image] {
.mikio-button();
}
button#edbtn__save,
button[name="run[save]"] {
.mikio-button-submit();
}
input[type=text],
input[type=search],
input[type=password],
input[type=email] {
.mikio-appearance();
}
textarea {
margin-bottom: 1rem;
width: 100%;
word-wrap: break-word;
overflow: auto;
resize: vertical;
white-space: pre-wrap;
}
select {
.mikio-select();
}
.toolbutton {
.mikio-toolbar-button();
}
}
.mikio .dokuwiki {
.ui-dialog-content, .ui-widget-content {
fieldset {
margin: 0;
}
}
}
/* Containers */
html {
overflow-x: auto;
overflow-y: scroll;
display: block;
padding: 0;
font-size: @ini_font_size;
line-height: @ini_line_height;
}
// body.mikio {
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: @ini_font_family;
letter-spacing: -.01em;
padding: 0;
}
html,
body {
background-color: var(--background);
color: var(--text);
margin: 0;
}
#dokuwiki__site {
min-height: 100vh;
}
.mikio .site {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.mikio-container {
max-width: @ini_site_width;
margin: 0 auto;
}
.mikio-page-topheader {
padding: 0 2rem;
border-bottom: 1px solid var(--navbar-border-color);
background-color: var(--topheader-background-color);
box-sizing: border-box;
width: 100%;
z-index: 1001;
}
.mikio-page-header {
padding: 0 2rem;
background-color: var(--header-background-color);
box-sizing: border-box;
width: 100%;
z-index: 999;
}
.mikio-sidebar-header {
border-bottom: 1px solid var(--sidebar-border-color);
}
.mikio-sidebar-footer {
border-top: 1px solid var(--sidebar-border-color);
}
.mikio-page-contentheader {}
.mikio-page-contentfooter {}
.mikio-page-footer {}
.mikio-page-bottomfooter {}
.mikio-admin {
background-color: var(--admin-background-color);
}
.mikio-small-only {
display: none;
}
.mikio {
.mikio-breadcrumbs,
.mikio-youarehere {
.mikio-container {
flex-direction: row;
}
padding: .5rem 1rem;
background-color: var(--breadcrumb-background-color);
border: 1px solid var(--breadcrumb-background-color);
border-radius: 4px;
font-size: @ini_breadcrumb_font_size;
color: var(--breadcrumb-text-color);
span.curid a,
span.curid a:visited,
span.curid a:active,
a,
a:visited,
a:active {
.mikio-text-decoration(none);
color: var(--breadcrumb-link-color);
font-weight: normal;
&:hover {
color: var(--breadcrumb-link-hover-color);
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
bdi {
margin-left: .5rem;
margin-right: .5rem;
// vertical-align: text-bottom;
}
// li.sep {
// margin-right: .5rem;
// }
li,
span.bchead {
display: inline-block;
// vertical-align: text-bottom;
// margin-right: .5rem;
}
svg {
width: .9rem;
height: .9rem;
}
}
}
.mikio-navbar {
position: relative;
padding: .5rem 1rem .5rem 2rem;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: var(--navbar-border-color);
background-color: var(--navbar-background-color);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
z-index: 1000;
.mikio-container {
display: flex;
flex: 1;
align-items: center;
}
.mikio-navbar-brand {
display: flex;
.mikio-navbar-brand-image {
max-width: 3rem;
max-height: 3rem;
margin-right: .5rem;
}
.mikio-navbar-brand-title {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
}
.mikio-navbar-brand-title-text {
color: var(--navbar-brand-text-color);
margin: 0;
font-weight: 500;
font-size: 1.2rem;
}
.mikio-navbar-brand-title-tagline {
margin: 0;
color: var(--navbar-brand-tagline-color);
}
}
.mikio-navbar-toggle {
display: none;
font-size: 1rem;
position: absolute;
top: 1.2rem;
right: 1.2rem;
width: 1rem;
height: 1rem;
padding: 0;
cursor: pointer;
transition: transform .15s ease-in-out;
vertical-align: middle;
border: 0 none;
background: transparent;
&:before,
&:after {
content: "";
}
&:before,
.icon,
&:after {
display: block;
width: 100%;
height: 0.2em;
margin: 0 0 0.2em;
transition: transform .15s ease-in-out;
border-radius: 0.05em;
background: var(--control-text-color);
}
&.open {
.icon {
transform: scale(0);
}
&:before {
transform: translateY(0.4em) rotate(135deg);
}
&:after {
transform: translateY(-0.4em) rotate(-135deg);
}
}
}
.mikio-navbar-collapse {
display: flex;
flex: 1;
align-items: center;
justify-content: @ini_navbar_content_justify;
}
a,
a:visited,
a:active {
.mikio-text-decoration(none);
color: var(--navbar-link-color);
transition: all .15s ease-in-out;
&:hover {
color: var(--navbar-link-hover-color);
}
}
.mikio-nav-dropdown a,
.mikio-nav-dropdown a:visited,
.mikio-nav-dropdown a:active {
&:after {
border-color: var(--navbar-link-color) !important;
}
&:hover:after {
border-color: var(--navbar-link-hover-color) !important;
}
}
.mikio-nav-item {
display: flex;
flex: 1;
justify-content: flex-end;
#dw__search {
flex: 1;
justify-content: flex-end;
label, div {
white-space: nowrap;
}
.no {
flex: 0 1 @ini_navbar_search_max_width;
}
}
}
.mikio-search {
margin: 0 .5rem;
}
.mikio-button,
.mikio-button:visited,
.mikio-button:active {
background-color: transparent;
border-color: transparent;
&:hover:not(:disabled) {
background-color: transparent;
border-color: transparent;
color: var(--navbar-link-hover-color);
}
}
}
.mikio-navbar.mikio-sub-navbar {
color: var(--subnavbar-text-color);
justify-content: @ini_subnavbar_content_justify;
padding: .75rem 1rem;
border-color: var(--subnavbar-border-color);
background-color: var(--subnavbar-background-color);
z-index: 999;
ul,
ol,
p {
list-style: none;
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
li {
display: inline-block;
padding: 0 .2rem;
margin: 0 .5rem;
}
a,
a:visited,
a:active {
color: var(--subnavbar-link-color);
&:hover {
color: var(--subnavbar-link-hover-color);
}
}
}
.mikio-hero {
background-color: var(--hero-background-color);
.mikio-container {
display: flex;
flex: 1;
}
.mikio-hero-text {
flex: 1;
min-height: 5rem;
padding: 2rem;
.mikio-breadcrumbs,
.mikio-youarehere {
background-color: transparent;
border-color: transparent;
padding: 0;
margin: 0;
}
h1 {
margin: .75rem 0 1rem 0;
color: var(--hero-title-color);
line-height: 1.2
}
h2 {
margin: 0;
font-weight: normal;
font-size: 1.25rem;
color: var(--hero-subtitle-color);
}
}
.mikio-hero-image {
display: flex;
flex: 0 0 33%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
align-items: flex-end;
}
.mikio-hero-image-resize {
height: 15rem;
}
}
.mikio .mikio-tags {
display: block;
width: 100%;
text-align: right;
padding-right: .5rem;
margin-bottom: .5rem;
a,
a:visited,
a:active {
margin: 0 .25rem;
font-size: 80%;
padding: .25rem .75rem;
border: 1px solid var(--tag-background-color);
border-radius: 1rem;
background-color: var(--tag-background-color);
color: var(--tag-text-color) !important;
.mikio-text-decoration(none);
transition: all .15s ease-in-out;
&:hover {
background-color: transparent;
color: var(--tag-background-color) !important;
}
}
}
.mikio-sidebar {
width: @ini_sidebar_width;
flex-shrink: 0;
background-color: var(--sidebar-background-color);
padding: 1rem;
font-size: @ini_sidebar_font_size;
color: var(--sidebar-text-color);
&.mikio-sidebar-left {
border-left-width: 0;
border-right: 1px solid var(--sidebar-border-color);
z-index: 1001;
}
&.mikio-sidebar-right {
border-left: 1px solid var(--sidebar-border-color);
border-right-width: 0;
}
.mikio-sidebar-toggle {
display: none;
margin: 0 1rem;
.mikio-text-decoration(none);
text-align: center;
color: rgba(0, 0, 0, 0.6);
.icon {
&:before,
&:after {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.1em;
margin: 0 0 0.2em;
transition: transform .15s ease-in-out;
border-radius: 0.05em;
background: rgba(0, 0, 0, 0.6);
}
&:before {
transform: translateX(0.1rem) translateY(0) rotate(-135deg);
}
&:after {
transform: translateX(-0.1rem) translateY(0) rotate(135deg);
}
}
.open .icon {
&:before {
transform: translateX(0.1rem) rotate(135deg);
}
&:after {
transform: translateX(-0.1rem) rotate(-135deg);
}
}
}
.mikio-sidebar-toggle.closed+.mikio-sidebar-collapse {
display: block;
}
.mikio-user-info {
margin-bottom: 1rem;
margin: 0 -1rem;
padding: 0 1rem 1rem 1rem;
border-bottom: 1px solid var(--sidebar-border-color);
}
.mikio-search {
margin: 1rem 0 1rem 0;
}
.mikio-sidebar-content {
overflow-wrap: break-word;
margin-bottom: 1rem;
a,
a:visited,
a:active {
display: block;
margin: 1rem 0;
color: var(--sidebar-link-color);
.mikio-text-decoration(none);
&:hover {
color: var(--sidebar-link-hover-color);
}
}
ul,
ul.idx {
margin: 0;
padding: 0;
ul {
padding-left: 1rem;
}
li,
li.closed,
li.open {
list-style: none;
}
}
}
.mikio-tags {
margin: 0 0 1rem 0;
text-align: center;
a {
display: inline-block;
margin: 0 .25rem .25rem .25rem;
}
}
}
.mikio-page {
.mikio-container {
display: flex;
// flex: 1;
padding: 0;
}
a {
color: var(--link);
transition: all .15s ease-in-out;
&.wikilink1 {
color: var(--existing);
&:hover {
color: var(--existing-hover);
}
&:visited {
color: var(--existing-visited);
&:hover {
color: var(--existing-hover);
}
}
&:active {
color: var(--existing-active);
}
}
&.wikilink2 {
color: var(--missing);
&:hover {
color: var(--missing-hover);
}
&:visited {
color: var(--missing-visited);
&:hover {
color: var(--missing-hover);
}
}
&:active {
color: var(--missing-active);
}
}
&:hover {
color: var(--link-hover);
}
&:visited {
color: var(--link-visited);
&:hover {
color: var(--link-hover);
}
}
&:active {
color: var(--link-active);
}
}
}
.mikio-page-fill {
display: flex;
flex: 1;
}
.mikio .mikio-content .mikio-article {
margin: 0 auto;
ul,
ul.idx {
// padding-left: 1rem;
}
&.toc-full {
display: flex;
.mikio-toc {
margin-top: 1rem;
order: 2;
position: sticky;
position: -webkit-sticky;
top: 1rem;
align-self: flex-start;
overflow: scroll;
max-height: 95vh;
scroll-behavior: smooth;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.mikio-article-content {
flex: 1;
}
}
}
.mikio-content {
box-sizing: border-box;
width: 100%;
max-width: 100%;
background-color: var(--content-background);
padding: .5rem 2rem;
.mikio-article-content {
position: relative;
}
}
.mikio .dokuwiki div.preview {
background-color: var(--content-background);
padding: 1rem 2rem;
}
.mikio-footer {
padding: 2rem;
color: var(--footer-text-color);
background-color: var(--footer-background-color);
font-size: @ini_footer_font_size;
text-align: @ini_footer_text_align;
a,
a:visited,
a:active {
color: var(--footer-link-color);
&:hover {
color: var(--footer-link-hover-color);
}
}
.dw__pagetools {
margin-top: 1rem;
.tools {
list-style-type: none;
li {
display: inline-block;
margin: 0 .5rem;
}
a,
a:visited,
a:active {
// margin: 0 .5rem;
svg {
fill: var(--footer-link-color);
}
&:hover {
svg {
fill: var(--footer-link-hover-color);
}
}
}
}
}
.mikio-nav {
margin-top: 1rem;
}
.mikio-footer-search {
margin-top: .5rem;
display: inline-block;
}
.license {
margin-top: .5rem;
img {
vertical-align: middle;
margin: 0 1rem;
}
}
}
.mikio .site>div.no {
display: none;
}
/* Page Elements */
.mikio-control {
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: 400;
// line-height: inherit;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-radius: .25rem;
box-sizing: border-box;
vertical-align: middle;
padding: .375rem .75rem;
color: var(--control-text-color);
background-color: var(--control-background-color);
&[type=color] {
padding: 0;
}
}
.mikio-button,
.mikio-button:visited,
.mikio-button:active {
display: inline-block;
text-align: center;
color: var(--button-text-color);
background-color: var(--button-background-color);
border-color: var(--button-border-color);
line-height: 1.5;
.mikio-text-decoration(none);
text-transform: capitalize;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
&:hover:not(:disabled) {
.mikio-text-decoration(none);
color: var(--button-text-hover-color);
background-color: var(--button-background-hover-color);
border-color: var(--button-border-hover-color);
}
&:disabled {
opacity: .65;
}
}
.mikio-button-small {
padding: .1rem .75rem;
font-size: 80% !important;
min-width: 3rem;
}
.mikio-button-submit,
.mikio-button-submit:visited,
.mikio-button-submit:active {
color: var(--button-default-text-color);
background-color: var(--button-default-background-color);
border-color: var(--button-default-border-color);
&:hover {
color: var(--button-default-text-hover-color);
background-color: var(--button-default-background-hover-color);
border-color: var(--button-default-border-hover-color);
}
}
.mikio-button-danger,
.mikio-button-danger:visited,
.mikio-button-danger:active {
color: #fff;
border-color: #dc3545;
background-color: #dc3545;
&:hover {
color: #fff;
background-color: #c03040;
border-color: #c03040;
}
}
.mikio-input-text {
color: var(--input-text-color);
border-color: var(--input-border-color);
background-color: var(--input-background-color);
line-height: inherit;
}
.mikio-select {
.mikio-user-select();
height: 2.25rem;
}
.mikio-toolbar-button {
border-radius: 0;
border-right-width: 0;
border-color: var(--input-border-color);
&:first-of-type {
border-radius: .25rem 0 0 .25rem;
}
&:last-of-type {
border-radius: 0 .25rem .25rem 0;
border-right-width: 1px;
}
}
.mikio-dialog {
.mikio-article {
max-width: 40rem;
}
fieldset {
legend {
font-size: 1.75rem;
font-weight: 400;
}
label.block input.edit,
select {
width: 100%;
}
label {
text-align: left;
font-weight: normal;
display: block;
}
label.simple {
text-align: center;
}
label.block {
position: relative;
}
label.block span {
position: absolute;
padding: .4rem .9rem;
color: rgba(0, 0, 0, 0.3);
}
button {
display: block;
width: 100%;
&[type=submit] {
.mikio-button-submit();
}
}
input[type=checkbox] {
vertical-align: middle;
}
}
}
.mikio .mikio-navbar .mikio-search,
.mikio .mikio-sidebar .mikio-search,
.mikio .mikio-footer .mikio-search,
.mikio .mikio-search {
display: flex;
gap: 0.5rem;
div {
display: flex;
}
input {
width: 100%;
flex: 1 1 auto;
border-radius: .25rem 0 0 .25rem;
}
button {
color: var(--button-search-text-color);
background-color: var(--button-search-background-color);
border-radius: 0 .25rem .25rem 0;
border-color: var(--button-search-border-color);
&:hover {
color: var(--button-search-text-hover-color);
background-color: var(--button-search-background--hover-color);
border-color: var(--button-search-border-hover-color);
}
}
.mikio-iicon {
margin: 0 -4px 0 -4px;
}
}
#dw__pagetools {
.mikio-sticky();
top: 0;
align-self: flex-start;
padding: 3rem .5rem 0 .5rem;
ul {
list-style: none;
padding: 0;
margin: 0;
}
a,
a:visited,
a:active {
display: block;
svg {
fill: var(--pagetools-color);
}
&:hover {
svg {
fill: var(--pagetools-hover-color);
}
}
}
}
.toolbar.group {
margin-bottom: .5rem;
}
#wiki__editbar {
overflow: hidden;
margin-bottom: .5em;
#size__ctl {
float: right;
}
.editButtons {
display: inline;
margin-right: 1rem;
button {
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
}
.summary {
display: inline;
}
}
.mode_admin .mikio-toc {
background-color: var(--admin-background-color);
#dw__toc {
background-color: var(--toc-background-color);
}
}
.mikio .mode_admin .mikio-toc #dw__toc {
background-color: var(--toc-background-color);
}
.mikio .mikio-toc {
position: relative;
z-index: 2;
float: right;
padding-left: 1rem;
padding-bottom: 1rem;
// background-color: var(--content-background);
margin-top: 1rem;
#dw__toc {
color: var(--toc-link-color);
background-color: var(--toc-background-color);
border: 1px solid var(--toc-border-color);
border-radius: .25rem;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
padding: .5rem;
max-width: 12rem;
float: none;
width: auto;
margin: 0;
// background-color: transparent;
ul {
padding-left: 0;
margin: 0;
list-style-type: none;
ul {
padding-left: .5rem;
}
}
&>div {
padding: .2em .5em;
}
}
h3.toggle {
margin: 0;
padding-right: 2rem;
font-size: @ini_toc_font_size;
position: relative;
height: 1rem;
white-space: nowrap;
.hamburger {
width: 1rem;
height: 1rem;
}
.down-arrow {
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
// border: 1px solid red;
background-color: var(--toc-background-color);
}
&.open {
.hamburger {
display: none;
}
}
&.closed {
font-size: 0;
// height: 1rem;
width: 2rem;
padding-right: 0;
.down-arrow {
right: -4px;
}
}
span {
display: none;
}
}
a,
a:visited,
a:active {
display: block;
font-size: @ini_toc_font_size;
color: var(--toc-link-color);
.mikio-text-decoration(none);
padding: .2rem 0;
&:hover {
color: var(--toc-link-hover-color);
}
}
}
.mikio-icon {
margin-right: .25rem;
svg {
vertical-align: middle;
fill: currentColor;
}
}
.mikio-iicon {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
background-size: 1.2rem;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: .25rem;
fill: currentColor;
}
.mikio .mode_show table,
.mikio .dokuwiki .mode_showtag table.ul,
.mikio .mode_admin table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1rem;
font-size: @ini_table_font_size;
border-bottom: 1px solid var(--table-row-border-color);
tr {
border-top: 1px solid var(--table-row-border-color);
}
td,
th {
padding: @ini_table_vertical_padding @ini_table_horizontal_padding;
text-align: left;
border-left: 1px solid var(--table-col-border-color);
border-right: 1px solid var(--table-col-border-color);
&.centeralign {
text-align: center;
}
&.rightalign {
text-align: right;
}
}
thead tr {
background-color: var(--table-header-row-background-color);
color: var(--table-header-row-text-color);
}
tbody tr {
&:nth-child(odd) {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
}
&:nth-child(even) {
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
}
}
.mikio-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
.mikio-nav-item,
.mikio-nav-dropdown,
> button, > span {
display: inline-block;
padding: .5rem .2rem;
margin: 0 .5rem;
font-size: 1rem;
}
> button {
border-width: 0;
svg {
width: 1.2rem;
height: 1.2rem;
}
}
> button, > span {
&.plugin__do_usertasks {
position: relative;
border-bottom: 0 !important;
svg {
margin-top: 0.4rem;
width: 1.3rem;
height: 1.3rem;
}
.num {
position: absolute;
line-height: normal;
top: 0.3rem;
right: -0.4rem;
padding: .1rem .25rem;
font-size: 70%;
border-radius: 50%;
background-color: var(--navbar-link-color);
color: var(--navbar-background-color);
}
}
}
.mikio-nav-link {}
.mikio-nav-dropdown {
position: relative;
}
.mikio-nav-dropdown>a {
display: inline-block;
padding: .2rem 1.2rem .2rem 0;
position: relative;
&::after {
position: absolute;
content: '';
top: 10px;
right: 6px;
width: 6px;
height: 6px;
border-left: 2px solid var(--text);
border-bottom: 2px solid var(--text);
transform: rotateZ(-45deg);
}
}
a {
.mikio-text-decoration(none);
}
}
.mikio-dropdown {
display: block;
position: absolute;
z-index: 10000;
min-width: 12rem;
right: 0;
padding: 1rem 1.5rem;
border: 1px solid var(--dropdown-border-color);
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
background-color: var(--dropdown-background-color);
color: var(--dropdown-color);
&.closed {
display: none;
}
.mikio-dropdown-item {
display: flex;
align-items: center;
margin-top: .5rem;
margin-bottom: .5rem;
}
.mikio-dropdown-header {
margin: 0 0 1rem 0;
}
.mikio-dropdown-divider {
margin: 1rem -1rem;
border-bottom: 1px solid var(--dropdown-border-color);
}
.mikio-nav-link,
.mikio-nav-link:visited,
.mikio-nav-link.active {
margin: 0rem -1rem 0rem -1rem;
padding: .25rem 1rem .25rem 1rem;
transition: all .15s ease-in-out;
color: var(--dropdown-color);
&:hover {
color: var(--dropdown-color);
background-color: var(--dropdown-hover-color);
}
}
}
.typeahead.mikio-dropdown {
flex-direction: column;
a.mikio-dropdown-item {
display: inline;
}
.mikio-dropdown-header {
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
// color: #999999;
color: var(--dropdown-color);
}
.mikio-dropdown-divider {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}
.mikio-tabs {
padding: 0;
margin-top: 1rem;
margin-bottom: -1px;
list-style-type: none;
li {
float: none;
display: inline-block;
font-size: 1rem;
line-height: 1.4rem;
position: relative;
z-index: 2;
strong {
.mikio-tab-active();
}
a,
a:visited,
a:active {
display: inline-block;
padding: .5rem 1rem;
border: 1px solid var(--tab-border-color);
color: var(--tab-color);
.mikio-text-decoration(none);
margin: 0;
background-color: var(--tab-background-color);
&:hover {
color: var(--tab-hover-color);
border-color: var(--tab-border-hover-color) var(--tab-border-hover-color) transparent var(--tab-border-hover-color);
border-radius: .5rem .5rem 0 0;
background-color: var(--tab-background-hover-color);
}
}
}
&:after {
border-bottom: 0;
}
}
.mikio-tab-active {
display: inline-block;
background-color: var(--tab-active-background-color);
font-weight: normal;
color: var(--tab-active-color);
border-color: var(--tab-active-border-color) var(--tab-active-border-color) var(--tab-active-background-color);
border-radius: .5rem .5rem 0 0;
border-width: 1px;
border-style: solid;
padding: .5rem 1rem;
margin: 0;
bottom: -1px;
// margin-bottom: -1px;
}
.mikio-tab {
background-color: var(--tab-background-color);
font-weight: normal;
color: var(--tab-color);
border-color: var(--tab-border-color) var(--tab-border-color) var(--tab-background-color);
padding: .5rem 1rem;
margin: 0;
bottom: -1px;
// margin-bottom: -1px;
}
.mikio-tab-panel {
margin-bottom: 0 !important;
background-color: var(--tab-active-background-color);
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: var(--tab-active-border-color) !important;
word-wrap: break-word;
word-break: break-word;
}
.mikio .dokuwiki div.section_highlight {
background-color: var(--section-edit-highlight);
border-width: 0;
margin: 0 -1rem;
padding: 0 1rem;
}
.mikio-input-file {
position: absolute;
margin-top: -.5rem;
top: 0;
right: 0;
left: 0;
z-index: 5;
padding: .25rem 1rem;
line-height: 1.5;
text-align: left;
color: var(--control-text-color);
background-color: var(--control-background-color);
border: .1px solid var(--input-border-color);
border-radius: .25rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
&:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 6;
display: block;
content: "Browse";
padding: .25rem 1rem;
line-height: 1.5;
color: var(--button-text-color);
background-color: var(--button-background-color);
border-radius: 0 .25rem .25rem 0;
border: 1px solid var(--button-border-color);
transition: all .15s ease-in-out;
}
&:hover:before {
background-color: var(--button-background-hover-color);
border-color: var(--button-border-hover-color);
color: var(--button-text-hover-color);
}
}
code,
pre {
overflow-x: auto;
font-family: @ini_code_font_family;
font-size: @ini_code_font_size;
color: var(--code-text-color);
background-color: var(--code-background-color);
word-wrap: @ini_code_word_wrap;
.mikio-pre-wrap();
line-height: @ini_code_line_height;
}
.mode_show {
code:not(.content_partial code),
pre {
border: 1px solid var(--code-border-color);
padding: .2em;
}
}
/* Dokuwiki Patches */
.mikio {
.mikio-search,
&.dokuwiki fieldset,
&.dokuwiki .secedit,
#config__manager tr,
.mode_revisions .mikio-page,
.mode_edit .mikio-page,
.mode_draft .mikio-page,
.mode_preview .mikio-page,
.mode_showtag .mikio-page,
.mode_admin .mikio-page {
.mikio-controls();
}
#config__manager {
tr, tr.default {
.input {
background-color: transparent;
}
}
}
.mikio-search.search button[type=submit] {
border-left-width: 0;
border-color: var(--search-button-border-color);
}
}
.mikio .dokuwiki .secedit {
float: none;
margin-top: 0;
text-align: right;
}
.mikio .dokuwiki fieldset {
margin: 2rem auto;
border: 0;
width: auto;
max-width: 40rem;
label.block {
display: flex;
flex-direction: row;
text-align: right;
span {
margin-right: 1rem;
width: 15rem;
align-self: center;
}
input {
flex-grow: 1
}
}
// span {
// display: inline-block;
// margin-right: 1rem;
// max-width: 10rem;
// }
// }
}
.mikio .dokuwiki .mode_login,
.mikio .dokuwiki .mode_denied {
.mikio-dialog();
}
.mikio .mode_admin {
input[type=text],
input[type=password],
input[type=email] {
width: 100%;
}
div.mikio-color-picker {
position: relative;
input[type=color] {
height: 35px;
border: 0;
border-radius: 0;
}
input[type=text] {
width: auto;
}
}
div.mikio-color-button {
position: absolute;
top: 4px;
right: 0;
color: #999999;
}
.mikio-page p {
button+button {
margin-left: .5rem;
}
}
div.ui-admin {
display: flex;
flex-direction: column;
#admin__version {
font-size: 80%;
}
ul.admin_tasks,
ul.admin_plugins {
float: none;
display: grid;
grid-template-columns: repeat(auto-fit, 15rem);
width: auto;
padding: 0;
margin: 0;
justify-content: center;
li {
list-style-type: none;
border: 1px solid var(--button-border-color);
border-radius: .25rem;
margin: 1rem 1rem;
background-color: var(--button-background-color);
a,
a:visited,
a:active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 4rem;
font-size: 1rem;
font-weight: normal;
padding: 1rem 2rem;
color: var(--button-text-color);
.mikio-text-decoration(none);
overflow: hidden;
transition: all .15s ease-in-out;
span.icon {
width: auto;
height: auto;
min-height: auto;
}
svg {
fill: var(--button-text-color);
}
&:hover {
.mikio-text-decoration(none);
color: var(--button-text-hover-color);
background-color: var(--button-background-hover-color);
border-color: var(--button-border-hover-color);
svg {
fill: var(--button-text-hover-color);
}
}
}
}
}
}
.mikio-config-table-header {
background-color: var(--table-header-row-background-color);
color: var(--table-header-row-text-color);
font-weight: bold;
.mikio-iicon {
vertical-align: text-bottom;
}
}
#extension__list {
ul.extensionList {
li {
border-width: 0 0 1px 0;
border-style: solid;
border-color: var(--table-row-border-color);
padding: .75rem;
margin: 0;
text-align: left;
&:nth-child(odd) {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
}
&:nth-child(even) {
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
}
}
}
button#usrmgr__del {
.mikio-button-danger();
margin-right: .5rem;
}
#acl__detail div#acl__user {
border-color: var(--toc-border-color);
}
#acl__tree {
background-color: var(--tree-background-color);
border-color: var(--tree-border-color);
color: var(--control-text-color);
// li[role=treeitem] {
// padding-left: 2rem;
// }
a.cur {
background-color: var(--section-edit-highlight);
}
}
#acl_manager table tr {
&:nth-child(odd) {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
}
&:nth-child(even) {
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
}
}
.mode_admin,
.mode_login,
.mode_denied,
.mode_revisions,
.mode_recent,
.mode_backlink,
.mode_media,
.mode_index,
.mode_search,
.mode_edit,
.mode_draft,
.mode_preview,
.mode_showtag {
.mikio-content,
.mikio-page-fill {
.mikio-admin();
}
}
.mikio #plugin__styling button.primary {
font-weight: inherit;
}
.mikio .dokuwiki .secedit {
button {
.mikio-button-small();
}
}
.mikio img {
max-width: 100%;
&.media {
margin: .2rem 0;
}
&.medialeft {
margin: .2rem 1em .2rem 0;
}
&.mediaright {
margin: .2rem 0 .2rem 1rem;
}
&.mediacenter {
margin: .2rem auto;
}
}
.mikio div.dokuwiki div.inclmeta {
margin-top: .5rem;
padding-top: .5rem;
}
.mikio #dw__login label[for=remember__me] {
margin-left: 0;
}
.mikio #config__manager {
fieldset {
color: var(--text);
background-color: transparent;
margin: 0;
padding: 0;
legend {
text-align: left;
}
}
tr {
textarea {
color: inherit;
background-color: var(--control-background-color);
}
select {
width: 100%;
background-color: var(--control-background-color);
}
}
td {
&.label {
display: grid;
grid-template-columns: auto 2rem;
span.outkey {
float: none;
font-size: 100%;
background-color: transparent;
margin: 0;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
label {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
}
img {
float: none;
grid-column: 2 / span 1;
grid-row: 1 / span 2;
align-self: center;
}
}
input.edit {
width: 100%;
}
}
button[type=submit] {
.mikio-button-submit();
}
}
.mode_revisions .mikio-article {
li {
padding: .5rem 1rem;
border-top: 1px solid var(--table-row-border-color);
background-color: var(--table-even-row-background-color);
color: (--table-even-row-text-color);
}
li:nth-child(odd) {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
}
.li {
display: grid;
grid-template-columns: 1rem 9rem 2rem auto 12rem 5rem;
align-items: center;
text-align: center;
font-size: 90%;
a.wikilink1 {
text-align: left;
}
span.sizechange {
width: 100%;
font-size: 80%;
border-radius: .2em;
padding: .1em .2em;
color: var(--control-text-color) !important;
}
}
.sum {
display: block;
}
}
.mode_recent .mikio-article {
ul {
list-style-type: none;
}
li {
padding: .5rem 1rem;
border-top: 1px solid var(--table-row-border-color);
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
li:nth-child(odd) {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
}
.li {
display: grid;
grid-template-columns: 1rem 9rem 2rem 2rem auto 6rem 10rem 4rem;
align-items: center;
text-align: center;
font-size: 90%;
a.wikilink1,
span.curid {
text-align: left;
}
span.sizechange {
width: 100%;
font-size: 80%;
border-radius: .2em;
padding: .1em .2em;
color: var(--control-text-color);
&.positive {
background-color: #cfc;
}
&.negative {
background-color: #fdd;
}
}
}
select {
.mikio-control();
.mikio-select();
}
}
.mikio #mediamanager__page,
#media__manager {
width: 100%;
min-width: 100%;
button,
.qq-upload-button,
.qq-upload-list a {
.mikio-control();
.mikio-button();
}
.qq-upload-list a.qq-upload-cancel {
.mikio-button-danger();
}
button.qq-upload-action {
.mikio-button-submit();
}
input[type=text],
input[type=search],
textarea {
.mikio-control();
.mikio-input-text
}
.ui-resizable-e {
background: transparent;
width: 6px;
right: 2px;
&:hover {
background-color: #999;
}
}
.namespaces {
width: 20%;
min-width: 10em;
left: 0 !important;
h2 {
.mikio-tab-active();
font-size: 1rem;
}
}
#media__tree {
background-color: var(--tree-background-color);
border-color: var(--tree-border-color);
ul,
ul.idx {
margin-top: 0;
margin-bottom: 0;
padding: 0;
list-style-type: none;
ul {
margin-left: 1rem;
}
li {
margin: .25rem 0;
white-space: nowrap;
img {
margin-right: .2rem;
}
}
a {
.mikio-text-decoration(none);
}
div {
display: inline-block;
}
}
}
.panelHeader {
.mikio-tab-panel();
}
.filelist {
width: 50%;
min-width: 25em;
left: 0 !important;
}
.filelist,
.qq-uploader {
.panelHeader {
.mikio-tab-panel();
h3 {
width: 100%;
}
}
form.options {
margin-top: 0;
.ui-controlgroup-horizontal label {
margin-right: 0;
}
}
.panelContent {
// padding-top: 1rem;
text-align: center;
ul li:hover {
background-color: initial;
}
}
ul {
margin: 1rem 0 -1px 0;
&.tabs {
margin-top: 0;
}
&.thumbs {
margin: 0;
li {
display: inline-block;
width: 200px;
background-color: var(--tab-active-background-color);
color: var(--tab-active-color);
dt {
text-align: center;
a {
display: block;
width: 100%;
img {
min-height: 90px;
min-width: 90px;
}
}
}
dd {
width: auto;
font-size: 80%;
// color: #666;
margin-bottom: .25rem;
margin-inline-start: 0;
}
.name {
font-weight: normal;
a {
// color: #000;
}
}
}
}
}
ul.rows {
list-style-type: none;
padding: 0;
li {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
max-height: none;
font-size: 90%;
// color: var(--text);
overflow: auto;
&:nth-child(2n+1) {
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
a {
font-weight: normal;
}
dl {
display: flex;
align-items: center;
}
dt {
display: flex;
align-items: center;
justify-content: center;
width: 10%;
a {
height: auto;
width: auto;
img {
display: block;
max-width: 40px;
max-height: 40px;
}
}
}
dd.name {
text-align: left;
width: 30%;
overflow: hidden;
text-overflow: ellipsis;
float: left;
margin-left: 1%;
white-space: nowrap;
}
dd.size {
width: 15%;
}
dd.date {
width: 20%;
}
dd.filesize {
width: 15%;
}
dd {
margin: 0;
font-size: 90%;
}
}
}
.qq-upload-list {
margin-top: 1rem;
li {
&:hover {
background-color: transparent;
}
}
}
.qq-action-container {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #dee2e6;
}
}
.file {
padding: 0;
background-color: transparent;
border-radius: 0;
.panelHeader {
.mikio-tab-panel();
a {
font-weight: normal;
color: #333;
}
}
ul {
&.tabs {
.mikio-tabs();
margin-top: 0;
}
&.actions {
li {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
}
}
#mediamanager__btn_delete button {
.mikio-button-danger();
}
dl {
font-size: 90%;
dt {
padding: .25rem .5rem;
background-color: #f0f0f0;
}
dd {
padding: .25rem .5rem;
background-color: #f8f8f8;
}
}
input[type=text],
form.meta textarea.edit {
width: 100%;
min-width: 100%;
max-width: 100%;
}
button[name="mediado[save]"] {
.mikio-button-submit();
}
}
.panel {
float: left;
}
.panelHeader {
margin: 0 10px 10px 0;
padding: 10px 10px 8px;
font-size: .9rem;
overflow: hidden;
h3 {
float: left;
font-weight: normal;
font-size: 1em;
padding: 0;
margin: 0 0 3px;
}
form.options {
float: right;
}
}
.panelContent {
background-color: var(--tab-active-background-color);
margin: 0 10px 0 0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: var(--tab-active-border-color);
padding: .5rem;
}
#media__opts {
border-bottom: 1px solid var(--tab-active-border-color);
padding-bottom: .75rem;
}
#media__content {
.odd,
.even {
border-top: 1px solid var(--table-row-border-color);
font-size: 90%;
display: grid;
grid-template-columns: 9rem auto 10rem 1.5rem 1.5rem 1.5rem;
align-items: center;
a.mediafile {
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin: 0;
word-break: break-word;
}
span.info {
grid-column: 3 / span 1;
grid-row: 1 / span 1;
text-align: center;
br {
display: inline-block;
}
}
a:nth-child(2) {
grid-column: 4 / span 1;
grid-row: 1 / span 1;
text-align: center;
}
a:nth-child(3) {
grid-column: 5 / span 1;
grid-row: 1 / span 1;
text-align: center;
}
a.btn_media_delete {
grid-column: 6 / span 1;
grid-row: 1 / span 1;
text-align: center;
}
div.example,
div.clearer,
br {
display: none;
}
div.detail {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
padding: 0;
div.thumb {
float: none;
margin: 0;
img {
max-width: 48px;
max-height: 48px;
}
}
}
}
.odd {
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
}
.even {
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
}
}
.mikio .dokuwiki .mode_search .mikio-article {
.search-results-form {
fieldset.search-form {
display: grid;
margin: 0 auto;
width: auto;
max-width: 800px;
grid-template-columns: auto 10rem 10rem;
grid-gap: 1rem;
input[name=q] {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
width: 100%;
}
button[type=submit] {
.mikio-button-submit();
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.toggleAssistant {
.mikio-button-small();
grid-column: 3 / span 1;
grid-row: 1 / span 1;
flex: 0;
}
.advancedOptions {
grid-column: 1 / span 3;
grid-row: 2 / span 1;
text-align: center;
.toggle {
position: relative;
display: inline-block;
border: 1px solid var(--dropdown-border-color);
background-color: var(--dropdown-background-color);
color: var(--dropdown-color);
border-radius: .25rem;
padding: .375rem .75rem;
text-align: left;
.current {
padding: .2rem 2.2rem .2rem .2rem;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" style="fill:inherit"><path d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"/></svg>');
background-size: 1.2rem;
background-position: right;
background-repeat: no-repeat;
&:after {
content: "";
}
}
ul {
position: absolute;
right: 0;
top: .5rem;
padding: .5rem 2rem;
border: 1px solid var(--dropdown-border-color);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
background-color: var(--dropdown-background-color);
color: #999;
list-style-type: none;
li {
margin: 0;
white-space: nowrap;
}
li.active {
padding: .2rem 0;
display: block;
}
a,
a:visited,
a:active {
transition: all 0.15s ease-in-out;
color: var(--dropdown-color);
.mikio-text-decoration(none);
font-style: normal;
display: block;
padding: .2rem 2rem;
margin: 0 -2rem;
&:hover {
background-color: var(--dropdown-hover-color);
}
}
}
ul[aria-expanded="false"] {
display: none;
}
}
.toggle+.toggle {
margin-left: 1rem;
}
}
}
}
h2 {
margin-top: .5rem;
padding-top: 1rem;
border-top: 1px solid #dee2e6;
}
.search_quickresult ul {
background-color: #fff;
padding: .5rem 1rem;
list-style-type: none;
li {
float: none;
text-align: left;
padding-left: 0;
&:before {
font-size: 1.2rem;
content: '\2022';
margin-right: 0.5em;
}
.li {
display: inline-block;
}
}
}
div.search_quickresult ul li {
width: auto;
}
.search_fullpage_result {
border-top: 1px solid var(--table-row-border-color);
padding: .75rem;
background-color: var(--table-odd-row-background-color);
color: var(--table-odd-row-text-color);
&:nth-child(2n+1) {
background-color: var(--table-even-row-background-color);
color: var(--table-even-row-text-color);
}
.snippet {
font-size: 90%;
margin-bottom: 0;
}
}
}
#index__tree {
background-color: var(--tree-background-color);
border: 1px solid var(--tree-border-color);
padding: 0 1rem;
ul {
padding-left: 1rem;
}
a {
// color: var(--text);
.mikio-text-decoration(none);
}
.curid a {
color: var(--section-edit-highlight);
}
}
.mikio .dokuwiki ul.tabs {
.mikio-tabs();
}
.mikio .mode_draft {
table {
margin-bottom: 1rem;
}
}
#dokuwiki__detail {
.mikio-admin();
height: 100vh;
padding: 0 2rem;
.content {
display: flex;
.img_detail dl {
display: grid;
grid-template-columns: 4rem auto;
align-items: center;
dt {
font-weight: bold;
}
}
}
}
.mikio {
div.insitu-footnote {
padding: @ini_footnote_popup_vertical_padding @ini_footnote_popup_horizontal_padding;
border: 1px solid @ini_footnote_popup_border_color;
border-radius: 0.25em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
font-size: @ini_footnote_popup_font_size;
color: @ini_footnote_popup_text_color;
background-color: @ini_footnote_popup_background_color
}
.dokuwiki div.footnotes {
font-size: @ini_footnote_popup_font_size;
div.fn sup a.fn_bot {
font-weight: normal;
}
}
}
/* Plugin Patches */
/* FastWiki Plugin Patch - .mikio .content_partial */
.mikio .content_partial {
.mikio-controls();
}
/* Discussion Plugin Patch - .mikio .content_partial */
.mikio div.dokuwiki div.comment_wrapper {
.mikio-controls();
padding: 1em;
input[type=submit] {
.mikio-control();
.mikio-button();
}
h2 {
margin: 0;
}
.comment_form {
margin-top: 0;
}
.comment_subscribe {
input {
float: none;
}
label {
float: none;
display: inline-block;
}
}
.comment_buttons {
float: none;
text-align: right;
margin-top: 1em;
}
}
/* VersionSwitch */
.mikio ul.plugin_versionswitch {
background-color: var(--control-background-color);
border-radius: .25rem;
margin-bottom: 1rem;
li {
a {
color: var(--control-text-color) !important;
margin: 0;
padding: .375rem .75rem;
&:hover {
color: var(--dropdown-color);
background-color: var(--dropdown-hover-color);
}
}
}
}
/* Approve */
.mikio #plugin__approve {
font-size: 80%;
}
/* Do */
.plugin__do_usertasks_list {
font-size: 80%;
z-index: 20;
}
/* Mobile */
@media (max-width: 768px) {
.mikio-small-only {
display: inline-block;
}
.mikio-navbar {
padding-bottom: 0;
.mikio-container {
display: grid;
grid-template-columns: auto 3rem;
}
.mikio-navbar-brand {
grid-column: 1 / span 1;
grid-row: 1 / span 1;
margin-bottom: .5rem;
}
.mikio-navbar-toggle {
display: block;
margin-bottom: .5rem;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
}
.mikio-navbar-toggle.closed+.mikio-navbar-collapse {
display: none;
}
.mikio-navbar-collapse {
grid-column: 1 / span 2;
grid-row: 2 / span 1;
flex-direction: column;
margin: 0 -2rem;
padding-top: .5rem;
padding-right: 1rem;
padding-bottom: .5rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.mikio-nav-item {
display: block;
width: 100%;
padding: .5rem 2rem;
box-sizing: border-box;
text-align: center;
}
.mikio-dropdown-item {
justify-content: center;
}
.mikio-nav {
width: 100%;
flex-direction: column;
}
.mikio-nav-dropdown {
width: 100%;
text-align: center;
margin: 0;
box-sizing: border-box;
}
.mikio-nav-dropdown .mikio-dropdown {
position: relative;
border: 0;
box-shadow: none;
}
}
.mikio-hero {
.mikio-container {
flex-direction: column;
}
.mikio-hero-image-resize {
height: auto;
}
.mikio-hero-image {
background-image: none !important;
}
}
.mode_show .mikio-page .mikio-container {
display: grid;
grid-template-columns: auto 2.5rem;
}
.mode_revisions,
.mode_edit,
.mode_login,
.mode_denied,
.mode_draft,
.mode_preview,
.mode_showtag,
.mode_admin {
.mikio-page {
grid-template-columns: auto;
}
}
.mikio #config__manager td .input,
.mikio #config__manager td input.edit,
.mikio #config__manager tr select {
width: auto;
}
.mikio-content {
grid-column: 1 / span 1;
grid-row: 2 / span 1;
padding-bottom: 1rem;
// padding-right: 0;
// width: auto;
}
/* TOC */
.mikio .mikio-content .mikio-article {
&.toc-full {
display: block;
}
.mikio-toc {
float: none;
#dw__toc {
max-width: none;
.mikio-iicon.hamburger {
display: none;
}
}
h3.toggle {
background-position: 99% 50%;
text-align: center;
&.closed {
font-size: @ini_toc_font_size;
width: auto;
&:before {
display: none;
}
}
}
}
}
/* Sidebar */
.mikio-sidebar {
grid-column: 1 / span 2;
width: auto;
.mikio-sidebar-toggle.closed+.mikio-sidebar-collapse {
display: none;
}
&.mikio-sidebar-left {
grid-row: 1 / span 1;
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
&.mikio-sidebar-right {
grid-row: 3 / span 1;
border-left: 0;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.mikio-sidebar-toggle {
display: block;
}
}
/* Page Tools */
#dw__pagetools {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
.mikio .dokuwiki div.ui-admin #admin__version {
padding-right: 1rem;
}
.mikio-page-fill {
.mikio-sidebar {
display: none;
}
}
/* Media Manager */
.mikio #mediamanager__page,
#media__manager {
display: flex;
flex-direction: column;
.ui-resizable-e {
display: none !important;
}
.namespaces,
.filelist {
width: auto;
min-width: auto;
}
.panelHeader,
.panelContent {
margin-right: 0;
}
}
}
@media print {
.mikio {
.mikio-navbar-collapse,
.mikio-toc,
.mikio-sidebar,
#dw__pagetools,
.mikio-search {
display: none !important;
}
.mikio-navbar {
box-shadow: none !important;
}
.mikio-hero {
.mikio-hero-text {
min-height: auto;
padding-bottom: 0;
}
}
.mikio-breadcrumbs,
.mikio-youarehere,
.mikio-hero,
.mikio-footer {
background-color: #fff !important;
}
}
}
/* Plugin Patches */
/* BookCreator */
.mikio .bookcreator__bookbar {
font-size: 0.8rem;
display: flex;
width: auto !important;
}
/* Indexmenu */
.mikio-sidebar .mikio-sidebar-content .dtree {
font-size: inherit;
.dTreeNode {
margin: 0.5rem 0;
.indexmenu_tocbullet {
margin-top: 2px;
margin-left: 2px;
}
a,
a.nodeUrl,
a.nodeSel,
a.node,
a.navSel {
display: initial;
margin: initial;
color: #666;
background: transparent;
&:visited,
&:active {
display: initial;
margin: initial;
color: #666;
background: transparent;
}
&:hover,
&:visited:hover {
color: #333;
text-decoration: none;
background-color: transparent;
}
}
a.navSel {
font-weight: bold;
color: #333;
}
img:last-of-type {
margin-right: 0.2rem;
opacity: 0.5;
}
}
}
.mikio .indexmenu_toc {
padding: 0 4px 4px 0;
&>div {
border: 1px solid #999;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 10;
}
.tocheader {
padding: 0.2rem;
border-bottom: 1px solid #ccc;
}
.indexmenu_toc_inside {
border: 0;
padding: 0.2rem;
ul {
margin: 0;
padding: 0 0 0 1.5rem;
.li {
margin-bottom: 0.4rem;
}
}
}
}
/* struct */
.mikio .mode_admin table {
&.jsoneditor-values {
width: auto;
}
&.jsoneditor-tree,
&.jsoneditor-values {
border-bottom: 0;
tbody {
tr {
background: transparent;
}
td {
padding: 0;
&.jsoneditor-separator {
vertical-align: middle;
}
}
}
button {
background-color: transparent;
border: 0;
transition: none;
&:hover {
transition: none;
}
}
div.jsoneditor-value {
background-color: var(--background);
}
}
}
.ui-controlgroup-horizontal {
label {
.mikio-button();
.mikio-button-small();
background-image: none;
border-left-width: 0 !important;
border-right-width: 0 !important;
&:first-of-type {
border-left-width: 1px !important;
}
&:last-of-type {
border-right-width: 1px !important;
}
&:hover {
background-image: none !important;
border-left-width: 0 !important;
border-right-width: 0 !important;
&:first-of-type {
border-left-width: 1px !important;
}
&:last-of-type {
border-right-width: 1px !important;
}
}
}
label.ui-state-active {
.mikio-button-submit();
}
}
/* dark-light mode button */
.mikio {
.mikio-darklight {
display: inline-block;
align-self: center;
.mikio-darklight-light {
display: var(--display-theme-light);
}
.mikio-darklight-dark {
display: var(--display-theme-dark);
}
.mikio-darklight-auto {
display: var(--display-theme-auto);
}
}
.mikio-darklight-button {
display: flex;
justify-content: center;
align-items: center;
width: 2.2rem;
height: 2.2rem;
padding: 0;
.mikio-iicon {
margin: 0;
}
}
}
.mikio .dokuwiki {
#mikio__translate .mikio-dropdown {
min-width: auto;
}
div.plugin_translation {
text-align: left;
&.is-dropdown {
padding-bottom: 0;
ul {
position: relative;
display: block;
li {
a {
display: block;
}
}
}
}
.title {
display: none;
}
ul {
li {
margin: 0;
display: block;
a,
span {
margin: 0 -1rem 0 -1rem;
padding: .25rem 1rem .25rem 1rem !important;
background-color: var(--dropdown-background-color) !important;
color: var(--dropdown-color) !important;
}
a:hover {
background-color: var(--dropdown-hover-color) !important;
}
span {
margin-right: 0.1rem;
position: relative;
&:after {
content: "";
display: inline-block;
position: absolute;
height: 0.75rem;
width: 0.25rem;
margin-top: 0.2rem;
margin-left: 0.75rem;
border-right: 2px solid var(--dropdown-color);
border-bottom: 2px solid var(--dropdown-color);
transform: rotateZ(45deg);
}
}
}
}
}
}