From 80404cc0987d064b3070ab39dd82b76894f8cdaa Mon Sep 17 00:00:00 2001 From: Paweł Redman Date: Thu, 11 Apr 2019 13:38:07 +0200 Subject: Replace 'optiks' with 'opticks' --- styles/opticks.css | 533 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles/optiks.css | 533 ----------------------------------------------------- 2 files changed, 533 insertions(+), 533 deletions(-) create mode 100644 styles/opticks.css delete mode 100644 styles/optiks.css (limited to 'styles') diff --git a/styles/opticks.css b/styles/opticks.css new file mode 100644 index 0000000..a9cee26 --- /dev/null +++ b/styles/opticks.css @@ -0,0 +1,533 @@ +/* This file is loaded indirectly[1] by DokuWiki (as specified in styles.ini) + and is parsed as LESS. This means it's possible to use LESS directives and + that all comments are removed and the file minified. + + NOTE: LESS will fail completely if the syntax isn't right and you'll end up + with an unstyled page. Check DokuWiki docs for where to find the + errors. + + [1] Automagically included with tpl_metaheaders(); +*/ + +/* Make sure the page is at least as big as the screen so the background + works as expected and doesn't wrap too soon */ +html { + height: 100%; +} + +/* The page */ +body { + width: 80%; + margin-left: auto; + margin-right: auto; + margin-top: 2em; + + border: 0.1em solid rgb(50, 50, 50); + box-shadow: 0 0 1em black; + + /* This, along with the html block, sets the background of + the entire window, not just the contents. Use #page to style + the contents. */ + background-color: #272727; + background-image: url("/lib/tpl/opticks/images/opticks.jpg"); + background-size: cover; + background-position: center; +} + +/* Compact layout for small screens */ +@media (max-width: 45em) { + body { + margin: 0; + width: 100%; + background: none; + } +} + +/* Hide the search bar on mobile */ +@media (max-width: 30em) { + #header-search { + display: none; + } +} + +/* + GENERAL STYLES + paragraphs, lists, tables, etc. +*/ + +/* Reset stupid margins and paddings, set the font */ +* { + margin: 0; + padding: 0; + font-family: 'Vollkorn', serif; +} + +/* The area between the header and the footer */ +#content { + padding-bottom: 0.6em; + overflow: auto; + padding: 1em; + min-height: 10em; + + background-color: white; +} + +/* Considerably less shit typography in regular text */ +p, ul, ol { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + text-align: justify; + text-justify: auto; +} + +/* Spacing between paragraphs */ +p { + margin-bottom: 1em; +} + +/* Headers */ +h1, h2, h3, h4, h5, h6 { + margin-top: 0.5em; + margin-bottom: 0.5em; + + border-bottom: 0.05em solid rgb(128, 128, 128); + font-variant: small-caps; +} + +/* #content already has a large padding */ +h1 { + margin-top: 0; +} + +/* Lists */ +ul, ol { + margin: 1em; + margin-left: 1.5em; + + list-style-position: outside; +} + +/* Links */ +a:link { + color: #812222; + text-decoration: underline; +} + +a:visited { + color: #541414; + text-decoration: underline; +} + +a:hover { + color: #a83939; + text-decoration: underline; +} + +a:active { + color: #c64949; + text-decoration: underline; +} + +/* Uniform links (reset all the stupid variants to a single color) */ +/* FIXME: don't export this to the final CSS, it's only used in preprocessing */ +.uniform-links(@color) { + color: @color; + text-decoration: none; + + &:link { + color: @color; + text-decoration: none; + } + + &:visited { + color: @color; + text-decoration: none; + } + + &:hover { + color: @color; + text-decoration: none; + } + + &:active { + color: @color; + text-decoration: none; + } +} + +/* Tables */ +table { + border-collapse: collapse; +} + +td, th { + padding: 0.2em; + + border: 0.1em solid #b2b2b2; +} + +th { + background-color: #f0f0f0; + font-weight: bold; +} + +dl { + margin: 1em; +} + +dt { + font-weight: bold; +} + +dd { + margin-left: 1em; +} + +/* Text fields */ +input[type="text"], input[type="password"], input[type="email"] { + padding: 0.15em; + padding-left: 0.25em; + padding-right: 0.25em; + width: 12em; /* default width */ + + border: 0.1em solid rgb(220, 220, 220); + border-radius: 0.15em; + background: rgb(237,237,237); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ + box-shadow: 0 0 0.2em black; +} + +input::placeholder { + font-variant: small-caps; + color: rgb(128, 128, 128); +} + +input[type="text"]:hover, input[type="text"]:active, +input[type="password"]:hover, input[type="password"]:active { + background: white; +} + +/* Buttons */ +.opticks-button { + padding: 0.1em; + padding-left: 0.7em; + padding-right: 0.7em; + color: white; + font-variant: small-caps; + text-align: center; + text-shadow: 0 0 0.1em black; + border: 0.1em solid rgb(95, 95, 95); + border-radius: 0.15em; + background: rgb(71,71,71); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(71,71,71,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ + box-shadow: 0 0 0.2em black; + + &:hover { + background: rgb(114,114,114); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(114,114,114,1) 1%, rgba(79,79,79,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */ + } + + &:active { + background: rgb(79,79,79); /* Old browsers */ + background: -moz-linear-gradient(top, rgba(79,79,79,1) 0%, rgba(114,114,114,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to bottom, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#727272',GradientType=0 ); /* IE6-9 */ + } +} + +button { + .opticks-button(); +} + +/* Used for metadata in image details and some other shit */ +fieldset { + padding: 1em; +} + +/* + THE HEADER +*/ + +/* The header box */ +#header { + background-image: url('/lib/tpl/opticks/images/header.jpg'); + background-size: 100% auto; + background-repeat: repeat-y; + background-position: left; + background-color: #1b1b1a; +} + +/* The box containing the logo image */ +#header-logo { + float: left; + display: inline-block; + + height: 2em; +} + +/* Fix the image's height to the box's */ +#header-logo > a > img { + height: 2em; +} + +/* Search box */ +#dw__search { + float: right; +} + +/* Search text field */ +#dw__search > div > input { + margin-top: 0.25em; + font-size: initial; + width: 9em; + height: 1.5em; + + color: initial; /* Reset the dark font. */ +} + +/* Search button */ +#dw__search > div > button { + font-size: initial; + height: 1.5em; + padding-top: 0; + padding-bottom: 0; + margin-left: 0.2em; +} + +/* Dropdown menu */ +#header-dropdown { + float: right; + position: relative; + width: 2em; + height: 2em; + margin-left: 1em; + + /* The icon goes here so it can be changed with CSS for :hover */ + background-image: url("/lib/tpl/opticks/images/menu.png"); + background-size: cover; + + &:hover { + background-image: url("/lib/tpl/opticks/images/menu-hover.png"); + + & > #header-dropdown-content { + display: block; + } + } +} + +/* Dropdown menu's contents, with a dark theme */ +#header-dropdown-content { + display: none; + position: absolute; + top: 1em; + right: 0; + padding: 0.3em; + + color: white; + font-variant: small-caps; + border: 0.1em solid #b2b2b2; + box-shadow: 0 0 1em rgba(0, 0, 0, 0.1); + background: rgb(0,0,0); /* Old browsers */ + background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(84,84,84,1) 57%, rgba(0,0,0,1) 58%); /* FF3.6-15 */ + background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ +} + +/* Show the contents when the button is hovered. */ +#header-dropdown:hover > #header-dropdown-content { + display: block; +} + +/* The name and username in "Logged in as..." */ +#header-dropdown-content > bdi { + font-weight: bold; +} + +/* Links in the dropdown menu */ +li.action { + margin: 0.5em; + list-style: none; /* Fuck the bullet point */ + + /* The actual link */ + & > a { + display: block; + .opticks-button(); + .uniform-links(#ffffff); + } +} + +/* Hide the stupid icons (FIXME: don't put them there in the first place) */ +.action > a > svg { + display: none; +} + +/* Force the dropdown to be big enough to fit the search button to the right + (rather than below) the text field */ +#header-dropdown-search { + white-space: nowrap; +} + +/* + THE FOOTER +*/ +#footer { + padding-top: 0.4em; + padding-bottom: 0.6em; + text-align: center; + + background-color: white; + border-top: 0.1em solid rgb(128, 128, 128); +} + +/* Links in the footer (back to top, recent changes, etc.) */ +#footer-buttons > span { + padding: 0.2em; + + font-variant: small-caps; + font-size: 80%; +} + +/* Text below the links */ +#footer-text { + margin-top: 0.5em; + + color: rgb(60, 60, 60); + font-size: 70%; +} + +/* Wrap the license in a div and make it smaller so it looks better*/ +#footer-text > div { + margin: auto; + width: 66%; +} + +/* The license's name */ +.license > bdi { + font-weight: bold; +} + +/* + DOKUWIKI ELEMENTS in pages +*/ + +/* Some list items are wrapped in this shit */ +div.li { + display: inline-block; +} + +/* Icons in lists, make sure they're actually fucking aligned with the text */ +.icon { + vertical-align: middle; +} + +/* Table of contents */ +#dw__toc { + display: inline-block; /* Fit the width to contents */ + margin: 0.5em; + padding: 0.5em; + + border: 0.1em solid rgb(150, 150, 150); + border-radius: 0.3em; + background: rgb(255,255,255); /* Old browsers */ + background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6-15 */ + background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + box-shadow: 0 0 0.2em rgb(0, 0, 0, 0.2); + + & > h3 { + margin: 0; + margin-bottom: 0.5em; + text-align: center; + + /* The stupid dash before "Table of contents" */ + & > strong { + display: none; + } + } +} + +/* Lists inside tables of contents */ +ul.toc { + margin-top: 0; + margin-bottom: 0; + + font-variant: small-caps; +} + +/* The box around "Create this page," "edit this page," or "show page," defined + in this template */ +#content-edit { + float: right; + margin: 0.5em; + margin-right: 0; + padding: 0.2em; + + /* Make the link inside look like a button */ + & > .action { + .opticks-button(); + .uniform-links(#ffffff); + } +} + +/* Section edit buttons (or rather their containers) */ +div.secedit { + display: inline-block; + float: right; +} + +/* Containers for floating images in articles */ +.thumb2 { + margin: 1em; +} + +/* Alerts */ +.alert { + display: block; + clear: both; + margin: 0.5em; + padding: 0.5em; + + border: 0.1em solid rgb(200, 200, 200); + border-radius: 0.2em; +} + +.alert-warning { + background-color: rgb(255, 240, 210); +} + +/* + THE IMAGE DETAILS PAGE +*/ + +/* The image itself */ +.img_detail { + width: 100%; + height: auto; +} + +/* + MISC. DOKUWIKI ELEMENTS +*/ + +/* Override Doku's ugly ass random backgrounds in the admin panel */ +fieldset, div.input, div.selection, div.other { + background: white !important; +} + +/* Quick fix for unreadable buttons in the page editor */ +.toolbutton { + background: white; +} diff --git a/styles/optiks.css b/styles/optiks.css deleted file mode 100644 index 10365e5..0000000 --- a/styles/optiks.css +++ /dev/null @@ -1,533 +0,0 @@ -/* This file is loaded indirectly[1] by DokuWiki (as specified in styles.ini) - and is parsed as LESS. This means it's possible to use LESS directives and - that all comments are removed and the file minified. - - NOTE: LESS will fail completely if the syntax isn't right and you'll end up - with an unstyled page. Check DokuWiki docs for where to find the - errors. - - [1] Automagically included with tpl_metaheaders(); -*/ - -/* Make sure the page is at least as big as the screen so the background - works as expected and doesn't wrap too soon */ -html { - height: 100%; -} - -/* The page */ -body { - width: 80%; - margin-left: auto; - margin-right: auto; - margin-top: 2em; - - border: 0.1em solid rgb(50, 50, 50); - box-shadow: 0 0 1em black; - - /* This, along with the html block, sets the background of - the entire window, not just the contents. Use #page to style - the contents. */ - background-color: #272727; - background-image: url("/lib/tpl/optiks/images/optiks.jpg"); - background-size: cover; - background-position: center; -} - -/* Compact layout for small screens */ -@media (max-width: 45em) { - body { - margin: 0; - width: 100%; - background: none; - } -} - -/* Hide the search bar on mobile */ -@media (max-width: 30em) { - #header-search { - display: none; - } -} - -/* - GENERAL STYLES - paragraphs, lists, tables, etc. -*/ - -/* Reset stupid margins and paddings, set the font */ -* { - margin: 0; - padding: 0; - font-family: 'Vollkorn', serif; -} - -/* The area between the header and the footer */ -#content { - padding-bottom: 0.6em; - overflow: auto; - padding: 1em; - min-height: 10em; - - background-color: white; -} - -/* Considerably less shit typography in regular text */ -p, ul, ol { - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - text-align: justify; - text-justify: auto; -} - -/* Spacing between paragraphs */ -p { - margin-bottom: 1em; -} - -/* Headers */ -h1, h2, h3, h4, h5, h6 { - margin-top: 0.5em; - margin-bottom: 0.5em; - - border-bottom: 0.05em solid rgb(128, 128, 128); - font-variant: small-caps; -} - -/* #content already has a large padding */ -h1 { - margin-top: 0; -} - -/* Lists */ -ul, ol { - margin: 1em; - margin-left: 1.5em; - - list-style-position: outside; -} - -/* Links */ -a:link { - color: #812222; - text-decoration: underline; -} - -a:visited { - color: #541414; - text-decoration: underline; -} - -a:hover { - color: #a83939; - text-decoration: underline; -} - -a:active { - color: #c64949; - text-decoration: underline; -} - -/* Uniform links (reset all the stupid variants to a single color) */ -/* FIXME: don't export this to the final CSS, it's only used in preprocessing */ -.uniform-links(@color) { - color: @color; - text-decoration: none; - - &:link { - color: @color; - text-decoration: none; - } - - &:visited { - color: @color; - text-decoration: none; - } - - &:hover { - color: @color; - text-decoration: none; - } - - &:active { - color: @color; - text-decoration: none; - } -} - -/* Tables */ -table { - border-collapse: collapse; -} - -td, th { - padding: 0.2em; - - border: 0.1em solid #b2b2b2; -} - -th { - background-color: #f0f0f0; - font-weight: bold; -} - -dl { - margin: 1em; -} - -dt { - font-weight: bold; -} - -dd { - margin-left: 1em; -} - -/* Text fields */ -input[type="text"], input[type="password"], input[type="email"] { - padding: 0.15em; - padding-left: 0.25em; - padding-right: 0.25em; - width: 12em; /* default width */ - - border: 0.1em solid rgb(220, 220, 220); - border-radius: 0.15em; - background: rgb(237,237,237); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ - box-shadow: 0 0 0.2em black; -} - -input::placeholder { - font-variant: small-caps; - color: rgb(128, 128, 128); -} - -input[type="text"]:hover, input[type="text"]:active, -input[type="password"]:hover, input[type="password"]:active { - background: white; -} - -/* Buttons */ -.optiks-button { - padding: 0.1em; - padding-left: 0.7em; - padding-right: 0.7em; - color: white; - font-variant: small-caps; - text-align: center; - text-shadow: 0 0 0.1em black; - border: 0.1em solid rgb(95, 95, 95); - border-radius: 0.15em; - background: rgb(71,71,71); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(71,71,71,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to bottom, rgba(71,71,71,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */ - box-shadow: 0 0 0.2em black; - - &:hover { - background: rgb(114,114,114); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(114,114,114,1) 1%, rgba(79,79,79,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(top, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to bottom, rgba(114,114,114,1) 1%,rgba(79,79,79,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */ - } - - &:active { - background: rgb(79,79,79); /* Old browsers */ - background: -moz-linear-gradient(top, rgba(79,79,79,1) 0%, rgba(114,114,114,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(top, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to bottom, rgba(79,79,79,1) 0%,rgba(114,114,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#727272',GradientType=0 ); /* IE6-9 */ - } -} - -button { - .optiks-button(); -} - -/* Used for metadata in image details and some other shit */ -fieldset { - padding: 1em; -} - -/* - THE HEADER -*/ - -/* The header box */ -#header { - background-image: url('/lib/tpl/optiks/images/header.jpg'); - background-size: 100% auto; - background-repeat: repeat-y; - background-position: left; - background-color: #1b1b1a; -} - -/* The box containing the logo image */ -#header-logo { - float: left; - display: inline-block; - - height: 2em; -} - -/* Fix the image's height to the box's */ -#header-logo > a > img { - height: 2em; -} - -/* Search box */ -#dw__search { - float: right; -} - -/* Search text field */ -#dw__search > div > input { - margin-top: 0.25em; - font-size: initial; - width: 9em; - height: 1.5em; - - color: initial; /* Reset the dark font. */ -} - -/* Search button */ -#dw__search > div > button { - font-size: initial; - height: 1.5em; - padding-top: 0; - padding-bottom: 0; - margin-left: 0.2em; -} - -/* Dropdown menu */ -#header-dropdown { - float: right; - position: relative; - width: 2em; - height: 2em; - margin-left: 1em; - - /* The icon goes here so it can be changed with CSS for :hover */ - background-image: url("/lib/tpl/optiks/images/menu.png"); - background-size: cover; - - &:hover { - background-image: url("/lib/tpl/optiks/images/menu-hover.png"); - - & > #header-dropdown-content { - display: block; - } - } -} - -/* Dropdown menu's contents, with a dark theme */ -#header-dropdown-content { - display: none; - position: absolute; - top: 1em; - right: 0; - padding: 0.3em; - - color: white; - font-variant: small-caps; - border: 0.1em solid #b2b2b2; - box-shadow: 0 0 1em rgba(0, 0, 0, 0.1); - background: rgb(0,0,0); /* Old browsers */ - background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(84,84,84,1) 57%, rgba(0,0,0,1) 58%); /* FF3.6-15 */ - background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(84,84,84,1) 57%,rgba(0,0,0,1) 58%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -} - -/* Show the contents when the button is hovered. */ -#header-dropdown:hover > #header-dropdown-content { - display: block; -} - -/* The name and username in "Logged in as..." */ -#header-dropdown-content > bdi { - font-weight: bold; -} - -/* Links in the dropdown menu */ -li.action { - margin: 0.5em; - list-style: none; /* Fuck the bullet point */ - - /* The actual link */ - & > a { - display: block; - .optiks-button(); - .uniform-links(#ffffff); - } -} - -/* Hide the stupid icons (FIXME: don't put them there in the first place) */ -.action > a > svg { - display: none; -} - -/* Force the dropdown to be big enough to fit the search button to the right - (rather than below) the text field */ -#header-dropdown-search { - white-space: nowrap; -} - -/* - THE FOOTER -*/ -#footer { - padding-top: 0.4em; - padding-bottom: 0.6em; - text-align: center; - - background-color: white; - border-top: 0.1em solid rgb(128, 128, 128); -} - -/* Links in the footer (back to top, recent changes, etc.) */ -#footer-buttons > span { - padding: 0.2em; - - font-variant: small-caps; - font-size: 80%; -} - -/* Text below the links */ -#footer-text { - margin-top: 0.5em; - - color: rgb(60, 60, 60); - font-size: 70%; -} - -/* Wrap the license in a div and make it smaller so it looks better*/ -#footer-text > div { - margin: auto; - width: 66%; -} - -/* The license's name */ -.license > bdi { - font-weight: bold; -} - -/* - DOKUWIKI ELEMENTS in pages -*/ - -/* Some list items are wrapped in this shit */ -div.li { - display: inline-block; -} - -/* Icons in lists, make sure they're actually fucking aligned with the text */ -.icon { - vertical-align: middle; -} - -/* Table of contents */ -#dw__toc { - display: inline-block; /* Fit the width to contents */ - margin: 0.5em; - padding: 0.5em; - - border: 0.1em solid rgb(150, 150, 150); - border-radius: 0.3em; - background: rgb(255,255,255); /* Old browsers */ - background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(239,239,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - box-shadow: 0 0 0.2em rgb(0, 0, 0, 0.2); - - & > h3 { - margin: 0; - margin-bottom: 0.5em; - text-align: center; - - /* The stupid dash before "Table of contents" */ - & > strong { - display: none; - } - } -} - -/* Lists inside tables of contents */ -ul.toc { - margin-top: 0; - margin-bottom: 0; - - font-variant: small-caps; -} - -/* The box around "Create this page," "edit this page," or "show page," defined - in this template */ -#content-edit { - float: right; - margin: 0.5em; - margin-right: 0; - padding: 0.2em; - - /* Make the link inside look like a button */ - & > .action { - .optiks-button(); - .uniform-links(#ffffff); - } -} - -/* Section edit buttons (or rather their containers) */ -div.secedit { - display: inline-block; - float: right; -} - -/* Containers for floating images in articles */ -.thumb2 { - margin: 1em; -} - -/* Alerts */ -.alert { - display: block; - clear: both; - margin: 0.5em; - padding: 0.5em; - - border: 0.1em solid rgb(200, 200, 200); - border-radius: 0.2em; -} - -.alert-warning { - background-color: rgb(255, 240, 210); -} - -/* - THE IMAGE DETAILS PAGE -*/ - -/* The image itself */ -.img_detail { - width: 100%; - height: auto; -} - -/* - MISC. DOKUWIKI ELEMENTS -*/ - -/* Override Doku's ugly ass random backgrounds in the admin panel */ -fieldset, div.input, div.selection, div.other { - background: white !important; -} - -/* Quick fix for unreadable buttons in the page editor */ -.toolbutton { - background: white; -} -- cgit