Browse Source

WIP: modifs style

undefined
Adrien 3 years ago
parent
commit
c99b4b6876
5 changed files with 46 additions and 12 deletions
  1. +1
    -1
      src/App.vue
  2. +21
    -9
      src/components/Battleground.vue
  3. +4
    -0
      src/components/Objective.vue
  4. +1
    -0
      src/gameInfos/battlegrounds.js
  5. +19
    -2
      src/styles/main.sass

+ 1
- 1
src/App.vue View File

@@ -28,7 +28,7 @@
margin: 0
height: 56px
padding: 0 16px 0 24px
+blizzard-header-gradient
@include blizzard-header-gradient
text-shadow: 0 0 1rem #009cff
color: #fff
span


+ 21
- 9
src/components/Battleground.vue View File

@@ -1,10 +1,9 @@
<template>
<div class="battleground" v-if="battleground">
<div class="battleground-background" :style="backgroundCss"/>
<div class="battleground-content">
<div>Welcome to {{ battleground.name }}</div>

<div id="objectives" class="objectives">
<div class="row" v-for="objectiveRow in battleground.objectives">
<div class="objectives-row" v-for="objectiveRow in battleground.objectives">
<template v-for="objective in objectiveRow">
<Objective :objective="objective"></Objective>
</template>
@@ -19,18 +18,27 @@
$border-style: 1px solid #66CCFF

.battleground
background-image: url(/static/backgrounds/alterac-pass.jpg)
background-size: contain
&-content
backdrop-filter: blur(4px)
&-background, &-content
position: absolute
height: 100vh
width: 100vw

&-background
background-size: cover
background-position: center
filter: blur(2px) brightness(70%)
z-index: 5

&-content
z-index: 10


.objectives
display: flex
flex-direction: column
height: 100%

.row
&-row
display: flex
justify-content: space-between
flex-grow: 1
@@ -60,6 +68,11 @@
},
battleground () {
return BATTLEGROUNDS[this.battlegroundId]
},
backgroundCss () {
return {
backgroundImage: `url(${this.battleground.backgroundUrl})`
}
}
},
watch: {
@@ -73,4 +86,3 @@
}
}
</script>


+ 4
- 0
src/components/Objective.vue View File

@@ -12,6 +12,7 @@
<div>
<Timer
ref="timer"
class="objective-timer"
:initialTime="objective.initialSpawnTime"
/>
</div>
@@ -22,6 +23,9 @@
.objective
width: 100%
text-align: center

&-timer
font-size: 2rem
</style>

<script>


+ 1
- 0
src/gameInfos/battlegrounds.js View File

@@ -16,6 +16,7 @@ const BOT = 'bottom'
export default {
alteracPass: {
name: 'Alterac Pass',
backgroundUrl: '/static/backgrounds/alterac-pass.jpg',
objectives: [
[
MAP.cavalryPrison


+ 19
- 2
src/styles/main.sass View File

@@ -6,12 +6,29 @@
// ############
// ## Colors ##
// ############

$blizzard-background-color: #0A020F
$blizzard-background-color-transparent: #0A020FCC
$blizzard-font-color: #fff
$blizzard-font-color: #6CF

=blizzard-header-gradient
@mixin blizzard-header-gradient
background: #0d39a0 /* Old browsers */
background: -moz-linear-gradient(left, #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0d39a0 0%,#2f099b 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


// #################
// ## Breakpoints ##
// #################

$xs: 0px
$sm: 576px
$md: 768px
$lg: 992px
$xl: 1200px

/// A shortcut for media queries
@mixin breakpoint($point)
@media (min-width: $point)
@content

Loading…
Cancel
Save