diff options
author | RaNaN <Mast3rRaNaN@hotmail.de> | 2013-07-09 19:21:18 +0200 |
---|---|---|
committer | RaNaN <Mast3rRaNaN@hotmail.de> | 2013-07-09 19:21:35 +0200 |
commit | 9f85e80188185b01c92f5f74343944e96382366d (patch) | |
tree | 686f37c412528b23616293fb2af81f25899308bd /pyload/web/app/styles | |
parent | Merge pull request #183 from stickell/master (diff) | |
download | pyload-9f85e80188185b01c92f5f74343944e96382366d.tar.xz |
adapted to pyload-common repo
Diffstat (limited to 'pyload/web/app/styles')
-rw-r--r-- | pyload/web/app/styles/default/base.less | 168 | ||||
-rw-r--r-- | pyload/web/app/styles/default/common.less | 90 | ||||
-rw-r--r-- | pyload/web/app/styles/default/main.less | 10 | ||||
-rw-r--r-- | pyload/web/app/styles/default/style.less | 106 | ||||
-rw-r--r-- | pyload/web/app/styles/font.css | 33 |
5 files changed, 29 insertions, 378 deletions
diff --git a/pyload/web/app/styles/default/base.less b/pyload/web/app/styles/default/base.less deleted file mode 100644 index 7744f3dd7..000000000 --- a/pyload/web/app/styles/default/base.less +++ /dev/null @@ -1,168 +0,0 @@ -@import "common"; - -/* - General -*/ - -* { - margin: 0; -} - -html, body { - height: 100%; -} - -body { - margin: 0; - padding: 0; - font-family: 'Abel', sans-serif; - font-size: 16px; - background: url("../../images/default/bgpattern.png") repeat scroll 0 0 transparent; -} - -h1, h2, h3 { - margin: 0; - padding: 0; - font-weight: normal; -} - -a { - text-decoration: none; - color: @blue; -} - -a:hover { - text-decoration: none; - color: @emph; -} - -#wrap { - min-height: 100%; -} - -#content { - padding-bottom: @footer-height; -} - -#content-container:before { - display: block; - content: " "; - height: @header-height; -} - -/* - Additional Responsive Class for larger desktop -*/ - -.visible-large-screen { - display: inherit !important; -} - -@media (max-width: @large-screen) { - .visible-large-screen { - display: none !important; - } -} - -.btn-blue { - background-color: hsl(206, 49%, 35%) !important; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5493c4), to(#2d5f84)); - background-image: -moz-linear-gradient(top, #5493c4, #2d5f84); - background-image: -ms-linear-gradient(top, #5493c4, #2d5f84); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5493c4), color-stop(100%, #2d5f84)); - background-image: -webkit-linear-gradient(top, #5493c4, #2d5f84); - background-image: -o-linear-gradient(top, #5493c4, #2d5f84); - background-image: linear-gradient(#5493c4, #2d5f84); - border-color: #2d5f84 #2d5f84 hsl(206, 49%, 30%); - color: #fff !important; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); - -webkit-font-smoothing: antialiased; - - .caret { - border-bottom-color: #FFFFFF; - border-top-color: #FFFFFF; - } - -} - -.btn-yellow { - background-color: hsl(46, 100%, 57%) !important; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffe389), to(#fecb23)); - background-image: -moz-linear-gradient(top, #ffe389, #fecb23); - background-image: -ms-linear-gradient(top, #ffe389, #fecb23); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffe389), color-stop(100%, #fecb23)); - background-image: -webkit-linear-gradient(top, #ffe389, #fecb23); - background-image: -o-linear-gradient(top, #ffe389, #fecb23); - background-image: linear-gradient(#ffe389, #fecb23); - border-color: #fecb23 #fecb23 hsl(46, 100%, 52%); - color: #333 !important; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33); - -webkit-font-smoothing: antialiased; - - .caret { - border-bottom-color: #FFFFFF; - border-top-color: #FFFFFF; - } -} - -// Fixes cursor on hover, which was changes in recent font-awesome -[class^="icon-"]:before, [class*=" icon-"]:before { - cursor: inherit; -} - -.icon-8x { - font-size: 8em; -} - -// Will not work well in buttons/navs, would require more rules -.icon-larger { - vertical-align: -10%; - font-size: 1.5em; -} - -/* - Modal Overlay -*/ -#modal-overlay { - content: " "; - height: 100%; - width: 100%; - position: absolute; - left: 0; - top: 0; - background: -moz-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(236, 208, 66, 0)), color-stop(100%, rgba(40, 119, 171, 0.9))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); - background: -o-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); - background: -ms-radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); - background: radial-gradient(center, ellipse cover, rgba(236, 208, 66, 0) 0%, rgba(40, 119, 171, 0.9) 100%); - z-index: 100; - opacity: 0; -} - -div.modal-header { - border-top-left-radius: 4px; - border-top-right-radius: 4px; - background-color: @blueDark; - color: #FFFFFF; - - .close { - color: @light; - } - -} - -.select2-container { - min-width: 220px; // same as other input fields -} - -div.modal-body { - max-height: 100%; -} - -div.modal { - width: 600px; - -}
\ No newline at end of file diff --git a/pyload/web/app/styles/default/common.less b/pyload/web/app/styles/default/common.less deleted file mode 100644 index 338ed38e7..000000000 --- a/pyload/web/app/styles/default/common.less +++ /dev/null @@ -1,90 +0,0 @@ -/* - Definitions -*/ - - -/* - Threshold for slightly larger screen -*/ -@large-screen: 1150px; - -@header-height: 70px; -@actionbar-height: 40px; -@footer-height: 66px; - -@light: #ffffff; -@dark: #333333; - -@grey: #757575; -@greyLight: #E5E5E5; -@greyLighter: #F5F5F5; -@greyDark: #444444; -@greyDarker: #111113; - -@yellow: #ffd856; -@yellowLighter: lighten(spin(@yellow, 10), 20%); -@yellowLightest: lighten(spin(@yellow, 15), 30%); -@yellowDark: darken(@yellow, 10%); - -@blue: #3571a2; -@blueLight: lighten(spin(@blue, 5), 10%); -@blueLighter: lighten(spin(@blue, 10), 20%); -@blueLightest: lighten(spin(@blue, 20), 40%); -@blueDark: darken(spin(@blue, -5), 10%); -@blueDarker: darken(spin(@blue, -10), 20%); - -@green: #468847; -@greenLight: lighten(spin(@green, 5), 10%); -@greenDark: darken(spin(@green, -5), 10%); - -@red: #b94a48; -@redLight: lighten(spin(@red, 5), 10%); -@redDark: darken(spin(@red, -5), 10%); - -@emph: #FF7637; - - -/* - Mixins -*/ - -.gradient(@origin: left, @start: #ffffff, @stop: #000000) { - background-color: @start; - background-image: -webkit-linear-gradient(@origin, @start, @stop); - background-image: -moz-linear-gradient(@origin, @start, @stop); - background-image: -o-linear-gradient(@origin, @start, @stop); - background-image: -ms-linear-gradient(@origin, @start, @stop); - background-image: linear-gradient(@origin, @start, @stop); -} - -.transition(@prop: all, @time: 0.25s, @ease: linear) { - -webkit-transition: @prop @time @ease; - -moz-transition: @prop @time @ease; - -o-transition: @prop @time @ease; - -ms-transition: @prop @time @ease; - transition: @prop @time @ease; -} - -.stripes(@color, @color2: rgba(255, 255, 255, 0.15)) { - background-color: @color; - background-image: -webkit-linear-gradient(45deg, @color2 25%, transparent 25%, transparent 50%, @color2 50%, @color2 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(45deg, @color2 25%, transparent 25%, transparent 50%, @color2 50%, @color2 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, @color2 25%, transparent 25%, transparent 50%, @color2 50%, @color2 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, @color2 25%, transparent 25%, transparent 50%, @color2 50%, @color2 75%, transparent 75%, transparent); - -webkit-background-size: 40px 40px; - -moz-background-size: 40px 40px; - -o-background-size: 40px 40px; - background-size: 40px 40px; -} -.stripes-animated { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - -ms-animation: progress-bar-stripes 2s linear infinite; - -o-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} - - -.default-shadow { - box-shadow: 0 0 5px @dark; -}
\ No newline at end of file diff --git a/pyload/web/app/styles/default/main.less b/pyload/web/app/styles/default/main.less index bb7abb43a..0bfa4fe2f 100644 --- a/pyload/web/app/styles/default/main.less +++ b/pyload/web/app/styles/default/main.less @@ -4,8 +4,18 @@ @FontAwesomePath: "../../fonts"; +@import "pyload-common/styles/base"; +@import "pyload-common/styles/basic-layout"; + @import "style"; @import "dashboard"; @import "settings"; @import "accounts"; @import "admin"; + +@ResourcePath: "../.."; +@DefaultFont: 'Abel', sans-serif; + +// Changed dimensions +@header-height: 70px; +@footer-height: 66px;
\ No newline at end of file diff --git a/pyload/web/app/styles/default/style.less b/pyload/web/app/styles/default/style.less index 6fb5a4857..2202217f6 100644 --- a/pyload/web/app/styles/default/style.less +++ b/pyload/web/app/styles/default/style.less @@ -1,10 +1,8 @@ -@import "default/base"; - +@import "common"; /* Header */ - header { // background-color: @greyDark; .gradient(to bottom, #222222, #111111); height: @header-height; @@ -16,12 +14,29 @@ header { // background-color: @greyDark; color: #ffffff; a { - color: #ffffff; + color: #ffffff; } .container-fluid, .row-fluid { height: @header-height; } + span.title { + color: white; + float: left; + font-family: SansationRegular, sans-serif; + font-size: 40px; + line-height: @header-height; + cursor: default; + } + + .logo { + margin-right: 10px; + margin-top: 10px; + width: 105px; + height: 107px; + background-size: auto; + } + } @header-inner-height: @header-height - 16px; @@ -32,36 +47,6 @@ header { // background-color: @greyDark; margin: 8px 0; } -header:before { - position: absolute; - content: ' '; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: transparent; - z-index: -1; - .default-shadow; -} - -header span.title { - color: white; - float: left; - font-family: SansationRegular, sans-serif; - font-size: 40px; - line-height: @header-height; - cursor: default; -} - -header .logo { - float: left; - margin-right: 10px; - margin-top: 10px; - width: 105px; - height: 107px; - background: url("../../images/default/logo.png") no-repeat; -} - .header-block { .centered; float: left; @@ -301,66 +286,13 @@ header .logo { -webkit-border-radius: 15px; } - /* Footer */ -footer { // Same gradient as navbar - .gradient(top, #222222, #111111); - color: @grey; - min-height: @footer-height; - margin-top: -@footer-height; - position: relative; - width: 100%; - line-height: 16px; - z-index: 10; -} - -footer:before { - position: absolute; - content: ' '; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: transparent; - box-shadow: 0 0 5px black; - z-index: -1; -} - -footer hr { - margin: 4px 0; - border-top-color: @greyDarker; - border-bottom-color: @greyDark; -} - -footer .span2 { - font-size: 12px; - padding-top: 12px; - padding-bottom: 12px; -} - -// This is the copyright span -footer .offset1 { - padding-top: 8px; - padding-bottom: 0; -} - footer .copyright { - background: url(../../images/default/logo_grey.png) no-repeat; background-size: 40px 40px; background-position: 12px center; height: 40px; padding-left: 40px; padding-top: 10px; - text-align: center; } - -footer h2 { - color: @light; - font-family: SansationLight, sans-serif; - font-size: 16px; - font-weight: normal; - line-height: 16px; - margin: 0; -}
\ No newline at end of file diff --git a/pyload/web/app/styles/font.css b/pyload/web/app/styles/font.css index 95d1614a5..088b6f14c 100644 --- a/pyload/web/app/styles/font.css +++ b/pyload/web/app/styles/font.css @@ -4,39 +4,6 @@ */ @font-face { - font-family: 'SansationRegular'; - src: url('../fonts/Sansation_Regular-webfont.eot'); - src: url('../fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Sansation_Regular-webfont.woff') format('woff'), - url('../fonts/Sansation_Regular-webfont.ttf') format('truetype'), - url('../fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'SansationLight'; - src: url('../fonts/Sansation_Light-webfont.eot'); - src: url('../fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Sansation_Light-webfont.woff') format('woff'), - url('../fonts/Sansation_Light-webfont.ttf') format('truetype'), - url('../fonts/Sansation_Light-webfont.svg#SansationLight') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'SansationBold'; - src: url('../fonts/Sansation_Bold-webfont.eot'); - src: url('../fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../fonts/Sansation_Bold-webfont.woff') format('woff'), - url('../fonts/Sansation_Bold-webfont.ttf') format('truetype'), - url('../fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg'); - font-weight: normal; - font-style: normal; -} - -@font-face { font-family: 'Abel'; font-style: normal; font-weight: 400; |