diff --git a/styles.css b/styles.css index 8088e03..4e3d113 100755 --- a/styles.css +++ b/styles.css @@ -215,6 +215,7 @@ iframe { transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } + .bounce { animation-name: bounce; transform-origin: center bottom; } @@ -224,6 +225,7 @@ iframe { opacity: 1; } 25%, 75% { opacity: 0; } } + .flash { animation-name: flash; } @@ -235,6 +237,7 @@ iframe { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } + .pulse { animation-name: pulse; } @@ -249,6 +252,7 @@ iframe { transform: scale(1.3); } 70% { transform: scale(1); } } + .heartBeat { animation-name: heartBeat; animation-duration: calc(var(--animate-duration) * 1.3); @@ -269,6 +273,7 @@ iframe { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } + .rubberBand { animation-name: rubberBand; } @@ -279,6 +284,7 @@ iframe { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } + .shake { animation-name: shake; } @@ -295,6 +301,7 @@ iframe { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } + .headShake { animation-timing-function: ease-in-out; animation-name: headShake; } @@ -310,6 +317,7 @@ iframe { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } + .swing { transform-origin: top center; animation-name: swing; } @@ -325,6 +333,7 @@ iframe { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } + .tada { animation-name: tada; } @@ -344,6 +353,7 @@ iframe { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: none; } } + .wobble { animation-name: wobble; } @@ -361,9 +371,10 @@ iframe { 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { - transform: skewX(0.390625deg) skewY(0.390625deg); } + transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { - transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } + transform: skewX(-0.19531deg) skewY(-0.19531deg); } } + .jello { animation-name: jello; transform-origin: center; } @@ -386,6 +397,7 @@ iframe { to { opacity: 1; transform: scale3d(1, 1, 1); } } + .bounceIn { animation-name: bounceIn; } @@ -404,6 +416,7 @@ iframe { transform: translate3d(0, 5px, 0); } to { transform: none; } } + .bounceInDown { animation-name: bounceInDown; } @@ -422,6 +435,7 @@ iframe { transform: translate3d(5px, 0, 0); } to { transform: none; } } + .bounceInLeft { animation-name: bounceInLeft; } @@ -440,6 +454,7 @@ iframe { transform: translate3d(-5px, 0, 0); } to { transform: none; } } + .bounceInRight { animation-name: bounceInRight; } @@ -458,6 +473,7 @@ iframe { transform: translate3d(0, -5px, 0); } to { transform: translate3d(0, 0, 0); } } + .bounceInUp { animation-name: bounceInUp; } @@ -470,6 +486,7 @@ iframe { to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } + .bounceOut { animation-name: bounceOut; } @@ -482,6 +499,7 @@ iframe { to { opacity: 0; transform: translate3d(0, 2000px, 0); } } + .bounceOutDown { animation-name: bounceOutDown; } @@ -492,6 +510,7 @@ iframe { to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } + .bounceOutLeft { animation-name: bounceOutLeft; } @@ -502,6 +521,7 @@ iframe { to { opacity: 0; transform: translate3d(2000px, 0, 0); } } + .bounceOutRight { animation-name: bounceOutRight; } @@ -514,6 +534,7 @@ iframe { to { opacity: 0; transform: translate3d(0, -2000px, 0); } } + .bounceOutUp { animation-name: bounceOutUp; } @@ -522,6 +543,7 @@ iframe { opacity: 0; } to { opacity: 1; } } + .fadeIn { animation-name: fadeIn; } @@ -532,6 +554,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInDown { animation-name: fadeInDown; } @@ -542,6 +565,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInDownBig { animation-name: fadeInDownBig; } @@ -552,6 +576,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInLeft { animation-name: fadeInLeft; } @@ -562,6 +587,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInLeftBig { animation-name: fadeInLeftBig; } @@ -572,6 +598,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInRight { animation-name: fadeInRight; } @@ -582,6 +609,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInRightBig { animation-name: fadeInRightBig; } @@ -592,6 +620,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInUp { animation-name: fadeInUp; } @@ -602,6 +631,7 @@ iframe { to { opacity: 1; transform: none; } } + .fadeInUpBig { animation-name: fadeInUpBig; } @@ -610,6 +640,7 @@ iframe { opacity: 1; } to { opacity: 0; } } + .fadeOut { animation-name: fadeOut; } @@ -619,6 +650,7 @@ iframe { to { opacity: 0; transform: translate3d(0, 100%, 0); } } + .fadeOutDown { animation-name: fadeOutDown; } @@ -628,6 +660,7 @@ iframe { to { opacity: 0; transform: translate3d(0, 2000px, 0); } } + .fadeOutDownBig { animation-name: fadeOutDownBig; } @@ -637,6 +670,7 @@ iframe { to { opacity: 0; transform: translate3d(-100%, 0, 0); } } + .fadeOutLeft { animation-name: fadeOutLeft; } @@ -646,6 +680,7 @@ iframe { to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } + .fadeOutLeftBig { animation-name: fadeOutLeftBig; } @@ -655,6 +690,7 @@ iframe { to { opacity: 0; transform: translate3d(100%, 0, 0); } } + .fadeOutRight { animation-name: fadeOutRight; } @@ -664,6 +700,7 @@ iframe { to { opacity: 0; transform: translate3d(2000px, 0, 0); } } + .fadeOutRightBig { animation-name: fadeOutRightBig; } @@ -673,6 +710,7 @@ iframe { to { opacity: 0; transform: translate3d(0, -100%, 0); } } + .fadeOutUp { animation-name: fadeOutUp; } @@ -682,6 +720,7 @@ iframe { to { opacity: 0; transform: translate3d(0, -2000px, 0); } } + .fadeOutUpBig { animation-name: fadeOutUpBig; } @@ -701,6 +740,7 @@ iframe { to { transform: perspective(400px); animation-timing-function: ease-in; } } + .animated.flip { backface-visibility: visible; animation-name: flip; } @@ -720,6 +760,7 @@ iframe { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } + .flipInX { backface-visibility: visible !important; animation-name: flipInX; } @@ -739,6 +780,7 @@ iframe { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } + .flipInY { backface-visibility: visible !important; animation-name: flipInY; } @@ -752,6 +794,7 @@ iframe { to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } + .flipOutX { animation-name: flipOutX; backface-visibility: visible !important; } @@ -765,6 +808,7 @@ iframe { to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } + .flipOutY { backface-visibility: visible !important; animation-name: flipOutY; } @@ -782,6 +826,7 @@ iframe { to { transform: none; opacity: 1; } } + .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; } @@ -792,6 +837,7 @@ iframe { to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } + .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; } @@ -805,6 +851,7 @@ iframe { transform-origin: center; transform: none; opacity: 1; } } + .rotateIn { animation-name: rotateIn; } @@ -817,6 +864,7 @@ iframe { transform-origin: left bottom; transform: none; opacity: 1; } } + .rotateInDownLeft { animation-name: rotateInDownLeft; } @@ -829,6 +877,7 @@ iframe { transform-origin: right bottom; transform: none; opacity: 1; } } + .rotateInDownRight { animation-name: rotateInDownRight; } @@ -841,6 +890,7 @@ iframe { transform-origin: left bottom; transform: none; opacity: 1; } } + .rotateInUpLeft { animation-name: rotateInUpLeft; } @@ -853,6 +903,7 @@ iframe { transform-origin: right bottom; transform: none; opacity: 1; } } + .rotateInUpRight { animation-name: rotateInUpRight; } @@ -864,6 +915,7 @@ iframe { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } + .rotateOut { animation-name: rotateOut; } @@ -875,6 +927,7 @@ iframe { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } + .rotateOutDownLeft { animation-name: rotateOutDownLeft; } @@ -886,6 +939,7 @@ iframe { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } + .rotateOutDownRight { animation-name: rotateOutDownRight; } @@ -897,6 +951,7 @@ iframe { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } + .rotateOutUpLeft { animation-name: rotateOutUpLeft; } @@ -908,6 +963,7 @@ iframe { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } + .rotateOutUpRight { animation-name: rotateOutUpRight; } @@ -927,6 +983,7 @@ iframe { to { transform: translate3d(0, 700px, 0); opacity: 0; } } + .hinge { animation-name: hinge; } @@ -938,6 +995,7 @@ iframe { to { opacity: 1; transform: none; } } + .rollIn { animation-name: rollIn; } @@ -948,6 +1006,7 @@ iframe { to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } + .rollOut { animation-name: rollOut; } @@ -957,6 +1016,7 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } + .zoomIn { animation-name: zoomIn; } @@ -969,6 +1029,7 @@ iframe { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } + .zoomInDown { animation-name: zoomInDown; } @@ -981,6 +1042,7 @@ iframe { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } + .zoomInLeft { animation-name: zoomInLeft; } @@ -993,6 +1055,7 @@ iframe { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } + .zoomInRight { animation-name: zoomInRight; } @@ -1005,6 +1068,7 @@ iframe { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } + .zoomInUp { animation-name: zoomInUp; } @@ -1016,6 +1080,7 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } + .zoomOut { animation-name: zoomOut; } @@ -1029,6 +1094,7 @@ iframe { transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } + .zoomOutDown { animation-name: zoomOutDown; } @@ -1040,6 +1106,7 @@ iframe { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } + .zoomOutLeft { animation-name: zoomOutLeft; } @@ -1051,6 +1118,7 @@ iframe { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } + .zoomOutRight { animation-name: zoomOutRight; } @@ -1064,6 +1132,7 @@ iframe { transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } + .zoomOutUp { animation-name: zoomOutUp; } @@ -1073,6 +1142,7 @@ iframe { visibility: visible; } to { transform: translate3d(0, 0, 0); } } + .slideInDown { animation-name: slideInDown; } @@ -1082,6 +1152,7 @@ iframe { visibility: visible; } to { transform: translate3d(0, 0, 0); } } + .slideInLeft { animation-name: slideInLeft; } @@ -1091,6 +1162,7 @@ iframe { visibility: visible; } to { transform: translate3d(0, 0, 0); } } + .slideInRight { animation-name: slideInRight; } @@ -1100,6 +1172,7 @@ iframe { visibility: visible; } to { transform: translate3d(0, 0, 0); } } + .slideInUp { animation-name: slideInUp; } @@ -1109,6 +1182,7 @@ iframe { to { visibility: hidden; transform: translate3d(0, 100%, 0); } } + .slideOutDown { animation-name: slideOutDown; } @@ -1118,6 +1192,7 @@ iframe { to { visibility: hidden; transform: translate3d(-100%, 0, 0); } } + .slideOutLeft { animation-name: slideOutLeft; } @@ -1127,6 +1202,7 @@ iframe { to { visibility: hidden; transform: translate3d(100%, 0, 0); } } + .slideOutRight { animation-name: slideOutRight; } @@ -1136,6 +1212,7 @@ iframe { to { visibility: hidden; transform: translate3d(0, -100%, 0); } } + .slideOutUp { animation-name: slideOutUp; } @@ -1147,6 +1224,7 @@ iframe { background-color: transparent; } to { background-color: #81e27d; } } + .redFade { animation-name: redFade; } @@ -1155,6 +1233,7 @@ iframe { background-color: transparent; } to { background-color: #ee5649; } } + .redCircleFade { animation-name: redCircleFade; } @@ -1165,6 +1244,7 @@ iframe { background-color: #ee5649; } 100% { background-color: transparent; } } + .greenCircleFade { animation-name: greenCircleFade; } @@ -1175,6 +1255,7 @@ iframe { background-color: #81e27d; } 100% { background-color: transparent; } } + .container-fluid, .container { box-sizing: border-box; } @@ -1380,13 +1461,10 @@ iframe { @media only screen and (min-width: 48em) { .sm-hidden { display: block; } - .container { width: 46rem; } - .xs-col-table { display: inherit; } - .col-sm, .col-sm-1, .col-sm-2, @@ -1403,140 +1481,103 @@ iframe { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; } - .col-sm { flex-grow: 1; flex-basis: 0; max-width: 100%; } - .col-sm-1 { flex-basis: 8.333%; max-width: 8.333%; } - .col-sm-2 { flex-basis: 16.667%; max-width: 16.667%; } - .col-sm-3 { flex-basis: 25%; max-width: 25%; } - .col-sm-4 { flex-basis: 33.333%; max-width: 33.333%; } - .col-sm-5 { flex-basis: 41.667%; max-width: 41.667%; } - .col-sm-6 { flex-basis: 50%; max-width: 50%; } - .col-sm-7 { flex-basis: 58.333%; max-width: 58.333%; } - .col-sm-8 { flex-basis: 66.667%; max-width: 66.667%; } - .col-sm-9 { flex-basis: 75%; max-width: 75%; } - .col-sm-10 { flex-basis: 83.333%; max-width: 83.333%; } - .col-sm-11 { flex-basis: 91.667%; max-width: 91.667%; } - .col-sm-12 { flex-basis: 100%; max-width: 100%; } - .col-sm-offset-1 { margin-left: 8.333%; } - .col-sm-offset-2 { margin-left: 16.667%; } - .col-sm-offset-3 { margin-left: 25%; } - .col-sm-offset-4 { margin-left: 33.333%; } - .col-sm-offset-5 { margin-left: 41.667%; } - .col-sm-offset-6 { margin-left: 50%; } - .col-sm-offset-7 { margin-left: 58.333%; } - .col-sm-offset-8 { margin-left: 66.667%; } - .col-sm-offset-9 { margin-left: 75%; } - .col-sm-offset-10 { margin-left: 83.333%; } - .col-sm-offset-11 { margin-left: 91.667%; } - .start-sm { justify-content: flex-start; text-align: start; } - .center-sm { justify-content: center; text-align: center; } - .end-sm { justify-content: flex-end; text-align: end; } - .top-sm { align-items: flex-start; } - .middle-sm { align-items: center; } - .bottom-sm { align-items: flex-end; } - .around-sm { justify-content: space-around; } - .between-sm { justify-content: space-between; } - .first-sm { order: -1; } - .last-sm { order: 1; } } + @media only screen and (min-width: 62em) { .col-simple .row { flex-direction: row; } .col-simple .col-xs-12 { flex-basis: 100%; } - .md-hidden { display: block; } - .container { width: 61rem; } - .md-col-table { display: inherit; } - .col-md, .col-md-1, .col-md-2, @@ -1553,135 +1594,99 @@ iframe { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; } - .col-md { flex-grow: 1; flex-basis: 0; max-width: 100%; } - .col-md-1 { flex-basis: 8.333%; max-width: 8.333%; } - .col-md-2 { flex-basis: 16.667%; max-width: 16.667%; } - .col-md-3 { flex-basis: 25%; max-width: 25%; } - .col-md-4 { flex-basis: 33.333%; max-width: 33.333%; } - .col-md-5 { flex-basis: 41.667%; max-width: 41.667%; } - .col-md-6 { flex-basis: 50%; max-width: 50%; } - .col-md-7 { flex-basis: 58.333%; max-width: 58.333%; } - .col-md-8 { flex-basis: 66.667%; max-width: 66.667%; } - .col-md-9 { flex-basis: 75%; max-width: 75%; } - .col-md-10 { flex-basis: 83.333%; max-width: 83.333%; } - .col-md-11 { flex-basis: 91.667%; max-width: 91.667%; } - .col-md-12 { flex-basis: 100%; max-width: 100%; } - .col-md-offset-1 { margin-left: 8.333%; } - .col-md-offset-2 { margin-left: 16.667%; } - .col-md-offset-3 { margin-left: 25%; } - .col-md-offset-4 { margin-left: 33.333%; } - .col-md-offset-5 { margin-left: 41.667%; } - .col-md-offset-6 { margin-left: 50%; } - .col-md-offset-7 { margin-left: 58.333%; } - .col-md-offset-8 { margin-left: 66.667%; } - .col-md-offset-9 { margin-left: 75%; } - .col-md-offset-10 { margin-left: 83.333%; } - .col-md-offset-11 { margin-left: 91.667%; } - .start-md { justify-content: flex-start; text-align: start; } - .center-md { justify-content: center; text-align: center; } - .end-md { justify-content: flex-end; text-align: end; } - .top-md { align-items: flex-start; } - .middle-md { align-items: center; } - .bottom-md { align-items: flex-end; } - .around-md { justify-content: space-around; } - .between-md { justify-content: space-between; } - .first-md { order: -1; } - .last-md { order: 1; } } + @media only screen and (min-width: 75em) { .lg-hidden { display: block; } - .container { width: 71rem; } - .lg-col-table { display: inherit; } - .col-lg, .col-lg-1, .col-lg-2, @@ -1698,125 +1703,92 @@ iframe { box-sizing: border-box; flex: 0 0 auto; padding-right: 1rem; } - .col-lg { flex-grow: 1; flex-basis: 0; max-width: 100%; } - .col-lg-1 { flex-basis: 8.333%; max-width: 8.333%; } - .col-lg-2 { flex-basis: 16.667%; max-width: 16.667%; } - .col-lg-3 { flex-basis: 25%; max-width: 25%; } - .col-lg-4 { flex-basis: 33.333%; max-width: 33.333%; } - .col-lg-5 { flex-basis: 41.667%; max-width: 41.667%; } - .col-lg-6 { flex-basis: 50%; max-width: 50%; } - .col-lg-7 { flex-basis: 58.333%; max-width: 58.333%; } - .col-lg-8 { flex-basis: 66.667%; max-width: 66.667%; } - .col-lg-9 { flex-basis: 75%; max-width: 75%; } - .col-lg-10 { flex-basis: 83.333%; max-width: 83.333%; } - .col-lg-11 { flex-basis: 91.667%; max-width: 91.667%; } - .col-lg-12 { flex-basis: 100%; max-width: 100%; } - .col-lg-offset-1 { margin-left: 8.333%; } - .col-lg-offset-2 { margin-left: 16.667%; } - .col-lg-offset-3 { margin-left: 25%; } - .col-lg-offset-4 { margin-left: 33.333%; } - .col-lg-offset-5 { margin-left: 41.667%; } - .col-lg-offset-6 { margin-left: 50%; } - .col-lg-offset-7 { margin-left: 58.333%; } - .col-lg-offset-8 { margin-left: 66.667%; } - .col-lg-offset-9 { margin-left: 75%; } - .col-lg-offset-10 { margin-left: 83.333%; } - .col-lg-offset-11 { margin-left: 91.667%; } - .start-lg { justify-content: flex-start; text-align: start; } - .center-lg { justify-content: center; text-align: center; } - .end-lg { justify-content: flex-end; text-align: end; } - .top-lg { align-items: flex-start; } - .middle-lg { align-items: center; } - .bottom-lg { align-items: flex-end; } - .around-lg { justify-content: space-around; } - .between-lg { justify-content: space-between; } - .first-lg { order: -1; } - .last-lg { order: 1; } } + .portlet-body > article { padding: 0; } @@ -1974,6 +1946,7 @@ div.sticky, section.sticky { @media (max-width: 768px) { .form-group { flex-direction: column; } } + .wf-100 { width: 100%; } @@ -2048,6 +2021,7 @@ p { background-position: 0; } 100% { background-position: -100%; } } + .tooltip { cursor: pointer; color: var(--box-highlight); @@ -2084,6 +2058,7 @@ p { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } + @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); @@ -2094,6 +2069,7 @@ p { 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } + .spinner-2 { text-align: center; } .spinner-2 > div { @@ -2116,6 +2092,7 @@ p { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } + @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); @@ -2123,6 +2100,7 @@ p { 40% { -webkit-transform: scale(1); transform: scale(1); } } + .spinner-3 { width: 40px; height: 40px; @@ -2138,6 +2116,7 @@ p { 100% { -webkit-transform: scale(1); opacity: 0; } } + @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); @@ -2146,6 +2125,7 @@ p { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } + canvas { background: #fff; user-select: none; } @@ -2154,18 +2134,23 @@ canvas { form li { margin: 5px 0 5px 0; } + form td { white-space: nowrap; padding-bottom: 5px; } form td textarea + i { vertical-align: top; } + form label { font-size: .9rem; color: black; } + form i + i { margin-left: 3px; } + form .layout td + td { padding-left: 5px; } + form .list { font-size: 1rem; } form .list td { @@ -2199,14 +2184,17 @@ img.frame-1 { border: 1px solid var(--box-border); box-sizing: border-box; width: 100%; } + img.frame-2 { border: 1px solid var(--box-border); background: #fff; box-sizing: border-box; width: 100%; } + img.rounded { border-radius: 50%; background: #fff; } + img.bordered { border: 1px solid var(--box-border); } @@ -2425,10 +2413,10 @@ input[type="datetime-local"] { height: auto; box-shadow: none; /* - &:hover, &:focus { - background: var(--button-colored-background-hover); - } - */ } + &:hover, &:focus { + background: var(--button-colored-background-hover); + } + */ } .inputWrapper .textWrapper { flex: 1; position: relative; } @@ -2463,8 +2451,10 @@ input[type="datetime-local"] { .clickPopup label + input { display: none; } + .clickPopup .more-functions { padding: 0 1rem 0 1rem; } + .clickPopup .popup { box-sizing: border-box; padding: .5rem 1rem .5rem 1rem; @@ -2508,9 +2498,9 @@ input[type="datetime-local"] { .clickPopup .popup > li a { display: block; /* - &:hover, &:focus { - } - */ } + &:hover, &:focus { + } + */ } .clickPopup .popup i { flex-grow: 0; } @@ -2555,6 +2545,7 @@ textarea:invalid, input:invalid { input:valid ~ i.ok { display: inline-block !important; } + input:valid ~ i.error { display: none !important; } @@ -2605,6 +2596,7 @@ label.radio .checkmark { height: 5px; border-radius: 50%; background: #fff; } + label.checkbox .checkmark:after { top: 2px; left: 4px; @@ -2767,16 +2759,20 @@ select.plain { flex-grow: 1; } .more-container > label i { flex-grow: 0; } + .more-container > input { display: none; } + .more-container > input:checked + label { border-bottom: none; margin-bottom: 1rem; } .more-container > input:checked + label .expand { transition: all .3s ease; transform: rotateZ(90deg); } + .more-container > input:checked ~ div { display: block; } + .more-container > div { display: none; } @@ -2829,6 +2825,7 @@ select.plain { left: -300%; } 100% { left: -400%; } } + div.slider-1 { overflow: hidden; } div.slider-1 figure { @@ -2910,7 +2907,7 @@ div.slider-1 { width: 100%; } @keyframes carousel { - 0%, 17.5% { + 0%, 17.5% { transform: translateZ(-35vw) rotateY(0); } 27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); } @@ -2918,6 +2915,7 @@ div.slider-1 { transform: translateZ(-35vw) rotateY(-240deg); } 82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); } } + pre { border: 1px solid var(--box-border); background: #ccc; @@ -2989,12 +2987,16 @@ blockquote { top: 50%; margin-top: -20px; left: 100%; } + .crumbs-1 li.active:not(:last-child):after, .crumbs-1 li:hover:not(:last-child):after { color: var(--text-on-background-color-2); } + .crumbs-1 li.active:not(:last-child):after { border-left: 14px solid var(--button-colored-background); } + .crumbs-1 li:hover:not(:last-child):after { border-left: 14px solid var(--button-colored-background-hover); } + .crumbs-1 :last-child:before { border: none; } @@ -3247,25 +3249,27 @@ body > nav { @media only screen and (max-width: 800px) { #nav-trigger:not(:checked) + nav { width: 0%; } - #nav-trigger:checked + nav { width: auto; min-width: 250px; } } + @media only screen and (max-width: 500px) { #nav-trigger:checked + nav { width: 100%; } - #nav-trigger:checked ~ main { display: none; } } + .pagination li { display: inline-block; } .pagination li + li { margin-left: .5rem; } + .pagination a { display: inline-block; border-radius: 3px; background: #ccc; padding: 5px 10px 5px 10px; } + .pagination .active, .pagination a:hover, .pagination a:active { color: #000; background: #fff; } @@ -3322,6 +3326,7 @@ body > nav { background-position: 0 0; } 100% { background-position: 50px 50px; } } + .noanimation > span > span, .noanimation > span:after { -webkit-animation: none; } @@ -3458,6 +3463,7 @@ section header > h1 { padding-bottom: 5px; font-size: 1.1em; border-bottom: 1px solid #e1e1e1; } + section > h2 { box-sizing: border-box; font-size: 1.2em; @@ -3470,6 +3476,7 @@ section > h2 { .pagebreak { page-break-after: always; display: block; } } + .tabview .tab-links { color: #000; padding: 5px 0 0 0; } @@ -3493,6 +3500,7 @@ section > h2 { cursor: default; } .tabview .tab-links li { display: inline-block; } + .tabview .tab-content { display: flex; flex: 1; } @@ -3504,8 +3512,10 @@ section > h2 { display: flex; flex: 1; flex-direction: column; } + .tabview .tab { max-width: 100%; } + .tabview.right > .box { order: 2; } @@ -3521,13 +3531,16 @@ section > h2 { background: var(--button-colored-background); } .tab-1 .tab-links li { margin: 0 5px 0 0; } + .tab-1 .tab { max-width: 100%; } + .tab-1 .tab-content { box-sizing: border-box; border: 1px solid var(--button-colored-background); background: #fff; padding: 10px; } + .tab-1.left, .tab-1.right { display: flex; } .tab-1.left .tab-links, .tab-1.right .tab-links { @@ -3572,17 +3585,23 @@ section > h2 { table.fixed { table-layout: fixed; } + table input[type=radio]:checked + i { color: var(--button-colored-background); } + table input[type=checkbox]:checked + label i { color: var(--button-colored-background); } + table .order-up, table .order-down { cursor: pointer; } + table .sort-asc, table .sort-desc, table .filter { padding: 0 2px 0 2px; cursor: pointer; } + table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { display: none; } + table.default.sticky { position: relative; } table.default.sticky thead th, table.default.sticky thead td { @@ -3592,6 +3611,7 @@ table.default.sticky { z-index: 2; } table.default.sticky thead th > *, table.default.sticky thead td > * { vertical-align: middle; } + table.default { width: 100%; max-width: 100%; @@ -3654,9 +3674,11 @@ table.default { table.default tfoot td { text-align: center; padding-top: 10px; } + table.list th { text-align: left; padding: 2px 0 2px 0; } + table.list td { padding: 2px 5px 2px 5px; } @@ -3664,6 +3686,7 @@ thead input[type=radio] { padding: 0; margin: 0; display: none; } + thead i.fa { color: #888; } @@ -3741,6 +3764,7 @@ thead i.fa { font-weight: bold; } table.table tfoot { display: none; } } + span.tag { cursor: pointer; border-radius: 4px;