Imported style changes from lactf-plaform

client/src/components/action-button.js

@@ -5,7 +5,7 @@ const ActionButton = withStyles({
     padding: '16px !important',
     color: '#fff',
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)',
+    backdropFilter: 'none',
     boxShadow: 'rgba(250,250,250,0.6) 0px 0px 1rem 0px',
     fontSize: '20px',
     borderRadius: '1rem',

client/src/components/footer.js

@@ -3,9 +3,9 @@ import withStyles from './jss'
 const Footer = ({ classes }) => (
   <div class={classes.root}>
     <span>
-      <a href='https://github.com/uclaacm/lactf-platform' target='_blank' rel='noopener noreferrer'>LA CTF Platform</a> - Powered by <a href='https://rctf.redpwn.net/' target='_blank' rel='noopener noreferrer'>rCTF</a>
-      &nbsp;- Made with 🤍 by <a href='https://acmcyber.com/' target='_blank' rel='noopener noreferrer'>ACM Cyber</a>
-      &nbsp;&amp; <a href='https://pbr.uclaacm.com/' target='_blank' rel='noopener noreferrer'>Psi Beta Rho</a>
+      <a href='https://github.com/lactf/lactf-platform' target='_blank' rel='noopener noreferrer'>LA CTF Platform</a> - Powered by <a href='https://rctf.redpwn.net/' target='_blank' rel='noopener noreferrer'>rCTF</a>
+      &nbsp;- Made with 🤍 by <a href='https://www.acmcyber.com/' target='_blank' rel='noopener noreferrer'>ACM Cyber</a>
+      &nbsp;&amp; <a href='https://pbr.acmcyber.com/' target='_blank' rel='noopener noreferrer'>Psi Beta Rho</a>
     </span>
   </div>
 )

client/src/components/modal.js

@@ -63,7 +63,7 @@ export default withStyles({
   },
   modal: {
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)',
+    backdropFilter: 'none',
     fontFamily: 'Poppins',
     color: '#fff',
     maxWidth: 'initial'

client/src/components/not-started.js

@@ -5,7 +5,7 @@ import config from '../config'
 const NotStarted = withStyles({
   card: {
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)',
+    backdropFilter: 'none',
     padding: '30px !important',
     flexDirection: 'column'
   },

client/src/components/problem.js

@@ -57,7 +57,7 @@ const Problem = ({ classes, problem }) => {
   const onSolvesClose = useCallback(() => setSolves(null), [])
 
   return (
-    <div class={`frame ${classes.frame}`}>
+    <div class={`frame ${classes.frame} ${blood != null ? `${classes.blood} ${classes[`blood${blood}`]}` : ''}`}>
       <div class='frame__body'>
         <div class='row u-no-padding'>
           <div class='col-6 u-no-padding'>
@@ -123,12 +123,23 @@ export default withStyles({
     marginBottom: '1em',
     paddingBottom: '0.625em',
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)'
+    backdropFilter: 'none'
     /* '& a': {
       color: 'white'
     } */
   },
   // LA CTF: track bloods
+  blood: {
+    '& a': {
+      color: '#fff',
+    },
+    '& .markup a': {
+      textDecoration: 'underline'
+    },
+    '& input': {
+      backgroundColor: 'var(--bg-darker) !important',
+    }
+  },
   blood1: {
     background: 'var(--blood-gold)',
     filter: 'drop-shadow(0px 0px 8px var(--blood-gold-shadow))'

client/src/components/sponsors.js

@@ -22,11 +22,15 @@ export default withStyles({
     }
   },
   row: {
-    marginBottom: '1.5em'
+    marginBottom: '1.5em',
+    color: 'white !important'
   },
   card: {
-    background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)'
+    background: 'hwb(0 0% 100% / .25)',
+    backdropFilter: 'none'
+  },
+  content: {
+    paddingTop: '10px'
   }
 }, ({ classes }) => {
   const { sponsors } = config
@@ -38,9 +42,9 @@ export default withStyles({
           if (!sponsor.small) cl += ' u-flex u-flex-column h-100'
 
           return (
-            <div class={`col-6 ${classes.row}`} key={sponsor.name}>
+            <a href={sponsor.url} class={`col-6 ${classes.row}`} key={sponsor.name} style={ { color: 'white' } }>
               <div class={cl}>
-                <div class='content'>
+                <div class={`content ${classes.content}`}>
                   {sponsor.icon &&
                     <figure class={`u-center ${classes.icon}`}>
                       <img src={sponsor.icon} />
@@ -51,7 +55,7 @@ export default withStyles({
                   </small>
                 </div>
               </div>
-            </div>
+            </a>
           )
         })
       }

client/src/components/timer.js

@@ -6,7 +6,7 @@ import { formatAbsoluteTimeWithTz } from '../util/time'
 const Timer = withStyles({
   card: {
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)',
+    backdropFilter: 'none',
     margin: 'auto'
   },
   section: {

client/src/index.js

@@ -113,7 +113,7 @@ export default withStyles({
     '--cirrus-select-bg': '#f8747066',
     '--cirrus-code-bg': '#333',
     '--cirrus-primary': '#f44d8a',
-    '--bg-dark': 'rgba(0, 0, 0, 50%)',
+    '--bg-dark': 'rgba(0, 0, 0, 70%)',
     '--bg-darker': '#0f0f0fa0',
     '--toast-primary-bg': '#f87470e6',
     // lactf gradients

client/src/routes/challs.js

@@ -168,7 +168,7 @@ export default withStyles({
     marginBottom: '1em',
     paddingBottom: '0.625em',
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)'
+    backdropFilter: 'none'
   },
   row: {
     justifyContent: 'center',

client/src/routes/home.js

@@ -25,7 +25,7 @@ export default withStyles({
   },
   '@global .lactf-sponsors, .lactf-rules': {
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)',
+    backdropFilter: 'none',
     padding: '0% 5%',
     borderRadius: '10px'
   }

client/src/routes/profile.js

@@ -166,7 +166,7 @@ export default withStyles({
     margin: 'auto',
     '& .card': {
       background: 'var(--bg-dark)',
-      backdropFilter: 'blur(10px)',
+      backdropFilter: 'none',
       marginBottom: '20px'
     },
     '& input, & select, & option': {
@@ -185,6 +185,6 @@ export default withStyles({
   },
   errorCard: {
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)'
+    backdropFilter: 'none'
   }
 }, Profile)

client/src/routes/scoreboard.js

@@ -20,7 +20,7 @@ const Scoreboard = withStyles({
     paddingBottom: '1.5em',
     paddingTop: '2.125em',
     background: 'var(--bg-dark)',
-    backdropFilter: 'blur(10px)',
+    backdropFilter: 'none',
     '& .frame__subtitle': {
       color: '#fff'
     },