diff --git a/OsmAnd/assets/article_style.css b/OsmAnd/assets/article_style.css index 7d32f8d31d..ff1da36a86 100755 --- a/OsmAnd/assets/article_style.css +++ b/OsmAnd/assets/article_style.css @@ -51,6 +51,7 @@ body { padding-bottom: 0; padding-left: 7%; padding-right: 7%; + background-color: #ffffff; background-color: var(--background-color-day); font-family: sans-serif; } @@ -58,29 +59,30 @@ body { .content { display: none; overflow: hidden; - /* - padding-left: 7%; - padding-right: 7%; - */ } .nightmode { max-width: 100% !important; display: block; font-family: sans-serif; + background-color: #17191a; background-color: var(--background-color-night); } .nav-bar { + background-color: #f2f2f2; background-color: var(--topbar-bg-color-day); padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; + font-size: 1.1em; font-size: var(--main-text-font-size); font-weight: normal; + line-height: 1.6em; line-height: var(--main-text-line-height); font-family: sans-serif; + color: #727272; color: var(--description-text-color); word-wrap: break-word; white-space: nowrap; @@ -88,13 +90,17 @@ body { } .nav-bar-current { + color: #237bff; color: var(--link-text-color-day); } .nav-bar.nightmode { + background-color: #222526; background-color: var(--topbar-bg-color-night); + font-size: 1.1em; font-size: var(--main-text-font-size); font-family: sans-serif; + color: #cccccc; color: var(--main-text-color-night); word-wrap: break-word; padding-left: 16px; @@ -102,6 +108,7 @@ body { padding-top: 12px; padding-bottom: 12px; font-weight: normal; + line-height: 1.6em; line-height: var(--main-text-line-height); } @@ -112,6 +119,7 @@ body { background-size: 100%; background-size:cover; background-repeat: no-repeat; + background-color: #f2f2f2; background-color: var(--topbar-bg-color-day); } @@ -122,12 +130,13 @@ body { background-size: 100%; background-size:cover; background-repeat: no-repeat; - background-color: var(--topbar-bg-color-night); + background-color:#222526; + background-color: var(--topbar-bg-color-day); } h1 { font-size: 2em; - color: var(--main-text-color-day); + color: var(--main-text-color-day, #212121); font-family: RobotoSlab-Regular; letter-spacing: 0.02em; word-wrap: break-word; @@ -136,15 +145,18 @@ h1 { } .nightmode h1 { + color: #cccccc; color: var(--main-text-color-night); } h2 { font-size: 1.5em; + color: #454545; color: var(--headline-text-color-day); font-family: RobotoSlab-Regular; font-weight: 100; word-wrap: break-word; + line-height: 1.6em; line-height: var(--main-text-line-height); letter-spacing: 0.015em; border-bottom: 1px solid var(--divider-color-day); @@ -155,6 +167,7 @@ h2 { } .nightmode h2 { + color: #999999; color: var(--headline-text-color-night); border-bottom: 1px solid var(--divider-color-night); font-weight: 100; @@ -162,11 +175,13 @@ h2 { h2.active { border-bottom: 0px; + color: #212121; color: var(--main-text-color-day); } .nightmode h2.active { padding-left: content; + color: #cccccc; color: var(--main-text-color-night); border-bottom: 0px; } @@ -183,7 +198,9 @@ h2:after { /* Headline arrow */ vertical-align: middle; content: ""; - border: solid var(--description-text-color); + + /* border: solid var(--description-text-color, #727272); */ + border: solid #727272; border-width: 0 2px 2px 0; margin-top: 13px; display: inline-block; @@ -195,22 +212,27 @@ h2:after { } h3 { + color: #727272; color: var(--description-text-color); + font-size: 1.2em; font-size: var(--headers-font-size); font-family: sans-serif; word-wrap: break-word; font-weight: bold; margin-top: 5%; margin-bottom: 3%; + line-height: 1.6em; line-height: var(--main-text-line-height); } .nightmode h3 { + color: #727272; color: var(--description-text-color); } h4, h5 { color: var(--headline-text-color-day); + font-size: 1.2em; font-size: var(--headers-font-size); font-family: sans-serif; word-wrap: break-word; @@ -218,6 +240,7 @@ h4, h5 { margin-top: 5%; margin-bottom: 3%; padding-left: content; + line-height: 1.6em; line-height: var(--main-text-line-height); } @@ -231,23 +254,29 @@ h4, h5 { } p { + color: #212121; color: var(--main-text-color-day); font-family: sans-serif; + font-size: 1.1em; font-size: var(--main-text-font-size); + line-height: 1.6em; line-height: var(--main-text-line-height); padding-left: content; } .nightmode p { + color: #cccccc; color: var(--main-text-color-night); } /* Lists */ ul, dl, ol { /* font-size: var(--main-text-font-size); */ + color: #212121; color: var(--main-text-color-day); font-size: inherit; list-style-type: disc; + line-height: 1.6em; line-height: var(--main-text-line-height); margin-left: 5%; padding: 0%; @@ -283,7 +312,9 @@ a, a.external.free, a.text { } pre { + font-size: 1.1em; font-size: var(--main-text-font-size); + line-height: 1.6em; line-height: var(--main-text-line-height); font-family: sans-serif; white-space: pre-wrap; @@ -294,7 +325,7 @@ pre { } .nightmode pre { - color: var(--main-text-color-night); + color: #cccccc; color: var(--main-text-color-night); } a.geo { @@ -311,12 +342,13 @@ a.geo { } .nightmode a.geo { + color: #d28521; color: var(--link-text-color-night); + background-color: #222526; background-color: var(--topbar-bg-color-night); border: 1px solid var(--divider-color-night); border-radius: 4px; padding: 10px 10px 10px 10px; - color: var(--link-text-color-night); font-size: 0.9em; font-weight: bold; text-align: center; @@ -328,8 +360,10 @@ table { display: block; overflow-y: scroll; word-wrap: break-word; + color: #212121; color: var(--main-text-color-day); border: 1px solid var(--divider-color-day); + background: #eaecf0; background: var(--divider-color-day); margin-left: 0% !important; margin-right: 0% !important; @@ -338,6 +372,7 @@ table { } .nightmode table { + color: #cccccc; color: var(--main-text-color-night); border: 1px solid var(--background-color-night); background: var(--divider-color-night) !important; @@ -346,11 +381,13 @@ table { td, tr, th { border: 1px solid var(--divider-color-day); - color: var(--main-text-color-night); + color: #cccccc; color: var(--main-text-color-night); + background: #eaecf0; background: var(--divider-color-day); } .nightmode td, .nightmode tr, .nightmode th { + color: #cccccc; color: var(--main-text-color-night); border: 1px solid var(--background-color-night); background: var(--divider-color-night) !important; @@ -373,7 +410,9 @@ td, tr, th { .thumbnailcaption, thumbcaption { padding-top: 3%; width: 100%; + font-size: 1.1em; font-size: var(--main-text-font-size); + color: #727272; color: var(--description-text-color); font-style: italic; text-align: center; @@ -382,7 +421,9 @@ td, tr, th { .nightmode .thumbnailcaption, .nightmode .thumbcaption { padding-top: 3%; width: 100%; + font-size: 1.1em; font-size: var(--main-text-font-size); + color: #727272; color: var(--description-text-color); font-style: italic; text-align: center; @@ -391,13 +432,17 @@ td, tr, th { hr { border: none; height: 1px; + color: #eaecf0; color: var(--divider-color-day); + background-color: #eaecf0; background-color: var(--divider-color-day); } .nightmode hr { border: none; height: 1px; + color: #2d3133; color: var(--divider-color-night); + background-color: #2d3133; background-color: var(--divider-color-night); } \ No newline at end of file