From 523db60ebf1cb2deb091b8cbf8d1c2bf1d72509c Mon Sep 17 00:00:00 2001 From: nek0 Date: Sun, 8 Oct 2017 20:29:40 +0200 Subject: [PATCH] adding css variables for better customization --- Foundation.hs | 1 - eidolon.cabal | 2 +- static/css/main.css | 102 ++++++++++++++++++++++++++++++++++++++------ 3 files changed, 91 insertions(+), 14 deletions(-) diff --git a/Foundation.hs b/Foundation.hs index 1443d69..cbf6459 100755 --- a/Foundation.hs +++ b/Foundation.hs @@ -117,7 +117,6 @@ renderLayout widget = do ] mapM_ addStylesheet $ map StaticR [ css_bootstrap_min_css - , css_dropdown_css , css_main_css ] $(widgetFile "default-layout") diff --git a/eidolon.cabal b/eidolon.cabal index 418a9e1..9df891b 100755 --- a/eidolon.cabal +++ b/eidolon.cabal @@ -1,5 +1,5 @@ name: eidolon -version: 0.1.11.1 +version: 0.1.11.2 synopsis: Image gallery in Yesod homepage: https://eidolon.nek0.eu license: AGPL-3 diff --git a/static/css/main.css b/static/css/main.css index 92254c2..59fd58a 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,11 @@ +:root { + --text-color: white; + --inverted-text-color: rgba(0,0,0,0.7); + --theme-color: #d64760; + --inverted-theme-color: white; + --message-background-color: lightyellow; +} + body { display: flex; min-height: 100vh; @@ -13,7 +21,7 @@ body { } a { - color: white; + color: var(--text-color); text-decoration: none; font-weight: 600; transition: color 0.25s ease-in-out; @@ -25,8 +33,8 @@ a figcaption { transition: color 0.25s ease-in-out; } -a:hover, .item a:hover, .medium a:hover, a:hover figcaption { - color: #d64760; +a:hover, .item a:hover, .medium a:hover, a:hover figcaption, .loginDiv a:hover { + color: var(--theme-color); text-decoration: underline; transition: color 0.25s ease-in-out; } @@ -37,8 +45,8 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption { #message { padding: 1em 2em; - background: lightyellow url('../img/overlay.png'); - color: #d64760; + background: var(--message-background-color) url('../img/overlay.png'); + color: var(--theme-color); font-size: 1.5em; position:relative; top: 80px; @@ -57,17 +65,21 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption { text-align: center; } -.item, .medium, .loginDiv, .newaccount, .reactivate { - color: rgba(0,0,0,0.7); +.item, .medium, .loginDiv, .newaccount, .reactivate, .password { + color: var(--inverted-text-color); display: inline-block; position: relative; background: rgba(255,255,255,0.8) url('../img/overlay.png'); - border: 10px solid white; + border: 10px solid var(--inverted-theme-color); padding-top: 0; padding-left: 0; vertical-align: middle; } +.loginDiv a { + color: var(--inverted-text-color); +} + .item { height: 300px; width: 400px; @@ -83,7 +95,7 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption { } .subheader { - background: rgba(214, 71, 96, 0.7) url('../img/overlay.png'); + background: var(--theme-color) url('../img/overlay.png'); display: inline-flex; flex-direction: column; } @@ -108,7 +120,7 @@ a:hover, .item a:hover, .medium a:hover, a:hover figcaption { } .subheader a:hover { - color: white; + color: var(--text-color); } .subheader p { @@ -173,7 +185,7 @@ img { nav { width: 100%; padding: 1em 2em; - background: #d64760 url('../img/overlay.png'); + background: var(--theme-color) url('../img/overlay.png'); position: fixed; z-index: 6; } @@ -259,7 +271,7 @@ ul, ol { } .item, .medium { - border: 1px solid white; + border: 1px solid var(--inverted-theme-color); } .item { @@ -270,3 +282,69 @@ ul, ol { min-width: 100%; } } +#user-nav { + list-style: none; + font-weight: bold; + position: relative; + padding: 0; +} + +#user-nav ul { + display: none; + position: absolute; +} + +#user-nav li { + margin: 0 0 0 0; +} + +#user-nav > li { + margin-right: 20px; +} + +#user-nav li a { + padding: 10px 20px 10px; + border-radius: 5px; + background: white url('../img/overlay.png'); +} + +#user-nav li ul { + padding: 0; +} + +#user-nav li ul li { + display: inline; +} + +#user-nav input[type="checkbox"]:checked + ul { + display: block; + background-color: white; + border-radius: 5px; + z-index: 99; +} + +#user-nav a { + display: block; + text-decoration: none; + color: var(--theme-color); +} + +#user-nav a:hover { + color: black; + transition-timing-function: linear + transition-duration: 0.25s; +} + +#user-nav label { + margin: 0; +} + +.vanish { + /*position: absolute; + left: -9999px;*/ + display: none; +} + +.red { + background: rgba(255,0,0,0.2) url('../img/overlay.png') !important; +}