From bc694dc6a06e6bdf203e35d10118bb77fee41fd8 Mon Sep 17 00:00:00 2001 From: "Marcel Kapfer (mmk2410)" Date: Tue, 26 Apr 2016 19:33:53 +0200 Subject: [PATCH] CSS themes converted in SASS Ref T30 --- src/sass-themes/background-img.sass | 179 ++++++++++++++++++++++++++++ src/sass-themes/material-dark.sass | 161 +++++++++++++++++++++++++ src/sass-themes/material-light.sass | 156 ++++++++++++++++++++++++ 3 files changed, 496 insertions(+) create mode 100644 src/sass-themes/background-img.sass create mode 100644 src/sass-themes/material-dark.sass create mode 100644 src/sass-themes/material-light.sass diff --git a/src/sass-themes/background-img.sass b/src/sass-themes/background-img.sass new file mode 100644 index 0000000..6a87135 --- /dev/null +++ b/src/sass-themes/background-img.sass @@ -0,0 +1,179 @@ +/* + * Rangitaki Project + * + * The MIT License + * + * Copyright 2015 mmk2410. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + */ + +body + font-family: "Roboto", sans-serif + background: #f6f6f6 + color: #383838 + background-image: url(//example.com/res/img/intro.svg) + background-size: cover + background-attachment: fixed + background-position: top center + background-repeat: no-repeat + +.header + background-color: rgba(0, 0, 0, 0.45) + position: fixed + +.title + color: #fff + position: absolute + +.title > a + color: #fff + +.fadeout + background: -moz-linear-gradient(left, rgba(30,87,153,0) 0%, rgba(0, 0, 0, 0.45) 100%) + background: -webkit-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%) + background: -o-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%) + background: -ms-linear-gradient(left, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%) + background: linear-gradient(to right, rgba(30,87,153,0) 0%,rgba(0, 0, 0, 0.45) 100%) + +.nav + background-color: #fff + border-right: 1px solid #e0e0e0 + +.nav-item, .nav-item-static + color: #383838 + +.nav-item + font-weight: 600 + +.nav-item:active + background-color: #e2e2e2 + +.divider + border-bottom: 1px solid #e0e0e0 + +.card + background: #fff + border-radius: 2px + box-shadow: 0 1px 1.5px 1.5px rgba(62, 62, 62, 0.3) + +.card a + color: #ff4415 + text-decoration: none + border-bottom: 1px solid transparent + border-bottom-color: transparent + transition: border-bottom-color 150ms ease-in-out 100ms + +.card a:hover + border-bottom-color: #ff4415 + +.headline + font-size: 24px + color: #383838!important + text-decoration: none + border-bottom: none!important + +.headline:hover + color: #ff4415!important + +.date + font-size: 13px + +.articletext + font-size: 14px + line-height: 24px + +.author + font-size: 13px + +.tag + font-size: 13px + +.fab + background-color: #ff4415 + box-shadow: 0 1px 1.5px 1.5px rgba(62, 62, 62, 0.3) + +.subfab + background-color: #fff + box-shadow: 0 1px 1.5px 1.5px rgba(62, 62, 62, 0.3) + +.button + border-width: 1px + border-style: solid + text-transform: uppercase + -webkit-box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + -moz-box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + border-radius: 2px + letter-spacing: 0.4px + font-weight: 700 + font-size: 14px + transition-property: box-shadow + transition-delay: 50ms + transition-duration: 125ms + transition-timing-function: ease + -o-transition-property: box-shadow + -o-transition-delay: 50ms + -o-transition-duration: 125ms + -o-transition-timing-function: ease + -moz-transition-property: box-shadow + -moz-transition-delay: 50ms + -moz-transition-duration: 125ms + -moz-transition-timing-function: ease + -webkit-transition-property: box-shadow + -webkit-transition-delay: 50ms + -webkit-transition-duration: 125ms + -webkit-transition-timing-function: ease + +.button:hover, .button:hover + -webkit-box-shadow: 0.5px 1.8px 2.1px 1.4px rgba(32, 32, 32, 0.85) + -moz-box-shadow: 0.5px 1.8px 2.1px 1.4px rgba(32, 32, 32, 0.85) + box-shadow: 0.5px 1.8px 2.1px 1.4px rgba(32, 32, 32, 0.85) + +.pag_next + background-color: #ff4415 + border-color: #ff4415 + +.pag_prev + background-color: #fff + border-color: #fff + color: #383838 + +.footer + font-size: 12px + text-align: center + color: #fff + text-shadow: 1px 1px rgba(55, 55, 55, 0.3) + +.footer a + color: #fff + text-shadow: 1px 1px rgba(175, 175, 175, 0.3) + text-decoration: none + border-bottom: 1px solid transparent + border-bottom-color: transparent + +.footer a:hover + border-bottom-color: #fff + +@media screen and (min-width: 1440px) + + .nav + background-color: rgba(255, 255, 255, 0.8) + diff --git a/src/sass-themes/material-dark.sass b/src/sass-themes/material-dark.sass new file mode 100644 index 0000000..7c6e4d3 --- /dev/null +++ b/src/sass-themes/material-dark.sass @@ -0,0 +1,161 @@ +/* + * Rangitaki Project + * + * The MIT License + * + * Copyright 2015 mmk2410. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + */ + +body + font-family: "Roboto", sans-serif + background: #303030 + color: #fff + +.header + background-color: #212121 + position: fixed + box-shadow: 2px 0 2px 2px rgba(32, 32, 32, 0.85) + +.title + color: #fff + position: absolute + > a + color: #fff + +.fadeout + background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #212121 100%) + /* FF3.6+ + background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #212121 100%) + /* Chrome10+,Safari5.1+ + background: -o-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #212121 100%) + /* Opera 11.10+ + background: -ms-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #212121 100%) + /* IE10+ + background: linear-gradient(to right, rgba(30, 87, 153, 0) 0%, #212121 100%) + /* W3C + +.nav + background-color: #424242 + border-right: 1px solid #1f1f1f + +.nav-item, .nav-item-static + color: #fff + +.nav-item + font-weight: 600 + &:active + background-color: #383838 + +.divider + border-bottom: 1px solid #1f1f1f + +.card + background: #424242 + border-radius: 2px + box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + a + color: #ff4415 + text-decoration: none + border-bottom: 1px solid transparent + border-bottom-color: transparent + transition: border-bottom-color 150ms ease-in-out 100ms + &:hover + border-bottom-color: #ff4415 + +.headline + font-size: 24px + color: #fff !important + text-decoration: none + border-bottom: none !important + &:hover + color: #ff4415 !important + +.date + font-size: 13px + +.articletext + font-size: 14px + line-height: 24px + +.author, .tag + font-size: 13px + +.fab + background-color: #ff4415 + box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + +.subfab + background-color: #424242 + box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + +.button + text-transform: uppercase + border-width: 1px + border-style: solid + -webkit-box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + -moz-box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + box-shadow: 0 1px 1.5px 1.5px rgba(42, 42, 42, 0.65) + border-radius: 2px + letter-spacing: 0.4px + font-weight: 700 + font-size: 14px + transition-property: box-shadow + transition-delay: 50ms + transition-duration: 125ms + transition-timing-function: ease + -o-transition-property: box-shadow + -o-transition-delay: 50ms + -o-transition-duration: 125ms + -o-transition-timing-function: ease + -moz-transition-property: box-shadow + -moz-transition-delay: 50ms + -moz-transition-duration: 125ms + -moz-transition-timing-function: ease + -webkit-transition-property: box-shadow + -webkit-transition-delay: 50ms + -webkit-transition-duration: 125ms + -webkit-transition-timing-function: ease + &:hover + -webkit-box-shadow: 0.5px 1.8px 2.1px 1.4px rgba(32, 32, 32, 0.85) + -moz-box-shadow: 0.5px 1.8px 2.1px 1.4px rgba(32, 32, 32, 0.85) + box-shadow: 0.5px 1.8px 2.1px 1.4px rgba(32, 32, 32, 0.85) + +.pag_next + background-color: #ff4415 + border-color: #ff4415 + +.pag_prev + background-color: #424242 + border-color: #424242 + color: #CCCCCC + +.footer + font-size: 12px + text-align: center + color: #fff + a + color: #fff + text-decoration: none + border-bottom: 1px solid transparent + border-bottom-color: transparent + &:hover + border-bottom-color: #fff diff --git a/src/sass-themes/material-light.sass b/src/sass-themes/material-light.sass new file mode 100644 index 0000000..9f0ae75 --- /dev/null +++ b/src/sass-themes/material-light.sass @@ -0,0 +1,156 @@ +/* + * Rangitaki Project + * + * The MIT License + * + * Copyright 2015 mmk2410. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + */ + +body + font-family: "Roboto", sans-serif + background: #f6f6f6 + color: #383838 + +.header + background-color: #ff4415 + position: fixed + box-shadow: 2px 0 2px 2px rgba(62, 62, 62, 0.45) + +.title + color: #fff + position: absolute + > a + color: #fff + +.fadeout + background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #ff4415 100%) + background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #ff4415 100%) + background: -o-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #ff4415 100%) + background: -ms-linear-gradient(left, rgba(30, 87, 153, 0) 0%, #ff4415 100%) + background: linear-gradient(to right, rgba(30, 87, 153, 0) 0%, #ff4415 100%) + /* W3C + +.nav + background-color: #fff + border-right: 1px solid #e0e0e0 + +.nav-item, .nav-item-static + color: #383838 + +.nav-item + font-weight: 600 + &:hover, &:active + background-color: #e2e2e2 + +.divider + border-bottom: 1px solid #e0e0e0 + +.card + background: #fff + border-radius: 2px + box-shadow: 0 1px 1.5px 1.5px rgba(62, 62, 62, 0.3) + a + color: #ff4415 + text-decoration: none + border-bottom: 1px solid transparent + border-bottom-color: transparent + transition: border-bottom-color 150ms ease-in-out 100ms + &:hover + border-bottom-color: #ff4415 + +.headline + font-size: 24px + color: #383838 !important + text-decoration: none + border-bottom: none !important + &:hover + color: #ff4415 !important + +.date + font-size: 13px + +.articletext + font-size: 14px + line-height: 24px + +.author, .tag + font-size: 13px + +.fab + background-color: #ff4415 + box-shadow: 0 1px 1.5px 1.5px rgba(62, 62, 62, 0.3) + +.subfab + background-color: #fff + box-shadow: 0 1px 1.5px 1.5px rgba(62, 62, 62, 0.3) + +.button + text-transform: uppercase + border-width: 1px + border-style: solid + -webkit-box-shadow: 0.4px 1px 1.5px 1px #aaa + -moz-box-shadow: 0.4px 1px 1.5px 1px #aaa + box-shadow: 0.4px 1px 1.5px 1px #aaa + border-radius: 2px + letter-spacing: 0.4px + font-weight: 700 + font-size: 14px + transition-property: box-shadow + transition-delay: 50ms + transition-duration: 125ms + transition-timing-function: ease + -o-transition-property: box-shadow + -o-transition-delay: 50ms + -o-transition-duration: 125ms + -o-transition-timing-function: ease + -moz-transition-property: box-shadow + -moz-transition-delay: 50ms + -moz-transition-duration: 125ms + -moz-transition-timing-function: ease + -webkit-transition-property: box-shadow + -webkit-transition-delay: 50ms + -webkit-transition-duration: 125ms + -webkit-transition-timing-function: ease + &:hover + -webkit-box-shadow: 0.5px 1.8px 2.1px 1.4px #aaa + -moz-box-shadow: 0.5px 1.8px 2.1px 1.4px #aaa + box-shadow: 0.5px 1.8px 2.1px 1.4px #aaa + +.pag_next + background-color: #ff4415 + border-color: #ff4415 + +.pag_prev + background-color: #fff + border-color: #fff + color: #383838 + +.footer + font-size: 12px + text-align: center + a + color: #383838 + text-decoration: none + border-bottom: 1px solid transparent + border-bottom-color: transparent + &:hover + border-bottom-color: #383838