diff --git a/apps/client/src/stylesheets/boxicons-compat.css b/apps/client/src/stylesheets/boxicons-compat.css new file mode 100644 index 000000000..cde182842 --- /dev/null +++ b/apps/client/src/stylesheets/boxicons-compat.css @@ -0,0 +1,492 @@ +.bx-ul +{ + margin-left: 2em; + padding-left: 0; + + list-style: none; +} +.bx-ul > li +{ + position: relative; +} +.bx-ul .bx +{ + font-size: inherit; + line-height: inherit; + + position: absolute; + left: -2em; + + width: 2em; + + text-align: center; +} +@-webkit-keyframes spin +{ + 0% + { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% + { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes spin +{ + 0% + { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% + { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@-webkit-keyframes burst +{ + 0% + { + -webkit-transform: scale(1); + transform: scale(1); + + opacity: 1; + } + 90% + { + -webkit-transform: scale(1.5); + transform: scale(1.5); + + opacity: 0; + } +} +@keyframes burst +{ + 0% + { + -webkit-transform: scale(1); + transform: scale(1); + + opacity: 1; + } + 90% + { + -webkit-transform: scale(1.5); + transform: scale(1.5); + + opacity: 0; + } +} +@-webkit-keyframes flashing +{ + 0% + { + opacity: 1; + } + 45% + { + opacity: 0; + } + 90% + { + opacity: 1; + } +} +@keyframes flashing +{ + 0% + { + opacity: 1; + } + 45% + { + opacity: 0; + } + 90% + { + opacity: 1; + } +} +@-webkit-keyframes fade-left +{ + 0% + { + -webkit-transform: translateX(0); + transform: translateX(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + + opacity: 0; + } +} +@keyframes fade-left +{ + 0% + { + -webkit-transform: translateX(0); + transform: translateX(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateX(-20px); + transform: translateX(-20px); + + opacity: 0; + } +} +@-webkit-keyframes fade-right +{ + 0% + { + -webkit-transform: translateX(0); + transform: translateX(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateX(20px); + transform: translateX(20px); + + opacity: 0; + } +} +@keyframes fade-right +{ + 0% + { + -webkit-transform: translateX(0); + transform: translateX(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateX(20px); + transform: translateX(20px); + + opacity: 0; + } +} +@-webkit-keyframes fade-up +{ + 0% + { + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + + opacity: 0; + } +} +@keyframes fade-up +{ + 0% + { + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + + opacity: 0; + } +} +@-webkit-keyframes fade-down +{ + 0% + { + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateY(20px); + transform: translateY(20px); + + opacity: 0; + } +} +@keyframes fade-down +{ + 0% + { + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + } + 75% + { + -webkit-transform: translateY(20px); + transform: translateY(20px); + + opacity: 0; + } +} +@-webkit-keyframes tada +{ + from + { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, + 20% + { + -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); + transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); + } + + 30%, + 50%, + 70%, + 90% + { + -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); + transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); + } + + 40%, + 60%, + 80% + { + -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); + transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg); + } + + to + { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes tada +{ + from + { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + + 10%, + 20% + { + -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); + transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg); + } + + 30%, + 50%, + 70%, + 90% + { + -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); + transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg); + } + + 40%, + 60%, + 80% + { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + + to + { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} +.bx-spin +{ + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} +.bx-spin-hover:hover +{ + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; +} + +.bx-tada +{ + -webkit-animation: tada 1.5s ease infinite; + animation: tada 1.5s ease infinite; +} +.bx-tada-hover:hover +{ + -webkit-animation: tada 1.5s ease infinite; + animation: tada 1.5s ease infinite; +} + +.bx-flashing +{ + -webkit-animation: flashing 1.5s infinite linear; + animation: flashing 1.5s infinite linear; +} +.bx-flashing-hover:hover +{ + -webkit-animation: flashing 1.5s infinite linear; + animation: flashing 1.5s infinite linear; +} + +.bx-burst +{ + -webkit-animation: burst 1.5s infinite linear; + animation: burst 1.5s infinite linear; +} +.bx-burst-hover:hover +{ + -webkit-animation: burst 1.5s infinite linear; + animation: burst 1.5s infinite linear; +} +.bx-fade-up +{ + -webkit-animation: fade-up 1.5s infinite linear; + animation: fade-up 1.5s infinite linear; +} +.bx-fade-up-hover:hover +{ + -webkit-animation: fade-up 1.5s infinite linear; + animation: fade-up 1.5s infinite linear; +} +.bx-fade-down +{ + -webkit-animation: fade-down 1.5s infinite linear; + animation: fade-down 1.5s infinite linear; +} +.bx-fade-down-hover:hover +{ + -webkit-animation: fade-down 1.5s infinite linear; + animation: fade-down 1.5s infinite linear; +} +.bx-fade-left +{ + -webkit-animation: fade-left 1.5s infinite linear; + animation: fade-left 1.5s infinite linear; +} +.bx-fade-left-hover:hover +{ + -webkit-animation: fade-left 1.5s infinite linear; + animation: fade-left 1.5s infinite linear; +} +.bx-fade-right +{ + -webkit-animation: fade-right 1.5s infinite linear; + animation: fade-right 1.5s infinite linear; +} +.bx-fade-right-hover:hover +{ + -webkit-animation: fade-right 1.5s infinite linear; + animation: fade-right 1.5s infinite linear; +} +.bx-xs +{ + font-size: 1rem!important; +} +.bx-sm +{ + font-size: 1.55rem!important; +} +.bx-md +{ + font-size: 2.25rem!important; +} +.bx-lg +{ + font-size: 3.0rem!important; +} +.bx-fw +{ + font-size: 1.2857142857em; + line-height: .8em; + + width: 1.2857142857em; + height: .8em; + margin-top: -.2em!important; + + vertical-align: middle; +} +.bx-pull-left +{ + float: left; + + margin-right: .3em!important; +} +.bx-pull-right +{ + float: right; + + margin-left: .3em!important; +} +.bx-rotate-90 +{ + transform: rotate(90deg); + + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; +} +.bx-rotate-180 +{ + transform: rotate(180deg); + + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; +} +.bx-rotate-270 +{ + transform: rotate(270deg); + + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; +} +.bx-flip-horizontal +{ + transform: scaleX(-1); + + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)'; +} +.bx-flip-vertical +{ + transform: scaleY(-1); + + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; +} +.bx-border +{ + padding: .25em; + + border: .07em solid rgba(0,0,0,.1); + border-radius: .25em; +} +.bx-border-circle +{ + padding: .25em; + + border: .07em solid rgba(0,0,0,.1); + border-radius: 50%; +} diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 9eda93e3e..86266ef5d 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1,3 +1,5 @@ +@import "./boxicons-compat.css"; + @font-face { font-family: Montserrat; src: url(../fonts/Montserrat-Light.ttf);