User Tools

Site Tools


wiki:basic.less

/**
* This file provides the most basic styles.
*
* If you integrate DokuWiki into another project, you might either
* want to integrate this file into the other project as well, or use
* the other project's basic CSS for DokuWiki instead of this one.
*
* @author Anika Henke anika@selfthinker.org
*/

html {

  overflow-x: auto;
  overflow-y: scroll;

}
html,
body {

  color: @ini_text;
  background: @ini_background_site url(images/page-gradient.png) top left repeat-x;
  margin: 0;
  padding: 0;

}
body {

  font: normal 100%/1.4 Arial, sans-serif;
  /* default font size: 100% => 16px; 93.75% => 15px; 87.5% => 14px; 81.25% => 13px; 75% => 12px */
  -webkit-text-size-adjust: 100%;

}

/* headers */

caption,
figcaption,
summary,
legend {

  padding: 0;
  margin: 0 0 .35em;
  line-height: 1.2;

}
h1,
h2,
h3,
h4,
h5,
h6 {

  font-weight: bold;
  padding: 0;
  line-height: 1.2;
  clear: left; /* ideally 'both', but problems with toc */

}
[dir=rtl] h1,
[dir=rtl] h2,
[dir=rtl] h3,
[dir=rtl] h4,
[dir=rtl] h5,
[dir=rtl] h6 {

  clear: right;

}

h1 {

  font-size: 2em;
  margin: 0 0 0.444em;

}
h2 {

  font-size: 1.5em;
  margin: 0 0 0.666em;

}
h3 {

  font-size: 1.125em;
  margin: 0 0 0.888em;

}
h4 {

  font-size: 1em;
  margin: 0 0 1.0em;

}
h5 {

  font-size: .875em;
  margin: 0 0 1.1428em;

}
h6 {

  font-size: .75em;
  margin: 0 0 1.333em;

}
/* bottom margin = 1 / font-size */

/* basic margins and paddings */

p,
ul,
ol,
dl,
pre,
table,
hr,
blockquote,
figure,
details,
fieldset,
address {

  margin: 0 0 1.4em 0; /* bottom margin = line-height */
  padding: 0;

}

div,
video,
audio {

  margin: 0;
  padding: 0;

}

/* lists */

ul,
ol {

  padding: 0 0 0 1.5em;

}
[dir=rtl] ul,
[dir=rtl] ol {

  padding: 0 1.5em 0 0;

}

li,
dd {

  padding: 0;
  margin: 0 0 0 1.5em;

}
[dir=rtl] li,
[dir=rtl] dd {

  margin: 0 1.5em 0 0;

}
dt {

  font-weight: bold;
  margin: 0;
  padding: 0;

}

li ul,
li ol,
li dl,
dl ul,
dl ol,
dl dl {

  margin-bottom: 0;
  padding: 0;

}
li li {

  font-size: 100%;

}

ul { list-style: square outside; }
ol { list-style: decimal outside; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: upper-roman; }
ol ol ol ol { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }

/* tables */

table {

  border-collapse: collapse;
  empty-cells: show;
  border-spacing: 0;
  border: 1px solid @ini_border;

}

caption {

  caption-side: top;
  text-align: left;

}
[dir=rtl] caption {

  text-align: right;

}

th,
td {

  padding: .3em .5em;
  margin: 0;
  vertical-align: top;
  border: 1px solid @ini_border;

}
th {

  font-weight: bold;
  background-color: @ini_background_alt;
  text-align: left;

}
[dir=rtl] th {

  text-align: right;

}

/* links */

a {

  outline: none;

}
a:link,
a:visited {

  text-decoration: none;
  color: @ini_link;

}
a:link:hover,
a:visited:hover,
a:link:focus,
a:visited:focus,
a:link:active,
a:visited:active {

  text-decoration: underline;

}

/* misc */

img {

  border-width: 0;
  vertical-align: middle;
  color: #666;
  background-color: transparent;
  font-style: italic;
  object-fit: cover;

}
video {

  height: auto;

}
img,
object,
embed,
iframe,
video,
audio {

  max-width: 100%;

}
button img {

  max-width: none;

}
table img {

  max-width: 50vw;

}

