From fbe94f932e02e117db9bd0e09ecfd6211bc7873e Mon Sep 17 00:00:00 2001 From: Benjamin Kott Date: Sun, 14 Sep 2014 18:30:48 +0200 Subject: [PATCH] Split theme less file --- Resources/Private/Less/Theme/breadcrumb.less | 13 + Resources/Private/Less/Theme/carousel.less | 142 +++ Resources/Private/Less/Theme/dropdown.less | 15 + Resources/Private/Less/Theme/fixes.less | 15 + Resources/Private/Less/Theme/footer.less | 18 + Resources/Private/Less/Theme/frame.less | 21 + Resources/Private/Less/Theme/image.less | 131 ++ Resources/Private/Less/Theme/lightbox.less | 55 + Resources/Private/Less/Theme/meta.less | 33 + Resources/Private/Less/Theme/misc.less | 58 + Resources/Private/Less/Theme/navbar.less | 216 ++++ Resources/Private/Less/Theme/news.less | 7 + Resources/Private/Less/Theme/scaffolding.less | 12 + Resources/Private/Less/Theme/text.less | 20 + Resources/Private/Less/Theme/texticon.less | 66 + Resources/Private/Less/Theme/theme.less | 1060 +---------------- Resources/Private/Less/Theme/typo3_form.less | 55 + .../Less/Theme/typo3_frontend_editing.less | 38 + Resources/Private/Less/Theme/webfont.less | 39 + 19 files changed, 974 insertions(+), 1040 deletions(-) create mode 100644 Resources/Private/Less/Theme/breadcrumb.less create mode 100644 Resources/Private/Less/Theme/carousel.less create mode 100644 Resources/Private/Less/Theme/dropdown.less create mode 100644 Resources/Private/Less/Theme/fixes.less create mode 100644 Resources/Private/Less/Theme/footer.less create mode 100644 Resources/Private/Less/Theme/frame.less create mode 100644 Resources/Private/Less/Theme/image.less create mode 100644 Resources/Private/Less/Theme/lightbox.less create mode 100644 Resources/Private/Less/Theme/meta.less create mode 100644 Resources/Private/Less/Theme/misc.less create mode 100644 Resources/Private/Less/Theme/navbar.less create mode 100644 Resources/Private/Less/Theme/news.less create mode 100644 Resources/Private/Less/Theme/scaffolding.less create mode 100644 Resources/Private/Less/Theme/text.less create mode 100644 Resources/Private/Less/Theme/texticon.less create mode 100644 Resources/Private/Less/Theme/typo3_form.less create mode 100644 Resources/Private/Less/Theme/typo3_frontend_editing.less create mode 100644 Resources/Private/Less/Theme/webfont.less diff --git a/Resources/Private/Less/Theme/breadcrumb.less b/Resources/Private/Less/Theme/breadcrumb.less new file mode 100644 index 000000000..c0257cc36 --- /dev/null +++ b/Resources/Private/Less/Theme/breadcrumb.less @@ -0,0 +1,13 @@ +// +// Breadcrumbs +// -------------------------------------------------- +.breadcrumb-section { + background-color: @breadcrumb-bg; + border-bottom: 1px solid darken(@navbar-default-bg, 6.5%); + margin-bottom: @navbar-margin-bottom; + .breadcrumb { + padding: @line-height-computed/2 0; + border-radius: 0; + margin-bottom: 0; + } +} diff --git a/Resources/Private/Less/Theme/carousel.less b/Resources/Private/Less/Theme/carousel.less new file mode 100644 index 000000000..bb544f26c --- /dev/null +++ b/Resources/Private/Less/Theme/carousel.less @@ -0,0 +1,142 @@ +// +// Carousel +// -------------------------------------------------- +.carousel-small { + .carousel-inner .item { + height: 300px; + @media (min-width: @screen-md) { + height: 400px; + } + } +} +.carousel-text { + color: #FFFFFF; + text-shadow: rgba(0,0,0,0.5) 0px 2px 5px; +} +.carousel-item-type-header { + .carousel-text-inner { + margin: 0 auto; + @media (min-width: @screen-md) { + width: 80%; + } + @media (min-width: @screen-lg-min) { + width: 65%; + } + } +} +.carousel-item-type-textandimage { + .carousel-image { + display: none; + img { + margin: 0 auto; + max-width: 100%; + display: block; + height: auto; + } + @media (min-width: @screen-sm) { + display: table-cell; + } + } +} +.carousel-inner { + z-index: 0; + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 0; + margin-bottom: 0; + } + .valign { + margin: 0 auto; + height: 100%; + @media (min-width: @screen-sm) { + width: @container-sm - @grid-gutter-width; + } + @media (min-width: @screen-md) { + width: @container-md - @grid-gutter-width; + } + @media (min-width: @screen-lg-min) { + width: @container-lg - @grid-gutter-width; + } + } + > .item { + overflow: hidden; + height: 400px; + color: #FFFFFF; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + opacity: 0; + .transition(opacity .6s ease-in-out 0s); + @media (min-width: @screen-md) { + height: 600px; + } + @media (max-width: @screen-sm-max) { + padding-left: @grid-gutter-width; + padding-right: @grid-gutter-width; + } + } + > .active { + z-index: 1; + opacity: 1; + } + > .next, + > .prev { + opacity: 1; + z-index: 0; + } + > .next, + > .prev, + > .active.left, + > .active.right { + left: 0; + } + > .active.left, + > .active.right { + opacity: 0; + } +} +.container { + .carousel { + margin-left: -(@grid-gutter-width / 2); + margin-right: -(@grid-gutter-width / 2); + @media (min-width: @screen-sm) { + margin-left: 0; + margin-right: 0; + } + } + .carousel-inner { + > .item { + padding-left: @grid-gutter-width; + padding-right: @grid-gutter-width; + } + .valign { + width: 100%; + + } + } +} +.carousel-control { + @media (min-width: @screen-md) { + width: 100px; + &.left, + &.right { + filter: none; + background-image: none; + } + } +} +.carousel-indicators, +.carousel-control { + .transition(opacity .6s ease-in-out 0s); + opacity: 0; +} +.carousel:hover { + .carousel-indicators, + .carousel-control { + opacity: .5; + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/dropdown.less b/Resources/Private/Less/Theme/dropdown.less new file mode 100644 index 000000000..a354f0825 --- /dev/null +++ b/Resources/Private/Less/Theme/dropdown.less @@ -0,0 +1,15 @@ +// +// Dropdowns +// +.dropdown-header { + padding: 9px 20px; +} +.dropdown-menu { + padding: 0; + .box-shadow(0 2px 0 rgba(0,0,0,.1)); + > li { + > a { + padding: @navbar-padding-vertical/2 @navbar-padding-horizontal; + } + } +} diff --git a/Resources/Private/Less/Theme/fixes.less b/Resources/Private/Less/Theme/fixes.less new file mode 100644 index 000000000..2672a864a --- /dev/null +++ b/Resources/Private/Less/Theme/fixes.less @@ -0,0 +1,15 @@ +// +// Body +// -------------------------------------------------- +.body-bg-top { + padding-top: @navbar-height; + @media (min-width: @screen-md) { + padding-top: round(@navbar-height*2); + } +} +.body-bg-bottom { + padding-bottom: @navbar-height; + @media (min-width: @screen-md) { + padding-bottom: round(@navbar-height*2); + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/footer.less b/Resources/Private/Less/Theme/footer.less new file mode 100644 index 000000000..34ef22cab --- /dev/null +++ b/Resources/Private/Less/Theme/footer.less @@ -0,0 +1,18 @@ +// +// Footer Section +// -------------------------------------------------- +.footer-section { + border-top: 1px solid darken(@gray,10%); + color: contrast(@gray-dark, black, white, 43%); + margin-top: @line-height-computed*2; + padding: @line-height-computed 0 @line-height-computed*1.5; + background: @gray-dark; + + a { + color: contrast(@gray-dark, black, white, 43%); + &:hover, + &:focus { + color: @link-color; + } + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/frame.less b/Resources/Private/Less/Theme/frame.less new file mode 100644 index 000000000..e95d298ff --- /dev/null +++ b/Resources/Private/Less/Theme/frame.less @@ -0,0 +1,21 @@ +// +// Frames +// -------------------------------------------------- +.frame.well { + *:first-child { + margin-top: 0px; + } + *:last-child { + margin-bottom: 0px; + } +} +.frame.rulerbefore { + border-top: 1px solid @page-header-border-color; + padding-top: ((@line-height-computed / 2) - 1); + margin-top: @line-height-computed; +} +.frame.rulerafter { + border-bottom: 1px solid @page-header-border-color; + padding-bottom: ((@line-height-computed / 2) - 1); + margin-bottom: @line-height-computed; +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/image.less b/Resources/Private/Less/Theme/image.less new file mode 100644 index 000000000..15d7ef79d --- /dev/null +++ b/Resources/Private/Less/Theme/image.less @@ -0,0 +1,131 @@ +// +// Images +// -------------------------------------------------- +.image { + display: block; + margin-bottom: @line-height-computed; + line-height: @line-height-base; + + > img, + a > img { + .img-responsive(); + @media (max-width: @screen-xs-max) { + margin: 0 auto; + } + } + + .caption { + padding: @thumbnail-caption-padding; + padding-left: 0; + padding-right: 0; + padding-bottom: 0; + } +} +.image-row { + .make-row(); +} +.image-column { + max-width: 100%; + position: relative; + min-height: 1px; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); + @media (min-width: @screen-md-min) { + float: left; + } +} +.image-wrap { + max-width: 100%; +} +.image-below { + .image-wrap { + margin-top: @line-height-computed; + } +} +.image-center .image > img { + margin: 0 auto; +} +.image-center-outer { + width: 100%; + position: relative; + float: right; + right: 50%; +} +.image-center-inner { + width: 100%; + position: relative; + float: right; + right: -50%; +} +.image-left { + .image-wrap { + float: left; + } + .text { + clear: left; + } +} +.image-right { + .image-wrap { + float: right; + } + .text { + clear: right; + } +} +.image-wrap, +.image-below, +.image-above, +.image-beside, +.image-intext { + .clearfix(); +} +.image-beside-left .image-wrap, +.image-intext-left .image-wrap { + float: left; + margin-left: -1 * (@grid-gutter-width / 2); +} +.image-beside-right .image-wrap, +.image-intext-right .image-wrap { + float: right; + margin-right: -1 * (@grid-gutter-width / 2); +} +.image-beside-left .image-wrap, +.image-beside-right .image-wrap, +.image-intext-left .image-wrap, +.image-intext-right .image-wrap { + max-width: 50%; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); +} +.image-beside-right, +.image-beside-left { + overflow: hidden; + zoom: 1; + .text { + overflow: hidden; + zoom: 1; + } + @media (max-width: @screen-xs-max) { + .image-wrap { + margin-left: -1 * (@grid-gutter-width / 2); + margin-right: -1 * (@grid-gutter-width / 2); + max-width: none; + float: none; + } + } +} +.image-header-1, +.image-header-2, +.image-header-3 { + .image-wrap { + margin-top: @line-height-computed; + } +} +.image-header-4, +.image-header-5, +.image-header-6 { + .image-wrap { + margin-top: (@line-height-computed / 2); + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/lightbox.less b/Resources/Private/Less/Theme/lightbox.less new file mode 100644 index 000000000..5c572054d --- /dev/null +++ b/Resources/Private/Less/Theme/lightbox.less @@ -0,0 +1,55 @@ +// +// Lightbox / Modals +// -------------------------------------------------- +.modal-lightbox { + margin: 10px auto; + .close { + position: absolute; + top: 0px; + right: 0px; + padding: 0px 15px; + line-height: 40px; + } + .modal-body { + padding: 0px; + } + .modal-content { + border: none; + } + .modal-caption { + background-color: @brand-primary; + background-color: fade(@brand-primary,90%); + color: #FFFFFF; + padding: @line-height-computed/2 @line-height-computed; + } + .modal-caption-title { + display: block; + font-size: 1.2em; + font-weight: bold; + } + .img-responsive { + margin-bottom: 0px; + } +} +@media screen and (min-width: @screen-sm-min) { + .modal-lightbox { + .modal-caption { + position: absolute; + left: 0px; + bottom: @line-height-computed; + max-width: 80%; + } + margin: 30px auto; + width: 600px; + } +} +@media screen and (min-width: @screen-md-min) { + .modal-lightbox { + width: 800px; + } +} +.modal-backdrop { + &.in { + .opacity(.8); + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/meta.less b/Resources/Private/Less/Theme/meta.less new file mode 100644 index 000000000..125a3200b --- /dev/null +++ b/Resources/Private/Less/Theme/meta.less @@ -0,0 +1,33 @@ +// +// Meta Section +// -------------------------------------------------- +.meta-section { + color: contrast(@gray-dark, black, white, 43%); + border-top: 1px solid darken(@gray-dark,3%); + background-color: @gray-dark; + padding: @line-height-computed/2 0; + a { + font-weight: bold; + color: contrast(@gray-dark, black, white, 43%); + &:hover, + &:focus { + color: @link-color; + } + } + .active a { + color: @link-color; + } + ul, + p { + margin: 10px 0; + } + @media (min-width: @screen-md) { + ul, + p { + margin: 0; + } + .copyright { + text-align: right; + } + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/misc.less b/Resources/Private/Less/Theme/misc.less new file mode 100644 index 000000000..b56477d77 --- /dev/null +++ b/Resources/Private/Less/Theme/misc.less @@ -0,0 +1,58 @@ +// +// Vertical Alignment +// -------------------------------------------------- +.valign { + display: table; + table-layout: fixed; + width: 100%; + > .vcontainer { + display: table-cell; + vertical-align: middle; + } +} + + +// +// Panel +// +.panel-body { + *:last-child { + margin-bottom: 0; + } +} + + +// +// Lazyload Images +// -------------------------------------------------- +img.lazyload { + opacity: 0.3; + .transition(opacity .3s ease-in 0s); +} + + +// +// List Inline +// -------------------------------------------------- +.list-inline { + > li:first-child { + padding-left: 0px; + } +} + + +// +// Misc +// -------------------------------------------------- +.panel-group { + margin-bottom: 20px; +} +a:hover { + text-decoration: none; +} +.caret { + margin-left: 5px; +} +.caption { + color: @gray-light; +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/navbar.less b/Resources/Private/Less/Theme/navbar.less new file mode 100644 index 000000000..d00a4ba0d --- /dev/null +++ b/Resources/Private/Less/Theme/navbar.less @@ -0,0 +1,216 @@ +// +// Navbar +// -------------------------------------------------- +.navbar-collapse { + max-height: none; +} +.navbar.navbar-top { + border-left: none; + border-right: none; + border-top: none; + margin-bottom: 0px; +} +.navbar-header-main { + .navbar-brand { + padding-top: 0; + padding-bottom: 0; + font-size: round(@font-size-base * 1.4); + font-family: @headings-font-family; + font-weight: bold; + text-transform: uppercase; + line-height: round(@navbar-height*2); + height: round(@navbar-height*2); + .transition(opacity .15s ease-in-out 0s); + &:hover { + opacity: 0.8; + } + } + .navbar-toggle { + color: @navbar-default-toggle-icon-bar-bg; + .navbar-vertical-align(42px); + font-size: 20px; + padding: 6px 10px; + margin-right: 5px; + &:focus { + outline: 0; + } + } + .navbar-header-border-bottom { + display: none; + left: 50%; + bottom: -1px; + position: absolute; + margin-left: -100%; + width: 200%; + background-color: @navbar-default-border; + height: 1px; + } + @media (max-width: @grid-float-breakpoint-max) { + position: relative; + .navbar-brand { + &.navbar-brand-image { + padding-top: 15px; + padding-bottom: 15px; + > img { + max-height: @navbar-height - 30; + width: auto; + } + } + padding: @navbar-padding-vertical @navbar-padding-horizontal; + font-size: @font-size-large; + line-height: @line-height-computed; + height: auto; + } + .navbar-header-border-bottom { + display: block; + } + } +} +.navbar-main { + > li { + > a { + font-size: round(@font-size-base * 1.15); + font-family: @headings-font-family; + font-weight: bold; + text-transform: uppercase; + .bar { + position: absolute; + top: -10px; + left: 0px; + width: 100%; + height: 4px; + background: @brand-primary; + opacity: 0; + .transition(top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out;); + } + } + &.dropdown.open, + &:hover, + &.active { + > a > .bar { + top: 0px; + opacity: .5; + } + } + &.dropdown.open, + &.active { + > a > .bar { + opacity: 1; + } + } + } +} +@media (min-width: @grid-float-breakpoint) { + .navbar-bottom { + .navbar-main { + > li { + > a { + .bar { + top: auto; + bottom: -10px; + } + } + &.dropdown.open, + &:hover, + &.active { + > a > .bar { + top: auto; + bottom: 0px; + } + } + } + } + .dropdown-menu { + .box-shadow(0 -2px 0 rgba(0,0,0,.1)); + } + .dropdown { + .dropdown-menu { + margin-bottom: 0; + } + } + } +} +.navbar-main { + @media (max-width: @grid-float-breakpoint-max) { + .open .dropdown-menu { + border-left: 4px solid fade(@brand-primary, 50%); + } + > li { + > a { + .bar { + top: 0px; + left: -10px; + width: 4px; + height: 100%; + .transition(left 0.19s ease-in-out 0s, opacity 0.25s ease-in-out;); + } + } + &.dropdown.open, + &:hover, + &.active { + > a > .bar { + left: 0px; + } + } + + &.dropdown { + > a { + padding-right: 40px; + >.caret { + position: absolute; + right: 20px; + top: 50%; + margin-top: -3px; + display: block; + .transition-transform(250ms ease-out 0s); + .rotate(0deg); + } + } + &.open { + > a { + > .caret { + .rotate(180deg); + } + } + } + } + } + } + @media (min-width: @grid-float-breakpoint) { + float: right; + > li { + &.dropdown { + > a >.caret { + display: none; + } + } + &:last-child { + > a { + margin-right: 0px; + } + } + > a { + line-height: round(@navbar-height*2); + padding: 0px @navbar-padding-horizontal; + .caret { + display: none; + } + } + } + } +} + + +// +// Navbar Inverse +// -------------------------------------------------- +.navbar-inverse { + .navbar-header-main { + .navbar-toggle { + color: @navbar-inverse-toggle-icon-bar-bg; + } + .navbar-header-border-bottom { + background-color: @navbar-inverse-border; + } + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/news.less b/Resources/Private/Less/Theme/news.less new file mode 100644 index 000000000..6ef4b26a2 --- /dev/null +++ b/Resources/Private/Less/Theme/news.less @@ -0,0 +1,7 @@ +// +// News +// -------------------------------------------------- +.news-item {} +.news-info { + margin-bottom: (@line-height-computed / 2); +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/scaffolding.less b/Resources/Private/Less/Theme/scaffolding.less new file mode 100644 index 000000000..9097d08c6 --- /dev/null +++ b/Resources/Private/Less/Theme/scaffolding.less @@ -0,0 +1,12 @@ +// +// Body +// -------------------------------------------------- +body { + position: relative; + background-color: @gray-dark; +} +.body-bg { + background-color: @body-bg; + overflow: hidden; + zoom: 1; +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/text.less b/Resources/Private/Less/Theme/text.less new file mode 100644 index 000000000..90f5c02ac --- /dev/null +++ b/Resources/Private/Less/Theme/text.less @@ -0,0 +1,20 @@ +// +// Fonts +// -------------------------------------------------- +@media (min-width: @screen-md) { + h1.awesome, .h1.awesome { font-size: floor(@font-size-h1 * 1.5); line-height: 1.2; } + h2.awesome, .h2.awesome { font-size: floor(@font-size-h2 * 1.5); line-height: 1.2; } + h3.awesome, .h3.awesome { font-size: floor(@font-size-h3 * 1.5); line-height: 1.2; } + h4.awesome, .h4.awesome { font-size: floor(@font-size-h4 * 1.5); line-height: 1.2; } + h5.awesome, .h5.awesome { font-size: floor(@font-size-h5 * 1.5); line-height: 1.2; } + h6.awesome, .h6.awesome { font-size: floor(@font-size-h6 * 1.5); line-height: 1.2; } +} + + +// +// Headings +// -------------------------------------------------- +h4, +h5 { + font-family: @font-family-base; +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/texticon.less b/Resources/Private/Less/Theme/texticon.less new file mode 100644 index 000000000..ffef0395e --- /dev/null +++ b/Resources/Private/Less/Theme/texticon.less @@ -0,0 +1,66 @@ +// +// Texticon +// -------------------------------------------------- +.texticon { + .clearfix(); +} +.texticon-icon { + font-size: 2em; + .glyphicon { + text-align: center; + margin: 0 auto; + display: block; + height: 1em; + width: 1em; + } +} +.texticon-size-medium { + font-size: 3em; +} +.texticon-size-large { + font-size: 4em; +} +.texticon-size-awesome { + font-size: 5em; +} +.texticon-top .texticon-icon { + margin-bottom: @line-height-computed; +} +.texticon-type-square, +.texticon-type-circle { + .glyphicon { + line-height: 2.3em; + height: 2.3em; + width: 2.3em; + } +} +.texticon-type-circle { + .glyphicon { + border-radius: 50%; + } +} +.texticon-left, +.texticon-right { + .texticon-icon { + position: relative; + min-height: 1px; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); + } +} +.texticon-left .texticon-icon { + float: left; + margin-left: -1 * (@grid-gutter-width / 2); +} +.texticon-right .texticon-icon { + float: right; + margin-right: -1 * (@grid-gutter-width / 2); +} +.texticon-left .texticon-content, +.texticon-right .texticon-content { + *:first-child { + margin-top: 0px; + } + overflow: hidden; + zoom: 1; +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/theme.less b/Resources/Private/Less/Theme/theme.less index f86e52192..69a801027 100644 --- a/Resources/Private/Less/Theme/theme.less +++ b/Resources/Private/Less/Theme/theme.less @@ -5,1043 +5,23 @@ // -// Share Font -// -------------------------------------------------- -@font-face { - font-family: 'Share'; - font-style: normal; - font-weight: 400; - src: url('@{icon-font-path}/share-regular-webfont-webfont.eot'); - src: url('@{icon-font-path}/share-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'), - url('@{icon-font-path}/share-regular-webfont-webfont.woff') format('woff'), - url('@{icon-font-path}/share-regular-webfont-webfont.ttf') format('truetype'); -} -@font-face { - font-family: 'Share'; - font-style: italic; - font-weight: 400; - src: url('@{icon-font-path}/share-italic-webfont-webfont.eot'); - src: url('@{icon-font-path}/share-italic-webfont-webfont.eot?#iefix') format('embedded-opentype'), - url('@{icon-font-path}/share-italic-webfont-webfont.woff') format('woff'), - url('@{icon-font-path}/share-italic-webfont-webfont.ttf') format('truetype'); -} -@font-face { - font-family: 'Share'; - font-style: normal; - font-weight: 500; - src: url('@{icon-font-path}/share-bold-webfont-webfont.eot'); - src: url('@{icon-font-path}/share-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'), - url('@{icon-font-path}/share-bold-webfont-webfont.woff') format('woff'), - url('@{icon-font-path}/share-bold-webfont-webfont.ttf') format('truetype'); -} -@font-face { - font-family: 'Share'; - font-style: normal; - font-weight: bold; - src: url('@{icon-font-path}/share-bold-webfont-webfont.eot'); - src: url('@{icon-font-path}/share-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'), - url('@{icon-font-path}/share-bold-webfont-webfont.woff') format('woff'), - url('@{icon-font-path}/share-bold-webfont-webfont.ttf') format('truetype'); -} - - -// -// Fonts -// -------------------------------------------------- -@media (min-width: @screen-md) { - h1.awesome, .h1.awesome { font-size: floor(@font-size-h1 * 1.5); line-height: 1.2; } - h2.awesome, .h2.awesome { font-size: floor(@font-size-h2 * 1.5); line-height: 1.2; } - h3.awesome, .h3.awesome { font-size: floor(@font-size-h3 * 1.5); line-height: 1.2; } - h4.awesome, .h4.awesome { font-size: floor(@font-size-h4 * 1.5); line-height: 1.2; } - h5.awesome, .h5.awesome { font-size: floor(@font-size-h5 * 1.5); line-height: 1.2; } - h6.awesome, .h6.awesome { font-size: floor(@font-size-h6 * 1.5); line-height: 1.2; } -} - - -// -// Vertical Alignment -// -------------------------------------------------- -.valign { - display: table; - table-layout: fixed; - width: 100%; - > .vcontainer { - display: table-cell; - vertical-align: middle; - } -} - - -// -// Misc -// -------------------------------------------------- -.panel-group { - margin-bottom: 20px; -} -a:hover { - text-decoration: none; -} -.caret { - margin-left: 5px; -} -.caption { - color: @gray-light; -} - - -// -// Body -// -------------------------------------------------- -body { - position: relative; - background-color: @gray-dark; -} -.body-bg { - background-color: @body-bg; - overflow: hidden; - zoom: 1; -} -.body-bg-top { - padding-top: @navbar-height; - @media (min-width: @screen-md) { - padding-top: round(@navbar-height*2); - } -} -.body-bg-bottom { - padding-bottom: @navbar-height; - @media (min-width: @screen-md) { - padding-bottom: round(@navbar-height*2); - } -} - - -// -// Headings -// -------------------------------------------------- -h4, -h5 { - font-family: @font-family-base; -} - - -// -// Navbar -// -------------------------------------------------- -.navbar-collapse { - max-height: none; -} -.navbar.navbar-top { - border-left: none; - border-right: none; - border-top: none; - margin-bottom: 0px; -} -.navbar-header-main { - .navbar-brand { - padding-top: 0; - padding-bottom: 0; - font-size: round(@font-size-base * 1.4); - font-family: @headings-font-family; - font-weight: bold; - text-transform: uppercase; - line-height: round(@navbar-height*2); - height: round(@navbar-height*2); - .transition(opacity .15s ease-in-out 0s); - &:hover { - opacity: 0.8; - } - } - .navbar-toggle { - color: @navbar-default-toggle-icon-bar-bg; - .navbar-vertical-align(42px); - font-size: 20px; - padding: 6px 10px; - margin-right: 5px; - &:focus { - outline: 0; - } - } - .navbar-header-border-bottom { - display: none; - left: 50%; - bottom: -1px; - position: absolute; - margin-left: -100%; - width: 200%; - background-color: @navbar-default-border; - height: 1px; - } - @media (max-width: @grid-float-breakpoint-max) { - position: relative; - .navbar-brand { - &.navbar-brand-image { - padding-top: 15px; - padding-bottom: 15px; - > img { - max-height: @navbar-height - 30; - width: auto; - } - } - padding: @navbar-padding-vertical @navbar-padding-horizontal; - font-size: @font-size-large; - line-height: @line-height-computed; - height: auto; - } - .navbar-header-border-bottom { - display: block; - } - } -} -.navbar-main { - > li { - > a { - font-size: round(@font-size-base * 1.15); - font-family: @headings-font-family; - font-weight: bold; - text-transform: uppercase; - .bar { - position: absolute; - top: -10px; - left: 0px; - width: 100%; - height: 4px; - background: @brand-primary; - opacity: 0; - .transition(top 0.19s ease-in-out 0s, opacity 0.25s ease-in-out;); - } - } - &.dropdown.open, - &:hover, - &.active { - > a > .bar { - top: 0px; - opacity: .5; - } - } - &.dropdown.open, - &.active { - > a > .bar { - opacity: 1; - } - } - } -} -@media (min-width: @grid-float-breakpoint) { - .navbar-bottom { - .navbar-main { - > li { - > a { - .bar { - top: auto; - bottom: -10px; - } - } - &.dropdown.open, - &:hover, - &.active { - > a > .bar { - top: auto; - bottom: 0px; - } - } - } - } - .dropdown-menu { - .box-shadow(0 -2px 0 rgba(0,0,0,.1)); - } - .dropdown { - .dropdown-menu { - margin-bottom: 0; - } - } - } -} -.navbar-main { - @media (max-width: @grid-float-breakpoint-max) { - .open .dropdown-menu { - border-left: 4px solid fade(@brand-primary, 50%); - } - > li { - > a { - .bar { - top: 0px; - left: -10px; - width: 4px; - height: 100%; - .transition(left 0.19s ease-in-out 0s, opacity 0.25s ease-in-out;); - } - } - &.dropdown.open, - &:hover, - &.active { - > a > .bar { - left: 0px; - } - } - - &.dropdown { - > a { - padding-right: 40px; - >.caret { - position: absolute; - right: 20px; - top: 50%; - margin-top: -3px; - display: block; - .transition-transform(250ms ease-out 0s); - .rotate(0deg); - } - } - &.open { - > a { - > .caret { - .rotate(180deg); - } - } - } - } - } - } - @media (min-width: @grid-float-breakpoint) { - float: right; - > li { - &.dropdown { - > a >.caret { - display: none; - } - } - &:last-child { - > a { - margin-right: 0px; - } - } - > a { - line-height: round(@navbar-height*2); - padding: 0px @navbar-padding-horizontal; - .caret { - display: none; - } - } - } - } -} - - -// -// Navbar Inverse -// -------------------------------------------------- -.navbar-inverse { - .navbar-header-main { - .navbar-toggle { - color: @navbar-inverse-toggle-icon-bar-bg; - } - .navbar-header-border-bottom { - background-color: @navbar-inverse-border; - } - } -} - - -// -// Dropdowns -// -.dropdown-header { - padding: 9px 20px; -} -.dropdown-menu { - padding: 0; - .box-shadow(0 2px 0 rgba(0,0,0,.1)); - > li { - > a { - padding: @navbar-padding-vertical/2 @navbar-padding-horizontal; - } - } -} - - -// -// Searchbar -// -------------------------------------------------- -.searchbar-section { - z-index: @zindex-navbar; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - @media (max-width: @screen-xs-max) { - position: relative; - bottom: auto; - left: auto; - width: auto; - margin-left: (-1 * (@grid-gutter-width / 2))-1; - margin-right: (-1 * (@grid-gutter-width / 2))-1; - } -} -.searchbar-inner { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - @media (max-width: @screen-xs-max) { - position: relative; - top: auto; - left: auto; - width: auto; - } -} -.searchbar-background { - background-color: @navbar-default-toggle-hover-bg; - border-bottom: 1px solid darken(@navbar-default-toggle-hover-bg, 10%); -} -.navbar-inverse { - .searchbar-background { - background-color: @navbar-inverse-toggle-hover-bg; - border-bottom: 1px solid darken(@navbar-inverse-toggle-hover-bg, 10%); - } -} -.searchbar-fieldset { - padding: @line-height-computed/2 0; -} -.searchbar { - text-align: right; - margin-bottom: 0px; -} -.searchbar-field { - width: 300px; - @media (max-width: @screen-xs-max) { - width: 100%; - } -} -.searchbar .form-group { - margin-bottom: 0px; -} - - -// -// Breadcrumbs -// -------------------------------------------------- -.breadcrumb-section { - background-color: @breadcrumb-bg; - border-bottom: 1px solid darken(@navbar-default-bg, 6.5%); - margin-bottom: @navbar-margin-bottom; - .breadcrumb { - padding: @line-height-computed/2 0; - border-radius: 0; - margin-bottom: 0; - } -} - - -// -// Images -// -------------------------------------------------- -.image { - display: block; - margin-bottom: @line-height-computed; - line-height: @line-height-base; - - > img, - a > img { - .img-responsive(); - @media (max-width: @screen-xs-max) { - margin: 0 auto; - } - } - - .caption { - padding: @thumbnail-caption-padding; - padding-left: 0; - padding-right: 0; - padding-bottom: 0; - } -} -.image-row { - .make-row(); -} -.image-column { - max-width: 100%; - position: relative; - min-height: 1px; - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); - @media (min-width: @screen-md-min) { - float: left; - } -} -.image-wrap { - max-width: 100%; -} -.image-below { - .image-wrap { - margin-top: @line-height-computed; - } -} -.image-center .image > img { - margin: 0 auto; -} -.image-center-outer { - width: 100%; - position: relative; - float: right; - right: 50%; -} -.image-center-inner { - width: 100%; - position: relative; - float: right; - right: -50%; -} -.image-left { - .image-wrap { - float: left; - } - .text { - clear: left; - } -} -.image-right { - .image-wrap { - float: right; - } - .text { - clear: right; - } -} -.image-wrap, -.image-below, -.image-above, -.image-beside, -.image-intext { - .clearfix(); -} -.image-beside-left .image-wrap, -.image-intext-left .image-wrap { - float: left; - margin-left: -1 * (@grid-gutter-width / 2); -} -.image-beside-right .image-wrap, -.image-intext-right .image-wrap { - float: right; - margin-right: -1 * (@grid-gutter-width / 2); -} -.image-beside-left .image-wrap, -.image-beside-right .image-wrap, -.image-intext-left .image-wrap, -.image-intext-right .image-wrap { - max-width: 50%; - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); -} -.image-beside-right, -.image-beside-left { - overflow: hidden; - zoom: 1; - .text { - overflow: hidden; - zoom: 1; - } - @media (max-width: @screen-xs-max) { - .image-wrap { - margin-left: -1 * (@grid-gutter-width / 2); - margin-right: -1 * (@grid-gutter-width / 2); - max-width: none; - float: none; - } - } -} -.image-header-1, -.image-header-2, -.image-header-3 { - .image-wrap { - margin-top: @line-height-computed; - } -} -.image-header-4, -.image-header-5, -.image-header-6 { - .image-wrap { - margin-top: (@line-height-computed / 2); - } -} - - -// -// News -// -------------------------------------------------- -.news-item {} -.news-info { - margin-bottom: (@line-height-computed / 2); -} - - -// -// Carousel -// -------------------------------------------------- -.carousel-small { - .carousel-inner .item { - height: 300px; - @media (min-width: @screen-md) { - height: 400px; - } - } -} -.carousel-text { - color: #FFFFFF; - text-shadow: rgba(0,0,0,0.5) 0px 2px 5px; -} -.carousel-item-type-header { - .carousel-text-inner { - margin: 0 auto; - @media (min-width: @screen-md) { - width: 80%; - } - @media (min-width: @screen-lg-min) { - width: 65%; - } - } -} -.carousel-item-type-textandimage { - .carousel-image { - display: none; - img { - margin: 0 auto; - max-width: 100%; - display: block; - height: auto; - } - @media (min-width: @screen-sm) { - display: table-cell; - } - } -} -.carousel-inner { - z-index: 0; - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 0; - margin-bottom: 0; - } - .valign { - margin: 0 auto; - height: 100%; - @media (min-width: @screen-sm) { - width: @container-sm - @grid-gutter-width; - } - @media (min-width: @screen-md) { - width: @container-md - @grid-gutter-width; - } - @media (min-width: @screen-lg-min) { - width: @container-lg - @grid-gutter-width; - } - } - > .item { - overflow: hidden; - height: 400px; - color: #FFFFFF; - background-repeat: no-repeat; - background-position: center center; - background-size: cover; - opacity: 0; - .transition(opacity .6s ease-in-out 0s); - @media (min-width: @screen-md) { - height: 600px; - } - @media (max-width: @screen-sm-max) { - padding-left: @grid-gutter-width; - padding-right: @grid-gutter-width; - } - } - > .active { - z-index: 1; - opacity: 1; - } - > .next, - > .prev { - opacity: 1; - z-index: 0; - } - > .next, - > .prev, - > .active.left, - > .active.right { - left: 0; - } - > .active.left, - > .active.right { - opacity: 0; - } -} -.container { - .carousel { - margin-left: -(@grid-gutter-width / 2); - margin-right: -(@grid-gutter-width / 2); - @media (min-width: @screen-sm) { - margin-left: 0; - margin-right: 0; - } - } - .carousel-inner { - > .item { - padding-left: @grid-gutter-width; - padding-right: @grid-gutter-width; - } - .valign { - width: 100%; - - } - } -} -.carousel-control { - @media (min-width: @screen-md) { - width: 100px; - &.left, - &.right { - filter: none; - background-image: none; - } - } -} -.carousel-indicators, -.carousel-control { - .transition(opacity .6s ease-in-out 0s); - opacity: 0; -} -.carousel:hover { - .carousel-indicators, - .carousel-control { - opacity: .5; - } -} - - -// -// Texticon -// -------------------------------------------------- -.texticon { - .clearfix(); -} -.texticon-icon { - font-size: 2em; - .glyphicon { - text-align: center; - margin: 0 auto; - display: block; - height: 1em; - width: 1em; - } -} -.texticon-size-medium { - font-size: 3em; -} -.texticon-size-large { - font-size: 4em; -} -.texticon-size-awesome { - font-size: 5em; -} -.texticon-top .texticon-icon { - margin-bottom: @line-height-computed; -} -.texticon-type-square, -.texticon-type-circle { - .glyphicon { - line-height: 2.3em; - height: 2.3em; - width: 2.3em; - } -} -.texticon-type-circle { - .glyphicon { - border-radius: 50%; - } -} -.texticon-left, -.texticon-right { - .texticon-icon { - position: relative; - min-height: 1px; - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); - } -} -.texticon-left .texticon-icon { - float: left; - margin-left: -1 * (@grid-gutter-width / 2); -} -.texticon-right .texticon-icon { - float: right; - margin-right: -1 * (@grid-gutter-width / 2); -} -.texticon-left .texticon-content, -.texticon-right .texticon-content { - *:first-child { - margin-top: 0px; - } - overflow: hidden; - zoom: 1; -} - - -// -// Panel -// -.panel-body { - *:last-child { - margin-bottom: 0; - } -} - - -// -// Frames -// -------------------------------------------------- -.frame.well { - *:first-child { - margin-top: 0px; - } - *:last-child { - margin-bottom: 0px; - } -} -.frame.rulerbefore { - border-top: 1px solid @page-header-border-color; - padding-top: ((@line-height-computed / 2) - 1); - margin-top: @line-height-computed; -} -.frame.rulerafter { - border-bottom: 1px solid @page-header-border-color; - padding-bottom: ((@line-height-computed / 2) - 1); - margin-bottom: @line-height-computed; -} - - -// -// Footer Section -// -------------------------------------------------- -.footer-section { - border-top: 1px solid darken(@gray,10%); - color: contrast(@gray-dark, black, white, 43%); - margin-top: @line-height-computed*2; - padding: @line-height-computed 0 @line-height-computed*1.5; - background: @gray-dark; - - a { - color: contrast(@gray-dark, black, white, 43%); - &:hover, - &:focus { - color: @link-color; - } - } -} - - -// -// Meta Section -// -------------------------------------------------- -.meta-section { - color: contrast(@gray-dark, black, white, 43%); - border-top: 1px solid darken(@gray-dark,3%); - background-color: @gray-dark; - padding: @line-height-computed/2 0; - a { - font-weight: bold; - color: contrast(@gray-dark, black, white, 43%); - &:hover, - &:focus { - color: @link-color; - } - } - .active a { - color: @link-color; - } - ul, - p { - margin: 10px 0; - } - @media (min-width: @screen-md) { - ul, - p { - margin: 0; - } - .copyright { - text-align: right; - } - } -} - - -// -// Lazyload Images -// -------------------------------------------------- -img.lazyload { - opacity: 0.3; - .transition(opacity .3s ease-in 0s); -} - - -// -// List Inline -// -------------------------------------------------- -.list-inline { - > li:first-child { - padding-left: 0px; - } -} - - -// -// Frontend Editing -// -------------------------------------------------- -body .typo3-feedit-element { - outline: 3px solid fade(@brand-primary, 50%) !important; - &:hover { - outline: 3px solid @brand-primary !important; - } -} -.typo3-editPanel { - .clearfix(); - background-color: #eaeaea!important; - color: #333333; - padding: 0px 5px; - line-height: 2em; - margin-bottom: @line-height-computed; -} -body .typo3-feedit-element-hidden { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - opacity: 0.5; - &:hover { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); - opacity: 1; - } -} -.t3-icon { - vertical-align: middle; -} -.typo3-feedit-page { - .clearfix(); - .typo3-feedit-element { - outline: none!important; - border-bottom: 3px solid @brand-primary; - } - .typo3-editPanel { - margin-bottom: 0; - } -} - - -// -// Lightbox / Modals -// -------------------------------------------------- -.modal-lightbox { - margin: 10px auto; - .close { - position: absolute; - top: 0px; - right: 0px; - padding: 0px 15px; - line-height: 40px; - } - .modal-body { - padding: 0px; - } - .modal-content { - border: none; - } - .modal-caption { - background-color: @brand-primary; - background-color: fade(@brand-primary,90%); - color: #FFFFFF; - padding: @line-height-computed/2 @line-height-computed; - } - .modal-caption-title { - display: block; - font-size: 1.2em; - font-weight: bold; - } - .img-responsive { - margin-bottom: 0px; - } -} -@media screen and (min-width: @screen-sm-min) { - .modal-lightbox { - .modal-caption { - position: absolute; - left: 0px; - bottom: @line-height-computed; - max-width: 80%; - } - margin: 30px auto; - width: 600px; - } -} -@media screen and (min-width: @screen-md-min) { - .modal-lightbox { - width: 800px; - } -} -.modal-backdrop { - &.in { - .opacity(.8); - } -} - - -// -// TYPO3 FORM -// -------------------------------------------------- -.csc-form-element { - .form-group { - .clearfix(); - } - .control-label { - text-align: left; - legend { - font-family: @font-family-base; - font-size: @font-size-base; - line-height: @line-height-base; - display: inline-block; - max-width: 100%; - margin-bottom: 5px; - font-weight: bold; - border: none; - } - } - .help-block.text-danger { - .text-emphasis-variant(@state-danger-text); - font-weight: normal; - } -} -.csc-form-element-radio .radio input[type="radio"], -.csc-form-element-checkbox .checkbox input[type="checkbox"] { - margin-left: 0; -} -.csc-form-confirmation { - ol { - list-style: none; - padding-left: 0; - margin: 0; - li { - display: inline-block; - } - } -} -.csc-form-confirmation-false, -.csc-form-confirmation-true { - input { - .btn(); - } -} -.csc-form-confirmation-true { - input { - .btn-primary(); - } -} -.csc-form-confirmation-false { - input { - .btn-default(); - } -} \ No newline at end of file +// Bootstrap Package Theme +// -------------------------------------------------- +@import "webfont.less"; +@import "text.less"; +@import "misc.less"; +@import "scaffolding.less"; +@import "fixes.less"; +@import "navbar.less"; +@import "dropdown.less"; +@import "breadcrumb.less"; +@import "image.less"; +@import "news.less"; +@import "carousel.less"; +@import "texticon.less"; +@import "frame.less"; +@import "footer.less"; +@import "meta.less"; +@import "lightbox.less"; +@import "typo3_frontend_editing.less"; +@import "typo3_form.less"; \ No newline at end of file diff --git a/Resources/Private/Less/Theme/typo3_form.less b/Resources/Private/Less/Theme/typo3_form.less new file mode 100644 index 000000000..f7aef336d --- /dev/null +++ b/Resources/Private/Less/Theme/typo3_form.less @@ -0,0 +1,55 @@ +// +// TYPO3 FORM +// -------------------------------------------------- +.csc-form-element { + .form-group { + .clearfix(); + } + .control-label { + text-align: left; + legend { + font-family: @font-family-base; + font-size: @font-size-base; + line-height: @line-height-base; + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: bold; + border: none; + } + } + .help-block.text-danger { + .text-emphasis-variant(@state-danger-text); + font-weight: normal; + } +} +.csc-form-element-radio .radio input[type="radio"], +.csc-form-element-checkbox .checkbox input[type="checkbox"] { + margin-left: 0; +} +.csc-form-confirmation { + ol { + list-style: none; + padding-left: 0; + margin: 0; + li { + display: inline-block; + } + } +} +.csc-form-confirmation-false, +.csc-form-confirmation-true { + input { + .btn(); + } +} +.csc-form-confirmation-true { + input { + .btn-primary(); + } +} +.csc-form-confirmation-false { + input { + .btn-default(); + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/typo3_frontend_editing.less b/Resources/Private/Less/Theme/typo3_frontend_editing.less new file mode 100644 index 000000000..9056d656a --- /dev/null +++ b/Resources/Private/Less/Theme/typo3_frontend_editing.less @@ -0,0 +1,38 @@ +// +// Frontend Editing +// -------------------------------------------------- +body .typo3-feedit-element { + outline: 3px solid fade(@brand-primary, 50%) !important; + &:hover { + outline: 3px solid @brand-primary !important; + } +} +.typo3-editPanel { + .clearfix(); + background-color: #eaeaea!important; + color: #333333; + padding: 0px 5px; + line-height: 2em; + margin-bottom: @line-height-computed; +} +body .typo3-feedit-element-hidden { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); + opacity: 0.5; + &:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; + } +} +.t3-icon { + vertical-align: middle; +} +.typo3-feedit-page { + .clearfix(); + .typo3-feedit-element { + outline: none!important; + border-bottom: 3px solid @brand-primary; + } + .typo3-editPanel { + margin-bottom: 0; + } +} \ No newline at end of file diff --git a/Resources/Private/Less/Theme/webfont.less b/Resources/Private/Less/Theme/webfont.less new file mode 100644 index 000000000..13a78bd75 --- /dev/null +++ b/Resources/Private/Less/Theme/webfont.less @@ -0,0 +1,39 @@ +// +// Share Font +// -------------------------------------------------- +@font-face { + font-family: 'Share'; + font-style: normal; + font-weight: 400; + src: url('@{icon-font-path}/share-regular-webfont-webfont.eot'); + src: url('@{icon-font-path}/share-regular-webfont-webfont.eot?#iefix') format('embedded-opentype'), + url('@{icon-font-path}/share-regular-webfont-webfont.woff') format('woff'), + url('@{icon-font-path}/share-regular-webfont-webfont.ttf') format('truetype'); +} +@font-face { + font-family: 'Share'; + font-style: italic; + font-weight: 400; + src: url('@{icon-font-path}/share-italic-webfont-webfont.eot'); + src: url('@{icon-font-path}/share-italic-webfont-webfont.eot?#iefix') format('embedded-opentype'), + url('@{icon-font-path}/share-italic-webfont-webfont.woff') format('woff'), + url('@{icon-font-path}/share-italic-webfont-webfont.ttf') format('truetype'); +} +@font-face { + font-family: 'Share'; + font-style: normal; + font-weight: 500; + src: url('@{icon-font-path}/share-bold-webfont-webfont.eot'); + src: url('@{icon-font-path}/share-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'), + url('@{icon-font-path}/share-bold-webfont-webfont.woff') format('woff'), + url('@{icon-font-path}/share-bold-webfont-webfont.ttf') format('truetype'); +} +@font-face { + font-family: 'Share'; + font-style: normal; + font-weight: bold; + src: url('@{icon-font-path}/share-bold-webfont-webfont.eot'); + src: url('@{icon-font-path}/share-bold-webfont-webfont.eot?#iefix') format('embedded-opentype'), + url('@{icon-font-path}/share-bold-webfont-webfont.woff') format('woff'), + url('@{icon-font-path}/share-bold-webfont-webfont.ttf') format('truetype'); +}