From 75213b076ff40fc42bb024f567d41f135c9fc5c8 Mon Sep 17 00:00:00 2001 From: Alexander Yakovlev Date: Sun, 8 Nov 2020 00:13:24 +0700 Subject: [PATCH] Styling --- html/index.html | 9 ++--- scss/style.scss | 93 ++++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 91 insertions(+), 11 deletions(-) diff --git a/html/index.html b/html/index.html index 20bcf89..048b522 100644 --- a/html/index.html +++ b/html/index.html @@ -8,15 +8,10 @@
-
-
- -
-
-
+
-
+
diff --git a/scss/style.scss b/scss/style.scss index 8fecf12..6f7e369 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,5 +1,43 @@ @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; + +$font-family-sans-serif: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif; +$headings-font-family: "PT Sans Caption",$font-family-sans-serif; +$font-family-base: $font-family-sans-serif; + +$grey-color: #cc925d; +$body-bg: #E4CDD4; +$content-bg: rgba(202,158,185, 0.4); +$body-color: #3A2D42; +$link-color: #7D6393; +$link-button-background: rgb(202, 158, 185); +$link-button-background-hover: $body-color; +$link-button-foreground: $body-color; +$link-button-foreground-hover: $body-bg; +$status-color: #7E5980; +$btn-bg: grey; +$btn-color: lighten($btn-bg, 50%); +$secondary-bg: #F1EED9; + +$primary: $link-color; +$brand-primary: lighten($body-color, 20%); +$brand-danger: darken($body-bg, 30%); + +$waycolor: $link-color; +$animation_duration: 2s; + +$enable-rounded: true; +$enable-shadows: false; +$enable-gradients: false; +$enable-transitions: false; +$enable-hover-media-query: false; +$enable-grid-classes: true; +$enable-print-styles: true; + +$ok-color: $link-color; +$neutral-color: brown; +$warning-color: darkred; + @import '~bootstrap/scss/mixins'; @import '~bootstrap/scss/root'; @import '~bootstrap/scss/reboot'; @@ -11,18 +49,65 @@ @import '~bootstrap/scss/utilities'; @import '~bootstrap/scss/print'; +h1,h2,h3 { + font-weight: bold; + text-align: center; +} +h1 { + color: #333; +} +h2 { + color: #666; +} +#page { + background: $content-bg; + border-radius: 5px; + margin-top: $font-size-base; + padding-top: ($font-size-base / 2); +} +#restart { + position: fixed; + top: $font-size-base / 2; + right: $font-size-base / 2; +} #content { .subtitle { display: none; } } #options { - a { - display: block; - padding: ($font-size-base * 0.5); + border: 1px solid #876; + padding: 0; + list-style-type: none; + border-radius: 4px; + &:empty { + display: none; + } + li { + background-color: $link-button-background; + padding: 0.5em; + border-bottom: 1px solid #876; + &,a { + color: $link-button-foreground; + } + } + li:hover { + background-color: $link-button-background-hover; + cursor: pointer; + &,a { + color: $link-button-foreground-hover; + } + } + li:last-child { + border-bottom: none; } .subtitle { display: block; - font-size: ($font-size-base * 0.5); + font-size: ($font-size-base * 0.9); + font-style: italic; } } + +.room-start { + border-top: none; +}