hr {

  border-top: solid @ini_border;
  border-bottom: solid @ini_background;
  border-width: 1px 0;
  height: 0;
  text-align: center;
  clear: both;

}

acronym,
abbr {

  cursor: help;
  border-bottom: 1px dotted;
  text-decoration: none;
  font-style: normal;

}
em acronym,
em abbr {

  font-style: italic;

}

mark {

  background-color: @ini_highlight;
  color: inherit;

}

pre,
code,
samp,
kbd {

  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
  /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
  font-size: 1em;
  direction: ltr;
  text-align: left;
  background-color: @ini_background_site;
  color: @ini_text;
  box-shadow: inset 0 0 .3em @ini_border;
  border-radius: 2px;

}
pre {

  overflow: auto;
  word-wrap: normal;
  border: 1px solid @ini_border;
  border-radius: 2px;
  box-shadow: inset 0 0 .5em @ini_border;
  padding: .7em 1em;

}

blockquote {

  padding: 0 .5em;
  border: solid @ini_border;
  border-width: 0 0 0 .25em;

}
[dir=rtl] blockquote {

  border-width: 0 .25em 0 0;

}
q:before,
q:after {

  content: '';

}

sub,
sup {

  font-size: .8em;
  line-height: 1;

}
sub {

  vertical-align: sub;

}
sup {

  vertical-align: super;

}

small {

  font-size: .8em;

}

wbr {

  display: inline-block; /* for IE 11 */

}

/* forms */

/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */

form {

  display: inline;
  margin: 0;
  padding: 0;

}
fieldset {

  padding: .7em 1em 0;
  padding: .7rem 1rem; /* for those browsers understanding :last-child */
  border: 1px solid @ini_text_alt;

}
fieldset > :last-child {

  margin-bottom: 0;

}
legend {

  margin: 0;
  padding: 0 .1em;

}
label {

  vertical-align: middle;
  cursor: pointer;

}

input,
textarea,
button,
select,
optgroup,
option,
keygen,
output,
meter,
progress {

  font: inherit;
  font-weight: normal;
  color: #333;
  background-color: #fff;
  line-height: normal;
  margin: 0;
  vertical-align: middle;
  box-sizing: border-box;

}

select {

  max-width: 100%;

}
optgroup {

  font-style: italic;
  font-weight: bold;

}
option {

  font-style: normal;
  font-weight: normal;

}
option:checked {

  background-color: #ccc;

}

input,
textarea,
select,
keygen {

  border: 1px solid #ccc;
  box-shadow: inset 0 0 1px #eee;
  border-radius: 2px;

}
input:active,
input:focus,
textarea:active,
textarea:focus,
select:active,
select:focus,
keygen:active,
keygen:focus {

  border-color: #999;

}
input[type=radio],
input[type=checkbox],
input[type=image] {

  padding: 0;
  border-style: none;
  box-shadow: none;

}

/* all types of buttons */
input[type=submit],
input[type=button],
input[type=reset],
input.button,
a.button,
button,
.qq-upload-button {

  color: #333;
  background-color: #eee;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
  background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
  border: 1px solid #ccc;
  border-radius: 2px;
  padding: .1em .5em;
  cursor: pointer;

}

input[type=submit]:hover,
input[type=submit]:active,
input[type=submit]:focus,
input[type=button]:hover,
input[type=button]:active,
input[type=button]:hover,
input[type=reset]:hover,
input[type=reset]:active,
input[type=reset]:hover,
input.button:hover,
input.button:active,
input.button:focus,
a.button:hover,
a.button:active,
a.button:focus,
button:hover,
button:active,
button:focus,
.qq-upload-button:hover {

  border-color: #999;
  background-color: #ddd;
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
  background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);

}

input::-moz-focus-inner,
button::-moz-focus-inner {

  border: 0;
  padding: 0;

}

input[disabled],
button[disabled],
select[disabled],
textarea[disabled],
option[disabled],
input[readonly],
button[readonly],
select[readonly],
textarea[readonly] {

  cursor: auto;
  opacity: .5;
  background-color: #eee;

}

wiki/basic.less.txt · Last modified: by err404

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki