Исправления 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,368 +1,363 @@
::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*/
.transition-in[data-t8n^=dissolve] {
-webkit-animation:appear 0ms step-start;
animation:appear 0ms step-start
-webkit-animation:appear 0ms step-start;
animation:appear 0ms step-start
}
/*Layout*/
.scene {
padding: 0;
white-space: normal; /*Needs compensating spaces for buttons*/
clear: both;
margin-bottom:20px; /*comp*/
}
padding: 0;
white-space: normal; /*Needs compensating spaces for buttons*/
clear: both;
margin-bottom:20px; /*comp*/
}
.s-dark {
background-color: #000;
color: #fff;
background-color: #000;
color: #fff;
}
.sect-cont {
margin: auto;
max-width:640px;
padding: 0 20px 20px;
margin: auto;
max-width:640px;
padding: 0 20px 20px;
}
.sect-img {
margin: auto;
max-width:640px;
padding:0;
font-size: 0;
line-height: 0;
margin: auto;
max-width:640px;
padding:0;
font-size: 0;
line-height: 0;
}
.pull-right {
float: right;}
float: right;
}
.pull-left {
float: left;}
float: left;
}
.hidden {
display: none;
display: none;
}
.block {
display: block;
display: block;
}
/*Score*/
img.star {
height: 50px;
width: 50px;
vertical-align: bottom;
height: 50px;
width: 50px;
vertical-align: bottom;
}
div.sect-img img{
white-space: normal;
white-space: normal;
}
/* Equip layout */
#equipmenu {
white-space: normal;
display: flex;
flex-flow: row wrap;
width: 100%;
white-space: normal;
display: flex;
flex-flow: row wrap;
width: 100%;
}/*tw-passage has pre-wrap as its setting, creates whitespace*/
.row {
display: table-row;
width: 100%;
}
.col400 {
flex: 1 auto;
}
.col240 {
flex: 1 240px;
}
.row tw-link, .row .link, .row .enchantment-link {
margin: 0;
padding: 0;
line-height: 0;
border: 0;
}
.row::before, .row::after {
display: block;
width: 100%;
margin: 0;
line-height: 0;
tw-link,
.link,
.enchantment-link,
tw-hook {
margin: 0;
padding: 0;
line-height: 0;
border: 0;
}
&::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;
line-height: 1.3em;
padding: 25px;
height: 100px;
display:block;
line-height: 1.3em;
padding: 25px;
}
/*Links*/
tw-link, .link, .enchantment-link, .btn {
background-color: #000;
border: 1px solid #000;
border-radius: 5px;
color: #fff;
padding: 8px 16px;
display: block;
margin: 5px 0;
cursor: pointer;
text-decoration: none;
background-color: #000;
border: 1px solid #000;
border-radius: 5px;
color: #fff;
padding: 8px 16px;
display: block;
margin: 5px 0;
cursor: pointer;
text-decoration: none;
}
a.btn:visited {
color: #ffffff;
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 {
color: #000;
text-decoration: none;
}
&:focus,
&:active,
&:visited {
color: #000;
}
}
.s-dark tw-link,
.s-dark .link,
.s-dark .enchantment-link {
background-color: #000;
border: none;
border-radius: 0;
color: #be1a00;
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0;
background-color: #000;
border: none;
border-radius: 0;
color: #be1a00;
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0;
}
.s-dark .enchantment-link:hover,
.s-dark tw-link:hover {
background-color: #000;
text-decoration: underline;
color: #fff;
background-color: #000;
text-decoration: underline;
color: #fff;
}
.s-dark #equipmenu .enchantment-link:hover,
.s-dark #equipmenu tw-link:hover {
border: 0;
border: 0;
}
.visited {
color: #fff;
}
.visited:hover{
color: #fff;
.visited,
.visited:hover {
color: #fff;
}
/*Walk compass links*/
.cont-w-nav {
width:200px;
height:200px;
overflow: hidden;
margin: 20px auto; /*or 0 auto 20px if pre-wrap on tw-passage is on*/
width:200px;
height:200px;
overflow: hidden;
margin: 20px auto; /*or 0 auto 20px if pre-wrap on tw-passage is on*/
}
.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;
width:200px;
height:200px;
line-height: 0;
@include rotate(45);
span,
tw-link {
display: inline-block;
width: 100px;
height:100px;
padding: 0;
margin: 0;
border: none;
overflow: hidden;
}
}
.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);
@include rotate(0);
}
.walk-nav tw-expression tw-link,
.walk-nav tw-link{
display: inline-block;
width: 100px;
height:100px;
padding: 0;
margin: 0;
border: none;
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 {
background-color: #cadbaa;
background: url(walk-arrow-h.svg) 0 0 no-repeat;
background-color: #000;
background: url(walk-arrow.svg) 0 0 no-repeat;
text-indent: -10000px;
cursor: pointer;
&: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;
background: url(walk-arrow-off.svg) 0 0 no-repeat;
text-indent: -10000px;
}
.walk-nav .inactive:hover {
background: url(walk-arrow-off.svg) 0 0 no-repeat;
background: url(walk-arrow-off.svg) 0 0 no-repeat;
}
/*Social links*/
.social {
padding: 8px 14px;
margin-left: 5px;
border-radius: 3px;
background-color: #000000;
transition: all .6s;
-moz-transition: all .6s;
-webkit-transition: all .6s;
-o-transition: all .6s;
color: #ffffff;
text-decoration: none;
padding: 8px 14px;
margin-left: 5px;
border-radius: 3px;
background-color: #000000;
transition: all .6s;
-moz-transition: all .6s;
-webkit-transition: all .6s;
-o-transition: all .6s;
color: #ffffff;
text-decoration: none;
}
.social:hover {
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
color: #ffffff;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
color: #ffffff;
}
.facebook:hover {
background-color: #435fa8;
background-color: #435fa8;
}
.twitter:hover {
background-color: #39d2fe;
background-color: #39d2fe;
}
/*Inventory*/
.inventory-content {
width: 210px;
height: 210px;
width: 210px;
height: 210px;
}
.slot {
width: 100px;
height: 100px;
background-color: #444;
width: 100px;
height: 100px;
background-color: #444;
}
.slotwide {
width: 200px;
height: 100px;
background-color: #cadbaa;
width: 200px;
height: 100px;
background-color: #cadbaa;
}
.slotfull {
width: 200px;
height: 200px;
background-color: red;
width: 200px;
height: 200px;
background-color: red;
}
/*Twine items*/
tw-passage{
white-space: normal;
white-space: normal;
}
tw-passage img {
max-width: 640px;
/* max-width: 100%; */
max-width: 640px;
/* max-width: 100%; */
}
tw-sidebar {
display: none;
display: none;
}
tw-story {
width: 100%;
margin:0;
width: 100%;
margin:0;
}
/*Fonts*/
tw-story {
font-size: 19px;
font-size: 19px;
}
h1 {
font-size: 2.5em;
text-align: center;
margin: 0.3em 0;
font-size: 2.5em;
text-align: center;
margin: 0.3em 0;
}
.toph {
margin-top: 0;
padding-top: 20px;
margin-top: 0;
padding-top: 20px;
}
.char-name {
font-size: 60%;
line-height: 0;
top: 0.3em;
font-size: 60%;
line-height: 0;
top: 0.3em;
}
.char-talk:before {
content: '«';
font-size: 200%;
line-height: 40%;
content: '«';
font-size: 200%;
line-height: 40%;
padding-right: 0.1em;
top: 0.2em;
}
.char-talk:after {
content: '»';
font-size: 200%;
line-height: 40%;
padding-left: 0.1em;
top: 0.2em;
content: '»';
font-size: 200%;
line-height: 40%;
padding-left: 0.1em;
top: 0.2em;
}
.more-link tw-link{
margin:0;
padding: 0;
border: none;
margin:0;
padding: 0;
border: none;
}
.alert {
color: #ae0000;
color: #ae0000;
}
.mapPin {
position: relative;
top: 0;
left: 0;
position: relative;
top: 0;
left: 0;
}
.mapPin tw-hook {
position: absolute;
top: 0;
left: 0;
position: absolute;
top: 0;
left: 0;
}
/*Device sizes*/
@media (max-width: 479px) {
tw-story {
font-size: 17px;
}
tw-story {
font-size: 17px;
}
}
@media (max-width: 640px) {
#equipmenu .row .col240:nth-child(3) {
@ -371,27 +366,27 @@ padding: 0;
}
/*Was a test to fix zoom-level, now clips Cinder's dress att small sizes*/
.scene.equip {
min-width: 300px;
min-width: 300px;
}
::StoryJS [script]
//From http://twinery.org/forum/index.php/topic,2450.0.html adding sounds, don't yet know where to place audio file
$(document.body).on("mouseenter", "a", function () {
$("<audio></audio>").attr({
src : "sound/transition1.ogg",
autoplay : "autoplay"
});
$("<audio></audio>").attr({
src: "sound/transition1.ogg",
autoplay: "autoplay"
});
});
//http://twinery.org/forum/index.php/topic,2495.0.html Calling JS with a hack
if (typeof Undo == "undefined") {
var Undo = {
hide: function() {
$('div[class="equip1"]').hide();
}
};
window.Undo = Undo;
var Undo = {
hide: function() {
$('div[class="equip1"]').hide();
}
};
window.Undo = Undo;
}
window.onload = function() {
@ -402,25 +397,25 @@ $(function()
// via https://twitter.com/javan/status/284873379062890496
// + https://twitter.com/pennig/status/285790598642946048
// re http://retrogamecrunch.com/tmp/hover
if ('createTouch' in document)
{
try
{
var ignore = /:hover\b/;
for (var i=0; i<document.styleSheets.length; i++)
{
var sheet = document.styleSheets[i];
for (var j=sheet.cssRules.length-1; j>=0; j--)
{
var rule = sheet.cssRules[j];
if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText))
{
sheet.deleteRule(j);
}
}
}
}
catch(e){}
}
if ('createTouch' in document)
{
try
{
var ignore = /:hover\b/;
for (var i=0; i<document.styleSheets.length; i++)
{
var sheet = document.styleSheets[i];
for (var j=sheet.cssRules.length-1; j>=0; j--)
{
var rule = sheet.cssRules[j];
if (rule.type === CSSRule.STYLE_RULE && ignore.test(rule.selectorText))
{
sheet.deleteRule(j);
}
}
}
}
catch(e){}
}
});
}

View File

@ -30,7 +30,7 @@
(set: $hasStiletto to 1)
(replace: ?equiplink1b)[(display: "uneq1")]
]}
](else:) [
](else:)[
<img src="equip/stiletto.png"> {
(click: ?equiplink1)[
(replace: ?equiplink1)[(display: "equipped1")]
@ -182,7 +182,7 @@
(replace: ?equiplink2b)[(display: "uneq2")]
]}
]
(else:) [
(else:)[
<img src="equip/crossbow.png">{
(click: ?equiplink2)[
(replace: ?equiplink2)[(display: "equipped2")]
@ -213,7 +213,7 @@
(replace: ?equiplink3b)[(display: "uneq3")]
]}
]
(else:) [
(else:)[
<img src="equip/rifle.png">{
(click: ?equiplink3)[
(replace: ?equiplink3)[(display: "equipped3")]
@ -236,7 +236,7 @@
(replace: ?equiplink4b)[(display: "uneq4")]
]}
]
(else:) [
(else:)[
<img src="equip/razor.png">{
(click: ?equiplink4)[
(replace: ?equiplink4)[(display: "equipped4")]