From 2f6e9478bb76c1f562582bac250a57ad14bf8795 Mon Sep 17 00:00:00 2001 From: Zach DeCook Date: Sat, 10 Nov 2018 16:12:37 -0500 Subject: * Style: Allow to be themed using nextcloud's predefined CSS variables --- css/admin.css | 2 +- css/app.css | 2 +- css/content.css | 44 ++++++++++++++++++++------------------------ css/navigation.css | 14 +++++++------- css/shortcuts.css | 2 +- 5 files changed, 30 insertions(+), 34 deletions(-) (limited to 'css') diff --git a/css/admin.css b/css/admin.css index 518508ffb..fe8f2e9dd 100644 --- a/css/admin.css +++ b/css/admin.css @@ -8,5 +8,5 @@ } #news .notice { - color: red; + color: var(--color-error); } diff --git a/css/app.css b/css/app.css index e3b96fc84..73ffe9957 100644 --- a/css/app.css +++ b/css/app.css @@ -22,7 +22,7 @@ #undo { z-index:101; - background-color:#fc4; + background-color:var(--color-warning); border:0; padding:0 .7em .3em; display:none; diff --git a/css/content.css b/css/content.css index e9e3e2948..b21efb832 100644 --- a/css/content.css +++ b/css/content.css @@ -35,7 +35,7 @@ #app-content .no-feeds-available { text-align: center; - color: #333; + color: var(--color-text-lighter); font-size: 16pt; min-height: 100%; height: 100%; @@ -151,11 +151,7 @@ } #app-content .finished-auto-paging #articles:after { - background-image: -o-linear-gradient(top, #eee 0%, #FEFEFE 100%); - background-image: -moz-linear-gradient(top, #eee 0%, #FEFEFE 100%); - background-image: -webkit-linear-gradient(top, #eee 0%, #FEFEFE 100%); - background-image: -ms-linear-gradient(top, #eee 0%, #FEFEFE 100%); - background-image: linear-gradient(to top, #eee 0%, #FEFEFE 100%); + background: var(--color-main-background); } @@ -200,12 +196,12 @@ #app-content .item { cursor: default; - border-bottom: 1px solid #eee; - background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 84px); + border-bottom: 1px solid var(--color-border); + background: var(--color-background-dark); } #app-content .item.active { - background-image: linear-gradient(to right, orange 0, orange 2px, #ffffff 2px); + background: var(--color-background-darker); } #app-content :not(.compact) .item { @@ -231,7 +227,7 @@ -webkit-position: sticky; position: sticky; top: 50px; - background-color: #fff; + background-color: var(--color-main-background); height: 41px; opacity: 0.9; } @@ -344,7 +340,7 @@ border-radius: 3px; z-index: 1000; border: 1px solid transparent; - background-color: #fff; + background-color: var(--color-main-background); margin: 0; padding: 0; } @@ -423,7 +419,7 @@ overflow: hidden; width: 100%; display: inline-block; - color: #222; + color: var(--color-main-text); font-weight: bold; font-size: 16px; line-height: 1.5; @@ -436,7 +432,7 @@ } #app-content .title .intro { - color: #777; + color: var(--color-text-lighter); font-size: 10pt; font-weight: normal; margin-left: 20px; @@ -449,7 +445,7 @@ #app-content .read .utils .title h1 a { font-weight: normal; - color: #777; + color: var(--color-text-lighter); } #app-content .utils .date { @@ -473,7 +469,7 @@ #app-content .heading a { font-weight: bold; - color: #222; + color: var(--color-main-text); text-decoration: none; } #app-content .heading a:hover { @@ -489,7 +485,7 @@ #app-content .read .heading a { font-weight: normal !important; - color: #777; + color: var(--color-text-lighter); } #app-content .feed-view .source { @@ -522,14 +518,14 @@ * Timestamp */ #app-content .subtitle { - color: #777; + color: var(--color-text-lighter); font-size: 15px; max-width: 770px; padding-bottom: 25px; } #app-content .subtitle a { - color: #777; + color: var(--color-text-lighter); } #app-content .subtitle a:hover { @@ -537,7 +533,7 @@ } #app-content .date { - color: #777; + color: var(--color-text-lighter); white-space: nowrap; } @@ -545,7 +541,7 @@ * Author */ #app-content .author { - color: #777; + color: var(--color-text-lighter); font-size: 15px; } @@ -620,14 +616,14 @@ #app-content .body h2 { font-size: 17px; font-weight: bold; - color: #222; + color: var(--color-main-text); margin: 21px 0 5px 0; } #app-content .body h3 { font-size: 15px; font-weight: bold; - color: #222; + color: var(--color-main-text); margin: 21px 0 0 0; text-decoration: underline; } @@ -665,8 +661,8 @@ #app-content .body pre { padding: 7px 7px 7px 14px; - background-color: #dadada; - border: 1px solid #ccc; + background-color: var(--color-background-darker); + border: 1px solid var(--color-border-dark); margin: 7px 0 14px 0; overflow-y: auto; } diff --git a/css/navigation.css b/css/navigation.css index 281226d75..cfbf1c807 100644 --- a/css/navigation.css +++ b/css/navigation.css @@ -16,7 +16,7 @@ } #app-navigation .add-new .heading:hover { - background-color: #ccc; + background-color: var(--color-background-darker); } #app-navigation .add-new .heading button { @@ -39,14 +39,14 @@ #app-navigation .add-new-popup { display: none; padding: 10px; - box-shadow: inset 0px 0px 10px #dedede; - border-top: 1px solid #dedede; - border-bottom: 1px solid #dedede; + box-shadow: inset 0px 0px 10px var(--color-box-shadow); + border-top: 1px solid var(--color-border-dark); + border-bottom: 1px solid var(--color-border-dark); } #app-navigation input.ng-invalid { - border: 1px solid #dd1144; + border: 1px solid var(--color-error); } #app-navigation .add-new-popup input, @@ -132,7 +132,7 @@ */ #app-navigation .error-message { padding: 15px; - background-color: #DE1212; + background-color: var(--color-error); color: #fff; position: relative; overflow-y: auto; @@ -225,5 +225,5 @@ } #app-navigation .updateerror a { - background-color: orange !important; + background-color: var(--color-warning) !important; } diff --git a/css/shortcuts.css b/css/shortcuts.css index b3b1899d9..64e18a7cf 100644 --- a/css/shortcuts.css +++ b/css/shortcuts.css @@ -8,7 +8,7 @@ } #app-shortcuts tr:first-child { - background-color: #f5f5f5; + background-color: var(--color-main-background); } #app-shortcuts th, -- cgit v1.2.3