upgrade
This commit is contained in:
@@ -0,0 +1,67 @@
|
||||
/* Main Container */
|
||||
.joubel-help-text-dialog-box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #555;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Background for help dialog */
|
||||
.joubel-help-text-dialog-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #555555;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* ------------------------------------ Main content container ------------------------ */
|
||||
.joubel-help-text-dialog-container {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3.5%;
|
||||
left: 20%;
|
||||
width: 60%;
|
||||
background: #fff;
|
||||
opacity: 1;
|
||||
max-height: 93%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.joubel-help-text-header {
|
||||
font-size: 1.1em;
|
||||
border-bottom: 1px solid #E0E0E0;
|
||||
padding: 0.75em 3em 0.75em 1.5em;
|
||||
}
|
||||
|
||||
/* Body */
|
||||
.joubel-help-text-body {
|
||||
padding: 0.5em 1.5em;
|
||||
margin: 1em 0 2em;
|
||||
}
|
||||
|
||||
/* Close help dialog container */
|
||||
.joubel-help-text-remove {
|
||||
position: absolute;
|
||||
right: 1.5em;
|
||||
top: 0.8em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.joubel-help-text-remove:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.joubel-help-text-remove:before {
|
||||
font-family: 'H5PFontAwesome4';
|
||||
content: '\f00d';
|
||||
font-size: 1.3em;
|
||||
right: 0em;
|
||||
top: 0em;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
[class^="joubel-icon-"], [class*=" joubel-icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'H5PFontIcons' !important;
|
||||
speak: none;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
word-wrap: normal;
|
||||
cursor: pointer;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Comment icon */
|
||||
.joubel-icon-comment-normal .h5p-icon-shadow:before {
|
||||
content: "\e90a";
|
||||
color: rgb(221, 221, 221);
|
||||
}
|
||||
.joubel-icon-comment-normal .h5p-icon-speech-bubble:before {
|
||||
content: "\e908";
|
||||
margin-left: -1em;
|
||||
color: rgb(206, 114, 193);
|
||||
}
|
||||
.joubel-icon-comment-normal .h5p-icon-question:before {
|
||||
content: "\e906";
|
||||
margin-left: -1em;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.joubel-icon-comment-normal:hover .h5p-icon-speech-bubble:before {
|
||||
color: rgb(188, 92, 163);
|
||||
}
|
||||
.joubel-icon-comment-normal:active .h5p-icon-speech-bubble:before {
|
||||
color: rgb(206, 114, 193);
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
left: 0.05em;
|
||||
}
|
||||
.joubel-icon-comment-normal:active .h5p-icon-question:before {
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
left: 0.05em;
|
||||
}
|
||||
|
||||
/* Tip icon */
|
||||
.joubel-icon-tip-normal .h5p-icon-shadow:before {
|
||||
content: "\e90a";
|
||||
color: rgb(221, 221, 221);
|
||||
}
|
||||
.joubel-icon-tip-normal .h5p-icon-speech-bubble:before {
|
||||
content: "\e908";
|
||||
margin-left: -1em;
|
||||
color: rgb(53, 128, 195);
|
||||
}
|
||||
.joubel-icon-tip-normal .h5p-icon-info:before {
|
||||
content: "\e905";
|
||||
margin-left: -1em;
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
.joubel-icon-tip-normal:hover .h5p-icon-speech-bubble:before {
|
||||
color: rgb(72, 155, 213);
|
||||
}
|
||||
.joubel-icon-tip-normal:active .h5p-icon-speech-bubble:before {
|
||||
color: rgb(72, 155, 213);
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
left: 0.05em;
|
||||
}
|
||||
.joubel-icon-tip-normal:active .h5p-icon-info:before {
|
||||
position: relative;
|
||||
top: 0.05em;
|
||||
left: 0.05em;
|
||||
}
|
||||
|
||||
/* Edit icon */
|
||||
.joubel-icon-edit .h5p-icon-circle:before {
|
||||
content: "\e90d";
|
||||
color: #1d74c8;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.joubel-icon-edit .h5p-icon-pencil:before {
|
||||
content: "\e90c";
|
||||
color: #1d74c8;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
margin-left: -1.42em;
|
||||
}
|
||||
.joubel-icon-edit:hover .h5p-icon-circle:before {
|
||||
content: "\e90e";
|
||||
color: #1d74c8;
|
||||
}
|
||||
.joubel-icon-edit:hover .h5p-icon-pencil:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Approve icon */
|
||||
.joubel-icon-approve .h5p-icon-circle:before {
|
||||
content: "\e90d";
|
||||
color: #3ea35f;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.joubel-icon-approve .h5p-icon-check:before {
|
||||
content: "\e601";
|
||||
color: #3ea35f;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
margin-left: -1.42em;
|
||||
}
|
||||
.joubel-icon-approve:hover .h5p-icon-circle:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.joubel-icon-approve:hover .h5p-icon-check:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Cancel icon */
|
||||
.joubel-icon-cancel .h5p-icon-circle:before {
|
||||
content: "\e90d";
|
||||
color: #de3354;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.joubel-icon-cancel .h5p-icon-cross:before {
|
||||
content: "\e600";
|
||||
color: #de3354;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
margin-left: -1.38em;
|
||||
}
|
||||
.joubel-icon-cancel:hover .h5p-icon-circle:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.joubel-icon-cancel:hover .h5p-icon-cross:before {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Custom override CSS */
|
||||
.joubel-icon-tip-normal.help-icon:before {
|
||||
font-family: 'H5PFontAwesome4';
|
||||
content: "\f059";
|
||||
}
|
||||
|
||||
/* Hide icon layers if using font awesome */
|
||||
.joubel-icon-tip-normal.help-icon > span {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
.joubel-message-dialog {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
padding: .3em;
|
||||
z-index: 11;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
border-top: 1px solid #ffcd0d;
|
||||
background-color: #fcffcc;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.joubel-message-dialog:before {
|
||||
font-family: 'H5PFontAwesome4';
|
||||
content: '\f05a';
|
||||
padding-right: .5em;
|
||||
font-size: 1.3em;
|
||||
position: relative;
|
||||
top: 0.1em;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.joubel-progress-circle-wrapper{
|
||||
display: inline-block;
|
||||
padding: 0em 1em;
|
||||
}
|
||||
.joubel-progress-circle-percentage{
|
||||
position: relative;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.joubel-progress-circle-circle{
|
||||
-webkit-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
|
||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
||||
display: -webkit-flex; /* NEW - Chrome */
|
||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
||||
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
||||
-webkit-justify-content: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
top: 0.151em;
|
||||
left: 0.151em;
|
||||
text-align: center;
|
||||
width: 2.7em;
|
||||
height: 2.7em;
|
||||
|
||||
-webkit-border-radius: 100%; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
|
||||
-moz-border-radius: 100%; /* Firefox 1-3.6 */
|
||||
border-radius: 100%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
|
||||
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.joubel-progress-circle-active-border{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
|
||||
-webkit-border-radius: 100%; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
|
||||
-moz-border-radius: 100%; /* Firefox 1-3.6 */
|
||||
border-radius: 100%; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
|
||||
|
||||
background-color: #1a73d9;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
.h5p-joubelui-progressbar {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: .25em;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0px -1px 3px 0px rgba(1,72,118,0.75);
|
||||
-moz-box-shadow: 0px -1px 3px 0px rgba(1,72,118,0.75);
|
||||
box-shadow: 0px -1px 3px 0px rgba(1,72,118,0.75);
|
||||
}
|
||||
|
||||
.h5p-joubelui-progressbar-slide-status-text {
|
||||
font-size: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.h5p-joubelui-progressbar-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background-color: #014876;
|
||||
-webkit-transition: width .3s ease-in-out;
|
||||
-moz-transition: width .3s ease-in-out;
|
||||
-o-transition: width .3s ease-in-out;
|
||||
transition: width .3s ease-in-out;
|
||||
}
|
||||
.h5p-joubelui-drop {
|
||||
z-index: 1;
|
||||
}
|
||||
.drop-element.h5p-joubelui-drop .drop-content {
|
||||
padding: .2em .8em;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
.h5p-joubelui-score-bar {
|
||||
display: inline-flex;
|
||||
display: -webkit-inline-flexbox;
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
width: 15em;
|
||||
max-width: 100%;
|
||||
background: #fff;
|
||||
border-radius: 1.5em;
|
||||
padding: 0.625em;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
.h5p-joubelui-score-bar-visuals {
|
||||
flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.h5p-joubelui-score-bar-progress-wrapper {
|
||||
position: relative;
|
||||
margin-right: 1.7em;
|
||||
height: 0.917em;
|
||||
border-top-left-radius: 1.5em;
|
||||
border-bottom-left-radius: 1.5em;
|
||||
background: #ddd;
|
||||
}
|
||||
.h5p-joubelui-score-bar-progress {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: transparent;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-top-left-radius: .5em;
|
||||
border-bottom-left-radius: .5em;
|
||||
background: #48b57e; /* For browsers not supporting linear-gradient */
|
||||
background: linear-gradient(to right, #52ca8d, #48b57e);
|
||||
-webkit-transition: width 0.4s ease-in-out;
|
||||
-moz-transition: width 0.4s ease-in-out;
|
||||
-o-transition: width 0.4s ease-in-out;
|
||||
transition: width 0.4s ease-in-out;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
/* The star */
|
||||
.h5p-joubelui-score-bar-star {
|
||||
height: 1.8em;
|
||||
width: 2.1em;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -0.4em;
|
||||
overflow: visible;
|
||||
}
|
||||
.h5p-joubelui-score-bar-full-score.h5p-joubelui-score-bar-animation-active .h5p-joubelui-score-bar-star {
|
||||
-webkit-animation: pound 0.8s 1;
|
||||
animation: pound 0.8s 1;
|
||||
}
|
||||
@keyframes pound {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
20% {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
60% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pound {
|
||||
from {
|
||||
-webkit-transform: scale(0);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: scale(1.4);
|
||||
}
|
||||
60% {
|
||||
-webkit-transform: scale(0.8);
|
||||
}
|
||||
80% {
|
||||
-webkit-transform: scale(1.2);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* Styling the star */
|
||||
.h5p-joubelui-score-bar-star svg {
|
||||
overflow: visible;
|
||||
}
|
||||
.h5p-joubelui-score-bar-star-shadow {
|
||||
fill: #fff;
|
||||
}
|
||||
.h5p-joubelui-score-bar-star-border {
|
||||
fill: none;
|
||||
stroke: #ddd;
|
||||
stroke-miterlimit: 10;
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.h5p-joubelui-score-bar-star-fill {
|
||||
fill: #ddd;
|
||||
}
|
||||
.h5p-joubelui-score-bar-full-score .h5p-joubelui-score-bar-star-border {
|
||||
stroke: #ab741a;
|
||||
stroke-width: 6;
|
||||
}
|
||||
.h5p-joubelui-score-bar-star-fill-full-score {
|
||||
visibility: hidden;
|
||||
fill: #ffc80b;
|
||||
}
|
||||
.h5p-joubelui-score-bar-full-score .h5p-joubelui-score-bar-star-fill {
|
||||
/* This will be a fallback for browsers not supporting the filter,
|
||||
i.e. Safari */
|
||||
fill: #ffc80b;
|
||||
}
|
||||
.h5p-joubelui-score-bar-full-score .h5p-joubelui-score-bar-star-fill-full-score {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* The numeric part on the end (score / maxScore) */
|
||||
.h5p-joubelui-score-numeric {
|
||||
margin: 0em 0.4em;
|
||||
font-size: 1.333em;
|
||||
line-height: 0.7;
|
||||
font-weight: bold;
|
||||
}
|
||||
.h5p-score-bar-has-help .h5p-joubelui-score-numeric {
|
||||
/* Need more space when icon is displayed */
|
||||
margin-right: 0.625em;
|
||||
}
|
||||
.h5p-joubelui-score-number {
|
||||
color: #333;
|
||||
}
|
||||
.h5p-joubelui-score-number-separator {
|
||||
color: #999;
|
||||
padding: 0 0.1em;
|
||||
}
|
||||
.h5p-joubelui-score-bar .joubel-tip-container {
|
||||
position: absolute;
|
||||
top: 0.1em;
|
||||
right: 0.3em;
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
color: #1a73d9;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
.h5p-joubelui-score-bar .joubel-tip-container > .help-icon {
|
||||
font-size: 1em;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.joubel-simple-rounded-button {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0.25em 0;
|
||||
padding: 0.3em 1.2em;
|
||||
border-radius: 2em;
|
||||
background-color: #1a73d9;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.joubel-simple-rounded-button:hover,
|
||||
.joubel-simple-rounded-button:focus {
|
||||
background-color: #1356a3;
|
||||
}
|
||||
|
||||
.joubel-simple-rounded-button:active {
|
||||
position: relative;
|
||||
background-color: #104888;
|
||||
|
||||
-webkit-box-shadow: inset 0 4px 0px #0e407a;
|
||||
-moz-box-shadow: inset 0 4px 0px #0e407a;
|
||||
box-shadow: inset 0 4px 0px #0e407a;
|
||||
}
|
||||
|
||||
.joubel-simple-rounded-button:active .joubel-simple-rounded-button-text {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
.h5p-joubel-ui-slider {
|
||||
-webkit-transition: -webkit-transform 0.3s ease-in-out;
|
||||
-moz-transition: -moz-transform 0.3s ease-in-out;
|
||||
-ms-transition: -ms-transform 0.3s ease-in-out;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
/* Avoid flickering */
|
||||
-webkit-transform: translateX(0);
|
||||
-moz-transform: translateX(0);
|
||||
-ms-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.h5p-joubel-ui-slide {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: none;
|
||||
}
|
||||
.h5p-joubel-ui-slide.current {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
.joubel-speech-bubble {
|
||||
position: absolute;
|
||||
color: #333;
|
||||
z-index: 301;
|
||||
margin-top: 0.45em;
|
||||
min-width: 1em;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
.joubel-speech-bubble p {
|
||||
margin: 0.75em 0;
|
||||
}
|
||||
.joubel-speech-bubble p:first-child {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.joubel-speech-bubble p:last-child {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.joubel-speech-bubble.show {
|
||||
opacity: 1;
|
||||
}
|
||||
.joubel-speech-bubble-inner {
|
||||
background: #fbfbfb;
|
||||
box-shadow: 0 0 0.5em #2c2c2c;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.2em 0.5em;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
word-wrap: break-word; /* Long words have to break */
|
||||
z-index: 1;
|
||||
}
|
||||
.joubel-speech-bubble-inner-tail,
|
||||
.joubel-speech-bubble-tail {
|
||||
position: absolute;
|
||||
/* Setting these in pixels is intentional. We use it when calculating placement of bubble */
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #fbfbfb;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
.joubel-speech-bubble-tail {
|
||||
box-shadow: 0 0 0.5em #2c2c2c;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.joubel-tip-container {
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
}
|
||||
.joubel-tip-container:hover {
|
||||
color: #333;
|
||||
}
|
||||
.joubel-tip-container:focus {
|
||||
outline: 0;
|
||||
box-shadow: 0px 0px 5px 2px rgba(140,185,240,1);
|
||||
outline: rgba(140,185,240,1) solid 1px;
|
||||
}
|
||||
.using-mouse .joubel-tip-container:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.joubel-tip-container.be-quiet:focus {
|
||||
outline: none;
|
||||
}
|
||||
.joubel-tip-container.be-quiet {
|
||||
pointer-events: none;
|
||||
}
|
||||
.joubel-tip-icon {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
pointer-events: none;
|
||||
}
|
||||
.joubel-tip-icon:before {
|
||||
font-family: Joubel;
|
||||
content: "\e888";
|
||||
|
||||
/* Better Font Rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.joubel-tip-icon.help-icon:before {
|
||||
font-family: 'H5PFontAwesome4';
|
||||
content: "\f059";
|
||||
}
|
||||
|
||||
.joubel-tip-container * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.joubel-tip-container .hidden-but-read {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
/* Styling of button */
|
||||
.h5peditor .ui-dialog .h5p-joubelui-button,
|
||||
.h5peditor .h5p-joubelui-button,
|
||||
.h5p-joubelui-button {
|
||||
font-size: 1em;
|
||||
line-height: 1.2;
|
||||
margin: 0 0.5em 1em;
|
||||
padding: 0.5em 1.25em;
|
||||
border-radius: 2em;
|
||||
|
||||
background: #1a73d9;
|
||||
color: #ffffff;
|
||||
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.h5p-joubelui-button:first-child {
|
||||
margin: 0 0.5em 1em 0;
|
||||
}
|
||||
|
||||
.h5p-joubelui-button:last-child {
|
||||
margin: 0 0 1em 0.5em;
|
||||
}
|
||||
|
||||
.h5p-joubelui-button:first-child:last-child {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
/* Truncated buttons */
|
||||
.h5p-joubelui-button.truncated {
|
||||
width: 2.235em;
|
||||
height: 2.235em;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.h5p-joubelui-button.truncated:before {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.h5p-joubelui-button:hover,
|
||||
.h5p-joubelui-button:focus {
|
||||
background: #1356a3;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
-webkit-transition: initial;
|
||||
-moz-transition: initial;
|
||||
-o-transition: initial;
|
||||
transition: initial;
|
||||
}
|
||||
.h5p-joubelui-button:active {
|
||||
position: relative;
|
||||
background: #104888;
|
||||
|
||||
-webkit-box-shadow: inset 0 4px 0 #0e407a;
|
||||
-moz-box-shadow: inset 0 4px 0 #0e407a;
|
||||
box-shadow: inset 0 4px 0 #0e407a;
|
||||
}
|
||||
.h5p-joubelui-button:active .h5p-joubelui-button-text {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.h5p-joubelui-button:before {
|
||||
font-family: 'H5PFontAwesome4';
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
.h5p-question-try-again:before {
|
||||
content: "\F01E";
|
||||
}
|
||||
|
||||
.h5p-question-show-solution:before {
|
||||
content: "\F06E";
|
||||
}
|
||||
|
||||
.h5p-question-check-answer:before {
|
||||
content: "\F058";
|
||||
}
|
||||
|
||||
/* Remove outline for all elements having tabIndex="-1"*/
|
||||
.h5p-content [tabIndex="-1"] {
|
||||
outline: none;
|
||||
}
|
||||
Reference in New Issue
Block a user