From 79e051a1f216704752e05f5174633abf20dde582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= Date: Tue, 20 Jan 2015 14:11:26 +0100 Subject: restructure folders --- themes/baggy/public/css/main.css | 1071 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 1071 insertions(+) create mode 100755 themes/baggy/public/css/main.css (limited to 'themes/baggy/public/css/main.css') diff --git a/themes/baggy/public/css/main.css b/themes/baggy/public/css/main.css new file mode 100755 index 00000000..1df82910 --- /dev/null +++ b/themes/baggy/public/css/main.css @@ -0,0 +1,1071 @@ +/* ========================================================================== + Sommaire + + 1 = Style Guide + 2 = Layout + 3 = Pictos + 4 = Messages + 5 = Article + 6 = Media queries + + ========================================================================== */ + +html { + min-height: 100%; +} + +body { + background-color: #EEE; +} + +.login { + background-color: #333; +} + +.login #main { + padding: 0; + margin: 0; +} + +.login form { + background-color: #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-color: #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, label { + 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"], form input[type="email"] { + 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; + } +} + +.inline .row { + display: inline-block; + margin-right: 0.5em; +} + +.inline label { + min-width: 6em; +} + +fieldset label { + display: inline-block; + min-width: 12.5em; + color: #666; +} + +label { + margin-right: 0.5em; +} + +form .row { + margin-bottom: 0.5em; +} + +form button, input[type="submit"] { + cursor:pointer; + background-color: #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-color: #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-color: #000; + display: block; +} + +.links { + padding: 0; + margin: 0; +} + .links li { + list-style: none; + margin: 0; + padding: 0; + } + + +#links { + position: fixed; + top: 0; + width: 10em; + left: 0; + text-align: right; + background-color: #333; + padding-top: 9.5em; + height: 100%; + box-shadow:inset -4px 0 20px rgba(0,0,0,0.6); + z-index: 15; +} + +#main { + margin-left: 13em; + position: relative; + z-index: 10; + padding-right: 5%; + padding-bottom: 1em; +} + + #links > li > 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 > li > a:hover, #links > li > a:focus { + background-color: #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: 10em; + } + + #links li:last-child a:before { + font-size: 1.2em; + position: relative; + top: 2px; + } + + +#sort { + padding: 0; + list-style-type: none; + opacity: 0.5; + display: inline-block; +} + +#sort li { + display: inline; + font-size: 0.9em; +} + +#sort li + li { + margin-left: 10px; +} + +#sort a { + padding: 2px 2px 0; + vertical-align: middle; +} + +#sort img { + vertical-align: baseline; +} +#sort img:hover { + cursor: pointer; +} + +#display-mode { + float: right; + vertical-align: middle; + margin-top: 10px; + margin-bottom: 10px; + opacity: 0.5; +} +#listmode { + width: 16px; + display: inline-block; + text-decoration: none; +} +#listmode a:hover { + opacity: 1; +} +#listmode.tablemode { + background-image: url("../img/baggy/table.png"); + background-repeat: no-repeat; + background-position: bottom; +} +#listmode.listmode { + background-image: url("../img/baggy/list.png"); + background-repeat: no-repeat; + background-position: bottom; +} + + +/* ========================================================================== + 2 = Layout + ========================================================================== */ + +#content { + margin-top: 5em; + min-height: 30em; +} + +footer { + text-align: right; + position: relative; + bottom: 0; + right: 5em; + color: #999; + font-size: 0.8em; + font-style: italic; + z-index: 20; +} + +footer a { + color: #999; + font-weight: normal; +} + +.list-entries { + letter-spacing:-5px; +} + +.listmode .entrie { + width: 100%!important; + margin-left: 0!important; +} + +.list-entries + .results { + margin-bottom: 2em; +} + +.estimatedTime .reading-time { + color: #999; + font-style: italic; + font-weight: normal; + font-size: 0.9em; +} + +.estimatedTime small { + position: relative; + top: -1px; +} + +.entrie { + background-color: #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; + + /* Removing CSS transitions because they make the switch from list view to + * table view jerky + */ + /* -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-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; +} + +.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; + line-height: 1.2; +} + + .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; + margin-bottom:50px; +} + +.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; +} + +/* ========================================================================== + 2.1 = "save a link" related styles + ========================================================================== */ + +.popup-form { + background: rgba(0,0,0,0.5); + position: absolute; + top: 0; + left: 10em; + z-index: 20; + height: 100%; + width: 100%; + margin: 0; + margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */ + padding: 2em; + display: none; + border-left: 1px #EEE solid; +} + + .popup-form form { + background-color: #FFF; + position: absolute; + top: 0; + left: 0; + z-index: 20; + border: 10px solid #000; + width: 400px; + height: 200px; + padding: 2em; + } + +#bagit-form-form .addurl { + margin-left: 0; +} + +.closeMessage, +.close-button { + background-color: #000; + color: #FFF; + font-size: 1.2em; + line-height: 1.6; + width: 1.6em; + height: 1.6em; + text-align: center; + text-decoration: none; +} + .closeMessage:hover, + .closeMessage:focus, + .close-button:hover, + .close-button:focus { + background-color: #999; + color: #000; + } + +.close-button--popup { + display: inline-block; + position: absolute; + top: 0; + right: 0; + font-size: 1.4em; +} + +.active-current { + background-color: #999; +} + +.active-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; +} + +.opacity03 { + opacity: 0.3; +} + +.add-to-wallabag-link-after { + background-color: #000; + color: #fff; + padding: 0 3px 2px 3px; +} + +a.add-to-wallabag-link-after { + visibility: hidden; + position: absolute; + opacity: 0; + transition-duration: 2s; + transition-timing-function: ease-out; +} + +#article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover { + opacity: 1; + visibility: visible; + transition-duration: .3s; + transition-timing-function: ease-in; +} + +a.add-to-wallabag-link-after:after { + content: "w"; +} + +#add-link-result { + font-weight: bold; + font-size: 0.9em; +} + +/* ========================================================================== + 3 = Pictos + ========================================================================== */ + +@font-face { + font-family: 'icomoon'; + src:url('../fonts/icomoon.eot?-s0mcsx'); + src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'), + url('../fonts/icomoon.woff?-s0mcsx') format('woff'), + url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'), + url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +.icon span, +.icon-image 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-print:before { + content: "\e80d"; +} + + +/* .icon-image class, for image-based icons + ========================================================================== */ + +.icon-image { + background-size: 16px 16px; + background-repeat: no-repeat; + background-position: center; + padding-right: 1em !important; + padding-left: 1em !important; +} + +/* Carrot (http://carrot.org) */ +.icon-image--carrot { + background-image: url('../../_global/img/icons/carrot-icon--white.png'); +} + +/* Diaspora */ +.icon-image--diaspora { + background-image: url('../../_global/img/icons/diaspora-icon--black.png'); +}} + +/* ========================================================================== + Icon selected + ========================================================================== */ + +.icon-star.fav:before { + color: #FFF; +} + +.icon-check.archive:before { + color: #FFF; +} + +/* ========================================================================== + 4 = Messages + ========================================================================== */ + +.messages { + text-align: left; + margin-top: 1em; +} + +.messages > * { display: inline-block;} + +.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;*/ + font-weight: bold; + display: block; + width: 100%; +} + +.more-info { + font-size: 0.85em; + line-height: 1.5; + color: #aaa; +} + + .more-info a { + color: #aaa; + } + +/* ========================================================================== + 5 = Article + ========================================================================== */ + +#article { + width: 70%; + margin-bottom: 3em; + text-align: justify; +} + +#article .tags { + margin-bottom: 1em; +} + +#article i { + font-style: normal; +} + +blockquote { + border:1px solid #999; + background-color: #FFF; + padding: 1em; + margin: 0; +} + +#article h1 { + text-align: left; +} + +#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-color: #000; + padding: 0.3em 0.5em 0.2em; + color: #FFF; + text-decoration: none; +} + + #article_toolbar a:hover, #article_toolbar a:focus { + background-color: #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-color: #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-color: #FFF; + color: #000; + text-decoration: none; +} + +.list-tags a { + text-decoration: none; +} + +.list-tags a:hover, .list-tags a:focus { + text-decoration: underline; +} + +pre code { + font-family: "Courier New", Courier, monospace; + border: 1px solid #ccc; + font-size: 0.96em; +} + + +/* ========================================================================== + 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; + } + #display-mode { + display: none; + } +} + +@media screen and (max-width: 500px) { + .entrie { + width: 100%; + margin-left: 0; + } + body > header { + background-color: #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.25em; + height: 1.25em; + 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-color: #999; + font-size: 1.2em; + } + .desktopHide:hover, .desktopHide:focus { + background-color: #FFF; + } + #links { + display: none; + width: 100%; + height: auto; + padding-top: 3em; + } + #links.menu--open { + display: block; + } + footer { + position: static; + margin-right: 3em; + } + #main { + margin-left: 1.5em; + padding-right: 1.5em; + position: static; + margin-top: 3em; + } + #article_toolbar .topPosF { + display: none; + } + + #article { + width: 100%; + } + + #article h1 { + font-size: 1.5em; + } + #article_toolbar a { + padding: 0.3em 0.4em 0.2em; + } + + #display-mode { + display: none; + } + + .popup-form, #bagit-form, #search-form { + left: 0; + width: 100%; + border-left: none; + } + + .popup-form form, + #bagit-form form, + #search-form form { + width: 100%; + } +} -- cgit v1.2.3