magic matcher / direct nav / reset styles
This commit is contained in:
Jana Deutschländer
parent
40e8d24498
commit
ca90ebc1c0
10 changed files with 337 additions and 86 deletions
52
css/area_nav-direct.less
Normal file
52
css/area_nav-direct.less
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* This file provides the design styles for the direct / menu jump links.
|
||||
*
|
||||
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
||||
*/
|
||||
|
||||
.nav-direct {
|
||||
background-color: __nav_direct_background__;
|
||||
margin-top: -1px;
|
||||
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -1px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
z-index: 200;
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
.sr-out();
|
||||
|
||||
box-shadow: __box_shadow__;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: __nav_direct_background__;
|
||||
border-bottom: 1px solid __shadow_color__;
|
||||
color: __nav_direct_color__;
|
||||
line-height: @line-height-default;
|
||||
text-decoration: none;
|
||||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-decoration: underline;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
css/base.less
125
css/base.less
|
|
@ -1,9 +1,118 @@
|
|||
/**
|
||||
* This file provides the basic styles.
|
||||
* This file provides the basic vars and reset styles.
|
||||
*
|
||||
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
||||
*/
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* global vars */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
@line-height-default: 125%;
|
||||
@line-height-big: 135%;
|
||||
@line-height-bigger: 140%;
|
||||
|
||||
@break-min-xxs: 480;
|
||||
@break-max-xxs: (@break-min-xxs - 1);
|
||||
|
||||
@break-min-xs: 768;
|
||||
@break-max-xs: (@break-min-xs - 1);
|
||||
|
||||
@break-min-md: 1024;
|
||||
@break-max-md: (@break-min-md - 1);
|
||||
|
||||
@break-min-lg: 1440;
|
||||
@break-max-lg: (@break-min-lg - 1);
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* all media */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
html, body{
|
||||
font-size: 100.1%;
|
||||
}
|
||||
|
||||
html, body, div, span, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||
a, abbr, em,acronym, img, strong,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
input, select, option, textarea, button{
|
||||
background: transparent;
|
||||
border: none 0; outline: 0; vertical-align: baseline;
|
||||
font-style: normal;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
|
||||
div, span, object,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||
a, abbr, em,acronym, img, strong,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
input, select, option, textarea, button{
|
||||
font-size: 1rem; line-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
ol, ul{ list-style: none outside none; }
|
||||
blockquote, q{ quotes: none; }
|
||||
acronym{ cursor: help; border-bottom: dotted 1px #333; }
|
||||
|
||||
*:focus{ outline: 0; }
|
||||
|
||||
table{ border-collapse: collapse; border-spacing: 0; empty-cells: show; caption-side: top; }
|
||||
caption, th, td{ text-align: left; vertical-align: top; }
|
||||
|
||||
img{ display: block; float: none; border: none 0; line-height: @line-height-default; }
|
||||
|
||||
*, div, nav, header{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header, footer, .container, .row, nav, nav > ul{
|
||||
&::before, &::after{
|
||||
display: table;
|
||||
content: " ";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sr-out {
|
||||
.sr-out();
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
.sr-only();
|
||||
}
|
||||
|
||||
.structure, .none, .mobile-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
display: none;
|
||||
|
||||
@media @screen_max-xs {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-hide {
|
||||
display: inline-block;
|
||||
|
||||
@media @screen_max-xs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* screen */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
||||
@media screen{
|
||||
|
||||
html {
|
||||
|
|
@ -135,7 +244,7 @@
|
|||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||
a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
|
|
@ -150,11 +259,13 @@
|
|||
color: @ini_text;
|
||||
}
|
||||
|
||||
code{
|
||||
}
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* print */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
@media print{
|
||||
body{
|
||||
font-size: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
@media print{
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,57 +5,10 @@
|
|||
*/
|
||||
|
||||
|
||||
/* roboto light */
|
||||
@font-face {
|
||||
font-family: 'roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Roboto Light'), local('Roboto-Light'), url('/lib/tpl/sprintdoc-template/fonts/roboto-light.eot');
|
||||
src: url('/lib/tpl/sprintdoc-template/fonts/roboto-light.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-light.woff') format('woff');
|
||||
}
|
||||
|
||||
/* roboto regular */
|
||||
@font-face {
|
||||
font-family: 'roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto'), local('Roboto-Regular'), url('/lib/tpl/sprintdoc-template/fonts/roboto-regular.eot');
|
||||
src: url('/lib/tpl/sprintdoc-template/fonts/roboto-regular.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-regular.woff') format('woff');
|
||||
}
|
||||
|
||||
/* roboto medium */
|
||||
@font-face {
|
||||
font-family: 'roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local('Roboto Medium'), local('Roboto-Medium'), url('/lib/tpl/sprintdoc-template/fonts/roboto-medium.eot');
|
||||
src: url('/lib/tpl/sprintdoc-template/fonts/roboto-medium.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-medium.woff') format('woff');
|
||||
}
|
||||
|
||||
/* roboto bold */
|
||||
@font-face {
|
||||
font-family: 'roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Bold'), local('Roboto-Bold'), url('/lib/tpl/sprintdoc-template/fonts/roboto-bold.eot');
|
||||
src: url('/lib/tpl/sprintdoc-template/fonts/roboto-bold.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-bold.woff') format('woff');
|
||||
}
|
||||
|
||||
/* roboto condensed */
|
||||
@font-face {
|
||||
font-family: 'roboto condensed';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('/lib/tpl/sprintdoc-template/fonts/roboto-condensed.eot');
|
||||
src: url('/lib/tpl/sprintdoc-template/fonts/roboto-condensed.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-condensed.woff') format('woff');
|
||||
}
|
||||
|
||||
/* roboto condensed bold */
|
||||
@font-face {
|
||||
font-family: 'roboto condensed';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url('/lib/tpl/sprintdoc-template/fonts/roboto-boldcondensed.eot');
|
||||
src: url('/lib/tpl/sprintdoc-template/fonts/roboto-boldcondensed.eot?#iefix') format('embedded-opentype'), url('/lib/tpl/sprintdoc-template/fonts/roboto-boldcondensed.woff') format('woff');
|
||||
}
|
||||
.setLocalFontFace('roboto',300,'Roboto Light','Roboto-Light','roboto-light'); /* roboto light */
|
||||
.setLocalFontFace('roboto',400,'Roboto','Roboto-Regular','roboto-regular'); /* roboto regular */
|
||||
.setLocalFontFace('roboto',400,'Roboto Medium','Roboto-Medium','roboto-medium'); /* roboto medium */
|
||||
.setLocalFontFace('roboto',700,'Roboto Bold','Roboto-Bold','roboto-bold'); /* roboto bold */
|
||||
|
||||
.setLocalFontFace('roboto',700,'Roboto Condensed','RobotoCondensed-Regular','roboto-condensed'); /* roboto condensed */
|
||||
.setLocalFontFace('roboto',700,'Roboto Condensed Bold','RobotoCondensed-Bold','roboto-boldcondensed'); /* roboto condensed */
|
||||
|
|
|
|||
55
css/base_mixins.less
Normal file
55
css/base_mixins.less
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* This file provides less mixins for all other style modules
|
||||
*
|
||||
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
||||
*/
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* Fonts */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
.setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename){
|
||||
@font-face {
|
||||
font-family: @fontFamily;
|
||||
font-style: normal;
|
||||
font-weight: @fontWeight;
|
||||
src: ~"local('@{localFontName}'), local("~"'@{localFontNameVar}'), url("~"@{filename}.eot)";
|
||||
src: ~"url("~"@{filename}.eot?#iefix') format('embedded-opentype'), url("~"@{filename}.woff') format('woff')";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* Screenreader / Hide */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
.sr-out() {
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -200000em;
|
||||
left: -200000em;
|
||||
}
|
||||
|
||||
.sr-only(){
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sr-only-focusable() {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
45
css/plugins/magic-matcher.less
Normal file
45
css/plugins/magic-matcher.less
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* all media */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* magic matcher bar with form on top of page */
|
||||
|
||||
#dokuwiki_magic-matcher{
|
||||
#magicmatcher__context{
|
||||
box-sizing: border-box;
|
||||
background-color: __nav_direct_background__;
|
||||
box-shadow: __box_shadow__;
|
||||
border-radius: 0 0 __default_border_radius__ __default_border_radius__;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
left: .25%;
|
||||
width: 99.5%;
|
||||
min-height: 50px;
|
||||
padding: .8em 1em .5em;
|
||||
|
||||
.chosen-container-single .chosen-single span{
|
||||
line-height: @line-height-bigger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-js{
|
||||
#dokuwiki_magic-matcher{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* print */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
@media print{
|
||||
#dokuwiki_magic-matcher{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue