-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add css rule for webcam-feed, rename consent-video-trial scss, move v…
…ideo-config scss to separate file
- Loading branch information
1 parent
2019763
commit 519964f
Showing
4 changed files
with
185 additions
and
177 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,179 +1,6 @@ | ||
| @import "./consent-video-trial"; | ||
| @import "./consent-video-plugin"; | ||
| @import "./video-config-plugin"; | ||
|
|
||
| div#lookit-jspsych-video-config { | ||
| margin-top: 5%; | ||
| margin-bottom: 10%; | ||
|
|
||
| button.lookit-jspsych-btn { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| /* Webcam/instructions row container */ | ||
| #lookit-jspsych-video-config-row-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| /* Title container */ | ||
| #lookit-jspsych-video-config-title-row { | ||
| text-align: left; | ||
| margin-bottom: 10px; | ||
| margin-left: 10%; | ||
| } | ||
|
|
||
| /* Webcam column */ | ||
| #lookit-jspsych-video-config-webcam-column { | ||
| flex-basis: 40%; | ||
| margin: 5px; | ||
| min-width: 300px; | ||
| margin-bottom: 1.6em; | ||
| } | ||
|
|
||
| /* Webcam container */ | ||
| #lookit-jspsych-webcam-container { | ||
| width: 100%; | ||
| margin-bottom: 5px; | ||
| min-width: 300px; | ||
| min-height: 225px; | ||
| } | ||
|
|
||
| /* Container for elements displayed below the webcam feed (reload and device selection) */ | ||
| #lookit-jspsych-webcam-buttons { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| /* Webcam reload button container */ | ||
| #lookit-jspsych-webcam-reload-container { | ||
| flex: none; | ||
| align-content: center; | ||
| } | ||
|
|
||
| /* Webcam/mic device selection container */ | ||
| #lookit-jspsych-device-selection-container { | ||
| flex: auto; | ||
| } | ||
|
|
||
| /* Device selection elements */ | ||
| .lookit-jspsych-device-selection { | ||
| font-size: 14px; | ||
| font-family: "Open Sans", "Arial", sans-serif; | ||
| padding: 4px; | ||
| } | ||
|
|
||
| #lookit-jspsych-video-config-instructions-column { | ||
| flex-basis: 40%; | ||
| margin: 5px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| /* Error/info message div */ | ||
| #lookit-jspsych-video-config-errors { | ||
| min-height: 3em; | ||
| margin-top: -3em; | ||
| text-align: center; | ||
| font-weight: bold; | ||
| color: red; | ||
| } | ||
|
|
||
| /* Instructions */ | ||
| #lookit-jspsych-video-config-instructions { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| /* Next button container */ | ||
| #lookit-jspsych-next-container { | ||
| padding: 10px 0px; | ||
| } | ||
|
|
||
| /* Instruction step complete class */ | ||
| .lookit-jspsych-step-complete { | ||
| background-color: lightgreen; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /** Help text, such as that about browser compatibility */ | ||
| .lookit-jspsych-help-text { | ||
| font-size: 0.8em; | ||
| line-height: 1.5em; | ||
| text-align: left; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| #lookit-jspsych-config-troubleshooting-column-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: nowrap; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| margin-bottom: 10%; | ||
| max-width: 90%; | ||
| } | ||
|
|
||
| div#lookit-jspsych-accordion-header-container { | ||
| text-align: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| div#lookit-jspsych-accordion-container { | ||
| text-align: left; | ||
| } | ||
|
|
||
| p#lookit-jspsych-troubleshooting-intro { | ||
| text-align: left; | ||
| padding: 0 18px; | ||
| } | ||
|
|
||
| /* Accordion section titles (buttons) for opening/closing the accordion panel content. */ | ||
| button.lookit-jspsych-accordion { | ||
| background-color: #eee; | ||
| color: #444; | ||
| cursor: pointer; | ||
| padding: 18px; | ||
| width: 100%; | ||
| text-align: left; | ||
| border: none; | ||
| outline: none; | ||
| transition: 0.4s; | ||
| float: left; | ||
| font-size: 1.2em; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /* Background color for the accordion section (button) when "active" (selected) and on hover */ | ||
| .active, | ||
| button.lookit-jspsych-accordion:hover { | ||
| background-color: #ccc; | ||
| } | ||
|
|
||
| /* Content within each accordion button. */ | ||
| div.lookit-jspsych-accordion-panel { | ||
| padding: 0 18px; | ||
| background-color: white; | ||
| display: none; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| button.lookit-jspsych-accordion:after { | ||
| content: "\02795"; /* Unicode character for "plus" sign (+) */ | ||
| font-size: 13px; | ||
| color: #777; | ||
| float: right; | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| button.lookit-jspsych-accordion.active:after { | ||
| content: "\2796"; /* Unicode character for "minus" sign (-) */ | ||
| } | ||
|
|
||
| .lookit-jspsych-screenshot { | ||
| display: block; | ||
| margin: 15px auto; | ||
| max-width: 30%; | ||
| } | ||
| video.webcam-feed { | ||
| transform: rotateY(180deg); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,177 @@ | ||
| div#lookit-jspsych-video-config { | ||
| margin-top: 5%; | ||
| margin-bottom: 10%; | ||
|
|
||
| button.lookit-jspsych-btn { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| /* Webcam/instructions row container */ | ||
| #lookit-jspsych-video-config-row-container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| /* Title container */ | ||
| #lookit-jspsych-video-config-title-row { | ||
| text-align: left; | ||
| margin-bottom: 10px; | ||
| margin-left: 10%; | ||
| } | ||
|
|
||
| /* Webcam column */ | ||
| #lookit-jspsych-video-config-webcam-column { | ||
| flex-basis: 40%; | ||
| margin: 5px; | ||
| min-width: 300px; | ||
| margin-bottom: 1.6em; | ||
| } | ||
|
|
||
| /* Webcam container */ | ||
| #lookit-jspsych-webcam-container { | ||
| width: 100%; | ||
| margin-bottom: 5px; | ||
| min-width: 300px; | ||
| min-height: 225px; | ||
| } | ||
|
|
||
| /* Container for elements displayed below the webcam feed (reload and device selection) */ | ||
| #lookit-jspsych-webcam-buttons { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
|
|
||
| /* Webcam reload button container */ | ||
| #lookit-jspsych-webcam-reload-container { | ||
| flex: none; | ||
| align-content: center; | ||
| } | ||
|
|
||
| /* Webcam/mic device selection container */ | ||
| #lookit-jspsych-device-selection-container { | ||
| flex: auto; | ||
| } | ||
|
|
||
| /* Device selection elements */ | ||
| .lookit-jspsych-device-selection { | ||
| font-size: 14px; | ||
| font-family: "Open Sans", "Arial", sans-serif; | ||
| padding: 4px; | ||
| } | ||
|
|
||
| #lookit-jspsych-video-config-instructions-column { | ||
| flex-basis: 40%; | ||
| margin: 5px; | ||
| text-align: left; | ||
| } | ||
|
|
||
| /* Error/info message div */ | ||
| #lookit-jspsych-video-config-errors { | ||
| min-height: 3em; | ||
| margin-top: -3em; | ||
| text-align: center; | ||
| font-weight: bold; | ||
| color: red; | ||
| } | ||
|
|
||
| /* Instructions */ | ||
| #lookit-jspsych-video-config-instructions { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| /* Next button container */ | ||
| #lookit-jspsych-next-container { | ||
| padding: 10px 0px; | ||
| } | ||
|
|
||
| /* Instruction step complete class */ | ||
| .lookit-jspsych-step-complete { | ||
| background-color: lightgreen; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /** Help text, such as that about browser compatibility */ | ||
| .lookit-jspsych-help-text { | ||
| font-size: 0.8em; | ||
| line-height: 1.5em; | ||
| text-align: left; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| #lookit-jspsych-config-troubleshooting-column-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-wrap: nowrap; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| margin-bottom: 10%; | ||
| max-width: 90%; | ||
| } | ||
|
|
||
| div#lookit-jspsych-accordion-header-container { | ||
| text-align: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| div#lookit-jspsych-accordion-container { | ||
| text-align: left; | ||
| } | ||
|
|
||
| p#lookit-jspsych-troubleshooting-intro { | ||
| text-align: left; | ||
| padding: 0 18px; | ||
| } | ||
|
|
||
| /* Accordion section titles (buttons) for opening/closing the accordion panel content. */ | ||
| button.lookit-jspsych-accordion { | ||
| background-color: #eee; | ||
| color: #444; | ||
| cursor: pointer; | ||
| padding: 18px; | ||
| width: 100%; | ||
| text-align: left; | ||
| border: none; | ||
| outline: none; | ||
| transition: 0.4s; | ||
| float: left; | ||
| font-size: 1.2em; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| /* Background color for the accordion section (button) when "active" (selected) and on hover */ | ||
| .active, | ||
| button.lookit-jspsych-accordion:hover { | ||
| background-color: #ccc; | ||
| } | ||
|
|
||
| /* Content within each accordion button. */ | ||
| div.lookit-jspsych-accordion-panel { | ||
| padding: 0 18px; | ||
| background-color: white; | ||
| display: none; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| button.lookit-jspsych-accordion:after { | ||
| content: "\02795"; /* Unicode character for "plus" sign (+) */ | ||
| font-size: 13px; | ||
| color: #777; | ||
| float: right; | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| button.lookit-jspsych-accordion.active:after { | ||
| content: "\2796"; /* Unicode character for "minus" sign (-) */ | ||
| } | ||
|
|
||
| .lookit-jspsych-screenshot { | ||
| display: block; | ||
| margin: 15px auto; | ||
| max-width: 30%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters