From ca43c05b6040955c7b96a10bb9b1d5eeff6f1018 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Thu, 30 May 2019 15:47:50 -0600 Subject: [PATCH] Split all colors into a _defaultTheme.scss --- index.html | 2 +- src/main.scss | 2 + src/scss/_containers.scss | 3 - src/scss/_elements.scss | 73 ++++------- src/scss/_structure.scss | 26 ---- src/scss/_variables.scss | 12 +- src/scss/mobile/_elements.scss | 28 ++--- src/scss/mobile/_structure.scss | 3 - src/scss/themes/_default.scss | 213 ++++++++++++++++++++++++++++++++ 9 files changed, 259 insertions(+), 103 deletions(-) create mode 100644 src/scss/themes/_default.scss diff --git a/index.html b/index.html index ae086a9..b501021 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Lexiconga - +

Lexiconga

diff --git a/src/main.scss b/src/main.scss index b8f15c8..22efc3a 100644 --- a/src/main.scss +++ b/src/main.scss @@ -9,6 +9,8 @@ @import 'scss/mobile/structure'; @import 'scss/mobile/elements'; +@import 'scss/themes/default'; + html, body { font-family: $font; diff --git a/src/scss/_containers.scss b/src/scss/_containers.scss index 339384c..a07776a 100644 --- a/src/scss/_containers.scss +++ b/src/scss/_containers.scss @@ -1,7 +1,6 @@ header { display: block; padding: 5px $general-padding; - border-bottom: 1px solid $mid; margin: 0 0 5px; &#top { @@ -35,7 +34,6 @@ main { article { width: 95%; margin: 10px auto; - border: $border; dl { padding: 0 $general-padding; @@ -46,6 +44,5 @@ main { footer { display: block; padding: $general-padding; - border-top: 1px solid $mid; margin: 5px 0 0; } \ No newline at end of file diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss index c44fa76..9c5eb53 100644 --- a/src/scss/_elements.scss +++ b/src/scss/_elements.scss @@ -1,8 +1,4 @@ p, span { - &.red { - color: $red; - } - &.bold { font-weight: bold; } @@ -59,42 +55,34 @@ ul { padding-left: $general-padding; } -.tag { - display: inline-block; - padding: 3px 9px; - border: $border; - border-radius: 3px; - background-color: $light; - line-height: 30px; +// .tag { +// display: inline-block; +// padding: 3px 9px; +// border-radius: 3px; +// line-height: 30px; - &.small { - font-size: 80%; - line-height: 25px; - } +// &.small { +// font-size: 80%; +// line-height: 25px; +// } +// } - &.red { - background-color: $red; - color: $white; - } -} - -span .tag { - @extend .tag; +// span .tag { +// @extend .tag; - border-radius: 3px 0 0 3px; +// border-radius: 3px 0 0 3px; - &+.tag { - border-left: none; - border-radius: 0 3px 3px 0; - background-color: $white; - } -} +// &+.tag { +// border-left: none; +// border-radius: 0 3px 3px 0; +// } +// } -.button { - @extend .tag; - cursor: pointer; - user-select: none; -} +// .button { +// @extend .tag; +// cursor: pointer; +// user-select: none; +// } .modal { position: fixed; @@ -109,7 +97,6 @@ span .tag { left: 0; bottom: 0; right: 0; - background-color: #000000; opacity: 0.5; } @@ -122,8 +109,6 @@ span .tag { max-width: 100%; height: 600px; max-height: 100%; - background-color: $white; - border: $border; border-radius: 5px; .close-button { @@ -139,25 +124,13 @@ span .tag { } .tabs { - ul { - border-bottom: $border; - } li { display: inline-block; list-style: none; margin: 0 2px -1px; padding: 10px $general-padding; - border-top: $border; - border-left: $border; - border-right: $border; border-radius: 5px 5px 0 0; - background-color: $mid; cursor: pointer; - - &.active { - background-color: $white; - border-bottom: 1px solid $white; - } } } diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index 1027564..3b80e30 100644 --- a/src/scss/_structure.scss +++ b/src/scss/_structure.scss @@ -42,7 +42,6 @@ left: unset; bottom: unset; right: unset; - background-color: $white; padding: ($general-padding / 2) $general-padding ($general-padding * 0.25); font-size: 90%; @@ -104,8 +103,6 @@ width: 31%; max-width: 320px; padding: 10px; - background-color: $light; - border: $border; border-radius: 5px; max-height: 80%; overflow-y: auto; @@ -119,8 +116,6 @@ #detailsSection { padding: $general-padding; - background-color: $white; - border: $border; border-radius: 5px; #dictionaryName { @@ -135,8 +130,6 @@ list-style: none; margin: 0; padding: 10px $general-padding; - border: $border; - background-color: $light; cursor: pointer; &:first-child { @@ -148,15 +141,10 @@ &:not(:first-child) { border-left: none; } - - &.active { - background-color: #bababa; - } } } #detailsPanel { - background-color: $white; padding: $general-padding; max-height: 400px; overflow-y: auto; @@ -170,8 +158,6 @@ .entry { - background-color: $light; - .word { display: inline-block; margin: 3px 0; @@ -202,15 +188,12 @@ position: absolute; top: 3px; right: 3px; - background-color: $white; - border: $border; border-radius: 5px; .word-option { padding: 10px 25px;; &:hover { - background-color: $light; cursor: pointer; } } @@ -345,8 +328,6 @@ $nav-font-height: 16px; position: relative; display: block; padding: $general-padding ($general-padding * 2) $general-padding $general-padding; - background-color: $light; - border: $border; border-radius: 5px; margin-bottom: 5px; @@ -354,10 +335,6 @@ $nav-font-height: 16px; margin-bottom: 0; } - &.error { - background-color: lighten($red, 0.75); - } - .close-button { position: absolute; top: 5px; @@ -373,7 +350,6 @@ $nav-font-height: 16px; right: -2px; width: 20px; height: 20px; - background-color: #455455; opacity: 0.5; transform-origin: center left; transform: scaleX(0); @@ -397,12 +373,10 @@ $nav-font-height: 16px; left: 0; right: 0; z-index: 5; - background-color: $light; text-align: center; padding: $general-padding / 2; a { - color: #000000; text-decoration: none; } diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4b94804..fbafcb4 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -2,12 +2,12 @@ $font: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubunt $header-height: 60px; -$dark: #bababa; -$mid: #dedede; -$light: #efefef; -$white: #ffffff; +// $dark: #bababa; +// $mid: #dedede; +// $light: #efefef; +// $white: #ffffff; -$red: #d42932; +// $red: #d42932; -$border: 1px solid $dark; +// $border: 1px solid $dark; $general-padding: 20px; \ No newline at end of file diff --git a/src/scss/mobile/_elements.scss b/src/scss/mobile/_elements.scss index 45c15de..46dd5fe 100644 --- a/src/scss/mobile/_elements.scss +++ b/src/scss/mobile/_elements.scss @@ -1,21 +1,21 @@ @media (max-width: 750px) { -.tag { - padding: 2px 6px; - font-size: 90%; - line-height: 120%; +// .tag { +// padding: 2px 6px; +// font-size: 90%; +// line-height: 120%; - &.small { - font-size: 70%; - line-height: 100%; - } -} +// &.small { +// font-size: 70%; +// line-height: 100%; +// } +// } -.button { - @extend .tag; - cursor: pointer; - user-select: none; -} +// .button { +// @extend .tag; +// cursor: pointer; +// user-select: none; +// } .tabs { li { diff --git a/src/scss/mobile/_structure.scss b/src/scss/mobile/_structure.scss index f0c971c..465093f 100644 --- a/src/scss/mobile/_structure.scss +++ b/src/scss/mobile/_structure.scss @@ -34,10 +34,7 @@ width: 32px; height: 32px; display: block; - background-color: #00de00; - border: $border; border-radius: 0 3px 3px 0; - color: $white; font-size: 30px; line-height: 24px; font-weight: bold; diff --git a/src/scss/themes/_default.scss b/src/scss/themes/_default.scss new file mode 100644 index 0000000..c4d0fa0 --- /dev/null +++ b/src/scss/themes/_default.scss @@ -0,0 +1,213 @@ +#defaultTheme { + $dark: #bababa; + $mid: #dedede; + $light: #efefef; + $white: #ffffff; + $red: #b42032; + $border: 1px solid $dark; + + p, span { + &.red { + color: $red; + } + } + + .tag { + display: inline-block; + padding: 3px 9px; + border-radius: 3px; + line-height: 30px; + border: $border; + background-color: $light; + + &.small { + font-size: 80%; + line-height: 25px; + } + + &.red { + background-color: $red; + color: $white; + } + } + + span .tag { + @extend .tag; + + border-radius: 3px 0 0 3px; + + &+.tag { + background-color: $white; + border-left: none; + border-radius: 0 3px 3px 0; + } + } + + .button { + @extend .tag; + cursor: pointer; + user-select: none; + } + + .modal { + .modal-background { + background-color: #000000; + } + .modal-content { + background-color: $white; + border: $border; + } + } + + .tabs { + ul { + border-bottom: $border; + } + li { + border-top: $border; + border-left: $border; + border-right: $border; + background-color: $mid; + + &.active { + background-color: $white; + border-bottom: 1px solid $white; + } + } + } + + header { + border-bottom: 1px solid $mid; + } + + main { + article { + border: $border; + } + } + + footer { + border-top: 1px solid $mid; + } + + #top { + #title { + display: inline-block; + margin: 3px $general-padding 3px 0; + } + + #openSearchModal { + cursor: pointer; + } + + #searchModal { + .modal-content { + section+footer { + background-color: $white; + } + } + } + } + + #wordForm { + background-color: $light; + border: $border; + } + + #detailsSection { + background-color: $white; + border: $border; + + nav ul { + li { + border: $border; + background-color: $light; + + &.active { + background-color: #bababa; + } + } + } + + #detailsPanel { + background-color: $white; + } + } + + .entry { + background-color: $light; + + header { + .word-option-list { + background-color: $white; + border: $border; + + .word-option { + &:hover { + background-color: $light; + } + } + } + } + } + + #messagingSection { + .message { + background-color: $light; + border: $border; + + &.error { + background-color: lighten($red, 0.75); + } + + .close-button { + &:before { + background-color: #455455; + } + } + } + } + + #bottom { + background-color: $light; + + a { + color: #000000; + } + } + +} + +@media (max-width: 750px) { +#defaultTheme { + $dark: #bababa; + $mid: #dedede; + $light: #efefef; + $white: #ffffff; + $red: #b42032; + $border: 1px solid $dark; + + #mobileWordFormShow { + background-color: #00de00; + border: $border; + color: $white; + } + + .tag { + padding: 2px 6px; + font-size: 90%; + line-height: 120%; + + &.small { + font-size: 70%; + line-height: 100%; + } + } + + .button { + @extend .tag; + cursor: pointer; + user-select: none; + } +} +} \ No newline at end of file