From 943ac3c77ec1dd93d14a780b25fa147d0f882760 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= Date: Wed, 12 Feb 2014 21:58:40 +0100 Subject: new theme, baggy one cf #448 --- themes/baggy/css/font.css | 0 themes/baggy/css/main.css | 821 +++++++++++++++++++++++++++++++++++++++ themes/baggy/css/messages.css | 0 themes/baggy/css/print.css | 48 +++ themes/baggy/css/ratatouille.css | 211 ++++++++++ 5 files changed, 1080 insertions(+) create mode 100755 themes/baggy/css/font.css create mode 100755 themes/baggy/css/main.css create mode 100755 themes/baggy/css/messages.css create mode 100755 themes/baggy/css/print.css create mode 100644 themes/baggy/css/ratatouille.css (limited to 'themes/baggy/css') diff --git a/themes/baggy/css/font.css b/themes/baggy/css/font.css new file mode 100755 index 00000000..e69de29b diff --git a/themes/baggy/css/main.css b/themes/baggy/css/main.css new file mode 100755 index 00000000..45211a87 --- /dev/null +++ b/themes/baggy/css/main.css @@ -0,0 +1,821 @@ +/* ========================================================================== + Sommaire + + 1 = Style Guide + 2 = Layout + 3 = Pictos + 4 = Messages + 5 = Article + 6 = Media queries + + ========================================================================== */ + +html { + min-height: 100%; +} + +body { + background: #EEE; +} + +.login { + background: #333; +} + +.login #main { + padding: 0; + margin: 0; +} + +.login form { + background: #FFF; + padding: 1.5em; + box-shadow: 0 1px 8px rgba(0,0,0,0.9); + width: 20em; + position: absolute; + top: 8em; + left: 50%; + margin-left: -10em; +} + +.login .logo { + position: absolute; + top: 2em; + left: 50%; + margin-left: -55px; +} + +/* ========================================================================== + 1 = Style Guide + ========================================================================== */ + +::selection { + color: #FFF; + background: #000; +} + +.desktopHide { + display: none; +} + +.logo { + position: fixed; + z-index: 20; + top: 0.4em; + left: 0.6em; +} + +h2, h3, h4 { + font-family: 'PT Sans', sans-serif; + text-transform: uppercase; +} + +p, li { + color: #666; +} + +a { + color: #000; + font-weight: bold; +} + +a:hover, a:focus { + text-decoration: none; +} + +form fieldset { + border:0; + padding: 0; + margin: 0; +} + +form input[type="text"], select, form input[type="password"], form input[type="url"] { + border: 1px solid #999; + padding: 0.5em 1em; + min-width: 12em; + color: #666; +} + +@media screen and (-webkit-min-device-pixel-ratio:0){ + select{ + -webkit-appearance: none; + border-radius: 0; + background: #FFF url(../img/bg-select.png) no-repeat right center; + } +} + +fieldset label { + min-width: 12.5em; +} + +.inline .row { + display: inline-block; + margin-right: 0.5em; +} + +.inline label { + min-width: 6em; +} + +fieldset label { + display: inline-block; + margin-right: 0.5em; + color: #666; +} + +form .row { + margin-bottom: 0.5em; +} + +form button, input[type="submit"] { + cursor:pointer; + background: #000; + color: #FFF; + border:0; + padding: 0.5em 1em; + display: inline-block; + border:1px solid #000; +} + + form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus { + background: #FFF; + color: #000; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; + } + +#bookmarklet { + cursor: move; +} + +h2:after { + content: ""; + height: 4px; + width: 70px; + background: #000; + display: block; +} + +.links { + padding: 0; + margin: 0; +} + .links li { + list-style: none; + margin: 0; + padding: 0; + } + + +#links { + position: fixed; + top: 0; + width: 9em; + left: 0; + text-align: right; + background: #333; + padding-top: 9em; + height: 100%; + box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); + z-index: 10; +} + +#main { + margin-left: 12em; + position: relative; + z-index: 10; + padding-right: 5%; +} + + #links a { + display: block; + padding: 0.5em 2em 0.5em 1em; + color: #FFF; + position: relative; + text-transform: uppercase; + text-decoration: none; + font-weight: normal; + font-family: 'PT Sans', sans-serif; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; + } + + #links a:hover, #links a:focus { + background: #999; + color: #000; + } + + #links .current:after { + content: ""; + width: 0; + height: 0; + position: absolute; + border-style: solid; + border-width: 10px; + border-color: transparent #EEE transparent transparent; + right: 0; + top: 50%; + margin-top: -10px; + } + + #links li:last-child { + position: fixed; + bottom: 1em; + width: 10%; + } + + #links li:last-child a:before { + font-size: 1.2em; + position: relative; + top: 2px; + } + + +/* ========================================================================== + 2 = Layout + ========================================================================== */ + +#content { + margin-top: 5em; + min-height: 30em; +} + +footer { + text-align: right; + position: fixed; + bottom: 0; + right: 5em; + color: #999; + font-size: 0.8em; + font-style: italic; +} + +footer a { + color: #999; + font-weight: normal; +} + +.list-entries { + letter-spacing:-5px; +} + +.list-entries + .results { + margin-bottom: 2em; +} + +.estimatedTime a { + color: #999; + font-style: italic; + font-weight: normal; + font-size: 0.9em; +} + +.estimatedTime small { + position: relative; + top: -1px; +} + +.entrie { + background: #FFF; + letter-spacing:normal; + box-shadow: 0 3px 7px rgba(0,0,0,0.3); + display: inline-block; + width: 32%; + margin-bottom: 1.5em; + vertical-align: top; + margin-left: 1.5%; + position: relative; + overflow: hidden; + padding: 1.5em 1.5em 3em 1.5em; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + +.entrie:before { + content: ""; + width: 0; + height: 0; + border-style:solid; + border-color: transparent transparent #000 transparent; + border-width: 10px; + position: absolute; + bottom: 0.3em; + z-index: 10; + right: 1.5em; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + +.entrie:after { + content: ""; + position: absolute; + height: 7px; + width: 100%; + bottom: 0; + left: 0; + background: #000; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + +.entrie:hover { + box-shadow: 0 3px 10px rgba(0,0,0,1); +} + +.entrie:hover:after { + height: 40px; +} + +.entrie:hover:before { + bottom: 2.4em; +} + +.entrie:hover h2 a { + color: #666; +} + +.entrie h2 { + text-transform: none; + margin-bottom: 0; +} + + .entrie h2:after { + content: none; + } + +.entrie h2 a { + display: block; + text-decoration: none; + color: #000; + word-wrap: break-word; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + +.entrie h2 a:after { + content: ""; + position: absolute; + top: 0; + width: 100%; + height: 100%; + left: 0; +} + +.entrie p { + color: #666; + font-size: 0.9em; + line-height: 1.7; +} + + .entrie h2 a:first-letter { + text-transform: uppercase; + } + +.entrie:hover .tools { + bottom: 0; +} + +.entrie .tools { + position: absolute; + bottom: -50px; + left: 0; + width: 100%; + z-index: 10; + padding-right: 0.5em; + text-align: right; + -webkit-transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -o-transition: all 0.5s ease; + transition: all 0.5s ease; +} + + .entrie .tools a { + color: #666; + text-decoration: none; + display: block; + padding: 0.4em; + } + + .entrie .tools a:hover { + color: #FFF; + } + + .entrie .tools li { + display: inline-block; + } + +.entrie:nth-child(3n+1) { + margin-left: 0; +} + +.results { + letter-spacing: -5px; + padding: 0 0 0.5em; +} + +.results > * { + display: inline-block; + vertical-align: top; + letter-spacing: normal; + width: 50%; +} + +.pagination { + text-align: right; +} + +.nb-results { + text-align: left; + font-style: italic; + color: #999; +} + +.pagination > * { + display: inline-block; + margin-left: 0.5em; +} + +.pagination a { + color: #999; + text-decoration: none; +} + + .pagination a:hover, .pagination a:focus { + text-decoration: underline; + } + +.pagination .disabled { + display: none; +} + +/* ========================================================================== + 3 = Pictos + ========================================================================== */ + +@font-face { + font-family: 'icomoon'; + src:url('../font/icomoon.eot?-s0mcsx'); + src:url('../font/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), + url('../font/icomoon.woff?-s0mcsx') format('woff'), + url('../font/icomoon.ttf?-s0mcsx') format('truetype'), + url('../font/icomoon.svg?-s0mcsx#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +.icon span { + position: absolute; + top: -9999px; +} + +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: 'icomoon'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-flattr:before { + content: "\e800"; +} +.icon-mail:before { + content: "\e80a"; +} +.icon-up-open:before { + content: "\e80b"; +} +.icon-star:before { + content: "\e805"; +} +.icon-check:before { + content: "\e804"; +} +.icon-link:before { + content: "\e801"; +} +.icon-reply:before { + content: "\e806"; +} +.icon-menu:before { + content: "\e802"; +} +.icon-clock:before { + content: "\e803"; +} +.icon-twitter:before { + content: "\e807"; +} +.icon-down-open:before { + content: "\e809"; +} +.icon-trash:before { + content: "\e80c"; +} +.icon-delete:before { + content: "\e600"; +} +.icon-power:before { + content: "\e601"; +} +.icon-arrow-up-thick:before { + content: "\e602"; +} +.icon-rss:before { + content: "\e808"; +} + +/* ========================================================================== + Icon selected + ========================================================================== */ + +.icon-star.fav:before { + color: #FFF; +} + +/* ========================================================================== + 4 = Messages + ========================================================================== */ + +.messages { + text-align: center; +} + +.messages > * { display: inline-block;} + +.closeMessage { + background: #000; + color: #FFF; + padding: 0.2em 0.5em; + text-decoration: none; +} + + .closeMessage:hover, .closeMessage:focus { + background: #FFF; + color: #000; + } + +.warning { + font-size: 3em; + color: #999; + font-style: italic; + position: absolute; + top: 50%; + left: 0; + width: 100%; + text-align: center; + padding-right: 5%; + margin-top: -2em; +} + +/* ========================================================================== + 5 = Article + ========================================================================== */ + +#article { + width: 70%; + margin-bottom: 3em; +} + +#article .tags { + margin-bottom: 1em; +} + +#article i { + font-style: normal; +} + +blockquote { + border:1px solid #999; + background: #FFF; + padding: 1em; + margin: 0; +} + +#article h2, #article h3, #article h4 { + text-transform: none; +} + +#article h2:after { + content: none; +} + +.topPosF { + position: fixed; + right: 20%; + bottom: 2em; + font-size: 1.5em; +} + +#article_toolbar { + margin-bottom: 1em; +} + +#article_toolbar li { + display: inline-block; +} + +#article_toolbar a { + background: #000; + padding: 0.3em 0.5em 0.2em; + color: #FFF; + text-decoration: none; +} + + #article_toolbar a:hover, #article_toolbar a:focus { + background: #999; + } + +.shaarli:before { + content: "*"; +} + +.return { + text-decoration: none; + margin-top: 1em; + display: block; +} + +.return:before { + margin-right: 0.5em; +} + +.notags { + font-style: italic; + color: #999; +} + +.icon-rss { + background: #000; + color: #FFF; + padding: 0.2em 0.5em; +} + +.icon-rss:before { + position: relative; + top: 2px; +} + +.list-tags li { + margin-bottom: 0.5em; +} + +.list-tags .icon-rss:hover, .list-tags .icon-rss:focus { + background: #FFF; + color: #000; + text-decoration: none; +} + +.list-tags a { + text-decoration: none; +} + +.list-tags a:hover, .list-tags a:focus { + text-decoration: underline; +} + +/* ========================================================================== + 6 = Media Queries + ========================================================================== */ + +@media screen and (max-width: 1050px) { + .entrie { + width: 49%; + } + .entrie:nth-child(3n+1) { + margin-left: 1.5%; + } + .entrie:nth-child(2n+1) { + margin-left: 0; + } +} + +@media screen and (max-width: 900px) { + #article { + width: 80%; + } + .topPosF { + right: 2.5em; + } +} + +@media screen and (max-width: 700px) { + .entrie { + width: 100%; + margin-left: 0; + } +} + +@media screen and (max-width: 500px) { + .entrie { + width: 100%; + margin-left: 0; + } + body > header { + background: #333; + position: fixed; + top: 0; + width: 100%; + height: 3em; + z-index: 11; + } + #links li:last-child { + position: static; + width: auto; + } + #links li:last-child a:before { + content: none; + } + .logo { + width: 1.5em; + height: 1.5em; + left: 0; + top: 0; + } + .login > header { + position: static; + } + .login form { + width: 100%; + position: static; + margin-left: 0; + } + .login .logo { + width: auto; + height: auto; + top: 0.5em; + width: 75px; + height: 75px; + margin-left: -37.5px; + } + .desktopHide { + display: block; + position: fixed; + z-index: 20; + top: 0; + right: 0; + border:0; + width: 2.5em; + height: 2.5em; + cursor: pointer; + background: #999; + font-size: 1.2em; + } + .desktopHide:hover, .desktopHide:focus { + background: #FFF; + } + #links { + display: none; + width: 100%; + height: auto; + padding-top: 3em; + } + footer { + position: static; + margin-right: 3em; + } + #main { + margin-left: 1.5em; + padding-right: 1.5em; + position: static; + } + #article_toolbar .topPosF { + display: none; + } + + #article { + width: 100%; + } + + #article h1 { + font-size: 1.5em; + } + #article_toolbar a { + padding: 0.3em 0.4em 0.2em; + } +} \ No newline at end of file diff --git a/themes/baggy/css/messages.css b/themes/baggy/css/messages.css new file mode 100755 index 00000000..e69de29b diff --git a/themes/baggy/css/print.css b/themes/baggy/css/print.css new file mode 100755 index 00000000..9aefa779 --- /dev/null +++ b/themes/baggy/css/print.css @@ -0,0 +1,48 @@ +/* ### Layout ### */ + +body { + font-family: Serif; + background-color: #fff; +} + +@page { + margin: 1cm; +} + +img { + max-width: 100% !important; +} + +/* ### Content ### */ + +/* Hide useless blocks */ +body > header, +#links, +#sort, +body > footer, +.top_link, +div.tools, +header div, +.messages, +.entrie + .results { + display: none !important; +} + +article { + border: none !important; +} + +/* Add URL after links */ +.vieworiginal a:after { + content: " (" attr(href) ")"; +} + +/* Add explanation after abbr */ +abbr[title]:after { + content: " (" attr(title) ")"; +} + +/* Change border on current pager item */ +.pagination span.current { + border-style: dashed; +} diff --git a/themes/baggy/css/ratatouille.css b/themes/baggy/css/ratatouille.css new file mode 100644 index 00000000..b203cbb8 --- /dev/null +++ b/themes/baggy/css/ratatouille.css @@ -0,0 +1,211 @@ +/* + Ratatouille mini Framework css by Thomas LEBEAU + Base on KNACSS => www.KNACSS.com (2013-10) @author: Raphael Goetter, Alsacreations + and normalize.css +*/ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +body { + font-size: 1em; + line-height:1.5; + margin: 0; +} + +/* ========================================================================== + Mise en forme + ========================================================================== */ + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child, +p:first-child, +ul:first-child, +ol:first-child, +dl:first-child{ + margin-top: 0; +} + +code, +kbd, +pre, +samp { + font-family: monospace, serif; +} + +pre { + white-space: pre-wrap; +} + + +.upper { + text-transform: uppercase; +} + +.bold { + font-weight: bold; +} + +.inner { + margin: 0 auto; + max-width: 61.25em;/*980px*/ +} + +table, img { + max-width: 100%; + height :auto; +} + +iframe { + max-width: 100%; +} + +.fl { + float: left; +} + +.fr { + float: right; +} + +table { + border-collapse: collapse; +} + +figure { + margin: 0; +} + +button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + margin: 0; +} + +input[type="search"] { + -webkit-appearance: textfield; +} + +/* ========================================================================== + Mise en page + ========================================================================== */ + +.dib { + display: inline-block; + vertical-align: middle; +} + +.dnone { + display: none; +} + +.dtable { display:table } + + .dtable > * { display:table-row; } + + .dtable > * > * { display:table-cell; } + +.element-invisible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.small { + font-size:0.8em; +} + +.big { + font-size: 1.2em; +} + +/*Width*/ + +.w100 { width:100%; } +.w90 { width:90%; } +.w80 { width:80%; } +.w70 { width:70%; } +.w60 { width:60%; } +.w50 { width:50%; } +.w40 { width:40%; } +.w30 { width:30%; } +.w20 { width:20%; } +.w10 { width:10%; } + + +/* ========================================================================== + Internet Explorer + ========================================================================== */ + +/*IE8 and IE9*/ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/*IE8 and IE9*/ + +audio, +canvas, +video { + display: inline-block; +} + +@media screen and (-webkit-min-device-pixel-ratio:0){ + select{ + -webkit-appearance: none; + border-radius: 0; + } +} + +/* ========================================================================== + Medias Queries + ========================================================================== */ + +/*Desktop 1080px*/ + +@media screen and (max-width: 67.50em) { +} + +/*Tablet 800px*/ + +@media screen and (max-width: 50em) { +} + +/*Mobile 640px*/ + +@media screen and (max-width: 40em) { +} + -- cgit v1.2.3