Split all colors into a _defaultTheme.scss
This commit is contained in:
parent
ca1bb63295
commit
ca43c05b60
|
@ -7,7 +7,7 @@
|
||||||
<title>Lexiconga</title>
|
<title>Lexiconga</title>
|
||||||
<script src="src/index.js"></script>
|
<script src="src/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body id="defaultTheme">
|
||||||
<header id="top">
|
<header id="top">
|
||||||
<h1 id="title">Lexiconga</h1>
|
<h1 id="title">Lexiconga</h1>
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,8 @@
|
||||||
@import 'scss/mobile/structure';
|
@import 'scss/mobile/structure';
|
||||||
@import 'scss/mobile/elements';
|
@import 'scss/mobile/elements';
|
||||||
|
|
||||||
|
@import 'scss/themes/default';
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
font-family: $font;
|
font-family: $font;
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
header {
|
header {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 5px $general-padding;
|
padding: 5px $general-padding;
|
||||||
border-bottom: 1px solid $mid;
|
|
||||||
margin: 0 0 5px;
|
margin: 0 0 5px;
|
||||||
|
|
||||||
&#top {
|
&#top {
|
||||||
|
@ -35,7 +34,6 @@ main {
|
||||||
article {
|
article {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
border: $border;
|
|
||||||
|
|
||||||
dl {
|
dl {
|
||||||
padding: 0 $general-padding;
|
padding: 0 $general-padding;
|
||||||
|
@ -46,6 +44,5 @@ main {
|
||||||
footer {
|
footer {
|
||||||
display: block;
|
display: block;
|
||||||
padding: $general-padding;
|
padding: $general-padding;
|
||||||
border-top: 1px solid $mid;
|
|
||||||
margin: 5px 0 0;
|
margin: 5px 0 0;
|
||||||
}
|
}
|
|
@ -1,8 +1,4 @@
|
||||||
p, span {
|
p, span {
|
||||||
&.red {
|
|
||||||
color: $red;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bold {
|
&.bold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
@ -59,42 +55,34 @@ ul {
|
||||||
padding-left: $general-padding;
|
padding-left: $general-padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag {
|
// .tag {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
padding: 3px 9px;
|
// padding: 3px 9px;
|
||||||
border: $border;
|
// border-radius: 3px;
|
||||||
border-radius: 3px;
|
// line-height: 30px;
|
||||||
background-color: $light;
|
|
||||||
line-height: 30px;
|
|
||||||
|
|
||||||
&.small {
|
// &.small {
|
||||||
font-size: 80%;
|
// font-size: 80%;
|
||||||
line-height: 25px;
|
// line-height: 25px;
|
||||||
}
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
&.red {
|
// span .tag {
|
||||||
background-color: $red;
|
// @extend .tag;
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span .tag {
|
|
||||||
@extend .tag;
|
|
||||||
|
|
||||||
border-radius: 3px 0 0 3px;
|
// border-radius: 3px 0 0 3px;
|
||||||
|
|
||||||
&+.tag {
|
// &+.tag {
|
||||||
border-left: none;
|
// border-left: none;
|
||||||
border-radius: 0 3px 3px 0;
|
// border-radius: 0 3px 3px 0;
|
||||||
background-color: $white;
|
// }
|
||||||
}
|
// }
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
// .button {
|
||||||
@extend .tag;
|
// @extend .tag;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
user-select: none;
|
// user-select: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -109,7 +97,6 @@ span .tag {
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #000000;
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,8 +109,6 @@ span .tag {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
background-color: $white;
|
|
||||||
border: $border;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
|
@ -139,25 +124,13 @@ span .tag {
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
ul {
|
|
||||||
border-bottom: $border;
|
|
||||||
}
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0 2px -1px;
|
margin: 0 2px -1px;
|
||||||
padding: 10px $general-padding;
|
padding: 10px $general-padding;
|
||||||
border-top: $border;
|
|
||||||
border-left: $border;
|
|
||||||
border-right: $border;
|
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
background-color: $mid;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: $white;
|
|
||||||
border-bottom: 1px solid $white;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -42,7 +42,6 @@
|
||||||
left: unset;
|
left: unset;
|
||||||
bottom: unset;
|
bottom: unset;
|
||||||
right: unset;
|
right: unset;
|
||||||
background-color: $white;
|
|
||||||
padding: ($general-padding / 2) $general-padding ($general-padding * 0.25);
|
padding: ($general-padding / 2) $general-padding ($general-padding * 0.25);
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
|
|
||||||
|
@ -104,8 +103,6 @@
|
||||||
width: 31%;
|
width: 31%;
|
||||||
max-width: 320px;
|
max-width: 320px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: $light;
|
|
||||||
border: $border;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
max-height: 80%;
|
max-height: 80%;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -119,8 +116,6 @@
|
||||||
|
|
||||||
#detailsSection {
|
#detailsSection {
|
||||||
padding: $general-padding;
|
padding: $general-padding;
|
||||||
background-color: $white;
|
|
||||||
border: $border;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
#dictionaryName {
|
#dictionaryName {
|
||||||
|
@ -135,8 +130,6 @@
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 10px $general-padding;
|
padding: 10px $general-padding;
|
||||||
border: $border;
|
|
||||||
background-color: $light;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
|
@ -148,15 +141,10 @@
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #bababa;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#detailsPanel {
|
#detailsPanel {
|
||||||
background-color: $white;
|
|
||||||
padding: $general-padding;
|
padding: $general-padding;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -170,8 +158,6 @@
|
||||||
|
|
||||||
|
|
||||||
.entry {
|
.entry {
|
||||||
background-color: $light;
|
|
||||||
|
|
||||||
.word {
|
.word {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 3px 0;
|
margin: 3px 0;
|
||||||
|
@ -202,15 +188,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
right: 3px;
|
right: 3px;
|
||||||
background-color: $white;
|
|
||||||
border: $border;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
.word-option {
|
.word-option {
|
||||||
padding: 10px 25px;;
|
padding: 10px 25px;;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $light;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -345,8 +328,6 @@ $nav-font-height: 16px;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
padding: $general-padding ($general-padding * 2) $general-padding $general-padding;
|
padding: $general-padding ($general-padding * 2) $general-padding $general-padding;
|
||||||
background-color: $light;
|
|
||||||
border: $border;
|
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
@ -354,10 +335,6 @@ $nav-font-height: 16px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.error {
|
|
||||||
background-color: lighten($red, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
@ -373,7 +350,6 @@ $nav-font-height: 16px;
|
||||||
right: -2px;
|
right: -2px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #455455;
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
transform-origin: center left;
|
transform-origin: center left;
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
|
@ -397,12 +373,10 @@ $nav-font-height: 16px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
background-color: $light;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: $general-padding / 2;
|
padding: $general-padding / 2;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #000000;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -2,12 +2,12 @@ $font: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubunt
|
||||||
|
|
||||||
$header-height: 60px;
|
$header-height: 60px;
|
||||||
|
|
||||||
$dark: #bababa;
|
// $dark: #bababa;
|
||||||
$mid: #dedede;
|
// $mid: #dedede;
|
||||||
$light: #efefef;
|
// $light: #efefef;
|
||||||
$white: #ffffff;
|
// $white: #ffffff;
|
||||||
|
|
||||||
$red: #d42932;
|
// $red: #d42932;
|
||||||
|
|
||||||
$border: 1px solid $dark;
|
// $border: 1px solid $dark;
|
||||||
$general-padding: 20px;
|
$general-padding: 20px;
|
|
@ -1,21 +1,21 @@
|
||||||
@media (max-width: 750px) {
|
@media (max-width: 750px) {
|
||||||
|
|
||||||
.tag {
|
// .tag {
|
||||||
padding: 2px 6px;
|
// padding: 2px 6px;
|
||||||
font-size: 90%;
|
// font-size: 90%;
|
||||||
line-height: 120%;
|
// line-height: 120%;
|
||||||
|
|
||||||
&.small {
|
// &.small {
|
||||||
font-size: 70%;
|
// font-size: 70%;
|
||||||
line-height: 100%;
|
// line-height: 100%;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.button {
|
// .button {
|
||||||
@extend .tag;
|
// @extend .tag;
|
||||||
cursor: pointer;
|
// cursor: pointer;
|
||||||
user-select: none;
|
// user-select: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.tabs {
|
.tabs {
|
||||||
li {
|
li {
|
||||||
|
|
|
@ -34,10 +34,7 @@
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
display: block;
|
display: block;
|
||||||
background-color: #00de00;
|
|
||||||
border: $border;
|
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
color: $white;
|
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue