summaryrefslogtreecommitdiff
path: root/styles/opticks.css
diff options
context:
space:
mode:
Diffstat (limited to 'styles/opticks.css')
-rw-r--r--styles/opticks.css533
1 files changed, 533 insertions, 0 deletions
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;
+}
generated by cgit (git 2.34.1) at 2024-04-28 19:15:39 +0000