Update a bunch of files to have a basic default background and transi…

…tion
slmnio · Oct 20, 2021 · 1b75eb5 · 1b75eb5
1 parent d6aff2f
commit 1b75eb5
Show file tree

Hide file tree

Showing 20 changed files with 69 additions and 52 deletions.
diff --git a/website/src/assets/app.css b/website/src/assets/app.css
@@ -189,7 +189,7 @@ a.link-text {
     align-items: center;
 }
 
-a.no-link-style {
+a.no-link-style, a.no-link-style:hover {
     display: block;
     text-decoration: none;
     color: inherit;
@@ -214,3 +214,24 @@ body.overlay {
 h1.big {
     font-size: 4em;
 }
+
+.default-thing {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    color: rgb(255, 255, 255);
+    transition: background-color .2s, border-color .2s, color .2s;
+}
+/* no-link-style has color:inherit which affects border-color if on some links
+   the extra specificity helps to override that */
+.no-link-style.default-thing {
+    border-color: rgba(255, 255, 255, 0.2);
+}
+a.default-thing {
+    color: rgb(255,255,255);
+}
+
+.default-thing-border-bg {
+    background-color: rgba(255, 255, 255, 0.2);
+    color: rgb(255, 255, 255);
+    transition: background-color .2s, border-color .2s, color .2s;
+}
diff --git a/website/src/components/broadcast/DraftOverlay.vue b/website/src/components/broadcast/DraftOverlay.vue
@@ -13,7 +13,7 @@
             <div class="teams d-flex">
                 <div class="team flex-grow-1" v-for="team in draftTeams" v-bind:key="team.id">
                     <DraftTeam class="team-top" :team="team"></DraftTeam>
-                    <div class="team-staff-list" :style="logoBackground1(team)">
+                    <div class="team-staff-list default-thing" :style="logoBackground1(team)">
                         <div class="team-staff" v-for="staff in team.staff" v-bind:key="staff.id">
                             {{ staff.name }}
                         </div>
@@ -200,7 +200,8 @@ export default {
         margin-top: 4px;
         margin-bottom: 8px;
         flex-wrap: wrap;
-        border-bottom: 4px solid transparent;
+        border-bottom-width: 4px;
+        border-bottom-style: solid;
     }
 
     .team-staff {

diff --git a/website/src/components/broadcast/IngameTeam.vue b/website/src/components/broadcast/IngameTeam.vue
@@ -1,7 +1,7 @@
 <template>
 <!--    <transition name="ingame-team-anim">-->
         <div class="ingame-team-holder" v-if="loaded" v-bind:class="{'right': right, 'left': !right}">
-            <div class="ingame-team" :style="style" :key="team.id">
+            <div class="ingame-team default-thing" :style="style" :key="team.id">
                 <div class="flex-center team-small-text" v-if="team.small_overlay_text">
                     <span class="industry-align">{{ team.small_overlay_text }}</span>
                 </div>
@@ -133,7 +133,6 @@ function updateWidth(vueEl, fullWidth) {
         height: 48px;
 
         display: flex;
-        background-color: #ccc;
     }
     .ingame-team-holder {
         position: absolute;

diff --git a/website/src/components/website/BracketTeam.vue b/website/src/components/website/BracketTeam.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bracket-team" v-bind:class="{'text': !!text, 'empty': empty, 'highlighted': highlighted, 'lowlighted': lowlighted}"
+    <div class="bracket-team default-thing" v-bind:class="{'text': !!text, 'empty': empty, 'highlighted': highlighted, 'lowlighted': lowlighted}"
          @mouseover="highlight" @mouseout="unHighlight"
          :style="background">
         <div class="inner" v-if="!empty">
@@ -63,7 +63,7 @@ export default {
         width: 100%;
         --match-height: 2.3em;
         height: var(--match-height);
-        background-color: #282828;
+        /*background-color: #282828;*/
     }
     .team-logo-holder {
         width: var(--match-height);

diff --git a/website/src/components/website/ContentThing.vue b/website/src/components/website/ContentThing.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="overrideURL || url(type, linkTo || thing)" class="link content-thing" :style="bgStyle" v-bind:class="{ 'has-headshot' : showHeadshot && headshot }">
+    <router-link :to="overrideURL || url(type, linkTo || thing)" class="link content-thing default-thing" :style="bgStyle" v-bind:class="{ 'has-headshot' : showHeadshot && headshot }">
       <span class="link-headshot" v-if="showHeadshot">
         <span class="headshot" :style="headshot"></span>
       </span>
@@ -84,17 +84,14 @@ export default {
     .content-thing {
         padding: .25em .5em;
         margin: .25em .25em;
-        border-bottom: .2em solid transparent;
+        border-bottom-width: .2em;
+        border-bottom-style: solid;
         display: flex;
         justify-content: center;
         align-items: center;
-
-        /* default colouring */
-        background-color: rgba(255,255,255,0.1);
-        border-color: rgba(255,255,255,0.2);
-        color: rgba(255,255,255,0.5);
-
-        transition: background-color .2s, border-color .2s, color .2s;
+    }
+    .content-thing:hover {
+        color: inherit;
     }
 
     .icon-internal {

diff --git a/website/src/components/website/MapDisplay.vue b/website/src/components/website/MapDisplay.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="`map ${mapClass} ${condensed ? 'condensed' : ''}`">
-        <div class="map-image" :style="imageCSS">
+        <div class="map-image default-thing" :style="imageCSS">
             <div class="map-color-overlay draw" v-if="map.draw"></div>
             <div class="map-color-overlay winner" v-if="winner" :style="logoBackground1(winner)"></div>
 

diff --git a/website/src/components/website/MatchHero.vue b/website/src/components/website/MatchHero.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="match-hero">
-        <div class="match-hero-event flex-center" v-if="match.event && !$root.minisiteEvent" :style="eventStyle"></div>
+        <div class="match-hero-event flex-center default-thing-border-bg" v-if="match.event && !$root.minisiteEvent" :style="eventStyle"></div>
         <div class="match-hero-teams">
             <MatchHeroTeam class="team" v-for="team in match.teams" v-bind:key="team.id" :team="team" />
             <div class="match-hero-event-logo" v-if="match.event" :style="eventLogo"></div>

diff --git a/website/src/components/website/MatchHeroTeam.vue b/website/src/components/website/MatchHeroTeam.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="match-hero-team flex-center" :style="teamBG" v-if="team">
+    <div class="match-hero-team flex-center default-thing" :style="teamBG" v-if="team">
         <div class="team-logo" :style="teamLogo"></div>
-        <router-link :to="url('team', team)" :style="teamText" class="team-name">{{ team.name }}</router-link>
+        <router-link :to="url('team', team)" :style="teamText" class="team-name no-link-style">{{ team.name }}</router-link>
     </div>
 </template>
 

diff --git a/website/src/components/website/MatchScore.vue b/website/src/components/website/MatchScore.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="match-scoreline" v-if="match.first_to">
-        <div class="match-score flex-center" v-for="(score, i) in scores"
+        <div class="match-score flex-center default-thing" v-for="(score, i) in scores"
              v-bind:class="{'match-score-win': score === match.first_to }"
              v-bind:key="i"
              :style="{order: i*2, ...(score === match.first_to ? {... pointColor} : {})}">{{ displayScores[i] }}</div>
@@ -62,8 +62,8 @@ export default {
         font-size: 1.5em;
         width: 1em;
     }
-    .match-score-win {
-        background-color: #555;
+    .default-thing.match-score-win {
+        background-color: rgba(255, 255, 255, 0.2);
         /* TODO: add hydration transition  */
     }
 </style>
diff --git a/website/src/components/website/MatchThumbnail.vue b/website/src/components/website/MatchThumbnail.vue
@@ -17,7 +17,7 @@
         <div class="match-thumbnail-insert" v-if="!noTeams">
             <div class="match-event-logo bg-center" :style="logo(match.event, 50)"></div>
         </div>
-        <div class="match-thumbnail-border" :style="eventBorder"></div>
+        <div class="match-thumbnail-border default-thing-border-bg" :style="eventBorder"></div>
     </div>
 </template>
 

diff --git a/website/src/components/website/NewsThumbnail.vue b/website/src/components/website/NewsThumbnail.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="news-thumbnail" :style="border">
+    <div class="news-thumbnail default-thing" :style="border">
         <div class="news-custom-thumbnail w-100 bg-center" v-if="customThumbnail" :style="customThumbnail"></div>
         <div class="news-generated-thumbnail w-100 flex-center" v-else :style="{ backgroundColor: generatedThumbnail.backgroundColor }">
             <div class="news-generated-thumbnail-logo bg-center" :style="{backgroundImage: generatedThumbnail.backgroundImage}"></div>
@@ -58,7 +58,8 @@ export default {
     .news-thumbnail {
         background: #333;
         display: flex;
-        border-bottom: 4px solid transparent;
+        border-bottom-width: 4px;
+        border-bottom-style: solid;
         position: relative;
     }
     .news-custom-thumbnail {

diff --git a/website/src/components/website/PreviousMatch.vue b/website/src/components/website/PreviousMatch.vue
@@ -4,7 +4,7 @@
         <div class="prev-match-date" v-else-if="match.start">{{ goodDate }}</div>
         <div class="prev-match-result">{{ resultLetter }}</div>
         <router-link :to="url('detailed', match)" class="prev-match-vs">vs</router-link>
-        <div class="prev-match-opponent flex-center flex-shrink-0" :style="teamTheme(opponent)"><div class="prev-match-opponent-logo bg-center" :style="largeIcon(opponent)"></div></div>
+        <div class="prev-match-opponent default-thing flex-center flex-shrink-0" :style="teamTheme(opponent)"><div class="prev-match-opponent-logo bg-center" :style="largeIcon(opponent)"></div></div>
         <div class="prev-match-maps"><MapDisplay class="map"
                 v-for="map in (match.maps || []).filter(map => map.number <= match.first_to || map.winner)"
                 :key="map.id" :map="map" :theme="team.theme"

diff --git a/website/src/views/DetailedMatch.vue b/website/src/views/DetailedMatch.vue
@@ -7,7 +7,7 @@
                 </div>
                 <div class="team-holder f-row mt-3">
                     <div class="team f-col w-50" v-for="team in match.teams" v-bind:key="team.id">
-                        <div :style="theme(team)" class="team-header flex-center f-col">
+                        <div :style="theme(team)" class="team-header flex-center f-col default-thing">
                             <div class="team-code">{{ team.code }}</div>
                             <div class="team-overlay-text">{{ team.small_overlay_text }}</div>
                             <div class="team-logo bg-center" :style="icon(team)"></div>
@@ -212,7 +212,8 @@ export default {
         padding: 8px 4px;
         text-align: center;
         font-weight: bold;
-        border-bottom: 4px solid transparent;
+        border-bottom-width: 4px;
+        border-bottom-style: solid;
         position: relative;
     }
     .team-logo {

diff --git a/website/src/views/Event.vue b/website/src/views/Event.vue
@@ -21,7 +21,7 @@
                 </li>
             </ul>
 
-            <li class="nav-item mx-2 minisite-prompt" v-if="shouldShowMinisitePrompt" :style="themeBackground1(event)">
+            <li class="nav-item mx-2 minisite-prompt default-thing" v-if="shouldShowMinisitePrompt" :style="themeBackground1(event)">
                 <a :href="minisiteLink" class="nav-link no-link-style">See this page on the <b>{{ subdomain }}</b> minisite <i class="fas fa-chevron-right fa-fw ml-1"></i></a>
             </li>
         </SubPageNav>

diff --git a/website/src/views/Match.vue b/website/src/views/Match.vue
@@ -25,7 +25,7 @@
                         </thead>
                         <tbody>
                             <tr v-if="match.start"><td colspan="2">{{ date }}</td></tr>
-                            <tr v-if="match.event && match.event.name"><td colspan="2" :style="eventStyle">
+                            <tr v-if="match.event && match.event.name"><td colspan="2" class="default-thing" :style="eventStyle">
                                 <b><router-link :to="url('event', match.event)" class="match-event-link">{{ match.event.name }}</router-link></b>
                             </td></tr>
                             <tr v-if="match.forfeit"><td colspan="2"><i>Match was forfeited</i></td></tr>
@@ -224,4 +224,8 @@ export default {
         color: #fff !important;
         border-color: transparent;
     }
+
+    td.default-thing {
+        background-color: rgba(255, 255, 255, 0.185);
+    }
 </style>
diff --git a/website/src/views/Player.vue b/website/src/views/Player.vue
@@ -3,7 +3,7 @@
         <div class="container">
             <div class="top">
                 <div class="player-top d-flex">
-                    <div class="player-icon bg-center" v-if="player.overwatch_icon"
+                    <div class="player-icon bg-center default-thing" v-if="player.overwatch_icon"
                          :style="{backgroundImage: `url(${player.overwatch_icon})`}"></div>
                     <div class="player-name">{{ player.name }} <i class="fas fa-badge-check" v-if="player.verified"></i>
                     </div>

diff --git a/website/src/views/lists/EventDisplay.vue b/website/src/views/lists/EventDisplay.vue
@@ -1,6 +1,6 @@
 <template>
     <router-link :to="url('event', event)" class="event no-link-style d-flex">
-        <div class="event-block flex-center" :style="blockTheme">
+        <div class="event-block flex-center default-thing" :style="blockTheme">
             <div class="event-block-logo bg-center" :style="blockLogo"></div>
         </div>
         <div class="event-name">
@@ -38,11 +38,9 @@ export default {
 .event-block {
     width: 50px;
     height: 40px;
-    border-bottom: 4px solid;
+    border-bottom-width: 4px;
+    border-bottom-style: solid;
     margin-right: 12px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
-    transition: background-color .2s, border-color .2s, color .2s;
 }
 .event {
     align-items: center;

diff --git a/website/src/views/lists/NewEventDisplay.vue b/website/src/views/lists/NewEventDisplay.vue
@@ -1,13 +1,13 @@
 <template>
-    <a v-if="useRawTag" :href="url('event', event, {subdomain: event.subdomain, partial_subdomain: event.partial_subdomain})" class="event no-link-style d-flex" :style="blockTheme">
+    <a v-if="useRawTag" :href="url('event', event, {subdomain: event.subdomain, partial_subdomain: event.partial_subdomain})" class="event no-link-style d-flex default-thing" :style="blockTheme">
         <div class="event-block flex-center">
             <div class="event-block-logo bg-center" :style="blockLogo"></div>
         </div>
         <div class="event-name">
             {{ event.name }}
         </div>
     </a>
-    <router-link v-else :to="url('event', event)" class="event no-link-style d-flex" :style="blockTheme">
+    <router-link v-else :to="url('event', event)" class="event no-link-style d-flex default-thing" :style="blockTheme">
         <div class="event-block flex-center">
             <div class="event-block-logo bg-center" :style="blockLogo"></div>
         </div>
@@ -46,10 +46,8 @@ export default {
 
 <style scoped>
 .event {
-    border-bottom: 4px solid;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.2);
-    transition: background-color .2s, border-color .2s, color .2s;
+    border-bottom-width: 4px;
+    border-bottom-style: solid;
     min-height: 58px;
 }
 .event:hover {

diff --git a/website/src/views/lists/TeamDisplay.vue b/website/src/views/lists/TeamDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-    <router-link :to="url('team', team)" class="team no-link-style d-flex flex-center flex-column" :style="teamTheme">
+    <router-link :to="url('team', team)" class="team no-link-style d-flex flex-center flex-column default-thing" :style="teamTheme">
         <div class="team-logo-holder flex-center">
             <div class="team-logo bg-center" :style="logo" ></div>
         </div>
@@ -39,11 +39,7 @@ export default {
 <style scoped>
 .team {
     padding: 6px;
-    border-bottom: 6px solid transparent;
-
-    background-color: rgba(255,255,255,0.1);
-    border-color: rgba(255,255,255,0.2);
-    color: rgba(255,255,255,0.5);
+    border-bottom: 6px solid;
 }
 .team-logo-holder {
     height: 3em;

diff --git a/website/src/views/sub-views/TeamTheme.vue b/website/src/views/sub-views/TeamTheme.vue
@@ -7,10 +7,10 @@
 
         <h3>Themes</h3>
         <div class="theme-collection mb-3">
-            <div class="theme-bar" :style="mainTheme">
+            <div class="theme-bar default-thing" :style="mainTheme">
                 Theme
             </div>
-            <div class="theme-bar" :style="logoBackground">
+            <div class="theme-bar default-thing" :style="logoBackground">
                 Logo Background
             </div>
         </div>
@@ -134,7 +134,8 @@ export default {
         justify-content: center;
         text-transform: uppercase;
         margin-right: 12px;
-        border-bottom: 4px solid rgba(255, 255, 255, 0.2);
+        border-bottom-width: 4px;
+        border-bottom-style: solid;
     }
 
     .color-swatch {