mirror of
https://github.com/exane/not-gwent-online
synced 2025-09-19 06:39:10 +00:00
rearrange folders
This commit is contained in:
exane
25
client/scss/_backbone.modal.sass
Normal file
25
client/scss/_backbone.modal.sass
Normal file
@@ -0,0 +1,25 @@
|
||||
/* Modal positioning */
|
||||
.bbm-wrapper
|
||||
box-sizing: border-box
|
||||
position: fixed
|
||||
left: 0
|
||||
top: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
z-index: 100
|
||||
padding: 50px 10px
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
overflow: auto
|
||||
|
||||
.bbm-modal
|
||||
border-radius: 3px
|
||||
margin: auto
|
||||
width: auto
|
||||
max-width: 550px
|
||||
|
||||
.bbm-views
|
||||
width: 100%
|
||||
box-sizing: border-box
|
||||
130
client/scss/_backbone.modal.theme.sass
Normal file
130
client/scss/_backbone.modal.theme.sass
Normal file
@@ -0,0 +1,130 @@
|
||||
.bbm-wrapper
|
||||
background: rgba(0,0,0,.75)
|
||||
-webkit-transition: background-color .3s
|
||||
|
||||
.bbm-modal
|
||||
background: white
|
||||
box-shadow: 0 0px 6px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.9)
|
||||
|
||||
|
||||
/* BLOCKS */
|
||||
.bbm-modal__topbar,
|
||||
.bbm-modal__bottombar
|
||||
padding: 0 30px
|
||||
|
||||
.bbm-modal__topbar
|
||||
border-bottom: 1px solid rgba(0,0,0,.1)
|
||||
margin:
|
||||
bottom: 30px
|
||||
|
||||
>ul
|
||||
list-style: none
|
||||
text-align: center
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
.bbm-modal__tab
|
||||
display: inline-block
|
||||
padding: 15px 10px
|
||||
|
||||
a
|
||||
font:
|
||||
size: 16px
|
||||
weight: bold
|
||||
color: #999
|
||||
|
||||
&:hover,
|
||||
&.active
|
||||
color: #222
|
||||
|
||||
.bbm-modal__title
|
||||
padding: 20px 0 19px
|
||||
margin: 0
|
||||
font:
|
||||
weight: normal
|
||||
size: 22px
|
||||
line-height: 1em
|
||||
color: #312D3A
|
||||
|
||||
.bbm-modal__section
|
||||
padding: 0 30px
|
||||
margin-top: 0px
|
||||
font:
|
||||
size: 16px
|
||||
line-height: 26px
|
||||
color: #575656
|
||||
|
||||
p
|
||||
font:
|
||||
size: 16px
|
||||
line-height: 26px
|
||||
color: #575656
|
||||
|
||||
&:last-child
|
||||
padding: 0
|
||||
margin-bottom: 0
|
||||
|
||||
a
|
||||
color: #FF643C
|
||||
|
||||
h3
|
||||
margin: 0
|
||||
font-size: 20px
|
||||
line-height: 1em
|
||||
|
||||
.bbm-modal__bottombar
|
||||
border-top: 1px solid rgba(0,0,0,.1)
|
||||
padding: 18px
|
||||
text-align: right
|
||||
margin-top: 30px
|
||||
|
||||
|
||||
/* MODULES */
|
||||
.bbm-group
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
|
||||
.bbm-button
|
||||
display: inline-block
|
||||
color: rgba(49,45,58,.8)
|
||||
text-decoration: none
|
||||
font:
|
||||
size: 14px
|
||||
weight: 500
|
||||
position: relative
|
||||
line-height: 1em
|
||||
padding: 10px 14px
|
||||
border-radius: 3px
|
||||
background: #FCFCFC
|
||||
cursor: default
|
||||
|
||||
background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.15) 100%)
|
||||
|
||||
-moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
-webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
|
||||
&.inactive
|
||||
opacity: .5
|
||||
pointer-events: none
|
||||
|
||||
&:active
|
||||
background-image: -o-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: -moz-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: -webkit-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: -ms-linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
background-image: linear-gradient(rgba(70,30,170,0) 0%, rgba(65,61,75,.25) 100%)
|
||||
|
||||
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50), inset 0px 0px 0px 1px rgba(0,0,0,0.20)
|
||||
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
/* Open modal */
|
||||
45
client/scss/_style.sass
Normal file
45
client/scss/_style.sass
Normal file
@@ -0,0 +1,45 @@
|
||||
// Custom styling here
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
font-style: normal
|
||||
|
||||
// Add icons to tabs
|
||||
.bbm-modal__tab
|
||||
padding: 0
|
||||
|
||||
a
|
||||
display: block
|
||||
padding:
|
||||
top: 55px
|
||||
bottom: 10px
|
||||
left: 20px
|
||||
right: 20px
|
||||
position: relative
|
||||
font:
|
||||
size: 13px
|
||||
|
||||
&:before
|
||||
position: absolute
|
||||
content: ""
|
||||
background: url(img/tab-icons.png)
|
||||
left: 50%
|
||||
top: 10px
|
||||
margin:
|
||||
left: -20px
|
||||
width: 40px
|
||||
height: 40px
|
||||
opacity: .5
|
||||
|
||||
&.active
|
||||
opacity: 1
|
||||
|
||||
&:before
|
||||
opacity: 1
|
||||
|
||||
|
||||
&:last-child
|
||||
margin-left: -5px
|
||||
a
|
||||
&:before
|
||||
background-position: -40px
|
||||
131
client/scss/main.scss
Normal file
131
client/scss/main.scss
Normal file
@@ -0,0 +1,131 @@
|
||||
//@import "style";
|
||||
@import "backbone.modal";
|
||||
@import "backbone.modal.theme";
|
||||
|
||||
$height: 600px;
|
||||
$game-height: 800px;
|
||||
|
||||
.board {
|
||||
height: $game-height;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.battleside {
|
||||
width: 100%;
|
||||
height: $height/2;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.field {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: 1px solid black;
|
||||
|
||||
&.active {
|
||||
box-shadow: 0px 0px 15px #ffbb0b;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.field:hover, .field-single:hover {
|
||||
box-shadow: 0px 0px 10px #000;
|
||||
}
|
||||
|
||||
.field-hand {
|
||||
margin-top: 20px;
|
||||
.card {
|
||||
margin-left: -20px;
|
||||
&:hover {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
transform: scale(1.25,1.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.passing {/*
|
||||
display: none;*/
|
||||
}
|
||||
|
||||
.field-single {
|
||||
border: 1px solid black;
|
||||
height: 150px;
|
||||
width: 85px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
//height: $game-height;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
height: $game-height/2 - 100px;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
background: rgba(252, 219, 125, 0.51);
|
||||
}
|
||||
|
||||
.removeBackground {
|
||||
background: 0;
|
||||
}
|
||||
|
||||
.mid-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 1px solid black;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
border: 1px solid black;
|
||||
height: $game-height/2;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid black;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 120px;
|
||||
}
|
||||
span {
|
||||
color: #00b000;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
position: absolute;
|
||||
text-shadow: 1px 1px #101010;
|
||||
margin-top: 55px;
|
||||
margin-left: 30px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.activeCard {
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
transform: scale(1.5,1.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
position: absolute;/*
|
||||
display: none;*/
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background: url("../../assets/ruby-grey.png");
|
||||
&.ruby {
|
||||
background: url("../../assets/ruby.png");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user