2024-04-26 16:52:10 +03:00
|
|
|
@import 'bootstrap/scss/functions';
|
|
|
|
@import 'bootstrap/scss/variables';
|
|
|
|
@import 'bootstrap/scss/variables-dark';
|
|
|
|
@import 'bootstrap/scss/maps';
|
|
|
|
@import 'bootstrap/scss/mixins';
|
|
|
|
|
|
|
|
$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: white;
|
|
|
|
$content-bg: #ffffff22;
|
|
|
|
$body-color: black;
|
|
|
|
$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;
|
|
|
|
|
2024-04-28 08:12:40 +03:00
|
|
|
$top_of_stack: 150px;
|
|
|
|
$card_width: 70px;
|
|
|
|
$gutter: 15px;
|
|
|
|
|
2024-04-26 16:52:10 +03:00
|
|
|
@import 'bootstrap/scss/maps';
|
|
|
|
@import 'bootstrap/scss/mixins';
|
|
|
|
@import 'bootstrap/scss/utilities';
|
|
|
|
@import 'bootstrap/scss/root';
|
|
|
|
@import 'bootstrap/scss/reboot';
|
|
|
|
@import 'bootstrap/scss/type';
|
|
|
|
@import 'bootstrap/scss/containers';
|
|
|
|
@import 'bootstrap/scss/grid';
|
|
|
|
@import 'bootstrap/scss/buttons';
|
|
|
|
@import 'bootstrap/scss/tables';
|
|
|
|
//@import 'bootstrap/scss/transitions';
|
|
|
|
|
|
|
|
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 * 0.5;
|
|
|
|
}
|
|
|
|
#content {
|
|
|
|
.subtitle {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
p.old {
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
/*
|
|
|
|
background-size: cover;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-image: url("images/background.png");
|
|
|
|
*/
|
|
|
|
height: 100vh;
|
|
|
|
width: 100vw;
|
|
|
|
}
|
|
|
|
#options,
|
|
|
|
#options ul,
|
|
|
|
#verbs {
|
|
|
|
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.9);
|
|
|
|
font-style: italic;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.room-start {
|
|
|
|
border-top: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.portrait {
|
|
|
|
font-size: ($font-size-base * 1.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
.portraits {
|
|
|
|
float: right;
|
|
|
|
margin: ($font-size-base * 0.5);
|
|
|
|
}
|
|
|
|
|
|
|
|
.text-right {
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
.center {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.bigger {
|
|
|
|
font-size: ($font-size-base * 1.15);
|
|
|
|
small {
|
|
|
|
font-size: ($font-size-base * 0.8);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.fright {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
.disclaimer {
|
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 0;
|
|
|
|
margin-left: 20%;
|
|
|
|
margin-right: 15%;
|
|
|
|
width: 65%;
|
|
|
|
font-size: ($font-size-base * 0.8);
|
|
|
|
}
|
|
|
|
.clearboth {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
|
|
.center {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.spell {
|
|
|
|
margin: 0 auto;
|
|
|
|
display: block;
|
|
|
|
text-align: center;
|
|
|
|
font-size: ($font-size-base * 1.1);
|
|
|
|
}
|
|
|
|
.text-center {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.sticky {
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
#settings_page,
|
|
|
|
#transcript_page {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.btn-outline {
|
|
|
|
border: 1px solid $btn-bg;
|
|
|
|
}
|
|
|
|
#background, #picture, .char {
|
|
|
|
position: relative;
|
|
|
|
height: 483px;
|
|
|
|
max-width: 100%;
|
|
|
|
}
|
|
|
|
#background {
|
|
|
|
background-size: cover;
|
|
|
|
}
|
|
|
|
.char {
|
|
|
|
max-width: 300px;
|
|
|
|
max-height: 300px;
|
|
|
|
.chartop {
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
.charbottom {
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
.chartop,
|
|
|
|
.charbottom {
|
|
|
|
position: absolute;
|
|
|
|
max-width: 100%;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
&.posleft {
|
|
|
|
.chartop,
|
|
|
|
.charbottom {
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.posright {
|
|
|
|
.chartop,
|
|
|
|
.charbottom {
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.poscenter {
|
|
|
|
.chartop,
|
|
|
|
.charbottom {
|
|
|
|
left: 30%;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#current_quest {
|
|
|
|
background-color: rgba(255,255,255, 0.5);
|
|
|
|
}
|
|
|
|
.error {
|
|
|
|
color: red;
|
|
|
|
}
|
2024-04-26 16:59:47 +03:00
|
|
|
.card {
|
|
|
|
width: 3em;
|
|
|
|
}
|
2024-04-28 08:12:40 +03:00
|
|
|
.cardstack,
|
|
|
|
.cardempty {
|
|
|
|
border: 1px solid #000;
|
|
|
|
border-radius: 10px;
|
|
|
|
width: ($card_width / 2);
|
|
|
|
position: absolute;
|
|
|
|
top: $gutter;
|
|
|
|
height: 50px;
|
|
|
|
}
|
|
|
|
#playing_field {
|
|
|
|
position: relative;
|
|
|
|
height: 300px;
|
|
|
|
}
|
|
|
|
.cardcolumn {
|
|
|
|
position: absolute;
|
|
|
|
top: $top_of_stack;
|
|
|
|
width: $card_width;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
.card {
|
|
|
|
margin-top: -50px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@for $i from 1 through 2 {
|
|
|
|
#empty#{$i} {
|
|
|
|
left: ($card_width * ($i - 1) + ($gutter / 2));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@for $i from 1 through 4 {
|
2024-04-28 08:55:40 +03:00
|
|
|
#foundation#{$i} {
|
2024-04-28 08:12:40 +03:00
|
|
|
right: ($card_width * ($i - 1) + ($gutter / 2));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@for $i from 1 through 8 {
|
|
|
|
#col#{$i} {
|
|
|
|
left: ($card_width * ($i - 1) + ($gutter / 2));
|
|
|
|
}
|
|
|
|
}
|