diff options
Diffstat (limited to 'src/client/util/CaptureManager.scss')
-rw-r--r-- | src/client/util/CaptureManager.scss | 465 |
1 files changed, 465 insertions, 0 deletions
diff --git a/src/client/util/CaptureManager.scss b/src/client/util/CaptureManager.scss new file mode 100644 index 000000000..5ca54517c --- /dev/null +++ b/src/client/util/CaptureManager.scss @@ -0,0 +1,465 @@ +@import "../views/globalCssVariables"; + +.settings-interface { + //background-color: whitesmoke !important; + color: grey; + width: 450px; + + button { + background: #315a96; + outline: none; + border-radius: 5px; + border: 0px; + color: #fcfbf7; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + padding: 10px; + margin: 10px; + transition: transform 0.2s; + margin: 2px; + } +} + +.settings-title { + font-size: 25px; + font-weight: bold; + padding-right: 10px; + color: black; +} + +.settings-username { + font-size: 12px; + padding-right: 15px; + color: black; + margin-top: 10px; + margin-bottom: 10px; + /* right: 135; */ + // position: absolute; + // left: 243; +} + +.settings-section { + display: flex; + border-bottom: 1px solid grey; + padding-bottom: 8px; + padding-top: 6px; + + .settings-section-title { + font-size: 16; + font-weight: bold; + text-align: left; + color: black; + width: 80; + margin-right: 50px; + } + + &:last-child { + border-bottom: none; + } +} + + +.password-content { + display: flex; + flex-direction: column; + + .password-content-inputs { + width: 100; + // margin-bottom: 10px; + font-size: 10px; + + .password-inputs { + border: 1px solid rgb(160, 160, 160); + margin-bottom: 8px; + width: 130; + color: black; + border-radius: 5px; + padding:7px; + + } + } + + .password-content-buttons { + //margin-left: 84px; + //width: 100; + padding: 7px; + + .password-submit { + //margin-left: 85px; + margin-top: 5px; + } + + .password-forgot { + //margin-left: 65px; + //margin-top: -20px; + font-size: 12px; + white-space: nowrap; + } + } +} + +.accounts-content { + display: flex; +} + +.modes-content { + display: flex; + margin-left: 10px; + font-size: 12px; + + .modes-select { + // width: 170px; + width: 80%; + height: 35px; + margin-right: 10px; + color: black; + border-radius: 5px; + + &:hover { + cursor: pointer; + } + } + + .modes-playground, + .default-acl { + display: flex; + margin-left: 10px; + margin-top: 10px; + font-size: 10px; + + .playground-check, + .acl-check { + margin-right: 5px; + + &:hover { + cursor: pointer; + } + } + + .playground-text { + color: black; + margin-right: 10px; + margin-top: 2; + } + + .acl-text { + color: black; + margin-top: 2; + text-align: left; + } + + } +} + +.colorFlyout { + margin-top: 2px; + //margin-right: 18px; + + &:hover { + cursor: pointer; + } + + .colorFlyout-button { + width: 20px; + height: 20px; + border: 0.5px solid black; + border-radius: 5px; + padding-top: 3px; + } +} + +.prefs-content{ + text-align: left; +} + +.appearances-content { + display: flex; + margin-top: 4px; + color: black; + font-size: 10px; + + .preferences-color { + display: flex; + margin-top: 2px; + + .preferences-color-text { + margin-top: 3px; + margin-right: 4; + flex: 1 1 auto; + text-align: left; + } + + .colorFlyout { + align-self: flex-end; + } + } + + .preferences-font { + //height: 23px; + margin-top: 2px; + + .preferences-font-text { + color: black; + margin-top: 4; + margin-right: 4; + margin-bottom: 2px; + text-align: left; + } + + .preferences-font-controls { + display: flex; + justify-content: space-between; + } + + .font-select { + height: 35px; + color: black; + font-size: 9; + margin-right: 6; + border-radius: 5px; + width: 65%; + + &:hover { + cursor: pointer; + } + } + + .size-select { + height: 35px; + color: black; + font-size: 9; + border-radius: 5px; + width: 30%; + + &:hover { + cursor: pointer; + } + } + } + + .preferences-check { + color: black; + margin-right: 4; + margin-bottom: -3; + margin-left: 5; + margin-top: -1px; + display: inline-block; + padding-left: 5px; + text-align: left; + } +} + +.settings-interface { + display: flex; + flex-direction: column; + + button { + width: auto; + align-self: center; + background: #252b33; + margin-right: 15px; + + //margin-top: 4px; + + &:hover { + background: $main-accent; + } + } + + // .delete-button { + // background: rgb(227, 86, 86); + // } + + .close-button { + position: absolute; + right: 1em; + top: 1em; + cursor: pointer; + } + + // .logout-button { + // right: 355; + // position: absolute; + // } + + .settings-content { + background: #e4e4e4; + //border-radius: 6px; + padding: 10px; + //width: 560px; + flex: 1 1 auto; + } + + .settings-top { + display: flex; + margin-bottom: 10px; + } + + + .error-text { + color: #C40233; + width: 300; + margin-left: -20; + font-size: 10; + margin-bottom: 4; + margin-top: -3; + } + + .success-text { + width: 300; + margin-left: -20; + font-size: 10; + margin-bottom: 4; + margin-top: -3; + color: #009F6B; + } + + .focus-span { + text-decoration: underline; + } + + h1 { + color: #121721; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 19; + margin-top: 0; + font-weight: bold; + } + + .container { + display: block; + position: relative; + margin-top: 10px; + margin-bottom: 10px; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 700px; + min-width: 700px; + max-width: 700px; + text-align: left; + font-style: normal; + font-size: 15; + font-weight: normal; + padding: 0; + + .padding { + padding: 0 0 0 20px; + color: black; + } + + } +} + +.settings-interface { + flex-direction: row; + position: relative; + min-height: 250px; + width: 100%; + + .settings-content { + background-color: #fdfdfd; + } +} + +.settings-panel { + position: relative; + min-width: 150px; + background-color: #e4e4e4; + + .settings-user { + position: absolute; + bottom: 10px; + text-align: center; + left: 0; + right: 0; + + .settings-username { + padding-right: 0px; + } + + .logout-button { + margin-right: 2px; + } + } +} + +.settings-tabs { + // font-size: 16px; + font-weight: 600; + color: black; + + .tab-control { + padding: 10px; + border-bottom: 1px solid #9f9e9e; + cursor: pointer; + + &.active { + background-color: #fdfdfd; + } + } +} + +.settings-section-context { + width: 100%; +} + +.tab-section { + display: none; + height: 200px; + + &.active { + display: block; + } +} + +.tab-content { + display: flex; + margin: 20px 0; + + .tab-column { + flex: 0 0 50%; + + .tab-column-title { + color: black; + font-size: 16px; + font-weight: bold; + margin-bottom: 16px; + } + + .tab-column-title, .tab-column-content { + padding-left: 16px; + } + + } + +} + +.tab-column button { + font-size: 9px; +} + +@media only screen and (max-device-width: 480px) { + .settings-interface { + width: 80vw; + height: 400px; + } + + .settings-interface .settings-body .settings-content input { + font-size: 30; + } + + .settings-interface button { + width: 100%; + font-size: 30px; + background: #315a96; + } + + .settings-interface .settings-heading { + font-size: 25; + } +} |