Skip to content
Snippets Groups Projects
Commit c6873294 authored by Rolf Niepraschk's avatar Rolf Niepraschk
Browse files

"vl-*.less" verschoben

parent bac06f44
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
_attachments/css/vl-layout.less deleted 100644 → 0
+ 0
− 339
View file @ bac06f44
// Rolf Niepraschk, 2013-12-24, Rolf.Niepraschk@ptb.de
// lessc vl-layout.less > vl-layout.css
//
// oder per "less.js" zur Laufzeit.
@import "vl-typography.less";
//@import "../../lib/css/vl-typography.less";
.setDefaults{
@mainWidth: 70em;
@defaultFontsize: 14px;
@aspect: 3 / 4; // 9 / 16 ?
@primaryColor: #5B739C;
@warnColor: #C41218;
@secondaryColor: lighten(@primaryColor, 35%);
@brightColor: #FFFFE5;
}
.setDefaults(); // wirkt nur bei noch nicht vorhandenen Variablen
@bodyBackground: #CCC;
@borderRadius: 0.9 * @defaultFontsize;
// TODO: Überlegen, ob die Maßeinheit "rem" sowie "vw" (css3) nützlich sein könnten
@mainHeight: @mainWidth * @aspect;
@minMainHeight: @mainHeight * .85;
@minMainWidth: @mainWidth * .85;
@maxMainHeight: @mainHeight * 1.15;
@maxMainWidth: @mainWidth * 1.15;
@mainMarginLeft: -@mainWidth / 2;
@mainMarginTop: -@mainHeight / 2;
@headHeight: 7%;
@footHeight: @headHeight;
@contentHeight: 100% - @headHeight - @footHeight;
@sidePanelWidth: 16%;
@sidePanelHeight: @contentHeight;
@contentWidth: 100% - @sidePanelWidth;
@sidePanelBackground: @primaryColor;
@sidePanelColor: @brightColor;
@hilitSidePanelColor: black;
@pagePadding: ceil(0.008333333333333333333 * @contentHeight);
@pageWidth: @contentWidth - 2 * @pagePadding;
@pageHeight: @contentHeight - 2 * @pagePadding;
@pageBackground: @brightColor;
@pageSectionColor: @primaryColor;
@rheadWidth: @sidePanelWidth;
@rheadBackground: @brightColor;
@rheadRight: 0;
@rheadTop: 0;
@lheadWidth: @contentWidth;
@lheadLeft: 0;
@lheadTop: 0;
@lheadBackground: @primaryColor;
@lheadColor: @brightColor;
@rfootBackground: @rheadBackground;
@rfootWidth: @sidePanelWidth;
@lfootBackground: @lheadBackground;
@lfootColor: @brightColor;
@lfootColor: white;
@lfootWidth: @contentWidth;
@lfootPadding: .5 * @defaultFontsize;
@panelItemBorderWidth: round(.2 * @defaultFontsize, 2);
@panelItemTopMargin: round(.625 * @defaultFontsize, 2);
@panelItemBottomMargin: @panelItemTopMargin;
@panelItemRightMargin: round(.4 * @defaultFontsize, 2);
@panelItemLeftMargin: @panelItemRightMargin;
@panelItemTopPad: round(0.27 * @defaultFontsize, 2);
@panelItemBottomPad: @panelItemTopPad;
@panelItemRightPad: round(0.2 * @defaultFontsize, 2);
@panelItemLeftPad: @panelItemRightPad;
html{
font-size:@defaultFontsize;
}
body{
background-color:@bodyBackground;
text-align:left;
}
#main{
height:@mainHeight;
width:@mainWidth;
// Trick zum Zentrieren eines div-Elements
top:50%;
left:50%;
position:absolute;
margin:@mainMarginTop 0 0 @mainMarginLeft;
}
#vl-lhead{
background-color:@lheadBackground;
width:@lheadWidth;
height:@headHeight;
text-align:center;
position:absolute;
left:@lheadLeft;
top:@lheadTop;
border-radius: @borderRadius 0 0 0;
display:table;
}
#vl-lhead h1 {
font-size:200%;
font-weight: bold;
line-height:200%;
color:@lheadColor;
vertical-align:middle;
display:table-cell;
}
#vl-lhead h1 strong {
font-size:50%;
}
#vl-rhead {
background-color:@rheadBackground;
width:@rheadWidth;
height:@headHeight;
line-height:1em;
font-size:260%;
font-weight:bold;
text-align:center;
position:absolute;
right:@rheadRight;
top:@rheadTop;
margin:0px;
border-radius: 0 @borderRadius 0 0;
display:table;
}
#vl-rhead > * {
display:table-cell;
vertical-align:middle;
}
#vl-lfoot{
color:@lfootColor;
background-color:@lfootBackground;
//padding:@lfootPadding;
width:@lfootWidth;
height:@footHeight;
position:absolute;
left:0px;
bottom:0px;
border-radius: 0 0 0 @borderRadius;
display:table;
overflow:hidden;
}
#vl-lfoot address, #vl-lfoot div {
padding:@lfootPadding;
display:table-cell;
vertical-align:middle;
}
#vl-lfoot address a {
color:@lfootColor;
text-decoration:underline;
}
#vl-lfoot address a:hover, #vl-lfoot address a:focus {
background-color: @brightColor;
color:black;
text-decoration:none;
}
#vl-rfoot{
background-color:@rfootBackground;
width:@rfootWidth;
height:@footHeight;
line-height:1em;
font-size:150%;
font-weight:bold;
text-align:center;
position:absolute;
right:0px;
bottom:0px;
margin:0px;
border-radius: 0 0 @borderRadius 0;
display:table;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
user-select: none;
}
#vl-rfoot > * {
display:table-cell;
vertical-align:middle;
}
#vl-sidePanel{
height:@sidePanelHeight;
width:@sidePanelWidth;
margin:0;
padding:@panelItemTopMargin 0 0 0;
// 1=oben, 2=rechts, 3=unten, 4=links
text-align:center;
background-color:@sidePanelBackground;
color:@sidePanelColor;
position:absolute;
right:0px;
top:@headHeight;
overflow-x:hidden;
}
#vl-menu {
background-color:@sidePanelBackground;
}
#vl-menu ul {
padding:0;
margin:0;
}
#vl-menu li {
margin:@panelItemTopMargin @panelItemRightMargin @panelItemBottomMargin @panelItemLeftMargin;
padding:@panelItemTopPad @panelItemRightPad @panelItemBottomPad @panelItemLeftPad;
text-decoration:none;
//list-style-type:square;
font-size: 110%;
font-weight:bold;
//font-stretch:narrower;
//word-spacing:0em;
//letter-spacing:0em;
line-height:1em;
color:@sidePanelColor;
cursor:pointer;
border:@panelItemBorderWidth solid @sidePanelColor;
//border-right-color:red;
border-radius: .4 * @defaultFontsize;
position:relative;
}
#vl-menuX li::after{content:"<div style:background-color:red;>X</div>";}
#vl-menuX li::first-letter {
color: red;
}
// 1=oben, 2=rechts, 3=unten, 4=links
#vl-menu li.hilit {
margin-left:0;
padding-left:@panelItemLeftPad + @panelItemLeftMargin;
color:@hilitSidePanelColor;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
background-color:@sidePanelColor;
}
#vl-menu li > div.vl-active {
font-weight: bold;
position:absolute;
top:.5ex;
right:0;
}
#vl-menu li > div.vl-active::before {
//content:"\25B6";
content:"\25C0";
}
.vl-page {
width:@pageWidth;
height:@pageHeight;
background-color:@pageBackground;
position:absolute;
left:0px;
top:@headHeight;
padding:@pagePadding;
overflow: auto;
}
.primary {
color:@primaryColor;
}
.primaryB {
background-color:@primaryColor;
}
.secondary {
color:@secondaryColor;
}
.secondaryB {
background-color:@secondaryColor;
}
.bright {
color:@brightColor;
}
.brightB {
background-color:@brightColor;
}
// Auslagern?
.top {
position:absolute; top:0;
}
.bottom {
position:absolute; bottom:0;
}
.left {
float: left;
text-align:left;
}
.center {
text-align:center;
}
.right {
float: right;
text-align:right;
}
.autoscroll {
overflow:auto;
}
.noDisplay {
display:none;
}
a:hover,a:focus {
background-color:@primaryColor;
color:#fff;
}
_attachments/css/vl-typography.less deleted 100644 → 0
+ 0
− 381
View file @ bac06f44
/**
* "Yet Another Multicolumn Layout" - YAML CSS Framework
*
* (en) Uniform design of standard content elements
* (de) Einheitliche Standardformatierungen für die wichtigten Inhalts-Elemente
*
* @copyright Copyright 2005-2012, Dirk Jesse
* @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
* YAML-CDL (http://www.yaml.de/license.html)
* @link http://www.yaml.de
* @package yaml
* @version v4.0.1
* @revision $Revision: 724 $
* @lastmodified $Date: 2012-03-03 11:45:41 +0100 (Sa, 03 Mrz 2012) $
* @appdef yaml
*/
/* Anpassungen, Rolf Niepraschk, 2012-08-16, Rolf.Niepraschk@ptb.de */
@media all {
/**
* @section global typography settings
*
* vertical rhythm settings (based on em-unit)
* -------------------------------------------
* basefont-size: 14px (87.5%)
* line-height : 21px (factor: 1.5)
*/
/* (en) reset font size for all elements to standard (16 Pixel) */
/* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */
html * { font-size:100%; }
/**
* (en) reset monospaced elements to font size 16px in all browsers
* (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen
*
* @see: http://webkit.org/blog/67/strange-medium/
*/
textarea,
pre,
code,
kbd,
samp,
var,
tt {
font-family:"DejaVu Sans Mono", Consolas, "Lucida Console", "Andale Mono", "Courier New", Courier, monospace;
}
/* (en) base layout gets standard font size 14px */
/* (de) Basis-Layout erhält Standardschriftgröße von 14 Pixeln */
body {
/* font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif; */
font-family: "DejaVu Sans", Geneva, sans-serif;
font-size:100%;
color:#444;
/* (en) Prevent auto-scaling of text in mobile webkit browsers */
/* (de) Automatische Schriftvergrößerung in mobilen Webkit-Browsern vermeiden */
-webkit-text-size-adjust:100%;
}
/*--- Headings | Überschriften ------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "DejaVu Sans", Arial, Helvetica, sans-serif;
font-weight: bold;
color:#161e21;
margin:0;
}
h1 {
font-size:200%;
line-height: 0.8571em;
margin: 0.4286em 0 0;
}
h2 {
font-size:167%;
line-height: 1em;
margin: 0.2em 0 0.15em 0;
}
h3 {
font-size:150%;
line-height: 1em;
margin:0.3em 0 0.2em 0;
}
h4 {
font-size:133.33%;
line-height: 1em;
margin:0.3em 0 0.2em 0;
}
h5 {
font-size:116.67%;
line-height: 1.2857em;
margin: 1.2857em 0 0 0;
}
h6 {
font-weight: bold;
font-size:100%;
line-height: 1.5em;
margin: 1.5em 0 0 0;
}
/* --- Lists | Listen -------------------------------------------------------------------------------- */
ul,
ol,
dl {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 1em;
}
ul {
list-style-type:disc;
}
ol {
list-style-type:decimal;
}
ul ul {
list-style-type:circle;
margin-top:0;
}
ol ol {
list-style-type:lower-latin;
margin-top:0;
}
ol ul {
list-style-type:circle;
margin-top:0;
}
li {
font-size:1em;
line-height:1.5em;
margin-left:0.8em;
}
dt { font-weight:bold; }
dd { margin:0 0 1.5em 0.8em; }
/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
p {
font-size:1em;
line-height:1.5em;
margin: 1.5em 0 0 0;
}
blockquote, cite, q {
font-family: Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
blockquote {
margin:1.5em 0 0 1.5em;
color:#666;
}
strong, b { font-weight:bold; }
em, i { font-style:italic; }
big {
font-size:116.667%;
}
small {
font-size:85.71%;
}
pre,
code,
kbd,
tt,
samp,
var {
font-size:100%;
}
pre {
line-height:1.5em;
margin: 1.5em 0 0 0;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
pre, code { color:#800; }
kbd, samp, var, tt {
color:#666;
font-weight:bold;
}
address { /* RN, 2012-08-20 */
padding: .2em;
}
var, dfn { font-style:italic; }
acronym, abbr {
border-bottom:1px #aaa dotted;
font-variant:small-caps;
letter-spacing:.07em;
cursor:help;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
mark {
background: #ff0;
color: #000;
}
hr {
color:#fff;
background:transparent;
margin:0 0 0.75em 0;
padding:0 0 0.75em 0;
border:0;
border-bottom:1px #eee solid;
}
/*--- Links ----------------------------------------------------------------------------------------- */
a {
color:#000000;
background:transparent;
text-decoration:underline;
}
a:active { outline: none; }
/* (en) maximum constrast for tab focus - change with great care */
/* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
a:hover,
a:focus {
background-color: #000000;
color:#fff;
}
/* --- images ------------------ */
img,
figure {
margin: 0;
}
.flexible {
margin-top: 1.5em;
max-width: 100%;
height: auto;
}
* html .flexible { /* IE6 support */
width: 98%; /* 2% space for borders */
}
.bordered {
margin-top: 1.5em;
border: 2px #eee solid;
border: 2px rgba(255,255,255,1) solid;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
box-shadow: 0 0 3px rgba(0,0,0,.25);
}
/**
* ----------------------------------------------------------------------- #
*
* Generic Content Classes
*
* (en) standard classes for positioning and highlighting
* (de) Standardklassen zur Positionierung und Hervorhebung
*
* @section content-generic-classes
*/
.highlight {
color:#c30;
}
.dimmed {
color:#888;
}
.box {
border-radius: 0.3em;
border-width: 1px;
border-style: solid;
border-color: #888;
border-color: rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2) inset;
color: #444;
color: rgba(0,0,0,.8);
padding: 1.4286em;
margin: 1.5em 0 0 0;
}
.box > *:first-child {
margin-top: 0;
}
.label {
font-family: Verdana, Geneva, sans-serif;
padding: 1px 6px 2px;
display: inline-block;
vertical-align:middle;
letter-spacing: normal;
white-space:nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #06C;
color: #fff;
font-size: 10px;
line-height: 12px;
}
.info {
background:#f4f4f4;
}
.success {
background:#8c8;
}
.warning {
background:#cc8;
}
.error {
background:#c88;
}
.float-left {
float:left;
display:inline;
margin: 1.5em 1em 0 0;
}
.float-right {
float:right;
display:inline;
margin: 1.5em 0 0 1em;
}
.center {
display:block;
text-align:center;
margin: 1.5em auto 0 auto;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment