From 30d81a47c689e1d7d963fcd3fd42af9958805e31 Mon Sep 17 00:00:00 2001 From: Jeremy Benoist Date: Fri, 22 Jan 2016 13:45:10 +0100 Subject: Move public assets for themes So they can be installed using the `assets:install` command and there'll no longer symlink in the repo They moved from `web/themes/...` to `bundles/wallabagcore/themes/...` --- .../Resources/public/themes/material/css/main.css | 507 +++++++++++++++++++++ 1 file changed, 507 insertions(+) create mode 100755 src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css (limited to 'src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css') diff --git a/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css b/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css new file mode 100755 index 00000000..0ce334a3 --- /dev/null +++ b/src/Wallabag/CoreBundle/Resources/public/themes/material/css/main.css @@ -0,0 +1,507 @@ +/* ========================================================================== + Sommaire + + 0 = Common + 1 = Nav + 2 = Side-nav + 3 = Filters slider + 4 = Cards + 5 = Article + 6 = Media queries + 7 = Font + 8 = Others + + ========================================================================== */ + + +/* ========================================================================== + 0 = Common + ========================================================================== */ + +@font-face { + font-family: 'icomoon'; + src:url('../font/icomoon/icomoon.eot?yw303w'); + src:url('../font/icomoon/icomoon.eot?yw303w#iefix') format('embedded-opentype'), + url('../font/icomoon/icomoon.ttf?yw303w') format('truetype'), + url('../font/icomoon/icomoon.woff?yw303w') format('woff'), + url('../font/icomoon/icomoon.svg?yw303w#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + 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; +} + +body { + display: flex; + min-height: 100vh; + flex-direction: column; + background: #f0f0f0; +} + +body.login main { + padding: 0; +} + +#warning_message { + position: fixed; + background-color: #ff6347; + z-index: 1000; + bottom: 0; + left: 0; + width: 100%; + color: #000; +} + +#warning_message a { + color: #555; +} + +.border-bottom { + border-bottom: 1px solid #DDD; +} + +nav, main, footer { + padding-left: 240px; +} + +main, #content, .valign-wrapper { + height: 100%; +} + +#main { + flex: 1 0 auto; +} + +.results { + height: 1em; + line-height: 30px; +} + +.results .nb-results, .results .pagination { + margin: 15px; + margin-bottom: 0; +} + +.pagination li { + padding: 0; +} + +.pagination a { + padding: 0px 10px; + height: 30px; + display: block; +} + +.page-footer .footer-copyright p { + display: inline; +} + +.hidden { + display: none; +} + +.picker__date-display { + display: none; +} + +footer.page-footer { + margin-top: 10px; + padding-top: 10px; +} + +footer .row { + margin-bottom: 10px; +} + +/* ========================================================================== + 1 = Nav + ========================================================================== */ + +nav input { + color: #aaa; +} + +.nav-wrapper .button-collapse { + padding: 0px 15px; +} + +.nav-input { + display: none; +} + +.nav-panels { + overflow: hidden; +} + +.nav-panel-buttom li { + max-height: 64px; +} + +.nav-panel-buttom { + float: right; +} + +.nav-panels { + transition: background 0.2s ease; +} + +.nav-panel-add .mdi-content-add, +.nav-panel-search .mdi-action-search, +.nav-panels .mdi-navigation-close { + color: #444 !important; +} + +.nav-panels .action { + padding-left: 0.75rem; + font-size: 2.1rem; + white-space: nowrap; +} + +.nav-panels .input-field input { + display: block; + line-height: inherit; + padding-left: 4rem !important; + width: calc(100% - 8rem); +} + +.nav-panels .input-field input:focus { + background-color: #fff; + border: 0; + box-shadow: none; + color: #444; +} + +.input-field.nav-panel-add label { + left: 1rem; +} + +.input-field.nav-panel-add .mdi-navigation-close { + position: absolute; + top: 0; + right: 1rem; + color: transparent; + cursor: pointer; + font-size: 2rem; + transition: .3s color; +} + +#button_filters { + display: none; +} +#button_export { + display: none; +} + +/* ========================================================================== + 2 = Side-nav + ========================================================================== */ + +.side-nav.fixed a { + font-size: 13px; + line-height: 44px; + height: 44px; +} + +.bold > a { + font-weight: bold; +} + +.side-nav > li.logo { + line-height: 0; + text-align: center; +} + +#main .logo a { + height: 100pt; +} + +#main .logo img { + height: 100pt; + width: 100pt; +} + +#main .logo:hover { + background: transparent; +} + +.side-nav li { + padding: 0px; +} + +.side-nav a { + margin: 0px 1rem; +} + +/* ========================================================================== + * 3 = Filters slider + * ========================================================================== */ + +#filters button { + padding: 0px; + width: 100%; +} + +.side-nav.fixed.right-aligned { + right: -250px; + left: auto !important; + overflow-y: visible; +} + +#filters div.with-checkbox { + height: 3rem; + margin-top: 0px; +} + +/* ========================================================================== + 4 = Cards + ========================================================================== */ + +main #content { + padding: 0px 0.5rem; +} + +main ul.row { + padding: 0px 0.75rem; +} + +.data .card .card-body { + height: 22em; + overflow: hidden; +} + +.card .card-content .card-title { + line-height: 32px; +} + +.card .card-content .estimatedTime { + margin-bottom: 10px; +} + +.card .card-action .original { + line-height: 24px; +} + +.card .card-action ul.links { + margin: 0; + font-size: 24px; + line-height: 24px; +} + +.card .card-action a { + color: #ffffff; + margin: 0; +} + +.card .card-action a:hover { + color: #ffffff; +} + +.settings .div_tabs { + padding-bottom: 15px; +} + +.card.sw { + max-width: 370px; + margin-left: auto; + margin-right: auto; +} + +.mdi-card-close:before { + content: "\e8aa"; +} + +.card .card-image { + height: 14em; +} + +.card .card-image .preview { + height: 14em; + background-size: cover; + background-repeat: no-repeat; + background-position: 50%; +} + +/* ========================================================================== + 5 = Article + ========================================================================== */ + +#article { + font-size: 20px; + margin: 0px auto; + max-width: 40em; +} + +.reader-mode { + width: 95px !important; + transition: width 0.2s ease; +} + +.reader-mode:hover { + width: 240px !important; +} + +.reader-mode .collapsible-body { + height: 0; + overflow: hidden; +} + +.reader-mode:hover .collapsible-body { + height: auto; +} + +.reader-mode span { + opacity: 0; + transition: opacity 0.2s ease; +} + +.reader-mode:hover span { + opacity: 1; +} + +.progress { + position:fixed; + top:0px; + width: 100%; + height: 3px; + margin: 0; + z-index: 9999; +} + +#article aside .link { + color: #000; + font-size: 0.6em; + text-decoration: none; +} + +#article aside #list { + float: right; + margin-right: 15px; +} + +#article aside .chip { + background-color: #039be5; + color: #ffffff; +} + +/* ========================================================================== + 6 = Media queries + ========================================================================== */ + + @media only screen and (max-width : 992px) { + header, main, footer { + padding-left: 0; + } + nav, main, footer { + padding-left: 0; + } + .pagination { + width: auto; + } + .reader-mode { + width: 240px !important; + } + .reader-mode span { + opacity: 1; + } + } + +@media only screen and (min-width : 993px) and (max-width : 1180px) { + .row .col.l1 { + width: 25%; + margin-left: 0; } + .row .col.l2 { + width: 33.33333%; + margin-left: 0; } + .row .col.l3 { + width: 41.66667%; + margin-left: 0; } + .row .col.l4 { + width: 50%; + margin-left: 0; } + .row .col.l5 { + width: 58.33333%; + margin-left: 0; } + .row .col.l6 { + width: 66.66667%; + margin-left: 0; } + .row .col.l7 { + width: 75%; + margin-left: 0; } + .row .col.l8 { + width: 83.33333%; + margin-left: 0; } + .row .col.l9 { + width: 91.66667%; + margin-left: 0; } + .row .col.l10 { + width: 100%; + margin-left: 0; } +} + +@media only screen and (max-width : 350px) { + .nb-results { + display: none; + } +} + +/* ========================================================================== + 7 = Font + ========================================================================== */ + +.icon-google-plus2:before { + content: "\e800"; +} +.icon-facebook2:before { + content: "\e801"; +} +.icon-twitter:before { + content: "\e802"; +} +.icon-apple:before { + content: "\e803"; +} +.icon-android:before { + content: "\e804"; +} +.icon-chrome:before { + content: "\e805"; +} +.icon-firefox:before { + content: "\e806"; +} + +footer [class^="icon-"], footer [class*=" icon-"] { + font-size: 2em; + transition: text-shadow 0.2s ease; + padding-right: 10px; +} + +footer [class^="icon-"]:hover, footer [class*=" icon-"]:hover { + text-shadow: 0 0 10px rgba(0,0,0,0.3); +} + + +/* ========================================================================== + 8 = Others + ========================================================================== */ + +/* force height on non-input field in the settings page */ +div.settings div.input-field div, div.settings div.input-field ul { + margin-top: 40px; +} +/* but avoid to kill all file input */ +div.settings div.file-field div { + margin-top: inherit; +} -- cgit v1.2.3