diff --git a/src/Foundation.hs b/src/Foundation.hs index 9d0f3e441..adfe9de4a 100644 --- a/src/Foundation.hs +++ b/src/Foundation.hs @@ -478,6 +478,7 @@ instance Yesod UniWorX where $(widgetFile "standalone/modal") $(widgetFile "standalone/showHide") $(widgetFile "standalone/inputs") + $(widgetFile "standalone/tabber") withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet") -- The page to be redirected to when authentication is required. diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index 16a7599c0..91fc648de 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -1,47 +1,18 @@ :root { - /* THEME 1 */ - --base00: #72a85b; - --base-bg-color: #1d1c1d; - --base-font-color: #fff; - --sec-font-color: #fff; - --box-bg-color: #3c3c3c; - /* THEME 2 */ - --base00: #38428a; - --base-bg-color: #ffffff; - --base-font-color: rgb(53, 53, 53); - --sec-font-color: #eaf2ff; - --box-bg-color: #dddddd; - /* THEME 3 */ - --darkbase: #364B60; - --lightbase: #2490E8; - --lighterbase: #60C2FF; - --whitebase: #FCFFFA; - --greybase: #B1B5C0; - --fontbase: #34303a; - --fontsec: #5b5861; - /* THEME 4 */ - --darkerbase: #274a65; - --darkbase: #425d79; - --lightbase: #598EB5; - --lighterbase: #5F98C2; - --whitebase: #FCFFFA; - --greybase: #B1B5C0; - --lightgreybase: #D9DEDB; - --blackbase: #1A2A36; - --fontbase: #34303a; - --fontsec: #5b5861; - --primarybase: #4C7A9C; - - /* THEME INDEPENDENT COLORS */ - --errorbase: red; - --warningbase: #fe7700; - --validbase: #2dcc35; - --infobase: var(--darkbase); + --color-error: red; + --color-warning: #fe7700; + --color-success: #2dcc35; + --color-info: #c4c4c4; + --color-lightblack: #1A2A36; + --color-lightwhite: #FCFFFA; + --color-grey: #B1B5C0; + --color-font: #34303a; + --color-fontsec: #5b5861; /* FONTS */ - --fontfamilybase: "Source Sans Pro", Helvetica, sans-serif; + --font-base: "Source Sans Pro", Helvetica, sans-serif; /* DIMENSIONS */ --header-height: 80px; @@ -56,13 +27,64 @@ body { background-color: white; - color: var(--fontbase); - font-family: var(--fontfamilybase); + color: var(--color-font); + font-family: var(--font-base); font-weight: 400; font-size: 16px; overflow-y: scroll; } +/* THEMES */ + +body { + /* DEFAULT THEME */ + --color-primary: #4C7A9C; + --color-light: #598EB5; + --color-lighter: #5F98C2; + --color-dark: #425d79; + --color-darker: #274a65; + --color-link: var(--color-dark); + --color-link-hover: var(--color-darker); + + + &.theme--neutral-blue { + --color-primary: #3E606F; + --color-light: rgb(189, 201, 219); + --color-lighter: rgb(145, 159, 170); + --color-dark: #3E606F; + --color-darker: #193441; + } + + &.theme--aberdeen-reds { + --color-primary: #820333; + --color-light: #C9283E; + --color-lighter: #F0433A; + --color-dark: #540032; + --color-darker: #2E112D; + } + + &.theme--mint-green { + --color-primary: #5C996B; + --color-light: #7ACC8F; + --color-lighter: #99FFB2; + --color-dark: #3D6647; + --color-darker: #1F3324; + } + + &.theme--sky-love { + --color-primary: #87ABE5; + --color-light: #A0C6F2; + --color-lighter: #BAE2FF; + --color-dark: #7A95DE; + --color-darker: #6B7BC9; + --color-link: var(--color-lightblack); + --color-link-hover: var(--color-darker); + } + +} + +/* END THEMES */ + a, a:visited { text-decoration: none; @@ -134,7 +156,7 @@ td:first-child { border-left: 0; } th { - border-left: 2px solid var(--greybase); + border-left: 2px solid var(--color-grey); } /* LAYOUT */ .main { @@ -160,16 +182,16 @@ th { } a { - color: var(--darkbase); + color: var(--color-link); } a:hover { - color: var(--lightbase); + color: var(--color-link-hover); } } .pseudo-focus { - outline: 5px auto var(--lightbase); + outline: 5px auto var(--color-light); outline: 5px auto -webkit-focus-ring-color; } @@ -181,7 +203,7 @@ button, outline: 0; border: 0; box-shadow: 0; - background-color: var(--lightbase); + background-color: var(--color-dark); color: white; padding: 10px 17px; min-width: 100px; @@ -205,7 +227,7 @@ button[disabled], a.btn[disabled], .btn[disabled] { opacity: 0.3; - background-color: var(--greybase); + background-color: var(--color-grey); cursor: default; } @@ -214,7 +236,7 @@ input[type="button"]:not([disabled]):hover, button:not([disabled]):hover, a.btn:not([disabled]):hover, .btn:not([disabled]):hover { - background-color: var(--lighterbase); + background-color: var(--color-lighter); text-decoration: underline; color: white; } @@ -223,14 +245,14 @@ input.btn-primary, button.btn-primary, a.btn.btn-primary, .btn.btn-primary { - background-color: var(--primarybase); + background-color: var(--color-primary); } input.btn-info, button.btn-info, a.btn.btn-info, .btn.btn-info { - background-color: var(--infobase) + background-color: var(--color-info) } input[type="submit"].btn-info:hover, @@ -238,7 +260,7 @@ input[type="button"].btn-info:hover, button.btn-info:hover, a.btn.btn-info:hover, .btn.btn-info:hover { - background-color: var(--greybase) + background-color: var(--color-grey) } .alert-debug { diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 5a01841d8..6d442cffa 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -76,21 +76,21 @@ input[type="email"] { } input, textarea { - border-bottom-color: var(--lighterbase); + border-bottom-color: var(--color-lighter); } } .form-group--valid { input, textarea { - border-bottom-color: var(--validbase); + border-bottom-color: var(--color-success); } } .form-group--has-error { input, textarea { - border-bottom-color: var(--errorbase); + border-bottom-color: var(--color-error); } } @@ -99,9 +99,9 @@ input[type="password"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="email"]:focus { - /* border-bottom-color: var(--lightbase); + /* border-bottom-color: var(--color-light); background-color: transparent; - box-shadow: 0 0 13px var(--lighterbase); */ + box-shadow: 0 0 13px var(--color-lighter); */ border-color: #3273dc; box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); outline: 0; @@ -150,14 +150,14 @@ input[type="checkbox"]::before { position: absolute; width: 20px; height: 20px; - background-color: var(--lighterbase); + background-color: var(--color-lighter); display: flex; align-items: center; justify-content: center; border-radius: 2px; } input[type="checkbox"]:checked::before { - background-color: var(--lightbase); + background-color: var(--color-light); } input[type="checkbox"]:checked::after { content: '✓'; @@ -186,7 +186,7 @@ input[type="checkbox"]:checked::after { display: block; height: 30px; width: 30px; - background-color: var(--greybase); + background-color: var(--color-grey); border-radius: 4px; color: white; cursor: pointer; @@ -218,12 +218,12 @@ input[type="checkbox"]:checked::after { } > :checked + label { - background-color: var(--lightbase); + background-color: var(--color-light); text-decoration: underline; } &:hover > label { - background-color: var(--lighterbase); + background-color: var(--color-lighter); } &:hover > label::before { @@ -269,13 +269,13 @@ input[type="checkbox"]:checked::after { /* REACTIVE LABELS */ .reactive-label { cursor: text; - color: var(--fontsec); + color: var(--color-fontsec); transform: translate(0, 0); transition: all .1s; } .reactive-label--small { cursor: default; - color: var(--fontbase); + color: var(--color-font); } @media (max-width: 999px) { .reactive-label { @@ -284,7 +284,7 @@ input[type="checkbox"]:checked::after { } .reactive-label--small { transform: translate(2px, 0px); - color: var(--fontsec); + color: var(--color-fontsec); /*font-size: 14px;*/ } } @@ -319,7 +319,7 @@ input[type="file"].js-file-input { display: block; border-radius: 2px; padding: 5px 13px; - color: var(--whitebase); + color: var(--color-lightwhite); cursor: pointer; } .file-input__label, @@ -329,7 +329,7 @@ input[type="file"].js-file-input { height: 30px; } .file-checkbox__label { - background-color: var(--greybase); + background-color: var(--color-grey); text-decoration: line-through; } .file-input__label.btn, @@ -363,7 +363,7 @@ input[type="file"].js-file-input { width: 40px; height: 30px; text-align: center; - background-color: var(--warningbase); + background-color: var(--color-warning); position: relative; margin-left: 10px; } @@ -377,14 +377,14 @@ input[type="file"].js-file-input { background-color: white; } .file-input__container--valid > .file-input__label { - background-color: var(--lightbase); + background-color: var(--color-light); } .file-checkbox__container--checked > .file-checkbox__label { text-decoration: none; - background-color: var(--lighterbase); + background-color: var(--color-lighter); &.btn:hover { - background-color: var(--lighterbase); + background-color: var(--color-lighter); text-decoration: line-through; } } diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius index f9e1db4e2..d56effc40 100644 --- a/templates/standalone/modal.lucius +++ b/templates/standalone/modal.lucius @@ -10,7 +10,7 @@ max-height: calc(100vh - 30px); border-radius: 7px; z-index: -1; - color: var(--fontbase); + color: var(--color-font); padding: 20px; overflow: auto; opacity: 0; @@ -70,7 +70,7 @@ justify-content: center; width: 30px; height: 30px; - background-color: var(--darkerbase); + background-color: var(--color-darker); border-radius: 2px; cursor: pointer; z-index: 20; diff --git a/templates/standalone/showHide.lucius b/templates/standalone/showHide.lucius index 9a0a540cf..d2526dd9f 100644 --- a/templates/standalone/showHide.lucius +++ b/templates/standalone/showHide.lucius @@ -24,12 +24,12 @@ left: -28px; top: 10px; border-left: 8px solid transparent; - border-top: 8px solid var(--lightbase); + border-top: 8px solid var(--color-light); } .js-show-hide__toggle:hover::before, .js-show-hide--collapsed .js-show-hide__toggle::before { - border-left: 8px solid var(--lightbase); + border-left: 8px solid var(--color-light); border-top: 8px solid transparent; top: 5px; left: -22px; diff --git a/templates/standalone/tabber.hamlet b/templates/standalone/tabber.hamlet new file mode 100644 index 000000000..af2e004e6 --- /dev/null +++ b/templates/standalone/tabber.hamlet @@ -0,0 +1 @@ + diff --git a/templates/standalone/tabber.lucius b/templates/standalone/tabber.lucius new file mode 100644 index 000000000..9335bd8ed --- /dev/null +++ b/templates/standalone/tabber.lucius @@ -0,0 +1,7 @@ +.tab-opener { + background-color: var(--color-dark); + + &.tab-visible { + border-bottom-color: var(--color-primary); + } +} diff --git a/templates/table/colonnade.lucius b/templates/table/colonnade.lucius index dc7abd2b1..c775325d9 100644 --- a/templates/table/colonnade.lucius +++ b/templates/table/colonnade.lucius @@ -13,7 +13,7 @@ table th { table th.sorted-asc, table th.sorted-desc { - color: var(--lightbase); + color: var(--color-light); } table th.sortable::after, @@ -37,9 +37,9 @@ table th.sortable::after { border-bottom: 8px solid rgba(0, 0, 0, 0.1); } table th.sorted-asc::before { - border-top: 8px solid var(--lightbase); + border-top: 8px solid var(--color-light); } table th.sorted-desc::after { - border-bottom: 8px solid var(--lightbase); + border-bottom: 8px solid var(--color-light); } diff --git a/templates/table/layout.lucius b/templates/table/layout.lucius index 67430a60d..5b9232406 100644 --- a/templates/table/layout.lucius +++ b/templates/table/layout.lucius @@ -5,25 +5,25 @@ .pagination-link { margin: 0 7px; display: inline-block; - background-color: var(--greybase); + background-color: var(--color-grey); a { - color: var(--whitebase); + color: var(--color-lightwhite); padding: 7px 13px; display: inline-block; } &:not(.current):hover { - background-color: var(--lighterbase); + background-color: var(--color-lighter); a { - color: var(--whitebase); + color: var(--color-lightwhite); } } &.current { pointer-events: none; - background-color: var(--lightbase); + background-color: var(--color-light); a { text-decoration: underline; diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet index b34145640..f23452ae9 100644 --- a/templates/widgets/asidenav.hamlet +++ b/templates/widgets/asidenav.hamlet @@ -29,4 +29,15 @@ $newline never #{menuItemLabel} $of _ +
+

+ Themes (dev) +