(Created page with "<html> <style> /** Color Background **************************************************************** **/ →GRAIN BLUE BACKGROUND: body.grain-blue, body.grain-blue...") |
|||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | /** Globals | ||
+ | **************************************************************** **/ | ||
+ | html, body { | ||
+ | height:100%; | ||
+ | direction: ltr; | ||
+ | } | ||
+ | body { | ||
+ | color:#666; | ||
+ | background-color:#fff; | ||
+ | font-family:'Open Sans',Arial,Helvetica,sans-serif; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | |||
+ | font-size:16px; line-height:1.5; | ||
+ | margin:0; padding:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* example usage: index-onepage-youtube.html */ | ||
+ | body.has-image-bg section, | ||
+ | body.has-video-bg section { | ||
+ | background-color:#fff; | ||
+ | } | ||
+ | |||
+ | body #wrapper {/* used by RTL*/ | ||
+ | overflow:hidden; | ||
+ | min-height:100%; /* because short page hide long menus */ | ||
+ | } | ||
+ | |||
+ | body.bg-grey, | ||
+ | body.bg-grey #wrapper { | ||
+ | background-color:#f1f2f7; | ||
+ | } | ||
+ | |||
+ | section { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | padding: 80px 0; | ||
+ | border-bottom:rgba(0,0,0,0.1) 1px solid; | ||
+ | background-color: #fff; | ||
+ | |||
+ | -webkit-transition: all .400s; | ||
+ | -moz-transition: all .400s; | ||
+ | -o-transition: all .400s; | ||
+ | transition: all .400s; | ||
+ | |||
+ | background-attachment: fixed; | ||
+ | background-position: center center; | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | -webkit-background-size: cover !important; | ||
+ | -moz-background-size: cover !important; | ||
+ | -o-background-size: cover !important; | ||
+ | |||
+ | -webkit-box-sizing: border-box !important; | ||
+ | -moz-box-sizing: border-box !important; | ||
+ | background-size: cover !important; | ||
+ | box-sizing: border-box !important; | ||
+ | } | ||
+ | section:after, | ||
+ | section:before { | ||
+ | content:" "; | ||
+ | display:table; | ||
+ | } | ||
+ | section:after { | ||
+ | display: block; | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | /* remove effect on parallax */ | ||
+ | section.parallax { | ||
+ | -webkit-transition: none; | ||
+ | -moz-transition: none; | ||
+ | -o-transition: none; | ||
+ | transition: none; | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | Static background image | ||
+ | add to HTML: background-image:url(); | ||
+ | **/ | ||
+ | section.static-bg, | ||
+ | div.static-bg { | ||
+ | background-position: center !important; | ||
+ | background-repeat: no-repeat !important; | ||
+ | background-size: cover !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | section header.section-header { | ||
+ | margin-bottom:80px; | ||
+ | } | ||
+ | |||
+ | div.alternate, | ||
+ | section.alternate { | ||
+ | background-color:rgba(0,0,0,0.02) !important; | ||
+ | } | ||
+ | |||
+ | section.dark { | ||
+ | background-color:#212121 !important; | ||
+ | border-bottom:rgba(255,255,255,0.1) 1px solid; | ||
+ | } | ||
+ | section.dark.alternate { | ||
+ | background-color:#151515 !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | div.alternate-2, | ||
+ | section.alternate-2, | ||
+ | section.alternate-2 div.heading-title h1, | ||
+ | section.alternate-2 div.heading-title h2, | ||
+ | section.alternate-2 div.heading-title h3, | ||
+ | section.alternate-2 div.heading-title h4, | ||
+ | section.alternate-2 div.heading-title h5, | ||
+ | section.alternate-2 div.heading-title h6 { | ||
+ | background-color: #f4f4f4 !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | div.alternate-3, | ||
+ | section.alternate-3, | ||
+ | section.alternate-3 div.heading-title h1, | ||
+ | section.alternate-3 div.heading-title h2, | ||
+ | section.alternate-3 div.heading-title h3, | ||
+ | section.alternate-3 div.heading-title h4, | ||
+ | section.alternate-3 div.heading-title h5, | ||
+ | section.alternate-3 div.heading-title h6 { | ||
+ | background-color: #eae7e2 !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | div.lightgreen, | ||
+ | section.lightgreen, | ||
+ | section.lightgreen div.heading-title h1, | ||
+ | section.lightgreen div.heading-title h2, | ||
+ | section.lightgreen div.heading-title h3, | ||
+ | section.lightgreen div.heading-title h4, | ||
+ | section.lightgreen div.heading-title h5, | ||
+ | section.lightgreen div.heading-title h6 { | ||
+ | background-color: #eef4f2 !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* eaf7ff */ | ||
+ | div.lightblue, | ||
+ | section.lightblue, | ||
+ | section.lightblue div.heading-title h1, | ||
+ | section.lightblue div.heading-title h2, | ||
+ | section.lightblue div.heading-title h3, | ||
+ | section.lightblue div.heading-title h4, | ||
+ | section.lightblue div.heading-title h5, | ||
+ | section.lightblue div.heading-title h6 { | ||
+ | background-color: #dfe5ea !important; | ||
+ | } | ||
+ | |||
+ | /* different dark color */ | ||
+ | section.dark-2, | ||
+ | section.dark-2 div.heading-title h1, | ||
+ | section.dark-2 div.heading-title h2, | ||
+ | section.dark-2 div.heading-title h3, | ||
+ | section.dark-2 div.heading-title h4, | ||
+ | section.dark-2 div.heading-title h5, | ||
+ | section.dark-2 div.heading-title h6 { | ||
+ | color: #fff; | ||
+ | background-color: #333a3f !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | section.dark-2.alternate div.heading-title h1, | ||
+ | section.dark-2.alternate div.heading-title h2, | ||
+ | section.dark-2.alternate div.heading-title h3, | ||
+ | section.dark-2.alternate div.heading-title h4, | ||
+ | section.dark-2.alternate div.heading-title h5, | ||
+ | section.dark-2.alternate div.heading-title h6 { | ||
+ | color: #fff; | ||
+ | background-color: #292e32 !important; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .dark-2 a, | ||
+ | .dark-2 label, | ||
+ | .dark-2 h1, | ||
+ | .dark-2 h2, | ||
+ | .dark-2 h3, | ||
+ | .dark-2 h4, | ||
+ | .dark-2 h5, | ||
+ | .dark-2 h6 { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | section.theme-color, | ||
+ | section.theme-color h1, | ||
+ | section.theme-color h2, | ||
+ | section.theme-color h3, | ||
+ | section.theme-color h4, | ||
+ | section.theme-color h5, | ||
+ | section.theme-color h6, | ||
+ | section.theme- p, | ||
+ | section.dark, | ||
+ | section.dark p, | ||
+ | section.dark h1, | ||
+ | section.dark h2, | ||
+ | section.dark h3, | ||
+ | section.dark h4, | ||
+ | section.dark h5, | ||
+ | section.dark h6 { | ||
+ | color:#fff; | ||
+ | } | ||
+ | section.section-xxs { | ||
+ | padding:15px 0; | ||
+ | } | ||
+ | section.section-xs { | ||
+ | padding:30px 0; | ||
+ | } | ||
+ | section.section-sm { | ||
+ | padding:60px 0; | ||
+ | } | ||
+ | section.padding-md { | ||
+ | padding:80px 0; | ||
+ | } | ||
+ | section.section-lg { | ||
+ | padding:120px 0; | ||
+ | } | ||
+ | section.section-xlg { | ||
+ | padding:140px 0; | ||
+ | } | ||
+ | section.dark a { | ||
+ | color:#999; | ||
+ | } | ||
+ | section.parallax { | ||
+ | border:0; | ||
+ | } | ||
+ | |||
+ | body.bg-grey, | ||
+ | body.bg-grey #wrapper { | ||
+ | background-color:#f1f2f7; | ||
+ | } | ||
+ | .container { | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | a:active, | ||
+ | a:focus, | ||
+ | a:hover { | ||
+ | color: #212121; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* black link color - override theme color link */ | ||
+ | a.href-reset, | ||
+ | .href-reset a { | ||
+ | color:#121212; | ||
+ | } | ||
+ | section.dark a.href-reset, | ||
+ | section.dark .href-reset a { | ||
+ | color:#eee; | ||
+ | } | ||
+ | |||
+ | |||
+ | h1 a, | ||
+ | h2 a, | ||
+ | h3 a, | ||
+ | h4 a, | ||
+ | h5 a, | ||
+ | h6 a { | ||
+ | color:#121212; | ||
+ | } | ||
+ | h1 a:hover, | ||
+ | h2 a:hover, | ||
+ | h3 a:hover, | ||
+ | h4 a:hover, | ||
+ | h5 a:hover, | ||
+ | h6 a:hover { | ||
+ | color:#888; | ||
+ | } | ||
+ | |||
+ | section.dark h1 a, | ||
+ | section.dark h2 a, | ||
+ | section.dark h3 a, | ||
+ | section.dark h4 a, | ||
+ | section.dark h5 a, | ||
+ | section.dark h6 a { | ||
+ | color:#eee; | ||
+ | } | ||
+ | |||
+ | section.dark h1 a:hover, | ||
+ | section.dark h2 a:hover, | ||
+ | section.dark h3 a:hover, | ||
+ | section.dark h4 a:hover, | ||
+ | section.dark h5 a:hover, | ||
+ | section.dark h6 a:hover { | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | section header>h1, | ||
+ | section header>h2, | ||
+ | section header>h3, | ||
+ | section header>h4, | ||
+ | section header>h5, | ||
+ | section header>h6 { | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | small { | ||
+ | font-family: 'Lato', sans-serif; | ||
+ | } | ||
+ | label { | ||
+ | display:block; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* form control: inputs, textarea, etc */ | ||
+ | .btn { | ||
+ | position:relative; | ||
+ | } | ||
+ | .btn-default { | ||
+ | border-width:2px; | ||
+ | } | ||
+ | |||
+ | .btn>.badge-absolute { | ||
+ | position:absolute; | ||
+ | right:-6px; | ||
+ | top:-8px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .input-group-addon { | ||
+ | border:#ddd 2px solid; | ||
+ | border-right:0; | ||
+ | } | ||
+ | section.dark .input-group-addon { | ||
+ | background-color:#212121; | ||
+ | border-color:#666; | ||
+ | color:#eaeaea; | ||
+ | } | ||
+ | .form-control { | ||
+ | border:#ddd 2px solid; | ||
+ | box-shadow:none; | ||
+ | |||
+ | -webkit-border-radius: 3px; | ||
+ | -moz-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | section .input-group-btn .btn.btn-default, | ||
+ | section .input-group-btn button.btn-default { | ||
+ | border-width:2px; | ||
+ | border-color:#ddd; | ||
+ | } | ||
+ | .form-control:focus { | ||
+ | border-color:#c6c6c6; | ||
+ | } | ||
+ | section.dark .form-control { | ||
+ | border-color: #666; | ||
+ | background-color: rgba(255,255,255,0.05); | ||
+ | outline: none; | ||
+ | } | ||
+ | section.dark .form-control:focus { | ||
+ | border-color:#999; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .nav-tabs>li>a { | ||
+ | -webkit-border-radius: 3px 3px 0 0; | ||
+ | -moz-border-radius: 3px 3px 0 0; | ||
+ | border-radius: 3px 3px 0 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* DARK PRESETS */ | ||
+ | section.dark input, | ||
+ | section.dark select, | ||
+ | section.dark textarea { | ||
+ | color:#fff; | ||
+ | } | ||
+ | section.dark .btn { | ||
+ | color:#fff; | ||
+ | } | ||
+ | section.dark .thumbnail { | ||
+ | border-color:#444; | ||
+ | background-color:transparent; | ||
+ | } | ||
+ | section.dark h1.page-header, | ||
+ | section.dark h2.page-header, | ||
+ | section.dark h3.page-header, | ||
+ | section.dark h4.page-header, | ||
+ | section.dark h5.page-header, | ||
+ | section.dark h6.page-header { | ||
+ | border-bottom-color:#666; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* fonts */ | ||
+ | .font-open-sans { | ||
+ | font-family:'Open Sans',Arial,Helvetica,sans-serif !important; | ||
+ | } | ||
+ | .font-lato { | ||
+ | font-weight:300; | ||
+ | font-family:'Lato',Arial,Helvetica,sans-serif !important; | ||
+ | } | ||
+ | .font-raleway { | ||
+ | font-family:'Raleway',Arial,Helvetica,sans-serif !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* | ||
+ | GLOBAL RADIUS | ||
+ | Add here all needed bootstrap elements | ||
+ | */ | ||
+ | pre, | ||
+ | .alert, | ||
+ | .card, | ||
+ | .navbar-toggle, | ||
+ | .btn { | ||
+ | -webkit-border-radius: 3px; | ||
+ | -moz-border-radius: 3px; | ||
+ | border-radius: 3px; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | bootstrap rewrite | ||
+ | */ | ||
+ | img.img-fluid { | ||
+ | display:inline-block; | ||
+ | } | ||
/** Color Background | /** Color Background |
Revision as of 16:44, 28 June 2019