diff --git a/alert.scss b/alert.scss index 41fcf8c..634ae65 100755 --- a/alert.scss +++ b/alert.scss @@ -1,5 +1,3 @@ - - .log-msg { padding: 1rem; margin: 1rem; diff --git a/alignment.scss b/alignment.scss index 36cbe5b..bb4d91a 100755 --- a/alignment.scss +++ b/alignment.scss @@ -1,3 +1,7 @@ +.nobreak, .nowrap { + white-space: nowrap; +} + .center { margin: 0 auto; } @@ -35,7 +39,3 @@ .overflowfix { overflow: auto; } - -.nowrap { - white-space: nowrap; -} \ No newline at end of file diff --git a/badge.scss b/badge.scss deleted file mode 100755 index e69de29..0000000 diff --git a/button.scss b/button.scss index 6dcf3c1..e0e0311 100755 --- a/button.scss +++ b/button.scss @@ -9,7 +9,6 @@ button, input[type="submit"], input[type="button"], label.button, a.button { min-width: 70px; background: var(--button-colored-background); color: var(--text-on-background-color-2); - margin: 0; padding: 0 1rem 0 1rem; flex-grow: 0; height: 32px; @@ -82,15 +81,19 @@ button.disabled, .button.disabled, input[type="submit"].disabled { .link.default { color: var(--button-colored-background); } + .link.save { color: #8fff79; } + .link.cancel { color: #ee5649; } + .link.close { color: #fffc3e; } + .link.disabled { color: #e1e1e1; } \ No newline at end of file diff --git a/canvas.scss b/canvas.scss index cc777ac..da67c8d 100755 --- a/canvas.scss +++ b/canvas.scss @@ -1,10 +1,8 @@ - - canvas { background: #fff; user-select: none; -} -canvas.chart { - width: 100%; + &.chart { + width: 100%; + } } diff --git a/cookie_consent.scss b/cookie_consent.scss index 1bc1530..6be10a6 100644 --- a/cookie_consent.scss +++ b/cookie_consent.scss @@ -40,14 +40,14 @@ .consent_element { margin-top: 1rem; } -} -#cookieConsentForm form { - background : #fff; - border: 1px solid var(--box-border); - display: inline-block; - padding: 1rem; - border-radius: 3px; + form { + background : #fff; + border: 1px solid var(--box-border); + display: inline-block; + padding: 1rem; + border-radius: 3px; + } } #cookieConsentForm_defaultbuttons, diff --git a/form.scss b/form.scss index 0c71fbc..5358733 100755 --- a/form.scss +++ b/form.scss @@ -34,46 +34,3 @@ form { } } } - -.form-group { - display: flex; - flex-direction: row; - flex-wrap: wrap; - - > *:not(label) { - flex: 1; - } - - & + * { - margin-top: .75rem; - } - - label { - flex: 0 0 100%; - } - - .input-control { - flex: 1; - display: flex; - flex-direction: row; - flex-wrap: wrap; - - & +.input-control { - margin-left: 1rem; - } - } - - textarea, .contenteditable { - height: 8rem; - } -} - -* + .form-group { - margin-top: .75rem; -} - -@media (max-width: 768px) { - .form-group { - flex-direction: column; - } -} \ No newline at end of file diff --git a/grid.scss b/grid.scss index f0d787e..2942567 100755 --- a/grid.scss +++ b/grid.scss @@ -211,7 +211,7 @@ .end-xs { justify-content: flex-end; - text-align: end; + margin-left: auto; } .top-xs { diff --git a/input.scss b/input.scss index 1cc12e3..4005ead 100755 --- a/input.scss +++ b/input.scss @@ -368,33 +368,35 @@ label.radio, label.checkbox { } } -label.radio { - .checkmark { - border-radius: 50%; - - &:after { - top: 5px; - left: 5px; - width: 5px; - height: 5px; +label { + &.radio { + .checkmark { border-radius: 50%; - background: #fff; + + &:after { + top: 5px; + left: 5px; + width: 5px; + height: 5px; + border-radius: 50%; + background: #fff; + } } } -} -label.checkbox { - .checkmark { - &:after { - top: 2px; - left: 4px; - width: 4px; - height: 6px; - border: solid white; - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + &.checkbox { + .checkmark { + &:after { + top: 2px; + left: 4px; + width: 4px; + height: 6px; + border: solid white; + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } } } } @@ -472,9 +474,6 @@ select.plain { box-shadow: none; } -// * fix height definition (should be automatic) -// * fix close automatic if radio, if checkbox = multiple, don't close automatic -// * fix opening drop down when clicken on text instead of end of text area .dropdown { cursor: pointer; display: inline-block; diff --git a/layout.scss b/layout.scss index 4cc4b59..171c41a 100755 --- a/layout.scss +++ b/layout.scss @@ -36,4 +36,64 @@ div.sticky, section.sticky { .inline { display: inline; -} \ No newline at end of file +} + +.form-group { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + > *:not(label) { + flex: 1; + } + + & + * { + margin-top: .75rem; + } + + label { + flex: 0 0 100%; + } + + .input-control { + flex: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; + + & +.input-control { + margin-left: 1rem; + } + } + + textarea, .contenteditable { + height: 8rem; + } +} + +* + .form-group { + margin-top: .75rem; +} + +@media (max-width: 768px) { + .form-group { + flex-direction: column; + } +} + +@each $tuple in + 'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%, + 'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% { + .#{nth($tuple, 1)} { + width: #{nth($tuple, 2)}; + } +} + +.spacer { + padding: 5px; +} + +.resizable { + resize: both; + overflow: auto; +} diff --git a/note.scss b/note.scss deleted file mode 100755 index e69de29..0000000 diff --git a/popup.scss b/popup.scss deleted file mode 100755 index e69de29..0000000 diff --git a/portlet.scss b/portlet.scss index 014af6f..8f9dbb9 100755 --- a/portlet.scss +++ b/portlet.scss @@ -1,38 +1,22 @@ .portlet { border: 1px solid var(--box-border); - //box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3); box-sizing: border-box; margin-top: 1rem; - //overflow-x: auto; removed in order to prevent scroll bars for tooltips which are longer than the portlet (test in general settings view) - //border-top: 2px solid var(--box-highlight); - - //border-top-left-radius: 4px; - //border-top-right-radius: 4px; - //border-bottom-left-radius: 4px; - //border-bottom-right-radius: 4px; .portlet-head { background: #fff; - //border-top-left-radius: 4px; - //border-top-right-radius: 4px; border-bottom: 1px solid #ebedf2; padding: .7rem 1rem .7rem 1rem; font-weight: 300; display: flex; - flex: 0 1 auto; - flex-direction: row; } .portlet-foot { background: #fff; - //border-bottom-left-radius: 4px; - //border-bottom-right-radius: 4px; border-top: 1px solid #ebedf2; padding: .7rem 1rem .7rem 1rem; box-sizing: border-box; display: flex; - flex: 0 1 auto; - flex-direction: row; flex-wrap: wrap; column-gap: .5rem; } @@ -44,6 +28,46 @@ .portlet-separator { border-bottom: 1px solid #ebedf2; } + + &.highlight-1 { + background: var(--color-red); + color: #fff; + + .portlet-body, .portlet-head { + background: var(--color-red); + border: 0; + } + } + + &.highlight-2 { + background: var(--color-green); + color: #fff; + + .portlet-body, .portlet-head { + background: var(--color-green); + border: 0; + } + } + + &.highlight-3 { + background: var(--color-blue); + color: #fff; + + .portlet-body, .portlet-head { + background: var(--color-blue); + border: 0; + } + } + + &.highlight-4 { + background: var(--color-yellow); + color: #fff; + + .portlet-body, .portlet-head { + background: var(--color-yellow); + border: 0; + } + } } .plain-portlet { @@ -55,49 +79,4 @@ .portlet-body { background: #fff; padding: 1rem; - - //border-top-left-radius: 4px; - //border-top-right-radius: 4px; - //border-bottom-left-radius: 4px; - //border-bottom-right-radius: 4px; } - -.portlet.highlight-1 { - background: var(--color-red); - color: #fff; - - .portlet-body, .portlet-head { - background: var(--color-red); - border: 0; - } -} - -.portlet.highlight-2 { - background: var(--color-green); - color: #fff; - - .portlet-body, .portlet-head { - background: var(--color-green); - border: 0; - } -} - -.portlet.highlight-3 { - background: var(--color-blue); - color: #fff; - - .portlet-body, .portlet-head { - background: var(--color-blue); - border: 0; - } -} - -.portlet.highlight-4 { - background: var(--color-yellow); - color: #fff; - - .portlet-body, .portlet-head { - background: var(--color-yellow); - border: 0; - } -} \ No newline at end of file diff --git a/progress.scss b/progress.scss index 1d5d8ea..4f91679 100755 --- a/progress.scss +++ b/progress.scss @@ -1,5 +1,3 @@ - - .meter { height: 15px; /* Can be anything */ position: relative; @@ -17,6 +15,27 @@ position: relative; overflow: hidden; } + + &.orange > span { + background-color: #f1a165; + background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); + background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); + background-image: -webkit-linear-gradient(#f1a165, #f36d0a); + } + + &.blue > span { + background-color: #96c2f1; + background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); + background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3)); + background-image: -webkit-linear-gradient(#96c2f1, #4394f3); + } + + &.red > span { + background-color: #f0a3a3; + background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); + background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); + background-image: -webkit-linear-gradient(#f0a3a3, #f42323); + } } .meter > span:after, .animate > span > span { @@ -62,29 +81,6 @@ } } -.meter { - &.orange > span { - background-color: #f1a165; - background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); - background-image: -webkit-linear-gradient(#f1a165, #f36d0a); - } - - &.blue > span { - background-color: #96c2f1; - background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3)); - background-image: -webkit-linear-gradient(#96c2f1, #4394f3); - } - - &.red > span { - background-color: #f0a3a3; - background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); - background-image: -webkit-linear-gradient(#f0a3a3, #f42323); - } -} - .noanimation > span > span, .noanimation > span:after { -webkit-animation: none; } diff --git a/size.scss b/size.scss deleted file mode 100755 index 3809454..0000000 --- a/size.scss +++ /dev/null @@ -1,16 +0,0 @@ -@each $tuple in - 'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%, - 'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% { - .#{nth($tuple, 1)} { - width: #{nth($tuple, 2)}; - } -} - -.spacer { - padding: 5px; -} - -.resizable { - resize: both; - overflow: auto; -} diff --git a/styles.css b/styles.css index 2b766da..b973711 100755 --- a/styles.css +++ b/styles.css @@ -141,36 +141,8 @@ iframe { .x-overflow { overflow-x: auto; } -.wf-100 { - width: 100%; } - -.wf-80 { - width: 80%; } - -.wf-20 { - width: 20%; } - -.wf-66 { - width: 66.66%; } - -.wf-50 { - width: 50%; } - -.wf-33 { - width: 33.33%; } - -.wf-25 { - width: 25%; } - -.wf-75 { - width: 75%; } - -.spacer { - padding: 5px; } - -.resizable { - resize: both; - overflow: auto; } +.nobreak, .nowrap { + white-space: nowrap; } .center { margin: 0 auto; } @@ -201,9 +173,6 @@ iframe { .overflowfix { overflow: auto; } -.nowrap { - white-space: nowrap; } - .hidden { display: none !important; } @@ -254,7 +223,6 @@ iframe { 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } - @keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -274,7 +242,6 @@ iframe { 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } - .bounce { -webkit-animation-name: bounce; animation-name: bounce; @@ -286,13 +253,11 @@ iframe { opacity: 1; } 25%, 75% { opacity: 0; } } - @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } - .flash { -webkit-animation-name: flash; animation-name: flash; } @@ -308,7 +273,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); @@ -319,7 +283,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @@ -346,7 +309,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); @@ -369,7 +331,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @@ -384,7 +345,6 @@ iframe { 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } - @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); @@ -395,7 +355,6 @@ iframe { 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } - .shake { -webkit-animation-name: shake; animation-name: shake; } @@ -419,7 +378,6 @@ iframe { 50% { -webkit-transform: translateX(0); transform: translateX(0); } } - @keyframes headShake { 0% { -webkit-transform: translateX(0); @@ -439,7 +397,6 @@ iframe { 50% { -webkit-transform: translateX(0); transform: translateX(0); } } - .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; @@ -462,7 +419,6 @@ iframe { to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } - @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -479,7 +435,6 @@ iframe { to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } - .swing { -webkit-transform-origin: top center; transform-origin: top center; @@ -502,7 +457,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); @@ -519,7 +473,6 @@ iframe { to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .tada { -webkit-animation-name: tada; animation-name: tada; } @@ -547,7 +500,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes wobble { from { -webkit-transform: none; @@ -570,7 +522,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @@ -595,12 +546,11 @@ iframe { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { - -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); - transform: skewX(0.39062deg) skewY(0.39062deg); } + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: none; @@ -621,12 +571,11 @@ iframe { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { - -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); - transform: skewX(0.39062deg) skewY(0.39062deg); } + -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); + transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); } } - + -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; @@ -658,7 +607,6 @@ iframe { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -684,7 +632,6 @@ iframe { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } - .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @@ -710,7 +657,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -732,7 +678,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @@ -758,7 +703,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -780,7 +724,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @@ -806,7 +749,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -828,7 +770,6 @@ iframe { to { -webkit-transform: none; transform: none; } } - .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @@ -854,7 +795,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); @@ -876,7 +816,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @@ -893,7 +832,6 @@ iframe { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } - @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); @@ -906,7 +844,6 @@ iframe { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } - .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @@ -923,7 +860,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); @@ -936,7 +872,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @@ -950,7 +885,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - @keyframes bounceOutLeft { 20% { opacity: 1; @@ -960,7 +894,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @@ -974,7 +907,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - @keyframes bounceOutRight { 20% { opacity: 1; @@ -984,7 +916,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @@ -1001,7 +932,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); @@ -1014,7 +944,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @@ -1024,13 +953,11 @@ iframe { opacity: 0; } to { opacity: 1; } } - @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } - .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @@ -1044,7 +971,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInDown { from { opacity: 0; @@ -1054,7 +980,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @@ -1068,7 +993,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInDownBig { from { opacity: 0; @@ -1078,7 +1002,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @@ -1092,7 +1015,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInLeft { from { opacity: 0; @@ -1102,7 +1024,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @@ -1116,7 +1037,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInLeftBig { from { opacity: 0; @@ -1126,7 +1046,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @@ -1140,7 +1059,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInRight { from { opacity: 0; @@ -1150,7 +1068,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @@ -1164,7 +1081,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInRightBig { from { opacity: 0; @@ -1174,7 +1090,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @@ -1188,7 +1103,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInUp { from { opacity: 0; @@ -1198,7 +1112,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @@ -1212,7 +1125,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes fadeInUpBig { from { opacity: 0; @@ -1222,7 +1134,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @@ -1232,13 +1143,11 @@ iframe { opacity: 1; } to { opacity: 0; } } - @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } - .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @@ -1250,7 +1159,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - @keyframes fadeOutDown { from { opacity: 1; } @@ -1258,7 +1166,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @@ -1270,7 +1177,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - @keyframes fadeOutDownBig { from { opacity: 1; } @@ -1278,7 +1184,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } - .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @@ -1290,7 +1195,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - @keyframes fadeOutLeft { from { opacity: 1; } @@ -1298,7 +1202,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @@ -1310,7 +1213,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - @keyframes fadeOutLeftBig { from { opacity: 1; } @@ -1318,7 +1220,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } - .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @@ -1330,7 +1231,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - @keyframes fadeOutRight { from { opacity: 1; } @@ -1338,7 +1238,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @@ -1350,7 +1249,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - @keyframes fadeOutRightBig { from { opacity: 1; } @@ -1358,7 +1256,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } - .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @@ -1370,7 +1267,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - @keyframes fadeOutUp { from { opacity: 1; } @@ -1378,7 +1274,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @@ -1390,7 +1285,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - @keyframes fadeOutUpBig { from { opacity: 1; } @@ -1398,7 +1292,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } - .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @@ -1429,7 +1322,6 @@ iframe { transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); @@ -1456,7 +1348,6 @@ iframe { transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } - .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; @@ -1485,7 +1376,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); @@ -1508,7 +1398,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; @@ -1537,7 +1426,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); @@ -1560,7 +1448,6 @@ iframe { to { -webkit-transform: perspective(400px); transform: perspective(400px); } } - .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; @@ -1579,7 +1466,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } - @keyframes flipOutX { from { -webkit-transform: perspective(400px); @@ -1592,7 +1478,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } - .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; @@ -1611,7 +1496,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } - @keyframes flipOutY { from { -webkit-transform: perspective(400px); @@ -1624,7 +1508,6 @@ iframe { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } - .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; @@ -1648,7 +1531,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); @@ -1666,7 +1548,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; @@ -1680,7 +1561,6 @@ iframe { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } - @keyframes lightSpeedOut { from { opacity: 1; } @@ -1688,7 +1568,6 @@ iframe { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } - .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; @@ -1708,7 +1587,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateIn { from { -webkit-transform-origin: center; @@ -1722,7 +1600,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @@ -1740,7 +1617,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; @@ -1754,7 +1630,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @@ -1772,7 +1647,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; @@ -1786,7 +1660,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @@ -1804,7 +1677,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; @@ -1818,7 +1690,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @@ -1836,7 +1707,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; @@ -1850,7 +1720,6 @@ iframe { -webkit-transform: none; transform: none; opacity: 1; } } - .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @@ -1866,7 +1735,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - @keyframes rotateOut { from { -webkit-transform-origin: center; @@ -1878,7 +1746,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } - .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @@ -1894,7 +1761,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; @@ -1906,7 +1772,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } - .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @@ -1922,7 +1787,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; @@ -1934,7 +1798,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @@ -1950,7 +1813,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; @@ -1962,7 +1824,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } - .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @@ -1978,7 +1839,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; @@ -1990,7 +1850,6 @@ iframe { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } - .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @@ -2020,7 +1879,6 @@ iframe { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } - @keyframes hinge { 0% { -webkit-transform-origin: top left; @@ -2046,7 +1904,6 @@ iframe { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } - .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @@ -2061,7 +1918,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - @keyframes rollIn { from { opacity: 0; @@ -2071,7 +1927,6 @@ iframe { opacity: 1; -webkit-transform: none; transform: none; } } - .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @@ -2084,7 +1939,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - @keyframes rollOut { from { opacity: 1; } @@ -2092,7 +1946,6 @@ iframe { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } - .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @@ -2104,7 +1957,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } - @keyframes zoomIn { from { opacity: 0; @@ -2112,7 +1964,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } - .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @@ -2130,7 +1981,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInDown { from { opacity: 0; @@ -2144,7 +1994,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @@ -2162,7 +2011,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInLeft { from { opacity: 0; @@ -2176,7 +2024,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @@ -2194,7 +2041,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInRight { from { opacity: 0; @@ -2208,7 +2054,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @@ -2226,7 +2071,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomInUp { from { opacity: 0; @@ -2240,7 +2084,6 @@ iframe { transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @@ -2254,7 +2097,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } - @keyframes zoomOut { from { opacity: 1; } @@ -2264,7 +2106,6 @@ iframe { transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } - .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @@ -2284,7 +2125,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomOutDown { 40% { opacity: 1; @@ -2300,7 +2140,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @@ -2316,7 +2155,6 @@ iframe { transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } - @keyframes zoomOutLeft { 40% { opacity: 1; @@ -2328,7 +2166,6 @@ iframe { transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } - .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @@ -2344,7 +2181,6 @@ iframe { transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } - @keyframes zoomOutRight { 40% { opacity: 1; @@ -2356,7 +2192,6 @@ iframe { transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } - .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @@ -2376,7 +2211,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - @keyframes zoomOutUp { 40% { opacity: 1; @@ -2392,7 +2226,6 @@ iframe { transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } - .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @@ -2405,7 +2238,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); @@ -2414,7 +2246,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @@ -2427,7 +2258,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); @@ -2436,7 +2266,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @@ -2449,7 +2278,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); @@ -2458,7 +2286,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @@ -2471,7 +2298,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); @@ -2480,7 +2306,6 @@ iframe { to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } - .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @@ -2493,7 +2318,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); @@ -2502,7 +2326,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } - .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @@ -2515,7 +2338,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); @@ -2524,7 +2346,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } - .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @@ -2537,7 +2358,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); @@ -2546,7 +2366,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } - .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @@ -2559,7 +2378,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); @@ -2568,7 +2386,6 @@ iframe { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } - .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @@ -2744,7 +2561,7 @@ iframe { .end-xs { justify-content: flex-end; - text-align: end; } + margin-left: auto; } .top-xs { align-items: flex-start; } @@ -2770,10 +2587,13 @@ 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, @@ -2790,99 +2610,135 @@ 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) { .md-hidden { display: block; } + .container { width: 61rem; } + .md-col-table { display: inherit; } + .col-md, .col-md-1, .col-md-2, @@ -2899,99 +2755,135 @@ 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, @@ -3008,92 +2900,125 @@ 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; } @@ -3219,6 +3144,63 @@ div.sticky, section.sticky { .inline { display: inline; } +.form-group { + display: flex; + flex-direction: row; + flex-wrap: wrap; } + .form-group > *:not(label) { + flex: 1; } + .form-group + * { + margin-top: .75rem; } + .form-group label { + flex: 0 0 100%; } + .form-group .input-control { + flex: 1; + display: flex; + flex-direction: row; + flex-wrap: wrap; } + .form-group .input-control + .input-control { + margin-left: 1rem; } + .form-group textarea, .form-group .contenteditable { + height: 8rem; } + +* + .form-group { + margin-top: .75rem; } + +@media (max-width: 768px) { + .form-group { + flex-direction: column; } } +.wf-100 { + width: 100%; } + +.wf-80 { + width: 80%; } + +.wf-20 { + width: 20%; } + +.wf-66 { + width: 66.66%; } + +.wf-50 { + width: 50%; } + +.wf-33 { + width: 33.33%; } + +.wf-25 { + width: 25%; } + +.wf-75 { + width: 75%; } + +.spacer { + padding: 5px; } + +.resizable { + resize: both; + overflow: auto; } + *[draggable] { cursor: move; } @@ -3262,7 +3244,6 @@ p { background-position: 0; } 100% { background-position: -100%; } } - .tooltip { cursor: pointer; color: var(--box-highlight); @@ -3299,7 +3280,6 @@ 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); @@ -3310,7 +3290,6 @@ 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 { @@ -3333,7 +3312,6 @@ p { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1); } } - @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); @@ -3341,7 +3319,6 @@ p { 40% { -webkit-transform: scale(1); transform: scale(1); } } - .spinner-3 { width: 40px; height: 40px; @@ -3357,7 +3334,6 @@ p { 100% { -webkit-transform: scale(1); opacity: 0; } } - @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); @@ -3366,66 +3342,32 @@ p { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } - canvas { background: #fff; user-select: none; } - -canvas.chart { - width: 100%; } + canvas.chart { + width: 100%; } 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 { white-space: nowrap; padding: 3px 5px 3px 5px; } -.form-group { - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .form-group > *:not(label) { - flex: 1; } - .form-group + * { - margin-top: .75rem; } - .form-group label { - flex: 0 0 100%; } - .form-group .input-control { - flex: 1; - display: flex; - flex-direction: row; - flex-wrap: wrap; } - .form-group .input-control + .input-control { - margin-left: 1rem; } - .form-group textarea, .form-group .contenteditable { - height: 8rem; } - -* + .form-group { - margin-top: .75rem; } - -@media (max-width: 768px) { - .form-group { - flex-direction: column; } } - .infoIcon { width: var(--badge-size); text-align: center; @@ -3453,17 +3395,14 @@ 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); } @@ -3657,10 +3596,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; } @@ -3695,10 +3634,8 @@ 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; @@ -3742,9 +3679,9 @@ input[type="datetime-local"] { .clickPopup .popup > li a { display: block; /* - &:hover, &:focus { - } - */ } + &:hover, &:focus { + } + */ } .clickPopup .popup i { flex-grow: 0; } @@ -3789,7 +3726,6 @@ textarea:invalid, input:invalid { input:valid ~ i.ok { display: inline-block !important; } - input:valid ~ i.error { display: none !important; } @@ -4004,20 +3940,16 @@ 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; } @@ -4070,7 +4002,6 @@ select.plain { left: -300%; } 100% { left: -400%; } } - div.slider-1 { overflow: hidden; } div.slider-1 figure { @@ -4152,7 +4083,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); } @@ -4160,7 +4091,6 @@ 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; @@ -4232,16 +4162,12 @@ 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; } @@ -4255,7 +4181,6 @@ button, input[type="submit"], input[type="button"], label.button, a.button { min-width: 70px; background: var(--button-colored-background); color: var(--text-on-background-color-2); - margin: 0; padding: 0 1rem 0 1rem; flex-grow: 0; height: 32px; @@ -4495,27 +4420,25 @@ 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; } @@ -4533,6 +4456,21 @@ body > nav { background-image: linear-gradient(to left top, color-stop(0, #2bc253), color-stop(1, #54f054)); position: relative; overflow: hidden; } + .meter.orange > span { + background-color: #f1a165; + background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); + background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } + .meter.blue > span { + background-color: #96c2f1; + background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); + background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } + .meter.red > span { + background-color: #f0a3a3; + background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323)); + background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } .meter > span:after, .animate > span > span { content: ""; @@ -4557,25 +4495,6 @@ body > nav { background-position: 0 0; } 100% { background-position: 50px 50px; } } - -.meter.orange > span { - background-color: #f1a165; - background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a)); - background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } - -.meter.blue > span { - background-color: #96c2f1; - background-image: -moz-linear-gradient(top, #96c2f1, #4394f3); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #96c2f1), color-stop(1, #4394f3)); - background-image: -webkit-linear-gradient(#96c2f1, #4394f3); } - -.meter.red > span { - background-color: #f0a3a3; - background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323)); - background-image: -webkit-linear-gradient(#f0a3a3, #f42323); } - .noanimation > span > span, .noanimation > span:after { -webkit-animation: none; } @@ -4712,7 +4631,6 @@ 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; @@ -4725,7 +4643,6 @@ section > h2 { .pagebreak { page-break-after: always; display: block; } } - .tabview .tab-links { color: #000; padding: 0.3rem 0 0 0; } @@ -4749,23 +4666,20 @@ section > h2 { cursor: default; } .tabview .tab-links li { display: inline-block; } - .tabview .tab-content > input { display: none; } - .tabview .tab-content > input + div { display: none; } - .tabview .tab-content > input:checked + div { display: inherit; } .tab-1 .tab-links { margin: 0 0 10px 1px; /* - .active label { - border: 1px solid var(--box-border); - } - */ } + .active label { + border: 1px solid var(--box-border); + } + */ } .tab-1 .tab-links label { padding: 5px; background: none; @@ -4776,13 +4690,11 @@ section > h2 { background: var(--button-colored-background); } .tab-1 .tab-links li { margin: 0 5px 0 0; } - .tab-1 .tab-content { box-sizing: border-box; border: 1px solid var(--button-colored-background); background: #fff; padding: 10px; } - .tab-1.left { display: flex; } .tab-1.left .tab-links { @@ -4798,14 +4710,11 @@ section > h2 { .tab-2 .tab-links label { padding: 5px 10px 5px 10px; } - .tab-2 .tab-links li { margin: 0 5px 15px 0; } - .tab-2 .tab-links .active a, .tab-2 .tab-links .active label { color: var(--text-on-background-color-2); background: var(--button-colored-background); } - .tab-2.left { display: flex; } .tab-2.left .tab-links { @@ -4819,83 +4728,22 @@ section > h2 { .tab-2.left .tab-content { width: 100%; } +.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { + color: var(--button-colored-background); } + table.fixed { table-layout: fixed; } - -table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { - display: none; } - -table .order-up, table .order-down { - cursor: pointer; } - -table thead input[type=radio] { - padding: 0; - margin: 0; - display: none; } - -table thead i.fa { - color: #888; } - 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; } - -.fixed-1 td:nth-child(1) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-2 td:nth-child(2) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-3 td:nth-child(3) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-4 td:nth-child(4) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-5 td:nth-child(5) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-6 td:nth-child(6) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-7 td:nth-child(7) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-8 td:nth-child(8) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-9 td:nth-child(9) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - -.fixed-10 td:nth-child(10) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; } - +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 { @@ -4905,10 +4753,6 @@ table.default.sticky { z-index: 2; } table.default.sticky thead th > *, table.default.sticky thead td > * { vertical-align: middle; } - -.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { - color: var(--button-colored-background); } - table.default { width: 100%; max-width: 100%; @@ -4971,14 +4815,69 @@ 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; } +thead input[type=radio] { + padding: 0; + margin: 0; + display: none; } +thead i.fa { + color: #888; } + +.fixed-1 td:nth-child(1) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-2 td:nth-child(2) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-3 td:nth-child(3) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-4 td:nth-child(4) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-5 td:nth-child(5) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-6 td:nth-child(6) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-7 td:nth-child(7) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-8 td:nth-child(8) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-9 td:nth-child(9) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + +.fixed-10 td:nth-child(10) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } + @media screen and (max-width: 600px) { table.table { display: table; @@ -5003,10 +4902,6 @@ table.list td { font-weight: bold; } table.table tfoot { display: none; } } - -.nobreak { - white-space: nowrap; } - span.tag { cursor: pointer; border-radius: 4px; @@ -5102,21 +4997,44 @@ span.tag { background: #fff; border-bottom: 1px solid #ebedf2; padding: .7rem 1rem .7rem 1rem; - font-weight: 300; } + font-weight: 300; + display: flex; } .portlet .portlet-foot { background: #fff; border-top: 1px solid #ebedf2; padding: .7rem 1rem .7rem 1rem; box-sizing: border-box; display: flex; - flex: 0 1 auto; - flex-direction: row; flex-wrap: wrap; column-gap: .5rem; } .portlet .portlet-body > h2 { border-bottom: 1px solid #ebedf2; } .portlet .portlet-separator { border-bottom: 1px solid #ebedf2; } + .portlet.highlight-1 { + background: var(--color-red); + color: #fff; } + .portlet.highlight-1 .portlet-body, .portlet.highlight-1 .portlet-head { + background: var(--color-red); + border: 0; } + .portlet.highlight-2 { + background: var(--color-green); + color: #fff; } + .portlet.highlight-2 .portlet-body, .portlet.highlight-2 .portlet-head { + background: var(--color-green); + border: 0; } + .portlet.highlight-3 { + background: var(--color-blue); + color: #fff; } + .portlet.highlight-3 .portlet-body, .portlet.highlight-3 .portlet-head { + background: var(--color-blue); + border: 0; } + .portlet.highlight-4 { + background: var(--color-yellow); + color: #fff; } + .portlet.highlight-4 .portlet-body, .portlet.highlight-4 .portlet-head { + background: var(--color-yellow); + border: 0; } .plain-portlet { box-sizing: border-box; @@ -5127,34 +5045,6 @@ span.tag { background: #fff; padding: 1rem; } -.portlet.highlight-1 { - background: var(--color-red); - color: #fff; } - .portlet.highlight-1 .portlet-body, .portlet.highlight-1 .portlet-head { - background: var(--color-red); - border: 0; } - -.portlet.highlight-2 { - background: var(--color-green); - color: #fff; } - .portlet.highlight-2 .portlet-body, .portlet.highlight-2 .portlet-head { - background: var(--color-green); - border: 0; } - -.portlet.highlight-3 { - background: var(--color-blue); - color: #fff; } - .portlet.highlight-3 .portlet-body, .portlet.highlight-3 .portlet-head { - background: var(--color-blue); - border: 0; } - -.portlet.highlight-4 { - background: var(--color-yellow); - color: #fff; } - .portlet.highlight-4 .portlet-body, .portlet.highlight-4 .portlet-head { - background: var(--color-yellow); - border: 0; } - .context-menu { position: absolute; background: #fff; @@ -5200,13 +5090,12 @@ code[contenteditable], .contenteditable { color: var(--button-background) !important; } #cookieConsentForm .consent_element { margin-top: 1rem; } - -#cookieConsentForm form { - background: #fff; - border: 1px solid var(--box-border); - display: inline-block; - padding: 1rem; - border-radius: 3px; } + #cookieConsentForm form { + background: #fff; + border: 1px solid var(--box-border); + display: inline-block; + padding: 1rem; + border-radius: 3px; } #cookieConsentForm_defaultbuttons, #cookieConsentForm_customizedbuttons { diff --git a/styles.scss b/styles.scss index 3ff78d7..cd0f633 100755 --- a/styles.scss +++ b/styles.scss @@ -1,5 +1,5 @@ -@import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid"; -@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag", "tree"; +@import "clean", "default", "alignment", "visibility", "animate", "grid"; +@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag", "tree"; @import "media"; @import "portlet", "menu"; @import "editor", "cookie_consent"; \ No newline at end of file diff --git a/table.scss b/table.scss index dbad1ed..715f9be 100755 --- a/table.scss +++ b/table.scss @@ -1,36 +1,186 @@ -table.fixed { - table-layout: fixed; -} - -table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc { - display: none; -} - -table .order-up, table .order-down { - cursor: pointer; -} - -table thead input[type=radio] { - padding: 0; - margin: 0; - display: none; -} - -table thead i.fa { - color: #888; -} - -table input[type=radio]:checked + i { +.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { color: var(--button-colored-background); } -table input[type=checkbox]:checked + label i { - color: var(--button-colored-background); +table { + &.fixed { + table-layout: fixed; + } + + input[type=radio]:checked + i { + color: var(--button-colored-background); + } + + input[type=checkbox]:checked + label i { + color: var(--button-colored-background); + } + + .order-up, .order-down { + cursor: pointer; + } + + .sort-asc, .sort-desc, .filter { + padding: 0 2px 0 2px; + cursor: pointer; + } + + &:not([id]) > thead .sort-asc, &:not([id]) > thead .sort-desc { + display: none; + } + + &.default.sticky { + position: relative; + + thead { + th, td { + background: var(--table-head-background); + position: sticky; + top: 0; + z-index: 2; + + & > * { + vertical-align : middle; + } + } + } + } + + &.default { + //border-radius: 4px; + width: 100%; + max-width: 100%; + font-size: 0.9em; + box-sizing: border-box; + overflow-x: auto; + + caption { + font-size: 1.5rem; + font-weight: 400; + border-bottom: 1px solid var(--box-border); + background: var(--table-caption-background); + padding: .5rem; + + //border-top-left-radius: 4px; + //border-top-right-radius: 4px; + + text-align: left; + + i { + font-size: .8rem; + } + + height: 2.5rem; + } + + td { + padding: 3px 10px 3px 10px; + white-space: nowrap; + } + + tbody { + tr { + height: 2.5rem; + + &:nth-of-type(2n) td { + background: var(--table-row-background); + } + + &:nth-of-type(2n+1) td { + background: var(--table-row-background-alt); + } + + &:hover td, &:focus td { + background: var(--table-row-background-hover); + } + + td, th { + border-bottom: 1px solid #ebedf2; + } + + &:last-child td, &:last-child th { + border: none; + } + + &:focus, &:hover { + outline: none; + transform: scale(1); + box-shadow: 0 0 5px var(--box-border); + } + } + + th { + background: var(--table-head-background); + } + } + + thead { + background: var(--table-head-background); + + tr { + height: 2.5rem; + } + + td { + border-bottom: 1px solid #ebedf2; + } + + input[type=radio] { + display: none; + + &:checked + label { + color: var(--box-highlight);; + } + } + } + + .empty { + text-align: center; + color: #d8d8d8; + } + + tfoot { + border: none; + + label { + float: left; + } + + select { + width: auto; + float: right; + margin: 0; + min-width: 0px; + } + + td { + text-align: center; + padding-top: 10px; + } + } + } + + &.list { + th { + text-align: left; + padding: 2px 0 2px 0; + } + + td { + padding: 2px 5px 2px 5px; + } + } } -table .sort-asc, table .sort-desc, table .filter { - padding: 0 2px 0 2px; - cursor: pointer; +thead { + input[type=radio] { + padding: 0; + margin: 0; + display: none; + } + + i.fa { + color: #888; + } } @for $i from 1 through 10 { @@ -41,152 +191,6 @@ table .sort-asc, table .sort-desc, table .filter { } } -table.default.sticky { - position: relative; - - thead { - th, td { - background: var(--table-head-background); - position: sticky; - top: 0; - z-index: 2; - - & > * { - vertical-align : middle; - } - } - } -} - -.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action { - color: var(--button-colored-background); -} - -table.default { - //border-radius: 4px; - width: 100%; - max-width: 100%; - font-size: 0.9em; - box-sizing: border-box; - overflow-x: auto; - - caption { - font-size: 1.5rem; - font-weight: 400; - border-bottom: 1px solid var(--box-border); - background: var(--table-caption-background); - padding: .5rem; - - //border-top-left-radius: 4px; - //border-top-right-radius: 4px; - - text-align: left; - - i { - font-size: .8rem; - } - - height: 2.5rem; - } - - td { - padding: 3px 10px 3px 10px; - white-space: nowrap; - } - - tbody { - tr { - height: 2.5rem; - - &:nth-of-type(2n) td { - background: var(--table-row-background); - } - - &:nth-of-type(2n+1) td { - background: var(--table-row-background-alt); - } - - &:hover td, &:focus td { - background: var(--table-row-background-hover); - } - - td, th { - border-bottom: 1px solid #ebedf2; - } - - &:last-child td, &:last-child th { - border: none; - } - - &:focus, &:hover { - outline: none; - transform: scale(1); - box-shadow: 0 0 5px var(--box-border); - } - } - - th { - background: var(--table-head-background); - } - } - - thead { - background: var(--table-head-background); - - tr { - height: 2.5rem; - } - - td { - border-bottom: 1px solid #ebedf2; - } - - input[type=radio] { - display: none; - - &:checked + label { - color: var(--box-highlight);; - } - } - } - - .empty { - text-align: center; - color: #d8d8d8; - } - - tfoot { - border: none; - - label { - float: left; - } - - select { - width: auto; - float: right; - margin: 0; - min-width: 0px; - } - - td { - text-align: center; - padding-top: 10px; - } - } -} - -table.list { - th { - text-align: left; - padding: 2px 0 2px 0; - } - - td { - padding: 2px 5px 2px 5px; - } -} - @media screen and (max-width: 600px) { table.table { display: table; @@ -226,8 +230,4 @@ table.list { display: none; } } -} - -.nobreak { - white-space: nowrap; -} +} \ No newline at end of file diff --git a/transformation.scss b/transformation.scss deleted file mode 100755 index e69de29..0000000