From aa95b75060858db9c712097fa417a3198046499f Mon Sep 17 00:00:00 2001 From: Simounet Date: Tue, 5 Nov 2019 22:13:41 +0100 Subject: [PATCH] Little CSS adjustments + CSS generated --- css/style.css | 75 +++++++++++++++++++++++++++++++++++++++++------ css/style.css.map | 2 +- sass/style.scss | 4 +-- 3 files changed, 69 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index a8c08bf..ba36787 100644 --- a/css/style.css +++ b/css/style.css @@ -128,6 +128,7 @@ dfn { * Address differences between Firefox and other browsers. */ hr { + -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } @@ -325,6 +326,7 @@ html input[disabled] { */ input[type="checkbox"], input[type="radio"] { + -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; @@ -339,6 +341,7 @@ input[type="radio"] { input[type="search"] { -webkit-appearance: textfield; /* 1 */ + -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } @@ -447,6 +450,7 @@ iframe { /* GENERAL STYLE */ body { + display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; @@ -471,6 +475,7 @@ button { } .wrapper { + -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; @@ -496,12 +501,15 @@ button { } .notifications__text { + display: -webkit-box; display: -ms-flexbox; display: flex; padding: 1em 0.5em; color: #DDD; + -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; + -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @@ -520,6 +528,7 @@ button { display: block; white-space: nowrap; overflow: hidden; + -o-text-overflow: ellipsis; text-overflow: ellipsis; } @@ -545,6 +554,7 @@ button { /* SIDEBAR */ .sidebar { + -webkit-box-flex: 0; -ms-flex: 0 0 23.07692em; flex: 0 0 23.07692em; font-size: 0.9em; @@ -559,7 +569,9 @@ button { padding: 20%; } -[class*="__item"] { +.folder__item, +.feed__item { + display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; @@ -568,20 +580,26 @@ button { border-left: 0.38462em solid transparent; } -[class*="__item"], -[class*="__item"] a { +.folder__item, +.folder__item a, +.feed__item, +.feed__item a { color: #fff; } -[class*="__item"]:hover, [class*="__item"]:active { +.folder__item:hover, .folder__item:active, +.feed__item:hover, +.feed__item:active { background-color: #303030; } -[class*="__item"].selected { +.folder__item.selected, +.feed__item.selected { border-color: white; } .sidebar-item { + -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 16px; @@ -639,9 +657,11 @@ button { } .sidebar > section li { + display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; + -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @@ -678,10 +698,15 @@ button { top: -20px; content: ''; background-image: url("../images/close.svg"); + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + -o-transition: transform 0.3s; transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; } .is-opened.feeds-list-toggle:before { + -webkit-transform: translate3d(0, 180%, 0); transform: translate3d(0, 180%, 0); } @@ -690,10 +715,15 @@ button { padding: 0.5em 1.5em; top: 0; left: 0; + -webkit-transition: -webkit-transform 0.3s; + transition: -webkit-transform 0.3s; + -o-transition: transform 0.3s; transition: transform 0.3s; + transition: transform 0.3s, -webkit-transform 0.3s; } .is-opened .feeds-list-toggle__label { + -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); } @@ -735,6 +765,7 @@ button { } .folder-closed { + -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } @@ -793,11 +824,10 @@ html:not(.no-js) .feed--closed { @media (max-width: 650px) { .article__header { - display: -ms-grid; display: grid; - -ms-grid-columns: 40px auto 40px; - grid-template-columns: 40px auto 40px; + grid-template-columns: 40px auto 80px; grid-template-areas: "favicon site date" "favorite title mark"; + -webkit-box-align: center; -ms-flex-align: center; align-items: center; white-space: inherit; @@ -811,6 +841,7 @@ html:not(.no-js) .feed--closed { color: #555; font-size: 0.9em; overflow-x: hidden; + -o-text-overflow: ellipsis; text-overflow: ellipsis; vertical-align: middle; } @@ -892,11 +923,15 @@ html:not(.no-js) .feed--closed { top: 0; bottom: 0; width: 16em; + background-image: -webkit-gradient(linear, right top, left top, color-stop(48%, white), to(rgba(255, 255, 255, 0))); + background-image: -o-linear-gradient(right, white 48%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%); } .event:hover .article__description:after, .event--focused .article__description:after { + background-image: -webkit-gradient(linear, right top, left top, color-stop(6em, #DDD), to(rgba(221, 221, 221, 0))); + background-image: -o-linear-gradient(right, #DDD 6em, rgba(221, 221, 221, 0) 100%); background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%); } @@ -965,13 +1000,16 @@ html:not(.no-js) .feed--closed { .article-favorite, .article__read-unread { position: absolute; + display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; width: 30px; height: 100%; + -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; + -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0; @@ -991,7 +1029,7 @@ html:not(.no-js) .feed--closed { position: relative; padding: 0; width: 100%; - border-color: #BBB; + min-height: 50px; } } @@ -1057,12 +1095,14 @@ html:not(.no-js) .feed--closed { /* USER SETTINGS */ .user-login, .settings { + display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; padding: 0 1em; color: #CACACA; + -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; @@ -1078,6 +1118,8 @@ html:not(.no-js) .feed--closed { } .user-login { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @@ -1087,7 +1129,10 @@ html:not(.no-js) .feed--closed { min-width: 15px; min-height: 15px; border-bottom: 0.38462em solid transparent; + -webkit-box-sizing: content-box; box-sizing: content-box; + -webkit-transition: border 0.2s ease-in-out 0s; + -o-transition: border 0.2s ease-in-out 0s; transition: border 0.2s ease-in-out 0s; } @@ -1126,11 +1171,20 @@ button.settings-item:focus { } .animation-spin { + -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + @keyframes spin { 100% { + -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @@ -1168,9 +1222,11 @@ button.settings-item:focus { } .shortcut { + display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; + -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @@ -1187,6 +1243,7 @@ button.settings-item:focus { border-bottom: 4px solid #898989; border-right: 4px solid #898989; border-radius: 3px; + -webkit-box-shadow: 0 0 10px #111010; box-shadow: 0 0 10px #111010; } diff --git a/css/style.css.map b/css/style.css.map index e24a342..94e2f12 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["_normalize.scss","style.css","style.scss","partials/mixins/_helpers.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n\n/* ==========================================================================\n HTML5 display definitions\n ========================================================================== */\n\n/**\n * Correct `block` display not defined in IE 8/9.\n */\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\n\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n\n[hidden],\ntemplate {\n display: none;\n}\n\n/* ==========================================================================\n Base\n ========================================================================== */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n * user zoom.\n */\n\nhtml {\n font-family: sans-serif; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Remove default margin.\n */\n\nbody {\n margin: 0;\n}\n\n/* ==========================================================================\n Links\n ========================================================================== */\n\n/**\n * Remove the gray background color from active links in IE 10.\n */\n\na {\n background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n outline: 0;\n}\n\n/* ==========================================================================\n Typography\n ========================================================================== */\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\n\nabbr[title] {\n border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\n\nb,\nstrong {\n font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\n\nhr {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\n\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, serif;\n font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\n\npre {\n white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\n\nq {\n quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsup {\n top: -0.5em;\n}\n\nsub {\n bottom: -0.25em;\n}\n\n/* ==========================================================================\n Embedded content\n ========================================================================== */\n\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\n\nimg {\n border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* ==========================================================================\n Figures\n ========================================================================== */\n\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/* ==========================================================================\n Forms\n ========================================================================== */\n\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\n\nfieldset {\n border: 1px solid #c0c0c0; /* 1 */\n margin: 0 2px; /* 1 */\n min-width: 0; /* 2 */\n padding: 0.35em 0.625em 0.75em; /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\n\nlegend {\n border: 0; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n * Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit; /* 1 */\n font: inherit; /* 2 */\n margin: 0; /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\n\noptgroup {\n font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\nbutton,\ninput {\n line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n * and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n * `input` and others.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n cursor: pointer; /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n * (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n -moz-box-sizing: content-box;\n -webkit-box-sizing: content-box; /* 2 */\n box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\n\ntextarea {\n overflow: auto; /* 1 */\n vertical-align: top; /* 2 */\n}\n\n/* ==========================================================================\n Tables\n ========================================================================== */\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntd,\nth {\n padding: 0;\n}\n","/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n/* ==========================================================================\n HTML5 display definitions\n ========================================================================== */\n/**\n * Correct `block` display not defined in IE 8/9.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n display: none;\n}\n\n/* ==========================================================================\n Base\n ========================================================================== */\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n * user zoom.\n */\nhtml {\n font-family: sans-serif;\n /* 1 */\n -ms-text-size-adjust: 100%;\n /* 2 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/**\n * Remove default margin.\n */\nbody {\n margin: 0;\n}\n\n/* ==========================================================================\n Links\n ========================================================================== */\n/**\n * Remove the gray background color from active links in IE 10.\n */\na {\n background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\na:active,\na:hover {\n outline: 0;\n}\n\n/* ==========================================================================\n Typography\n ========================================================================== */\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\nabbr[title] {\n border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\nb,\nstrong {\n font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\ndfn {\n font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\nmark {\n background: #ff0;\n color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, serif;\n font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\npre {\n white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\nq {\n quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsup {\n top: -0.5em;\n}\n\nsub {\n bottom: -0.25em;\n}\n\n/* ==========================================================================\n Embedded content\n ========================================================================== */\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\nimg {\n border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* ==========================================================================\n Figures\n ========================================================================== */\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\nfigure {\n margin: 1em 40px;\n}\n\n/* ==========================================================================\n Forms\n ========================================================================== */\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\nfieldset {\n border: 1px solid #c0c0c0;\n /* 1 */\n margin: 0 2px;\n /* 1 */\n min-width: 0;\n /* 2 */\n padding: 0.35em 0.625em 0.75em;\n /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n border: 0;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n * Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit;\n /* 1 */\n font: inherit;\n /* 2 */\n margin: 0;\n /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\noptgroup {\n font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\nbutton,\ninput {\n line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n * and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n * `input` and others.\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n cursor: pointer;\n /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n * (include `-moz` to future-proof).\n */\ninput[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n -moz-box-sizing: content-box;\n -webkit-box-sizing: content-box;\n /* 2 */\n box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\ntextarea {\n overflow: auto;\n /* 1 */\n vertical-align: top;\n /* 2 */\n}\n\n/* ==========================================================================\n Tables\n ========================================================================== */\n/**\n * Remove most spacing between table cells.\n */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntd,\nth {\n padding: 0;\n}\n\n/* MIXINS */\n/* RESET */\nhtml {\n font-size: 62.5%;\n}\n\nbody {\n font-size: 1.3rem;\n background-color: #424242;\n}\n\nh1 {\n margin: 0;\n}\n\n@media (max-width: 650px) {\n h1 {\n font-size: 1.3em;\n }\n}\n\na {\n text-decoration: none;\n}\n\nul {\n padding: 0;\n}\n\nli {\n list-style: none;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.leedvibes-article-content img, .leedvibes-article-content\naudio, .leedvibes-article-content\ncanvas, .leedvibes-article-content\niframe, .leedvibes-article-content\nprogress, .leedvibes-article-content\nvideo {\n display: block;\n margin: 0 auto;\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n}\n\n@media (max-width: 650px) {\n body {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: #c53d3d;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n}\n\n@media (max-width: 650px) {\n .wrapper {\n margin-bottom: 0px;\n }\n}\n\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: #424242;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: #DDD;\n justify-content: space-between;\n align-items: center;\n}\n\n.folder__button, .mark-as-read, .article-favorite,\n.article__read-unread {\n border: 1px dashed transparent;\n}\n\n.folder__button:focus, .mark-as-read:focus, .article-favorite:focus,\n.article__read-unread:focus {\n border-color: #DDD;\n}\n\n.sidebar-item-label, .folder__item a {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* FEED */\n.event {\n position: relative;\n padding: 0 0.5em;\n border-bottom: 0.1em solid #D9D9D9;\n}\n\n.event:not(.event--focus):hover, .event--focused:not(.event--focus) {\n background-color: #DDD;\n}\n\n.event a {\n color: #424242;\n}\n\n.event--new-last {\n border-bottom-color: #424242;\n border-width: 4px;\n}\n\n/* SIDEBAR */\n.sidebar {\n flex: 0 0 23.07692em;\n font-size: 0.9em;\n overflow: hidden;\n}\n\n.sidebar a {\n color: #fff;\n}\n\n.sidebar .settings__fields {\n padding: 20%;\n}\n\n[class*=\"__item\"] {\n display: flex;\n position: relative;\n padding-bottom: 0.5em;\n padding-top: 0.5em;\n border-left: 0.38462em solid transparent;\n}\n\n[class*=\"__item\"],\n[class*=\"__item\"] a {\n color: #fff;\n}\n\n[class*=\"__item\"]:hover, [class*=\"__item\"]:active {\n background-color: #303030;\n}\n\n[class*=\"__item\"].selected {\n border-color: white;\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px;\n /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n@media (max-width: 650px) {\n .folder__button,\n .sidebar-item {\n padding: 12px 0;\n }\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: #686868;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: #fff;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n}\n\n.sidebar > section li {\n display: flex;\n color: #fff;\n justify-content: space-between;\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: #fff;\n background-color: #484848;\n}\n\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.feed-add-button:hover,\n.feed-add-button:active,\n.feed-add-button:focus {\n color: #484848;\n background-color: #DDD;\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url(\"../images/close.svg\");\n transition: transform 0.3s;\n}\n\n.is-opened.feeds-list-toggle:before {\n transform: translate3d(0, 180%, 0);\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: 0.5em 1.5em;\n top: 0;\n left: 0;\n transition: transform 0.3s;\n}\n\n.is-opened .feeds-list-toggle__label {\n transform: translate3d(0, 150%, 0);\n}\n\n.feeds-list {\n margin-top: 0;\n}\n\n.feeds-list[data-is-opened=\"false\"] {\n display: block;\n}\n\n@media (max-width: 650px) {\n .feeds-list[data-is-opened=\"false\"] {\n display: none;\n }\n}\n\n.feeds-list:target {\n display: block;\n}\n\n.folder {\n border-bottom: 0.2em solid #484848;\n}\n\n.folder:first-child {\n border-top: 0.2em solid #484848;\n}\n\n.folder__item a {\n margin: 0 0.3em;\n}\n\n.folder__button {\n float: left;\n margin-right: 5px;\n padding: 0;\n width: 10%;\n}\n\n.folder-closed {\n transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n padding-left: 0.4rem;\n padding-right: 0.8rem;\n}\n\n.feed {\n padding: 4px 0;\n background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n display: none;\n}\n\n.feed__item img {\n float: left;\n margin-left: 1.4em;\n margin-right: 0.3em;\n vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n .feed__item img {\n margin-right: 0.8em;\n }\n}\n\n.mark-as-read {\n padding: 0 0.4rem;\n font-size: 0.8em;\n}\n\n@media (max-width: 650px) {\n .mark-as-read {\n padding: 12px;\n }\n}\n\n/* ARTICLE */\n.article__header {\n position: relative;\n padding: 0.5em 0;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.event--focus .article__header {\n padding-bottom: 0.6em;\n}\n\n@media (max-width: 650px) {\n .article__header {\n display: grid;\n grid-template-columns: 40px auto 40px;\n grid-template-areas: \"favicon site date\" \"favorite title mark\";\n align-items: center;\n white-space: inherit;\n min-height: 4em;\n }\n}\n\n.article__header .article__feed-title {\n display: inline-block;\n width: 10%;\n color: #555;\n font-size: 0.9em;\n overflow-x: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n .article__header .article__feed-title {\n width: auto;\n grid-area: site;\n }\n}\n\n.feed-icon {\n margin-right: 0.3em;\n vertical-align: middle;\n justify-self: center;\n grid-area: favicon;\n}\n\n@media (max-width: 650px) {\n .feed-icon {\n margin: 0;\n }\n}\n\n@media (max-width: 650px) {\n .article__title {\n margin-left: 14%;\n }\n}\n\n@media (max-width: 650px) {\n .article__feed-title,\n .feed-icon ~ .article__title {\n margin-left: 0.5em;\n }\n}\n\n.article__title {\n display: inline;\n font-size: 1em;\n}\n\n@media (max-width: 650px) {\n .article__title {\n display: inline-block;\n grid-area: title;\n }\n}\n\n[class~=\"event--read\"] .article__title a {\n color: #BBB;\n}\n\n.article__description {\n display: inline-block;\n margin-left: 0.4em;\n color: #888;\n}\n\n[class~=\"event--read\"] .article__description {\n color: #BBB;\n}\n\n@media (max-width: 650px) {\n .article__description {\n display: none;\n }\n}\n\n.event--focus .article__description {\n display: none;\n}\n\n.article__description:after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 16em;\n background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n}\n\n.event:hover .article__description:after,\n.event--focused .article__description:after {\n background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%);\n}\n\n@media (max-width: 650px) {\n .event:hover .article__description:after,\n .event--focused .article__description:after {\n background: none;\n }\n}\n\n@media (max-width: 650px) {\n .article__description:after {\n background: none;\n }\n}\n\n.article__date {\n position: absolute;\n right: 65px;\n color: #424242;\n font-size: 0.9em;\n}\n\n@media (max-width: 650px) {\n .article__date {\n position: relative;\n right: 0;\n grid-area: date;\n justify-self: right;\n }\n}\n\n.article-favorite {\n right: 30px;\n opacity: 0.3;\n}\n\n.article-favorite--favorited {\n opacity: 1;\n}\n\n@media (max-width: 650px) {\n .article-favorite {\n right: 0;\n grid-area: favorite;\n justify-self: left;\n }\n}\n\n.article__read-unread {\n width: 1.7em;\n right: 0;\n color: white;\n background-color: transparent;\n opacity: 0.3;\n cursor: pointer;\n}\n\n@media (max-width: 650px) {\n .article__read-unread {\n grid-area: mark;\n justify-self: right;\n }\n}\n\n.article-favorite,\n.article__read-unread {\n position: absolute;\n display: flex;\n padding: 0;\n width: 30px;\n height: 100%;\n justify-content: center;\n align-items: center;\n top: 0;\n bottom: 0;\n}\n\n.article-favorite:hover, .article-favorite:active, .article-favorite:focus,\n.article__read-unread:hover,\n.article__read-unread:active,\n.article__read-unread:focus {\n border-color: #424242;\n}\n\n@media (max-width: 650px) {\n .article-favorite,\n .article__read-unread {\n position: relative;\n padding: 0;\n width: 100%;\n border-color: #BBB;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.leedvibes-article-content {\n display: none;\n margin: 0 auto 1em;\n width: 42.8125em;\n font-size: 1.6rem;\n line-height: 1.7;\n overflow: auto;\n overflow-wrap: break-word;\n}\n\n@media (max-width: 650px) {\n .leedvibes-article-content {\n padding: 0 1rem;\n width: auto;\n }\n}\n\n.leedvibes-article-content a {\n text-decoration: underline;\n}\n\n.leedvibes-article-content--is-opened {\n display: block;\n}\n\n.leedvibes-article-content__infos {\n margin: 1em 0;\n}\n\n.leedvibes-article-content__infos a {\n font-size: 2.8rem;\n line-height: 1;\n}\n\n.leedvibes-article-content__switch-view {\n display: none;\n position: absolute;\n right: 8em;\n top: 0.4em;\n background: none;\n border: 1px solid #BBB;\n z-index: 20;\n}\n\n@media (max-width: 650px) {\n .leedvibes-article-content__switch-view {\n top: 2.4em;\n right: 4em;\n }\n}\n\n.event--focus .leedvibes-article-content__switch-view {\n display: inherit;\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n display: flex;\n justify-content: space-around;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n margin: 1em auto;\n}\n\n.settings {\n padding: 1em;\n background-color: #303030;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: 0.5em 1.5em;\n min-width: 15px;\n min-height: 15px;\n border-bottom: 0.38462em solid transparent;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n}\n\n.settings-item:hover, .settings-item:active, .settings-item:focus {\n border-color: white;\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n}\n\nbutton.settings-item:focus {\n outline: dotted 1px;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n min-width: 7em;\n width: 35%;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n display: block;\n margin: 0.4em auto;\n padding: 0.5em;\n color: #303030;\n}\n\n.favorite-inverted {\n fill: white;\n}\n\n.animation-spin {\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.shortcuts-toggle {\n display: none;\n}\n\n@media (min-width: 650px) {\n html:not(.no-js) .shortcuts-toggle {\n display: block;\n }\n}\n\n.shortcuts {\n position: fixed;\n display: none;\n left: 0;\n top: 0;\n padding: 20px;\n width: 100%;\n height: 100%;\n color: white;\n background-color: #303030e6;\n overflow: scroll;\n}\n\n.shortcuts:hover {\n cursor: pointer;\n}\n\n.shortcuts-list {\n margin: 0;\n padding: 0;\n}\n\n.shortcut {\n display: flex;\n margin-bottom: 10px;\n align-items: center;\n}\n\n.shortcut-key {\n display: inline-block;\n margin-right: 20px;\n padding: 5px 5px 10px 5px;\n min-width: 20px;\n color: #777777;\n font-size: 12px;\n background-color: #DDDDDD;\n border: 2px solid #F9F7F7;\n border-bottom: 4px solid #898989;\n border-right: 4px solid #898989;\n border-radius: 3px;\n box-shadow: 0 0 10px #111010;\n}\n\n.shortcut-key + .shortcut-key {\n margin-left: 20px;\n}\n\n/* MEDIA QUERIES */\n@media (max-width: 650px) {\n td {\n display: block;\n }\n}\n\n.mobile-only {\n display: none;\n}\n\n@media (max-width: 650px) {\n .mobile-only {\n display: inline;\n }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n float: left;\n width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n width: 19%;\n}\n\n.hidden {\n display: none;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n","// VARS\n$font-size-base: 13px;\n$sidebar-button-size: 10%;\n$settings-padding: 0.5em 1.5em;\n$sidebar-color: #fff;\n$sidebar-color-bg: #424242;\n$folder-separator: #484848;\n$sidebar-color-bg-darken: darken( $sidebar-color-bg, 7% );\n$sidebar-color-alt: #686868;\n$feed-entry-color: $sidebar-color-bg;\n$breakpoint: \"650px\";\n$breakpoint-min: \"min-width: #{$breakpoint}\";\n$breakpoint-max: \"max-width: #{$breakpoint}\";\n$feed-bgc-used: #DDD;\n$error-color: #c53d3d;\n$feed-event-read-color: #BBB;\n\n$opacity-low: 0.3;\n$position-top-on-break: 30px;\n$action-icon-width: 30px;\n\n@import \"normalize\";\n\n/* MIXINS */\n@import \"partials/mixins/_helpers.scss\";\n\n/* RESET */\nhtml {\n font-size: 62.5%;\n}\nbody {\n font-size: 1.3rem;\n background-color: $sidebar-color-bg;\n}\nh1 {\n margin: 0;\n\n @media( $breakpoint-max ) {\n font-size: 1.3em;\n }\n}\na {\n text-decoration: none;\n}\nul {\n padding: 0;\n}\nli {\n list-style: none;\n}\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n\n .leedvibes-article-content & {\n display: block;\n margin: 0 auto;\n }\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n\n @media($breakpoint-max) {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: $error-color;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n\n @media($breakpoint-max) {\n // Avoid extra margin-bottom when all\n // the content is read and infinite-scroll-end\n // shows up\n margin-bottom: 0px;\n }\n}\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: $sidebar-color-bg;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: $feed-bgc-used;\n justify-content: space-between;\n align-items: center;\n}\n\n%text-color-dark {\n color: #000;\n}\n\n%button-focused {\n border: 1px dashed transparent;\n\n &:focus {\n border-color: $feed-bgc-used;\n }\n}\n%overflow-sidebar {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* FEED */\n$entry-space: 0.5em;\n.event {\n position: relative;\n padding: 0 $entry-space;\n border-bottom: 0.1em solid #D9D9D9;\n\n &:not(.event--focus):hover,\n &--focused:not(.event--focus) {\n background-color: $feed-bgc-used;\n }\n\n a {\n color: $feed-entry-color;\n }\n}\n\n.event--new-last {\n border-bottom-color: $sidebar-color-bg;\n border-width: 4px;\n}\n\n/* SIDEBAR */\n$border-base: em( 5px ) solid transparent;\n$border-color-active: white;\n\n.sidebar {\n flex: 0 0 em( 300px );\n font-size: 0.9em;\n overflow: hidden;\n\n a {\n color: $sidebar-color;\n }\n\n .settings__fields {\n padding: 20%;\n }\n\n}\n\n[class*=\"__item\"] {\n display: flex;\n position: relative;\n $padding : 0.5em;\n padding-bottom: $padding;\n padding-top: $padding;\n border-left: $border-base;\n\n &,\n a {\n color: $sidebar-color;\n }\n\n &:hover,\n &:active {\n background-color: $sidebar-color-bg-darken;\n }\n\n &.selected {\n border-color: $border-color-active;\n }\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px; /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n.folder__button,\n.sidebar-item {\n @media($breakpoint-max) {\n padding: 12px 0;\n }\n}\n\n.sidebar-item-label {\n @extend %overflow-sidebar;\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: $sidebar-color-alt;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: $sidebar-color;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n\n li {\n display: flex;\n color: $sidebar-color;\n justify-content: space-between;\n }\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: $sidebar-color;\n background-color: $folder-separator;\n\n &:hover,\n &:active,\n &:focus {\n color: $folder-separator;\n background-color: $feed-bgc-used;\n }\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n$feeds-list-toggle-transition: transform 0.3s;\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url( '../images/close.svg' );\n transition: $feeds-list-toggle-transition;\n\n @at-root .is-opened#{&} {\n transform: translate3d(0, 180%, 0);\n }\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: $settings-padding;\n top: 0;\n left: 0;\n transition: $feeds-list-toggle-transition;\n\n .is-opened & {\n transform: translate3d(0, 150%, 0);\n }\n}\n\n.feeds-list {\n margin-top:0;\n\n &[data-is-opened=\"false\"] {\n display: block;\n\n @media($breakpoint-max) {\n display: none;\n }\n }\n\n &:target {\n display: block;\n }\n}\n\n.folder {\n $value: 0.2em solid $folder-separator;\n border-bottom: $value;\n\n &:first-child {\n border-top: $value;\n }\n}\n\n.folder__item a {\n margin: 0 0.3em;\n @extend %overflow-sidebar;\n}\n.folder__button {\n float: left;\n margin-right: 5px;\n padding: 0;\n width: $sidebar-button-size;\n @extend %button-focused;\n}\n\n.folder-closed {\n transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n padding-left: 0.4rem;\n padding-right: 0.8rem;\n}\n.feed {\n padding: 4px 0;\n background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n display: none;\n}\n\n.feed__item img {\n float: left;\n margin-left: 1.4em;\n margin-right: 0.3em;\n vertical-align: middle;\n\n @media($breakpoint-max) {\n margin-right: 0.8em;\n }\n}\n\n.mark-as-read {\n padding: 0 0.4rem;\n font-size: 0.8em;\n @extend %button-focused;\n\n @media($breakpoint-max) {\n padding: 12px;\n }\n}\n\n/* ARTICLE */\n.article__header {\n position: relative;\n padding: $entry-space 0;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n\n .event--focus & {\n padding-bottom: 0.6em;\n }\n\n @media($breakpoint-max) {\n display: grid;\n grid-template-columns: 40px auto 40px;\n grid-template-areas: \"favicon site date\" \"favorite title mark\";\n align-items: center;\n white-space: inherit;\n min-height: 4em;\n }\n\n .article__feed-title {\n display: inline-block;\n width: 10%;\n color: #555;\n font-size: 0.9em;\n overflow-x: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n\n @media($breakpoint-max) {\n width: auto;\n grid-area: site;\n }\n }\n}\n\n.feed-icon {\n margin-right: 0.3em;\n vertical-align: middle;\n justify-self: center;\n grid-area: favicon;\n\n @media($breakpoint-max) {\n margin: 0;\n }\n}\n\n.article__title {\n @media($breakpoint-max) {\n margin-left: 14%;\n }\n}\n\n.article__feed-title,\n.feed-icon ~ .article__title {\n @media($breakpoint-max) {\n margin-left: 0.5em;\n }\n}\n\n.article__title {\n display: inline;\n font-size: 1em;\n\n @media($breakpoint-max) {\n display: inline-block;\n grid-area:title;\n }\n\n [class~=\"event--read\"] & a {\n color: $feed-event-read-color;\n }\n}\n.article__description {\n display: inline-block;\n margin-left: 0.4em;\n color: #888;\n\n [class~=\"event--read\"] & {\n color: $feed-event-read-color;\n }\n\n @media($breakpoint-max) {\n display: none;\n }\n\n .event--focus & {\n display: none;\n }\n\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 16em;\n $support-for-original-webkit-gradients : false;\n background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n\n .event:hover &,\n .event--focused & {\n background-image: linear-gradient(to left, $feed-bgc-used 6em, rgba($feed-bgc-used, 0) 100%);\n\n @media($breakpoint-max) {\n background: none;\n }\n\n }\n\n @media($breakpoint-max) {\n background: none;\n }\n }\n}\n.article__date {\n position: absolute;\n right: $action-icon-width * 2 + 5px;\n color: $feed-entry-color;\n font-size: 0.9em;\n\n @media( $breakpoint-max ) {\n position: relative;\n right: 0;\n grid-area: date;\n justify-self: right;\n }\n}\n\n.article-favorite {\n right: $action-icon-width;\n opacity: $opacity-low;\n\n &--favorited {\n opacity: 1;\n }\n\n @media( $breakpoint-max ) {\n right: 0;\n grid-area: favorite;\n justify-self: left;\n }\n}\n\n.article__read-unread {\n width: 1.7em;\n right: 0;\n color: white;\n background-color: transparent;\n opacity: $opacity-low;\n cursor: pointer;\n\n @media( $breakpoint-max ) {\n grid-area: mark;\n justify-self: right;\n }\n}\n\n.article-favorite,\n.article__read-unread {\n position: absolute;\n display: flex;\n padding: 0;\n width: $action-icon-width;\n height: 100%;\n justify-content: center;\n align-items: center;\n top: 0;\n bottom: 0;\n @extend %button-focused;\n\n &:hover,\n &:active,\n &:focus {\n border-color: $sidebar-color-bg;\n }\n\n @media( $breakpoint-max ) {\n position: relative;\n padding: 0;\n width: 100%;\n border-color: $feed-event-read-color;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.leedvibes-article-content {\n display: none;\n margin: 0 auto 1em;\n width: 42.8125em; // font: 16px / width: 685px (http://www.pearsonified.com/typography/)\n font-size: 1.6rem;\n line-height: 1.7;\n overflow: auto;\n overflow-wrap: break-word;\n\n @media($breakpoint-max) {\n padding: 0 1rem;\n width: auto;\n }\n\n a {\n text-decoration: underline;\n }\n}\n\n.leedvibes-article-content--is-opened {\n display: block;\n}\n\n.leedvibes-article-content__infos {\n margin: 1em 0;\n\n a {\n font-size: 2.8rem;\n line-height: 1;\n }\n}\n// [todo] - Do a better style\n.leedvibes-article-content__switch-view {\n display: none;\n position: absolute;\n right: 8em;\n top: 0.4em;\n background: none;\n border: 1px solid $feed-event-read-color;\n z-index: 20;\n\n @media($breakpoint-max) {\n top: 2.4em;\n right: 4em;\n }\n\n .event--focus & {\n display: inherit;\n }\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n display: flex;\n justify-content: space-around;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n margin: 1em auto;\n}\n\n.settings {\n padding: 1em;\n background-color: $sidebar-color-bg-darken;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: $settings-padding;\n min-width: 15px;\n min-height: 15px;\n border-bottom: $border-base;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n\n &:hover,\n &:active,\n &:focus {\n border-color: $border-color-active;\n }\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n\n &:focus {\n outline: dotted 1px;\n }\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n min-width: 7em;\n width: 35%;\n}\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n display: block;\n margin: 0.4em auto;\n padding: 0.5em;\n color: $sidebar-color-bg-darken;\n}\n\n.favorite-inverted {\n fill: white;\n}\n\n.animation-spin {\n animation: spin 2s linear infinite;\n}\n@keyframes spin {\n 100% { transform: rotate(360deg); }\n}\n\n.shortcuts-toggle {\n display: none;\n}\n\n@media( $breakpoint-min ) {\n html:not(.no-js) .shortcuts-toggle {\n display: block;\n }\n}\n\n.shortcuts {\n position: fixed;\n display: none;\n left: 0;\n top: 0;\n padding: 20px;\n width: 100%;\n height: 100%;\n color: white;\n background-color: #{$sidebar-color-bg-darken}e6;\n overflow: scroll;\n}\n\n.shortcuts:hover {\n cursor: pointer;\n}\n\n\n.shortcuts-list {\n margin: 0;\n padding: 0;\n}\n\n.shortcut {\n display: flex;\n margin-bottom: 10px;\n align-items: center;\n}\n\n$shortcut-key-space: 20px;\n.shortcut-key {\n display: inline-block;\n margin-right: $shortcut-key-space;\n padding: 5px 5px 10px 5px;\n min-width: 20px;\n color: #777777;\n font-size: 12px;\n background-color: #DDDDDD;\n border: 2px solid #F9F7F7;\n border-bottom: 4px solid #898989;\n border-right: 4px solid #898989;\n border-radius: 3px;\n box-shadow: 0 0 10px #111010;\n\n & + & {\n margin-left: $shortcut-key-space;\n }\n}\n\n/* MEDIA QUERIES */\n@media($breakpoint-max) {\n td {\n display: block;\n }\n}\n\n.mobile-only {\n display: none;\n\n @media($breakpoint-max) {\n display: inline;\n }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n float: left;\n width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n width: 19%;\n}\n\n// Utils\n\n.hidden {\n display: none;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0,0,0,0);\n border: 0;\n}\n","@function em($target, $context: $font-size-base) {\n @if $target == 0 { @return 0 }\n @return $target / $context + 0em;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["_normalize.scss","style.css","style.scss","partials/mixins/_helpers.scss"],"names":[],"mappings":"AAAA,2DAAA;AAEA;;+ECC+E;ADG/E;;ECAE;ADIF;;;;;;;;;;;;EAYI,cAAc;ACFlB;;ADKA;;ECDE;ADKF;;;;EAII,qBAAqB;ACHzB;;ADMA;;;ECDE;ADMF;EACI,aAAa;EACb,SAAS;ACJb;;ADOA;;;ECFE;AACF;;EDQI,aAAa;ACLjB;;ADQA;;+ECJ+E;ADQ/E;;;;ECHE;ADSF;EACI,uBAAuB;EAAE,MAAA;EACzB,0BAA0B;EAAE,MAAA;EAC5B,8BAA8B;EAAE,MAAA;ACJpC;;ADOA;;ECHE;ADOF;EACI,SAAS;ACLb;;ADQA;;+ECJ+E;ADQ/E;;ECLE;ADSF;EACI,uBAAuB;ACP3B;;ADUA;;ECNE;ADUF;;EAEI,UAAU;ACRd;;ADWA;;+ECP+E;ADW/E;;;ECPE;ADYF;EACI,cAAc;EACd,gBAAgB;ACVpB;;ADaA;;ECTE;ADaF;EACI,yBAAyB;ACX7B;;ADcA;;ECVE;ADcF;;EAEI,iBAAiB;ACZrB;;ADeA;;ECXE;ADeF;EACI,kBAAkB;ACbtB;;ADgBA;;ECZE;ADgBF;EAEI,+BAAuB;EAAvB,uBAAuB;EACvB,SAAS;ACdb;;ADiBA;;ECbE;ADiBF;EACI,gBAAgB;EAChB,WAAW;ACff;;ADkBA;;ECdE;ADkBF;;;;EAII,6BAA6B;EAC7B,cAAc;AChBlB;;ADmBA;;ECfE;ADmBF;EACI,qBAAqB;ACjBzB;;ADoBA;;EChBE;ADoBF;EACI,uCAAuC;AClB3C;;ADqBA;;ECjBE;ADqBF;EACI,cAAc;ACnBlB;;ADsBA;;EClBE;ADsBF;;EAEI,cAAc;EACd,cAAc;EACd,kBAAkB;EAClB,wBAAwB;ACpB5B;;ADuBA;EACI,WAAW;ACpBf;;ADuBA;EACI,eAAe;ACpBnB;;ADuBA;;+ECnB+E;ADuB/E;;ECpBE;ADwBF;EACI,SAAS;ACtBb;;ADyBA;;ECrBE;ADyBF;EACI,gBAAgB;ACvBpB;;AD0BA;;+ECtB+E;AD0B/E;;ECvBE;AD2BF;EACI,gBAAgB;ACzBpB;;AD4BA;;+ECxB+E;AD4B/E;;;ECxBE;AD6BF;EACI,yBAAyB;EAAE,MAAA;EAC3B,aAAa;EAAE,MAAA;EACf,YAAY;EAAE,MAAA;EACd,8BAA8B;EAAE,MAAA;ACvBpC;;AD0BA;;;ECrBE;AD0BF;EACI,SAAS;EAAE,MAAA;EACX,UAAU;EAAE,MAAA;ACtBhB;;ADyBA;;;;;EClBE;ADyBF;;;;;EAKI,cAAc;EAAE,MAAA;EAChB,aAAa;EAAE,MAAA;EACf,SAAS;EAAE,MAAA;ACpBf;;ADuBA;;;EClBE;ADuBF;EACI,iBAAiB;ACrBrB;;ADwBA;;;ECnBE;ADwBF;;EAEI,mBAAmB;ACtBvB;;ADyBA;;;;;EClBE;ADyBF;;EAEI,oBAAoB;ACvBxB;;AD0BA;;;;;;EClBE;AD0BF;;;;EAII,0BAA0B;EAAE,MAAA;EAC5B,eAAe;EAAE,MAAA;ACtBrB;;ADyBA;;ECrBE;ADyBF;;EAEI,eAAe;ACvBnB;;AD0BA;;;ECrBE;AD0BF;;EAEI,8BAAsB;EAAtB,sBAAsB;EAAE,MAAA;EACxB,UAAU;EAAE,MAAA;ACtBhB;;ADyBA;;;;ECnBE;ADyBF;EACI,6BAA6B;EAAE,MAAA;EAE/B,+BAA+B;EAAE,MAAA;EACjC,uBAAuB;ACrB3B;;ADwBA;;;ECnBE;ADwBF;;EAEI,wBAAwB;ACtB5B;;ADyBA;;ECrBE;ADyBF;;EAEI,SAAS;EACT,UAAU;ACvBd;;AD0BA;;;ECrBE;AD0BF;EACI,cAAc;EAAE,MAAA;EAChB,mBAAmB;EAAE,MAAA;ACtBzB;;ADyBA;;+ECrB+E;ADyB/E;;ECtBE;AD0BF;EACI,yBAAyB;EACzB,iBAAiB;ACxBrB;;AD2BA;;EAEI,UAAU;ACxBd;;AChXA,WAAA;AAGA,UAAA;AFwCA;EEtCI,gBAAgB;ADiXpB;;ADjUA;EE7CI,iBAAiB;EACjB,yBA3BsB;AD6Y1B;;ADpSA;EE3EI,SAAS;ADmXb;;ACjXI;EFyEJ;IExEQ,gBAAgB;EDqXtB;AACF;;ADpUA;EE9CI,qBAAqB;ADsXzB;;ACpXA;EACI,UAAU;ADuXd;;ACrXA;EACI,gBAAgB;ADwXpB;;ACtXA;;;;;;EAMI,eAAe;EACf,YAAY;ADyXhB;;ACvXI;;;;;;EACI,cAAc;EACd,cAAc;AD+XtB;;AC3XA;EACI,WAAW;AD8Xf;;AC3XA,kBAAA;AFOA;EELI,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,mBAAe;EAAf,eAAe;EACf,WAAW;AD8Xf;;AC5XI;EFCJ;IEAQ,cAAc;IACd,YAAY;EDgYlB;AACF;;AC7XA;EACI,6BAA6B;EAC7B,YAAY;ADgYhB;;AC7XA;EACI,yBAzEiB;ADycrB;;AC7XA;EACI,mBAAW;EAAX,iBAAW;EAAX,WAAW;EACX,YAAY;EACZ,iBAAiB;EACjB,sBAAsB;ADgY1B;;AC9XI;EANJ;IAUQ,kBAAkB;ED+XxB;AACF;;AC7XA;EACI,WAAW;EACX,iBAAiB;ADgYrB;;AC7XA;EACI,SAAS;EACT,WAAW;EACX,yBA1GsB;AD0e1B;;AC7XA;EACI,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,kBAAkB;EAClB,WAxGgB;EAyGhB,yBAA8B;EAA9B,sBAA8B;EAA9B,8BAA8B;EAC9B,yBAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;ADgYvB;;ACzXA;;EACI,8BAA8B;AD6XlC;;AC3XI;;EACI,kBArHY;ADofpB;;AC5XA;EACI,cAAc;EACd,mBAAmB;EACnB,gBAAgB;EAChB,0BAAuB;EAAvB,uBAAuB;AD+X3B;;AC5XA,SAAA;AAEA;EACI,kBAAkB;EAClB,gBAHe;EAIf,kCAAkC;AD8XtC;;ACjYA;EAOQ,sBAxIY;ADsgBpB;;ACrYA;EAWQ,cApJkB;ADkhB1B;;AC1XA;EACI,4BAzJsB;EA0JtB,iBAAiB;AD6XrB;;AC1XA,YAAA;AAIA;EACI,mBCrKgC;EDqKhC,wBCrKgC;EDqKhC,oBCrKgC;EDsKhC,gBAAgB;EAChB,gBAAgB;AD0XpB;;AC7XA;EAMQ,WAxKY;ADmiBpB;;ACjYA;EAUQ,YAAY;AD2XpB;;ACtXA;;EAEI,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,kBAAkB;EAElB,qBADgB;EAEhB,kBAFgB;EAGhB,wCAzBqC;ADiZzC;;AC/XA;;;;EAWQ,WA5LY;ADujBpB;;ACtYA;;;EAgBQ,yBA9LiD;AD0jBzD;;AC5YA;;EAoBQ,mBArCmB;ADka3B;;ACzXA;EACI,mBAAY;EAAZ,oBAAY;EAAZ,YAAY;EACZ,YAAY;EAAE,qBAAA;EACd,iBAAiB;EACjB,gBAAgB;AD6XpB;;ACxXI;EAFJ;;IAGQ,eAAe;ED6XrB;AACF;;ACtXA;EACI,qBAAqB;EACrB,iBAAiB;EACjB,kBAAkB;EAClB,yBA3NuB;EA4NvB,kBAAkB;ADyXtB;;ACtXA;EACI,kBAAkB;ADyXtB;;AAEA;ECvXI,aAAa;ADyXjB;;ACtXA;EACI,eAAe;EACf,WA7OgB;ADsmBpB;;ACtXA;;EAEI,UAAU;ADyXd;;ACtXA;EACI,cAAc;EACd,YAAY;ADyXhB;;ACtXA;EACI,aAAa;EACb,kBAAkB;ADyXtB;;ACtXA;EACI,oBAAoB;EACpB,cAAc;ADyXlB;;AC3XA;EAKQ,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,WArQY;EAsQZ,yBAA8B;EAA9B,sBAA8B;EAA9B,8BAA8B;AD0XtC;;ACtXA;;EAEI,gBAAgB;EAChB,WA7QgB;EA8QhB,yBA5QsB;ADqoB1B;;AC7XA;;;;EASQ,cAjRkB;EAkRlB,sBA3QY;ADsoBpB;;ACvXA;EACI,kBAAkB;AD0XtB;;ACvXA;EACI,kBAAkB;EAClB,gBAAgB;AD0XpB;;ACvXA;EACI,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,SAAS;EACT,UAAU;EACV,WAAW;EACX,4CAA8C;EAC9C,0CATyC;EASzC,kCATyC;EASzC,6BATyC;EASzC,0BATyC;EASzC,kDATyC;ADmY7C;;ACxXY;EACJ,0CAAkC;EAAlC,kCAAkC;AD2X1C;;ACvXA;EACI,kBAAkB;EAClB,oBAnT0B;EAoT1B,MAAM;EACN,OAAO;EACP,0CArByC;EAqBzC,kCArByC;EAqBzC,6BArByC;EAqBzC,0BArByC;EAqBzC,kDArByC;AD+Y7C;;ACxXI;EACI,0CAAkC;EAAlC,kCAAkC;AD2X1C;;ACvXA;EACI,aAAY;AD0XhB;;AC3XA;EAIQ,cAAc;AD2XtB;;ACzXQ;EANR;IAOY,aAAa;ED6XvB;AACF;;ACrYA;EAYQ,cAAc;AD6XtB;;ACzXA;EAEI,kCA5UsB;ADusB1B;;AC7XA;EAKQ,+BA/UkB;AD2sB1B;;ACxXA;EACI,eAAe;AD2XnB;;ACxXA;EACI,WAAW;EACX,iBAAiB;EACjB,UAAU;EACV,UA/VqB;AD0tBzB;;ACvXA;EACI,iCAAyB;EAAzB,6BAAyB;EAAzB,yBAAyB;AD0X7B;;AC3iBA;;EAsLI,oBAAoB;EACpB,qBAAqB;AD0XzB;;ACxXA;EACI,cAAc;EACd,yBAAyB;AD2X7B;;ACxXA;EACI,aAAa;AD2XjB;;ACxXA;EACI,WAAW;EACX,kBAAkB;EAClB,mBAAmB;EACnB,sBAAsB;AD2X1B;;ACzXI;EANJ;IAOQ,mBAAmB;ED6XzB;AACF;;AC1XA;EACI,iBAAiB;EACjB,gBAAgB;AD6XpB;;AC1XI;EALJ;IAMQ,aAAa;ED8XnB;AACF;;AC3XA,YAAA;AACA;EACI,kBAAkB;EAClB,gBAAuB;EACvB,gBAAgB;EAChB,mBAAmB;EACnB,eAAe;AD8XnB;;AC5XI;EACI,qBAAqB;AD+X7B;;AC5XI;EAXJ;IAYQ,aAAa;IACb,qCAAqC;IACrC,8DAA8D;IAC9D,yBAAmB;IAAnB,sBAAmB;IAAnB,mBAAmB;IACnB,oBAAoB;IACpB,eAAe;EDgYrB;AACF;;AClZA;EAqBQ,qBAAqB;EACrB,UAAU;EACV,WAAW;EACX,gBAAgB;EAChB,kBAAkB;EAClB,0BAAuB;EAAvB,uBAAuB;EACvB,sBAAsB;ADiY9B;;AC/XQ;EA7BR;IA8BY,WAAW;IACX,eAAe;EDmYzB;AACF;;AC/XA;EACI,mBAAmB;EACnB,sBAAsB;EACtB,oBAAoB;EACpB,kBAAkB;ADkYtB;;AChYI;EANJ;IAOQ,SAAS;EDoYf;AACF;;AChYI;EADJ;IAEQ,gBAAgB;EDoYtB;AACF;;AC/XI;EAFJ;;IAGQ,kBAAkB;EDoYxB;AACF;;AC9YA;EAcI,eAAe;EACf,cAAc;ADoYlB;;AClYI;EAjBJ;IAkBQ,qBAAqB;IACrB,gBAAe;EDsYrB;AACF;;AAEA;ECrYQ,WApcoB;AD20B5B;;ACpYA;EACI,qBAAqB;EACrB,kBAAkB;EAClB,WAAW;ADuYf;;AAEA;ECtYQ,WA7coB;ADq1B5B;;ACrYI;EATJ;IAUQ,aAAa;EDyYnB;AACF;;ACvYI;EACI,aAAa;AD0YrB;;ACxZA;EAkBQ,WAAW;EACX,cAAc;EACd,kBAAkB;EAClB,QAAQ;EACR,MAAM;EACN,SAAS;EACT,WAAW;EAEX,mHAAkF;EAAlF,mFAAkF;EAAlF,kFAAkF;ADyY1F;;ACvYQ;;EAEI,kHAA4F;EAA5F,kFAA4F;EAA5F,iFAA4F;AD0YxG;;ACxYY;EAJJ;;IAKQ,gBAAgB;ED6Y9B;AACF;;ACzYQ;EAtCR;IAuCY,gBAAgB;ED6Y1B;AACF;;AC1YA;EACI,kBAAkB;EAClB,WAAmC;EACnC,cA/fsB;EAggBtB,gBAAgB;AD6YpB;;AC3YI;EANJ;IAOQ,kBAAkB;IAClB,QAAQ;IACR,eAAe;IACf,mBAAmB;ED+YzB;AACF;;AC5YA;EACI,WA7foB;EA8fpB,YAhgBa;AD+4BjB;;AC7YI;EACI,UAAU;ADgZlB;;AC7YI;EARJ;IASQ,QAAQ;IACR,mBAAmB;IACnB,kBAAkB;EDiZxB;AACF;;AC9YA;EACI,YAAY;EACZ,QAAQ;EACR,YAAY;EACZ,6BAA6B;EAC7B,YAlhBa;EAmhBb,eAAe;ADiZnB;;AC/YI;EARJ;IASQ,eAAe;IACf,mBAAmB;EDmZzB;AACF;;AChZA;;EAEI,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,UAAU;EACV,WA9hBoB;EA+hBpB,YAAY;EACZ,wBAAuB;EAAvB,qBAAuB;EAAvB,uBAAuB;EACvB,yBAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;EACnB,MAAM;EACN,SAAS;ADmZb;;AC7ZA;;;;EAgBQ,qBAvjBkB;AD28B1B;;ACjZI;EAnBJ;;IAoBQ,kBAAkB;IAClB,UAAU;IACV,WAAW;IACX,gBAAgB;EDsZtB;AACF;;ACnZA;EACI,UAAU;ADsZd;;ACnZA;EACI,aAAa;EACb,kBAAkB;EAClB,gBAAgB;EAChB,iBAAiB;EACjB,gBAAgB;EAChB,cAAc;EACd,yBAAyB;ADsZ7B;;ACpZI;EATJ;IAUQ,eAAe;IACf,WAAW;EDwZjB;AACF;;ACpaA;EAeQ,0BAA0B;ADyZlC;;ACrZA;EACI,cAAc;ADwZlB;;ACrZA;EACI,aAAa;ADwZjB;;ACzZA;EAIQ,iBAAiB;EACjB,cAAc;ADyZtB;;ACrZA;EACI,aAAa;EACb,kBAAkB;EAClB,UAAU;EACV,UAAU;EACV,gBAAgB;EAChB,sBAlmBwB;EAmmBxB,WAAW;ADwZf;;ACtZI;EATJ;IAUQ,UAAU;IACV,UAAU;ED0ZhB;AACF;;ACxZI;EACI,gBAAgB;AD2ZxB;;ACvZA,kBAAA;AACA;;EAEI,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA6B;EAA7B,6BAA6B;EAC7B,cAAc;EACd,cAAc;EACd,yBAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;EACnB,kBAAkB;AD0ZtB;;ACvZA;EACI,gBAAgB;AD0ZpB;;ACvZA;EACI,YAAY;EACZ,yBAxoBqD;ADkiCzD;;AChaA;EAUI,4BAAsB;EAAtB,6BAAsB;EAAtB,0BAAsB;EAAtB,sBAAsB;AD0Z1B;;ACvZA;EACI,oBAppB0B;EAqpB1B,eAAe;EACf,gBAAgB;EAChB,0CAvfqC;EAwfrC,+BAAuB;EAAvB,uBAAuB;EACvB,8CAAsC;EAAtC,yCAAsC;EAAtC,sCAAsC;AD0Z1C;;AChaA;EAWQ,mBA7fmB;ADs5B3B;;ACrZA;EACI,mBAAmB;EACnB,qBAAqB;EACrB,oBAAoB;EACpB,6BAA6B;ADwZjC;;AC5ZA;EAOQ,mBAAmB;ADyZ3B;;ACrZA;;EAEI,cAAc;EACd,UAAU;ADwZd;;ACtZA;;;EAGI,cAAc;EACd,kBAAkB;EAClB,cAAc;EACd,cAprBqD;AD6kCzD;;ACtZA;EACI,WAAW;ADyZf;;ACtZA;EACI,0CAAkC;EAAlC,kCAAkC;ADyZtC;;ACvZA;EACI;IAAO,iCAAyB;IAAzB,yBAAyB;ED2ZlC;AACF;;AC7ZA;EACI;IAAO,iCAAyB;IAAzB,yBAAyB;ED2ZlC;AACF;;ACzZA;EACI,aAAa;AD4ZjB;;ACzZA;EACI;IACI,cAAc;ED4ZpB;AACF;;ACzZA;EACI,eAAe;EACf,aAAa;EACb,OAAO;EACP,MAAM;EACN,aAAa;EACb,WAAW;EACX,YAAY;EACZ,YAAY;EACZ,2BAAkB;EAClB,gBAAgB;AD4ZpB;;ACzZA;EACI,eAAe;AD4ZnB;;ACxZA;EACI,SAAS;EACT,UAAU;AD2Zd;;ACxZA;EACI,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,mBAAmB;EACnB,yBAAmB;EAAnB,sBAAmB;EAAnB,mBAAmB;AD2ZvB;;ACvZA;EACI,qBAAqB;EACrB,kBAHqB;EAIrB,yBAAyB;EACzB,eAAe;EACf,cAAc;EACd,eAAe;EACf,yBAAyB;EACzB,yBAAyB;EACzB,gCAAgC;EAChC,+BAA+B;EAC/B,kBAAkB;EAClB,oCAA4B;EAA5B,4BAA4B;AD0ZhC;;ACtaA;EAeQ,iBAhBiB;AD2azB;;ACvZA,kBAAA;AACA;EACI;IACI,cAAc;ED0ZpB;AACF;;ACvZA;EACI,aAAa;AD0ZjB;;ACxZI;EAHJ;IAIQ,eAAe;ED4ZrB;AACF;;ACzZA,SAAA;AACA;EACI,cAAc;AD4ZlB;;ACzZA;EACI,gBAAgB;AD4ZpB;;ACzZA;EACI,WAAW;EACX,UAAU;AD4Zd;;ACzZA,QAAA;AACA;EACI,UAAU;AD4Zd;;ACvZA;EACI,aAAa;AD0ZjB;;ACvZA;EACI,kBAAkB;EAClB,UAAU;EACV,WAAW;EACX,UAAU;EACV,YAAY;EACZ,gBAAgB;EAChB,sBAAmB;EACnB,SAAS;AD0Zb","file":"style.css","sourcesContent":["/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n\n/* ==========================================================================\n HTML5 display definitions\n ========================================================================== */\n\n/**\n * Correct `block` display not defined in IE 8/9.\n */\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\n\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n\n[hidden],\ntemplate {\n display: none;\n}\n\n/* ==========================================================================\n Base\n ========================================================================== */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n * user zoom.\n */\n\nhtml {\n font-family: sans-serif; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/**\n * Remove default margin.\n */\n\nbody {\n margin: 0;\n}\n\n/* ==========================================================================\n Links\n ========================================================================== */\n\n/**\n * Remove the gray background color from active links in IE 10.\n */\n\na {\n background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\n\na:active,\na:hover {\n outline: 0;\n}\n\n/* ==========================================================================\n Typography\n ========================================================================== */\n\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\n\nabbr[title] {\n border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\n\nb,\nstrong {\n font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\n\nhr {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\n\nmark {\n background: #ff0;\n color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\n\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, serif;\n font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\n\npre {\n white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\n\nq {\n quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsup {\n top: -0.5em;\n}\n\nsub {\n bottom: -0.25em;\n}\n\n/* ==========================================================================\n Embedded content\n ========================================================================== */\n\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\n\nimg {\n border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* ==========================================================================\n Figures\n ========================================================================== */\n\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/* ==========================================================================\n Forms\n ========================================================================== */\n\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\n\nfieldset {\n border: 1px solid #c0c0c0; /* 1 */\n margin: 0 2px; /* 1 */\n min-width: 0; /* 2 */\n padding: 0.35em 0.625em 0.75em; /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\n\nlegend {\n border: 0; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n * Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit; /* 1 */\n font: inherit; /* 2 */\n margin: 0; /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\n\noptgroup {\n font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\n\nbutton,\ninput {\n line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\n\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n * and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n * `input` and others.\n */\n\nbutton,\nhtml input[type=\"button\"], /* 1 */\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n cursor: pointer; /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\n\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\n\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n * (include `-moz` to future-proof).\n */\n\ninput[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n -moz-box-sizing: content-box;\n -webkit-box-sizing: content-box; /* 2 */\n box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\n\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\n\ntextarea {\n overflow: auto; /* 1 */\n vertical-align: top; /* 2 */\n}\n\n/* ==========================================================================\n Tables\n ========================================================================== */\n\n/**\n * Remove most spacing between table cells.\n */\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntd,\nth {\n padding: 0;\n}\n","/*! normalize.css v2.1.3 | MIT License | git.io/normalize */\n/* ==========================================================================\n HTML5 display definitions\n ========================================================================== */\n/**\n * Correct `block` display not defined in IE 8/9.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nnav,\nsection,\nsummary {\n display: block;\n}\n\n/**\n * Correct `inline-block` display not defined in IE 8/9.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n}\n\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Address `[hidden]` styling not present in IE 8/9.\n * Hide the `template` element in IE, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n display: none;\n}\n\n/* ==========================================================================\n Base\n ========================================================================== */\n/**\n * 1. Set default font family to sans-serif.\n * 2. Prevent iOS text size adjust after orientation change, without disabling\n * user zoom.\n */\nhtml {\n font-family: sans-serif;\n /* 1 */\n -ms-text-size-adjust: 100%;\n /* 2 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/**\n * Remove default margin.\n */\nbody {\n margin: 0;\n}\n\n/* ==========================================================================\n Links\n ========================================================================== */\n/**\n * Remove the gray background color from active links in IE 10.\n */\na {\n background: transparent;\n}\n\n/**\n * Improve readability when focused and also mouse hovered in all browsers.\n */\na:active,\na:hover {\n outline: 0;\n}\n\n/* ==========================================================================\n Typography\n ========================================================================== */\n/**\n * Address variable `h1` font-size and margin within `section` and `article`\n * contexts in Firefox 4+, Safari 5, and Chrome.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/**\n * Address styling not present in IE 8/9, Safari 5, and Chrome.\n */\nabbr[title] {\n border-bottom: 1px dotted;\n}\n\n/**\n * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.\n */\nb,\nstrong {\n font-weight: bold;\n}\n\n/**\n * Address styling not present in Safari 5 and Chrome.\n */\ndfn {\n font-style: italic;\n}\n\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n -moz-box-sizing: content-box;\n box-sizing: content-box;\n height: 0;\n}\n\n/**\n * Address styling not present in IE 8/9.\n */\nmark {\n background: #ff0;\n color: #000;\n}\n\n/**\n * Correct font family set oddly in Safari 5 and Chrome.\n */\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, serif;\n font-size: 1em;\n}\n\n/**\n * Improve readability of pre-formatted text in all browsers.\n */\npre {\n white-space: pre-wrap;\n}\n\n/**\n * Set consistent quote types.\n */\nq {\n quotes: \"\\201C\" \"\\201D\" \"\\2018\" \"\\2019\";\n}\n\n/**\n * Address inconsistent and variable font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsup {\n top: -0.5em;\n}\n\nsub {\n bottom: -0.25em;\n}\n\n/* ==========================================================================\n Embedded content\n ========================================================================== */\n/**\n * Remove border when inside `a` element in IE 8/9.\n */\nimg {\n border: 0;\n}\n\n/**\n * Correct overflow displayed oddly in IE 9.\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* ==========================================================================\n Figures\n ========================================================================== */\n/**\n * Address margin not present in IE 8/9 and Safari 5.\n */\nfigure {\n margin: 1em 40px;\n}\n\n/* ==========================================================================\n Forms\n ========================================================================== */\n/**\n * 1. Define consistent border, margin, and padding.\n * 2. Address width being affected by wide descendants in Chrome and Firefox.\n */\nfieldset {\n border: 1px solid #c0c0c0;\n /* 1 */\n margin: 0 2px;\n /* 1 */\n min-width: 0;\n /* 2 */\n padding: 0.35em 0.625em 0.75em;\n /* 1 */\n}\n\n/**\n * 1. Correct `color` not being inherited in IE 8/9.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n border: 0;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * 1. Correct color not being inherited in all browsers.\n * Known issue: `select` will not inherit color in Chrome and Safari on OS X.\n * 2. Correct font properties not being inherited in all browsers.\n * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit;\n /* 1 */\n font: inherit;\n /* 2 */\n margin: 0;\n /* 3 */\n}\n\n/**\n * Re-apply the `font-weight` to avoid modifying the default UX, and because\n * the default cannot be changed in Chrome and Safari on OS X.\n */\noptgroup {\n font-weight: bold;\n}\n\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\n * the UA stylesheet.\n */\nbutton,\ninput {\n line-height: normal;\n}\n\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.\n * Correct `select` style inheritance in Firefox 4+ and Opera.\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\n * and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type\n * `input` and others.\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n cursor: pointer;\n /* 3 */\n}\n\n/**\n * Re-set default cursor for disabled elements.\n */\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome\n * (include `-moz` to future-proof).\n */\ninput[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n -moz-box-sizing: content-box;\n -webkit-box-sizing: content-box;\n /* 2 */\n box-sizing: content-box;\n}\n\n/**\n * Remove inner padding and search cancel button in Safari 5 and Chrome\n * on OS X.\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * Remove inner padding and border in Firefox 4+.\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\n * 1. Remove default vertical scrollbar in IE 8/9.\n * 2. Improve readability and alignment in all browsers.\n */\ntextarea {\n overflow: auto;\n /* 1 */\n vertical-align: top;\n /* 2 */\n}\n\n/* ==========================================================================\n Tables\n ========================================================================== */\n/**\n * Remove most spacing between table cells.\n */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntd,\nth {\n padding: 0;\n}\n\n/* MIXINS */\n/* RESET */\nhtml {\n font-size: 62.5%;\n}\n\nbody {\n font-size: 1.3rem;\n background-color: #424242;\n}\n\nh1 {\n margin: 0;\n}\n\n@media (max-width: 650px) {\n h1 {\n font-size: 1.3em;\n }\n}\n\na {\n text-decoration: none;\n}\n\nul {\n padding: 0;\n}\n\nli {\n list-style: none;\n}\n\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n}\n\n.leedvibes-article-content img, .leedvibes-article-content\naudio, .leedvibes-article-content\ncanvas, .leedvibes-article-content\niframe, .leedvibes-article-content\nprogress, .leedvibes-article-content\nvideo {\n display: block;\n margin: 0 auto;\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n}\n\n@media (max-width: 650px) {\n body {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: #c53d3d;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n}\n\n@media (max-width: 650px) {\n .wrapper {\n margin-bottom: 0px;\n }\n}\n\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: #424242;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: #DDD;\n justify-content: space-between;\n align-items: center;\n}\n\n.folder__button, .mark-as-read, .article-favorite,\n.article__read-unread {\n border: 1px dashed transparent;\n}\n\n.folder__button:focus, .mark-as-read:focus, .article-favorite:focus,\n.article__read-unread:focus {\n border-color: #DDD;\n}\n\n.sidebar-item-label, .folder__item a {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* FEED */\n.event {\n position: relative;\n padding: 0 0.5em;\n border-bottom: 0.1em solid #D9D9D9;\n}\n\n.event:not(.event--focus):hover, .event--focused:not(.event--focus) {\n background-color: #DDD;\n}\n\n.event a {\n color: #424242;\n}\n\n.event--new-last {\n border-bottom-color: #424242;\n border-width: 4px;\n}\n\n/* SIDEBAR */\n.sidebar {\n flex: 0 0 23.07692em;\n font-size: 0.9em;\n overflow: hidden;\n}\n\n.sidebar a {\n color: #fff;\n}\n\n.sidebar .settings__fields {\n padding: 20%;\n}\n\n.folder__item,\n.feed__item {\n display: flex;\n position: relative;\n padding-bottom: 0.5em;\n padding-top: 0.5em;\n border-left: 0.38462em solid transparent;\n}\n\n.folder__item,\n.folder__item a,\n.feed__item,\n.feed__item a {\n color: #fff;\n}\n\n.folder__item:hover, .folder__item:active,\n.feed__item:hover,\n.feed__item:active {\n background-color: #303030;\n}\n\n.folder__item.selected,\n.feed__item.selected {\n border-color: white;\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px;\n /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n@media (max-width: 650px) {\n .folder__button,\n .sidebar-item {\n padding: 12px 0;\n }\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: #686868;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: #fff;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n}\n\n.sidebar > section li {\n display: flex;\n color: #fff;\n justify-content: space-between;\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: #fff;\n background-color: #484848;\n}\n\n.sidebar > section button:hover, .sidebar > section button:active, .sidebar > section button:focus,\n.feed-add-button:hover,\n.feed-add-button:active,\n.feed-add-button:focus {\n color: #484848;\n background-color: #DDD;\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url(\"../images/close.svg\");\n transition: transform 0.3s;\n}\n\n.is-opened.feeds-list-toggle:before {\n transform: translate3d(0, 180%, 0);\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: 0.5em 1.5em;\n top: 0;\n left: 0;\n transition: transform 0.3s;\n}\n\n.is-opened .feeds-list-toggle__label {\n transform: translate3d(0, 150%, 0);\n}\n\n.feeds-list {\n margin-top: 0;\n}\n\n.feeds-list[data-is-opened=\"false\"] {\n display: block;\n}\n\n@media (max-width: 650px) {\n .feeds-list[data-is-opened=\"false\"] {\n display: none;\n }\n}\n\n.feeds-list:target {\n display: block;\n}\n\n.folder {\n border-bottom: 0.2em solid #484848;\n}\n\n.folder:first-child {\n border-top: 0.2em solid #484848;\n}\n\n.folder__item a {\n margin: 0 0.3em;\n}\n\n.folder__button {\n float: left;\n margin-right: 5px;\n padding: 0;\n width: 10%;\n}\n\n.folder-closed {\n transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n padding-left: 0.4rem;\n padding-right: 0.8rem;\n}\n\n.feed {\n padding: 4px 0;\n background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n display: none;\n}\n\n.feed__item img {\n float: left;\n margin-left: 1.4em;\n margin-right: 0.3em;\n vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n .feed__item img {\n margin-right: 0.8em;\n }\n}\n\n.mark-as-read {\n padding: 0 0.4rem;\n font-size: 0.8em;\n}\n\n@media (max-width: 650px) {\n .mark-as-read {\n padding: 12px;\n }\n}\n\n/* ARTICLE */\n.article__header {\n position: relative;\n padding: 0.5em 0;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.event--focus .article__header {\n padding-bottom: 0.6em;\n}\n\n@media (max-width: 650px) {\n .article__header {\n display: grid;\n grid-template-columns: 40px auto 80px;\n grid-template-areas: \"favicon site date\" \"favorite title mark\";\n align-items: center;\n white-space: inherit;\n min-height: 4em;\n }\n}\n\n.article__header .article__feed-title {\n display: inline-block;\n width: 10%;\n color: #555;\n font-size: 0.9em;\n overflow-x: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n}\n\n@media (max-width: 650px) {\n .article__header .article__feed-title {\n width: auto;\n grid-area: site;\n }\n}\n\n.feed-icon {\n margin-right: 0.3em;\n vertical-align: middle;\n justify-self: center;\n grid-area: favicon;\n}\n\n@media (max-width: 650px) {\n .feed-icon {\n margin: 0;\n }\n}\n\n@media (max-width: 650px) {\n .article__title {\n margin-left: 14%;\n }\n}\n\n@media (max-width: 650px) {\n .article__feed-title,\n .feed-icon ~ .article__title {\n margin-left: 0.5em;\n }\n}\n\n.article__title {\n display: inline;\n font-size: 1em;\n}\n\n@media (max-width: 650px) {\n .article__title {\n display: inline-block;\n grid-area: title;\n }\n}\n\n[class~=\"event--read\"] .article__title a {\n color: #BBB;\n}\n\n.article__description {\n display: inline-block;\n margin-left: 0.4em;\n color: #888;\n}\n\n[class~=\"event--read\"] .article__description {\n color: #BBB;\n}\n\n@media (max-width: 650px) {\n .article__description {\n display: none;\n }\n}\n\n.event--focus .article__description {\n display: none;\n}\n\n.article__description:after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 16em;\n background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n}\n\n.event:hover .article__description:after,\n.event--focused .article__description:after {\n background-image: linear-gradient(to left, #DDD 6em, rgba(221, 221, 221, 0) 100%);\n}\n\n@media (max-width: 650px) {\n .event:hover .article__description:after,\n .event--focused .article__description:after {\n background: none;\n }\n}\n\n@media (max-width: 650px) {\n .article__description:after {\n background: none;\n }\n}\n\n.article__date {\n position: absolute;\n right: 65px;\n color: #424242;\n font-size: 0.9em;\n}\n\n@media (max-width: 650px) {\n .article__date {\n position: relative;\n right: 0;\n grid-area: date;\n justify-self: right;\n }\n}\n\n.article-favorite {\n right: 30px;\n opacity: 0.3;\n}\n\n.article-favorite--favorited {\n opacity: 1;\n}\n\n@media (max-width: 650px) {\n .article-favorite {\n right: 0;\n grid-area: favorite;\n justify-self: left;\n }\n}\n\n.article__read-unread {\n width: 1.7em;\n right: 0;\n color: white;\n background-color: transparent;\n opacity: 0.3;\n cursor: pointer;\n}\n\n@media (max-width: 650px) {\n .article__read-unread {\n grid-area: mark;\n justify-self: right;\n }\n}\n\n.article-favorite,\n.article__read-unread {\n position: absolute;\n display: flex;\n padding: 0;\n width: 30px;\n height: 100%;\n justify-content: center;\n align-items: center;\n top: 0;\n bottom: 0;\n}\n\n.article-favorite:hover, .article-favorite:active, .article-favorite:focus,\n.article__read-unread:hover,\n.article__read-unread:active,\n.article__read-unread:focus {\n border-color: #424242;\n}\n\n@media (max-width: 650px) {\n .article-favorite,\n .article__read-unread {\n position: relative;\n padding: 0;\n width: 100%;\n min-height: 50px;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.leedvibes-article-content {\n display: none;\n margin: 0 auto 1em;\n width: 42.8125em;\n font-size: 1.6rem;\n line-height: 1.7;\n overflow: auto;\n overflow-wrap: break-word;\n}\n\n@media (max-width: 650px) {\n .leedvibes-article-content {\n padding: 0 1rem;\n width: auto;\n }\n}\n\n.leedvibes-article-content a {\n text-decoration: underline;\n}\n\n.leedvibes-article-content--is-opened {\n display: block;\n}\n\n.leedvibes-article-content__infos {\n margin: 1em 0;\n}\n\n.leedvibes-article-content__infos a {\n font-size: 2.8rem;\n line-height: 1;\n}\n\n.leedvibes-article-content__switch-view {\n display: none;\n position: absolute;\n right: 8em;\n top: 0.4em;\n background: none;\n border: 1px solid #BBB;\n z-index: 20;\n}\n\n@media (max-width: 650px) {\n .leedvibes-article-content__switch-view {\n top: 2.4em;\n right: 4em;\n }\n}\n\n.event--focus .leedvibes-article-content__switch-view {\n display: inherit;\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n display: flex;\n justify-content: space-around;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n margin: 1em auto;\n}\n\n.settings {\n padding: 1em;\n background-color: #303030;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: 0.5em 1.5em;\n min-width: 15px;\n min-height: 15px;\n border-bottom: 0.38462em solid transparent;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n}\n\n.settings-item:hover, .settings-item:active, .settings-item:focus {\n border-color: white;\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n}\n\nbutton.settings-item:focus {\n outline: dotted 1px;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n min-width: 7em;\n width: 35%;\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n display: block;\n margin: 0.4em auto;\n padding: 0.5em;\n color: #303030;\n}\n\n.favorite-inverted {\n fill: white;\n}\n\n.animation-spin {\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.shortcuts-toggle {\n display: none;\n}\n\n@media (min-width: 650px) {\n html:not(.no-js) .shortcuts-toggle {\n display: block;\n }\n}\n\n.shortcuts {\n position: fixed;\n display: none;\n left: 0;\n top: 0;\n padding: 20px;\n width: 100%;\n height: 100%;\n color: white;\n background-color: #303030e6;\n overflow: scroll;\n}\n\n.shortcuts:hover {\n cursor: pointer;\n}\n\n.shortcuts-list {\n margin: 0;\n padding: 0;\n}\n\n.shortcut {\n display: flex;\n margin-bottom: 10px;\n align-items: center;\n}\n\n.shortcut-key {\n display: inline-block;\n margin-right: 20px;\n padding: 5px 5px 10px 5px;\n min-width: 20px;\n color: #777777;\n font-size: 12px;\n background-color: #DDDDDD;\n border: 2px solid #F9F7F7;\n border-bottom: 4px solid #898989;\n border-right: 4px solid #898989;\n border-radius: 3px;\n box-shadow: 0 0 10px #111010;\n}\n\n.shortcut-key + .shortcut-key {\n margin-left: 20px;\n}\n\n/* MEDIA QUERIES */\n@media (max-width: 650px) {\n td {\n display: block;\n }\n}\n\n.mobile-only {\n display: none;\n}\n\n@media (max-width: 650px) {\n .mobile-only {\n display: inline;\n }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n float: left;\n width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n width: 19%;\n}\n\n.hidden {\n display: none;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n","// VARS\n$font-size-base: 13px;\n$sidebar-button-size: 10%;\n$settings-padding: 0.5em 1.5em;\n$sidebar-color: #fff;\n$sidebar-color-bg: #424242;\n$folder-separator: #484848;\n$sidebar-color-bg-darken: darken( $sidebar-color-bg, 7% );\n$sidebar-color-alt: #686868;\n$feed-entry-color: $sidebar-color-bg;\n$breakpoint: \"650px\";\n$breakpoint-min: \"min-width: #{$breakpoint}\";\n$breakpoint-max: \"max-width: #{$breakpoint}\";\n$feed-bgc-used: #DDD;\n$error-color: #c53d3d;\n$feed-event-read-color: #BBB;\n\n$opacity-low: 0.3;\n$position-top-on-break: 30px;\n$action-icon-width: 30px;\n\n@import \"normalize\";\n\n/* MIXINS */\n@import \"partials/mixins/_helpers.scss\";\n\n/* RESET */\nhtml {\n font-size: 62.5%;\n}\nbody {\n font-size: 1.3rem;\n background-color: $sidebar-color-bg;\n}\nh1 {\n margin: 0;\n\n @media( $breakpoint-max ) {\n font-size: 1.3em;\n }\n}\na {\n text-decoration: none;\n}\nul {\n padding: 0;\n}\nli {\n list-style: none;\n}\nimg,\naudio,\ncanvas,\niframe,\nprogress,\nvideo {\n max-width: 100%;\n height: auto;\n\n .leedvibes-article-content & {\n display: block;\n margin: 0 auto;\n }\n}\n\niframe {\n width: auto;\n}\n\n/* GENERAL STYLE */\nbody {\n display: flex;\n flex-wrap: wrap;\n width: 99vw;\n\n @media($breakpoint-max) {\n display: block;\n width: 100vw;\n }\n}\n\nbutton {\n background-color: transparent;\n border: none;\n}\n\n.error {\n background-color: $error-color;\n}\n\n.wrapper {\n flex: 1 1 0;\n min-width: 0;\n min-height: 100vh;\n background-color: #FFF;\n\n @media($breakpoint-max) {\n // Avoid extra margin-bottom when all\n // the content is read and infinite-scroll-end\n // shows up\n margin-bottom: 0px;\n }\n}\n.selected a {\n color: #FFF;\n font-weight: bold;\n}\n\n.notifications {\n margin: 0;\n color: #FFF;\n background-color: $sidebar-color-bg;\n}\n\n.notifications__text {\n display: flex;\n padding: 1em 0.5em;\n color: $feed-bgc-used;\n justify-content: space-between;\n align-items: center;\n}\n\n%text-color-dark {\n color: #000;\n}\n\n%button-focused {\n border: 1px dashed transparent;\n\n &:focus {\n border-color: $feed-bgc-used;\n }\n}\n%overflow-sidebar {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* FEED */\n$entry-space: 0.5em;\n.event {\n position: relative;\n padding: 0 $entry-space;\n border-bottom: 0.1em solid #D9D9D9;\n\n &:not(.event--focus):hover,\n &--focused:not(.event--focus) {\n background-color: $feed-bgc-used;\n }\n\n a {\n color: $feed-entry-color;\n }\n}\n\n.event--new-last {\n border-bottom-color: $sidebar-color-bg;\n border-width: 4px;\n}\n\n/* SIDEBAR */\n$border-base: em( 5px ) solid transparent;\n$border-color-active: white;\n\n.sidebar {\n flex: 0 0 em( 300px );\n font-size: 0.9em;\n overflow: hidden;\n\n a {\n color: $sidebar-color;\n }\n\n .settings__fields {\n padding: 20%;\n }\n\n}\n\n.folder__item,\n.feed__item {\n display: flex;\n position: relative;\n $padding : 0.5em;\n padding-bottom: $padding;\n padding-top: $padding;\n border-left: $border-base;\n\n &,\n a {\n color: $sidebar-color;\n }\n\n &:hover,\n &:active {\n background-color: $sidebar-color-bg-darken;\n }\n\n &.selected {\n border-color: $border-color-active;\n }\n}\n\n.sidebar-item {\n flex-grow: 1;\n height: 16px; /* Favicon's height */\n line-height: 16px;\n overflow: hidden;\n}\n\n.folder__button,\n.sidebar-item {\n @media($breakpoint-max) {\n padding: 12px 0;\n }\n}\n\n.sidebar-item-label {\n @extend %overflow-sidebar;\n}\n\n.go-top {\n display: inline-block;\n padding: 2px 20px;\n text-align: center;\n background-color: $sidebar-color-alt;\n border-radius: 20%;\n}\n\n.feed-add {\n text-align: center;\n}\n\n[data-is-opened=\"false\"] {\n display: none;\n}\n\n.feed-add-title {\n margin: 0 0 1em;\n color: $sidebar-color;\n}\n\n.feed-add-url,\n.feed-add-folders {\n width: 80%;\n}\n\n.feed-add-url {\n padding: 0.5em;\n border: none;\n}\n\n.feed-add-folders {\n margin: 1em 0;\n padding: 0.5em 2em;\n}\n\n.sidebar > section {\n margin: 2em auto 3em;\n padding: 0 1em;\n\n li {\n display: flex;\n color: $sidebar-color;\n justify-content: space-between;\n }\n}\n\n.sidebar > section button,\n.feed-add-button {\n padding: 1em 2em;\n color: $sidebar-color;\n background-color: $folder-separator;\n\n &:hover,\n &:active,\n &:focus {\n color: $folder-separator;\n background-color: $feed-bgc-used;\n }\n}\n\n.feed-add-button {\n margin-bottom: 1em;\n}\n\n.feeds-list-toggle {\n position: relative;\n overflow: hidden;\n}\n$feeds-list-toggle-transition: transform 0.3s;\n.feeds-list-toggle:before {\n position: absolute;\n width: 15px;\n height: 15px;\n left: 35%;\n top: -20px;\n content: '';\n background-image: url( '../images/close.svg' );\n transition: $feeds-list-toggle-transition;\n\n @at-root .is-opened#{&} {\n transform: translate3d(0, 180%, 0);\n }\n}\n\n.feeds-list-toggle__label {\n position: absolute;\n padding: $settings-padding;\n top: 0;\n left: 0;\n transition: $feeds-list-toggle-transition;\n\n .is-opened & {\n transform: translate3d(0, 150%, 0);\n }\n}\n\n.feeds-list {\n margin-top:0;\n\n &[data-is-opened=\"false\"] {\n display: block;\n\n @media($breakpoint-max) {\n display: none;\n }\n }\n\n &:target {\n display: block;\n }\n}\n\n.folder {\n $value: 0.2em solid $folder-separator;\n border-bottom: $value;\n\n &:first-child {\n border-top: $value;\n }\n}\n\n.folder__item a {\n margin: 0 0.3em;\n @extend %overflow-sidebar;\n}\n.folder__button {\n float: left;\n margin-right: 5px;\n padding: 0;\n width: $sidebar-button-size;\n @extend %button-focused;\n}\n\n.folder-closed {\n transform: rotate(270deg);\n}\n\n.folder__item,\n.feed__item {\n padding-left: 0.4rem;\n padding-right: 0.8rem;\n}\n.feed {\n padding: 4px 0;\n background-color: #4b4b4b;\n}\n\nhtml:not(.no-js) .feed--closed {\n display: none;\n}\n\n.feed__item img {\n float: left;\n margin-left: 1.4em;\n margin-right: 0.3em;\n vertical-align: middle;\n\n @media($breakpoint-max) {\n margin-right: 0.8em;\n }\n}\n\n.mark-as-read {\n padding: 0 0.4rem;\n font-size: 0.8em;\n @extend %button-focused;\n\n @media($breakpoint-max) {\n padding: 12px;\n }\n}\n\n/* ARTICLE */\n.article__header {\n position: relative;\n padding: $entry-space 0;\n overflow: hidden;\n white-space: nowrap;\n cursor: pointer;\n\n .event--focus & {\n padding-bottom: 0.6em;\n }\n\n @media($breakpoint-max) {\n display: grid;\n grid-template-columns: 40px auto 80px;\n grid-template-areas: \"favicon site date\" \"favorite title mark\";\n align-items: center;\n white-space: inherit;\n min-height: 4em;\n }\n\n .article__feed-title {\n display: inline-block;\n width: 10%;\n color: #555;\n font-size: 0.9em;\n overflow-x: hidden;\n text-overflow: ellipsis;\n vertical-align: middle;\n\n @media($breakpoint-max) {\n width: auto;\n grid-area: site;\n }\n }\n}\n\n.feed-icon {\n margin-right: 0.3em;\n vertical-align: middle;\n justify-self: center;\n grid-area: favicon;\n\n @media($breakpoint-max) {\n margin: 0;\n }\n}\n\n.article__title {\n @media($breakpoint-max) {\n margin-left: 14%;\n }\n}\n\n.article__feed-title,\n.feed-icon ~ .article__title {\n @media($breakpoint-max) {\n margin-left: 0.5em;\n }\n}\n\n.article__title {\n display: inline;\n font-size: 1em;\n\n @media($breakpoint-max) {\n display: inline-block;\n grid-area:title;\n }\n\n [class~=\"event--read\"] & a {\n color: $feed-event-read-color;\n }\n}\n.article__description {\n display: inline-block;\n margin-left: 0.4em;\n color: #888;\n\n [class~=\"event--read\"] & {\n color: $feed-event-read-color;\n }\n\n @media($breakpoint-max) {\n display: none;\n }\n\n .event--focus & {\n display: none;\n }\n\n &:after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n width: 16em;\n $support-for-original-webkit-gradients : false;\n background-image: linear-gradient(to left, white 48%, rgba(255, 255, 255, 0) 100%);\n\n .event:hover &,\n .event--focused & {\n background-image: linear-gradient(to left, $feed-bgc-used 6em, rgba($feed-bgc-used, 0) 100%);\n\n @media($breakpoint-max) {\n background: none;\n }\n\n }\n\n @media($breakpoint-max) {\n background: none;\n }\n }\n}\n.article__date {\n position: absolute;\n right: $action-icon-width * 2 + 5px;\n color: $feed-entry-color;\n font-size: 0.9em;\n\n @media( $breakpoint-max ) {\n position: relative;\n right: 0;\n grid-area: date;\n justify-self: right;\n }\n}\n\n.article-favorite {\n right: $action-icon-width;\n opacity: $opacity-low;\n\n &--favorited {\n opacity: 1;\n }\n\n @media( $breakpoint-max ) {\n right: 0;\n grid-area: favorite;\n justify-self: left;\n }\n}\n\n.article__read-unread {\n width: 1.7em;\n right: 0;\n color: white;\n background-color: transparent;\n opacity: $opacity-low;\n cursor: pointer;\n\n @media( $breakpoint-max ) {\n grid-area: mark;\n justify-self: right;\n }\n}\n\n.article-favorite,\n.article__read-unread {\n position: absolute;\n display: flex;\n padding: 0;\n width: $action-icon-width;\n height: 100%;\n justify-content: center;\n align-items: center;\n top: 0;\n bottom: 0;\n @extend %button-focused;\n\n &:hover,\n &:active,\n &:focus {\n border-color: $sidebar-color-bg;\n }\n\n @media( $breakpoint-max ) {\n position: relative;\n padding: 0;\n width: 100%;\n min-height: 50px;\n }\n}\n\n.article__read-read {\n opacity: 1;\n}\n\n.leedvibes-article-content {\n display: none;\n margin: 0 auto 1em;\n width: 42.8125em; // font: 16px / width: 685px (http://www.pearsonified.com/typography/)\n font-size: 1.6rem;\n line-height: 1.7;\n overflow: auto;\n overflow-wrap: break-word;\n\n @media($breakpoint-max) {\n padding: 0 1rem;\n width: auto;\n }\n\n a {\n text-decoration: underline;\n }\n}\n\n.leedvibes-article-content--is-opened {\n display: block;\n}\n\n.leedvibes-article-content__infos {\n margin: 1em 0;\n\n a {\n font-size: 2.8rem;\n line-height: 1;\n }\n}\n// [todo] - Do a better style\n.leedvibes-article-content__switch-view {\n display: none;\n position: absolute;\n right: 8em;\n top: 0.4em;\n background: none;\n border: 1px solid $feed-event-read-color;\n z-index: 20;\n\n @media($breakpoint-max) {\n top: 2.4em;\n right: 4em;\n }\n\n .event--focus & {\n display: inherit;\n }\n}\n\n/* USER SETTINGS */\n.user-login,\n.settings {\n display: flex;\n justify-content: space-around;\n padding: 0 1em;\n color: #CACACA;\n align-items: center;\n text-align: center;\n}\n\n.user-login {\n margin: 1em auto;\n}\n\n.settings {\n padding: 1em;\n background-color: $sidebar-color-bg-darken;\n}\n\n.user-login {\n flex-direction: column;\n}\n\n.settings-item {\n padding: $settings-padding;\n min-width: 15px;\n min-height: 15px;\n border-bottom: $border-base;\n box-sizing: content-box;\n transition: border 0.2s ease-in-out 0s;\n\n &:hover,\n &:active,\n &:focus {\n border-color: $border-color-active;\n }\n}\n\nbutton.settings-item {\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n background-color: transparent;\n\n &:focus {\n outline: dotted 1px;\n }\n}\n\n.settings__fields input[type='text'],\n.settings__fields input[type='password'] {\n min-width: 7em;\n width: 35%;\n}\n.settings__fields input[type='text'],\n.settings__fields input[type='password'],\n.settings__fields input[type='submit'] {\n display: block;\n margin: 0.4em auto;\n padding: 0.5em;\n color: $sidebar-color-bg-darken;\n}\n\n.favorite-inverted {\n fill: white;\n}\n\n.animation-spin {\n animation: spin 2s linear infinite;\n}\n@keyframes spin {\n 100% { transform: rotate(360deg); }\n}\n\n.shortcuts-toggle {\n display: none;\n}\n\n@media( $breakpoint-min ) {\n html:not(.no-js) .shortcuts-toggle {\n display: block;\n }\n}\n\n.shortcuts {\n position: fixed;\n display: none;\n left: 0;\n top: 0;\n padding: 20px;\n width: 100%;\n height: 100%;\n color: white;\n background-color: #{$sidebar-color-bg-darken}e6;\n overflow: scroll;\n}\n\n.shortcuts:hover {\n cursor: pointer;\n}\n\n\n.shortcuts-list {\n margin: 0;\n padding: 0;\n}\n\n.shortcut {\n display: flex;\n margin-bottom: 10px;\n align-items: center;\n}\n\n$shortcut-key-space: 20px;\n.shortcut-key {\n display: inline-block;\n margin-right: $shortcut-key-space;\n padding: 5px 5px 10px 5px;\n min-width: 20px;\n color: #777777;\n font-size: 12px;\n background-color: #DDDDDD;\n border: 2px solid #F9F7F7;\n border-bottom: 4px solid #898989;\n border-right: 4px solid #898989;\n border-radius: 3px;\n box-shadow: 0 0 10px #111010;\n\n & + & {\n margin-left: $shortcut-key-space;\n }\n}\n\n/* MEDIA QUERIES */\n@media($breakpoint-max) {\n td {\n display: block;\n }\n}\n\n.mobile-only {\n display: none;\n\n @media($breakpoint-max) {\n display: inline;\n }\n}\n\n/* IE9- */\n.no-flexboxlegacy body {\n display: block;\n}\n\n.no-flexboxlegacy .wrapper {\n margin-left: 20%;\n}\n\n.no-flexboxlegacy .sidebar {\n float: left;\n width: 20%;\n}\n\n/* IE7 */\n.no-flexboxlegacy.no-boxsizing .sidebar {\n width: 19%;\n}\n\n// Utils\n\n.hidden {\n display: none;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0,0,0,0);\n border: 0;\n}\n","@function em($target, $context: $font-size-base) {\n @if $target == 0 { @return 0 }\n @return $target / $context + 0em;\n}\n"]} \ No newline at end of file diff --git a/sass/style.scss b/sass/style.scss index 2e88867..75bbe75 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -408,7 +408,7 @@ html:not(.no-js) .feed--closed { @media($breakpoint-max) { display: grid; - grid-template-columns: 40px auto 40px; + grid-template-columns: 40px auto 80px; grid-template-areas: "favicon site date" "favorite title mark"; align-items: center; white-space: inherit; @@ -577,7 +577,7 @@ html:not(.no-js) .feed--closed { position: relative; padding: 0; width: 100%; - border-color: $feed-event-read-color; + min-height: 50px; } }