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