Исправления CSS и макросов

This commit is contained in:
Alexander Yakovlev 2017-06-29 18:16:41 +07:00
parent e777203c23
commit cfd1731c32
3 changed files with 247 additions and 259 deletions

View file

@ -97,8 +97,7 @@ cinder_equip.tw2
<section class="scene sect-cont">
<div class="cont-w-nav">
<div class="walk-nav">
<span class="w-u" title="Зал">[[Зал->The hall]]</span>
<span class="w-r inactive" title="Право">Идти на юг</span><span class="w-l inactive" title="Left">Налево</span><span class="w-d inactive" title="Вниз">Спуститься</a>
<span class="w-u" title="Зал">[[Зал->The hall]]</span><span class="w-r inactive" title="Право">Идти на юг</span><span class="w-l inactive" title="Left">Налево</span><span class="w-d inactive" title="Вниз">Спуститься</a>
</div>
</div>
(if: $hasMap is "yes")[
@ -470,8 +469,7 @@ cinder_equip.tw2
[[Идти на балкон->balcony-chand]]
](replace: ?KBwindow)[<span class="w-r" title="Right">[[balcony-chand]]</span>]
]]
]
(else:)[
](else:)[
<div class="cont-w-nav">
<div class="walk-nav no-rotate">
<span class="w-u" title="Up">(link: "walk")[(if: $door is 0)[(goto: "North of KB")](else:)[(goto: "NKB-door-c")]]</span>(if: $KBseen is "balcony")[<span class="w-r" title="Right">[[Балкон->The Balcony]]</span>](else:)[|KBwindow>[<span class="w-r inactive" title="Right">Go right</span>]]<span class="w-l inactive" title="Left">Go left</span><span class="w-d" title="Down">[[tunnel-r]]</a>
@ -511,8 +509,7 @@ cinder_equip.tw2
</section>
<section class="scene">
<div class="sect-cont">
(if: $passageFound is 0)
|beddesc>[
(if: $passageFound is 0)|beddesc>[
<div class="cont-w-nav">
<div class="walk-nav">
<span class="w-u inactive" title="Up">Up</span><span class="w-r" title="Right">[[Игроки->card-players]]</span><span class="w-l" title="Left">[[Южный угол->South Corner]]</span><span class="w-d inactive" title="Down">Go Down</a>
@ -525,17 +522,13 @@ cinder_equip.tw2
</div>
</div>
<span class="block">Около кровати спрятан проход.</span>
]]
]
(else:)[
]]](else:)[
<div class="cont-w-nav">
<div class="walk-nav">
<span class="w-u" title="Up">[[Тайный проход->Secret tunnel]]</span><span class="w-r" title="Right">[[Игроки->card-players]]</span><span class="w-l" title="Left">[[Южный угол->South Corner]]</span><span class="w-d inactive" title="Down">Go Down</a>
</div>
</div>
]
|stooldesc>[]
(link: "Осмотреть стулья")[(replace: ?stooldesc)[<span class="block">Места для зрителей. Очаровательно.</span>]]
]|stooldesc>[](link: "Осмотреть стулья")[(replace: ?stooldesc)[<span class="block">Места для зрителей. Очаровательно.</span>]]
(set: $mapPos to "qb")
(if: $hasMap is "yes")[
[]<maplink|

View file

@ -1,4 +1,15 @@
::StoryCSS [stylesheet]
::StoryCSS [scss stylesheet]
@mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
// rotate
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}
body {margin:0;}
/*Supress page-to-page transitions*/
@ -32,9 +43,11 @@ body {margin:0;}
}
.pull-right {
float: right;}
float: right;
}
.pull-left {
float: left;}
float: left;
}
.hidden {
display: none;
}
@ -62,29 +75,37 @@ div.sect-img img{
}/*tw-passage has pre-wrap as its setting, creates whitespace*/
.row {
display: table-row;
display: block;
width: 100%;
}
.col400 {
flex: 1 auto;
}
.col240 {
flex: 1 240px;
}
.row tw-link, .row .link, .row .enchantment-link {
margin: 0;
line-height: 0;
tw-link,
.link,
.enchantment-link,
tw-hook {
margin: 0;
padding: 0;
line-height: 0;
border: 0;
}
.row::before, .row::after {
&::before,
&::after {
display: table;
line-height: 0;
}
.row::after {
&::after {
clear: both;
}
}
.col400 {
float: left;
width: 60%;
}
.col240 {
float: left;
width: 20%;
}
.btn100 {
height: 100px;
display:block;
@ -108,17 +129,21 @@ a.btn:visited {
color: #ffffff;
}
.enchantment-link:hover, tw-link:hover, .btn:hover {
.enchantment-link,
tw-link,
.btn {
&:hover {
background-color: #be1a00;
border-color: #be1a00;
color: #fff;
text-decoration: none;
}
.enchantment-link:focus, tw-link:focus, .btn:focus,
.enchantment-link:active, tw-link:active, .btn:active,
.enchantment-link:visited, tw-link:visited, .btn:visited {
&:focus,
&:active,
&:visited {
color: #000;
}
}
.s-dark tw-link,
.s-dark .link,
.s-dark .enchantment-link {
@ -143,9 +168,7 @@ a.btn:visited {
border: 0;
}
.visited {
color: #fff;
}
.visited,
.visited:hover {
color: #fff;
}
@ -160,79 +183,52 @@ a.btn:visited {
.walk-nav {
width:200px;
height:200px;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
line-height: 0;
}
.no-rotate {
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
.walk-nav tw-expression tw-link,
.walk-nav tw-link{
@include rotate(45);
span,
tw-link {
display: inline-block;
width: 100px;
height:100px;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
}
}
.no-rotate {
@include rotate(0);
}
.walk-nav tw-expression tw-link,
.walk-nav tw-link{
background-color: #000;
background: url(walk-arrow.svg) 0 0 no-repeat;
text-indent: -10000px;
overflow: hidden;
cursor: pointer;
}
.walk-nav tw-expression tw-link:hover,
.walk-nav tw-link:hover {
&:hover {
background-color: #cadbaa;
background: url(walk-arrow-h.svg) 0 0 no-repeat;
}
}
.walk-nav .w-r tw-expression tw-link,
.walk-nav .w-r tw-link,
.walk-nav .inactive.w-r {
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
@include rotate(90);
}
.walk-nav .w-d tw-expression tw-link,
.walk-nav .w-d tw-link,
.walk-nav .inactive.w-d{
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
@include rotate(180);
}
.walk-nav .w-l tw-expression tw-link,
.walk-nav .w-l tw-link,
.walk-nav .inactive.w-l {
transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
-ms-transform:rotate(270deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
@include rotate(270);
}
.walk-nav .inactive {
background: url(walk-arrow-off.svg) 0 0 no-repeat;
display: inline-block;
width: 100px;
height:100px;
text-indent: -10000px;
overflow: hidden;
}
.walk-nav .inactive:hover {
background: url(walk-arrow-off.svg) 0 0 no-repeat;
@ -265,7 +261,6 @@ a.btn:visited {
background-color: #39d2fe;
}
/*Inventory*/
.inventory-content {
width: 210px;