diff --git a/app/css/style.css b/app/css/style.css index feba6940..a539b63b 100644 --- a/app/css/style.css +++ b/app/css/style.css @@ -187,6 +187,7 @@ body > .loading h2 { input[type="tel"], input[type="text"], input[type="time"], +input[type="date"], input[type="email"], input[type="search"], input[type="number"], @@ -206,6 +207,7 @@ textarea { .widget input[type="tel"], .widget input[type="text"], .widget input[type="time"], +.widget input[type="date"], .widget input[type="email"], .widget input[type="search"], .widget input[type="number"], @@ -217,6 +219,7 @@ textarea { input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, +input[type="date"]:hover, input[type="email"]:hover, input[type="search"]:hover, input[type="number"]:hover, @@ -229,6 +232,7 @@ textarea:hover { input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, +input[type="date"]:focus, input[type="email"]:focus, input[type="search"]:focus, input[type="number"]:focus, @@ -240,10 +244,44 @@ textarea:focus { input[type="time"]::-webkit-clear-button, input[type="time"]::-webkit-inner-spin-button, +input[type="date"]::-webkit-clear-button, +input[type="date"]::-webkit-inner-spin-button, input[type="number"]::-webkit-inner-spin-button { display: none; } +input[readonly]::-webkit-datetime-edit-ampm-field:focus, +input[readonly]::-webkit-datetime-edit-hour-field:focus, +input[readonly]::-webkit-datetime-edit-minute-field:focus { + color: inherit; + background-color: inherit; +} + +input[type="date"]::-webkit-calendar-picker-indicator { + opacity: 1; + overflow: hidden; + color: transparent; + position: relative; + margin-left: -1.3em; + margin-right: 0.3em; +} + +input[type="date"]::-webkit-calendar-picker-indicator:before { + top: 0; + left: 0; + right: 0; + bottom: 0; + color: #333; + line-height: 1; + content: "\e6ce"; + position: absolute; + font-family: Entypo; +} + +input[type="date"]::-webkit-calendar-picker-indicator:hover { + background: none; +} + form:not(.form-horizontal) .color label { display: block; } @@ -281,6 +319,199 @@ form:not(.form-horizontal) .color label { + + +/*--------------------------------------------- + / Material Buttons +*/ +button.material { + border: 0; + outline: 0; + margin: 0 8px; + padding: 0 16px; + cursor: pointer; + min-width: 80px; + font-size: 13px; + background: #EEE; + font-weight: 500; + line-height: 32px; + border-radius: 2px; + text-align: center; + text-transform: uppercase; + font-family: Roboto, sans-serif; + transition: all .15s ease-in-out; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); +} + +button.material:hover, +button.material:focus, +button.material:active { + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); +} + +button.material:active { + background: #E0E0E0; +} + +button.material.disabled, +button.material[disabled] { + cursor: default; + box-shadow: none; + color: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.12); +} + +button.material svg { + width: 24px; + height: 24px; + fill: currentColor; +} + + + + + + + +/*--------------------------------------------- + / Material Buttons / Floating Action Button +*/ +button.material.fab { + width: 40px; + height: 40px; + padding: 8px; + min-width: initial; + border-radius: 50%; +} + + + + + + + +/*--------------------------------------------- + / Material Buttons / Colors +*/ +button.material.red, +button.material.blue, +button.material.green, +button.material.orange { + color: #FFF; +} + +button.material.red { background: #F44336; } +button.material.red:active { background: #E53935; } + +button.material.blue { background: #2196F3; } +button.material.blue:active { background: #1E88E5; } + +button.material.green { background: #4CAF50; } +button.material.green:active { background: #43A047; } + +button.material.orange { background: #FF9800; } +button.material.orange:active { background: #FB8C00; } + + + + + + + +/*--------------------------------------------- + / Material Buttons / Flat +*/ +button.material.flat { + background: none; + box-shadow: none; + border-radius: 0; + line-height: 32px; +} + +button.material.flat:hover, +button.material.flat:focus { + background: rgba(0, 0, 0, 0.075); +} + +button.material.flat:active { + background: rgba(0, 0, 0, 0.15); +} + +button.material.flat.red { color: #F44336; } +button.material.flat.blue { color: #2196F3; } +button.material.flat.green { color: #4CAF50; } +button.material.flat.orange { color: #FF9800; } + + + + + + + + +/*--------------------------------------------- + / Material Buttons / Icon Toggle +*/ +button.material.toggle { + width: 36px; + color: #000; + height: 36px; + padding: 6px; + margin: 0 4px; + box-shadow: none; + position: relative; + min-width: initial; + border-radius: 50%; + background: transparent; + transition: all .2s ease; +} + +button.material.toggle svg { + opacity: .7; +} + +button.material.toggle:after, +button.material.toggle:before { + position: absolute; + border-radius: 50%; + background: currentColor; + transition: opacity .2s ease; +} + +button.material.toggle:before { + top: 50%; + width: 0; + left: 50%; + height: 0; + content: ""; + opacity: 0.1; + border-radius: 50%; + transform: translateX(-50%) translateY(-50%); +} + +button.material.toggle:active:before { + width: 100%; + height: 100%; + opacity: .05; + transition: width .2s ease, height .2s ease; +} + +button.material.toggle:hover:after, +button.material.toggle:focus:after { + top: 0; + left: 0; + right: 0; + bottom: 0; + content: ""; + opacity: .05; +} + + + + + + + /*--------------------------------------------- / Forms / Checkbox and Radio Styles */ @@ -1349,8 +1580,8 @@ body.resizing .medley { /*--------------------------------------------- / Widgets Layout / Widgets */ -.widget-preview .widget, -.widgets-container .widget { +.widgets-container .widget, +.store-detail .preview .widget { margin: 2%; z-index: 1; flex: 2 100%; @@ -1363,24 +1594,24 @@ body.resizing .medley { box-shadow: 0 2px 1px rgba(102, 102, 102, 0.1); } -.widget-preview .widget.tiny, -.widgets-container .widget.tiny { +.widgets-container .widget.tiny, +.store-detail .preview .widget.tiny { flex: 1 46%; max-width: 46%; } -.widget-preview .widget .handle, -.widget-preview .widget .settings, .widgets-container .widget .handle, -.widgets-container .widget .settings { +.widgets-container .widget .settings, +.store-detail .preview .widget .handle, +.store-detail .preview .widget .settings { opacity: 0; z-index: 9; position: absolute; transition: opacity .3s ease-in-out; } -.widget-preview .widget .handle, -.widgets-container .widget .handle { +.widgets-container .widget .handle, +.store-detail .preview .widget .handle { top: 15px; right: 8px; width: 4px; @@ -1394,20 +1625,18 @@ body.resizing .medley { 0 -6px 3px rgba(255, 255, 255, 0.8); } -.widget-preview .widget:hover .handle, -.widget-preview .widget:hover .settings, .widgets-container .widget:hover .handle, .widgets-container .widget:hover .settings, -.widget-preview .widget .handle, -.widget-preview .widget .settings { +.store-detail .preview .widget:hover .handle, +.store-detail .preview .widget:hover .settings { opacity: 1; } -.widget-preview .widget .handle:before, -.widget-preview .widget .settings:before, .widgets-container .widget .handle:before, -.widgets-container .widget .settings:before { +.widgets-container .widget .settings:before, +.store-detail .preview .widget .handle:before, +.store-detail .preview .widget .settings:before { top: -15px; left: -15px; right: -10px; @@ -1418,8 +1647,8 @@ body.resizing .medley { background: rgba(0, 0, 0, 0); } -.widget-preview .widget .settings, -.widgets-container .widget .settings { +.widgets-container .widget .settings, +.store-detail .preview .widget .settings { top: 30px; right: 5px; color: #666; @@ -1429,15 +1658,15 @@ body.resizing .medley { text-shadow: 0 0 3px rgba(255, 255, 255, 0.8); } -.widget-preview .widget .settings:before, -.widgets-container .widget .settings:before { +.widgets-container .widget .settings:before, +.store-detail .preview .widget .settings:before { top: -1px; left: -6px; bottom: -5px; } -.widget-preview .widget .settings:hover, -.widgets-container .widget .settings:hover { +.widgets-container .widget .settings:hover, +.store-detail .preview .widget .settings:hover { color: #428BCA; } @@ -1742,7 +1971,7 @@ body.no-edit .widgets-container .widget.tabbed:before { opacity: 0; outline: 0; margin: auto; - z-index: 99999; + z-index: 9999; position: fixed; overflow: hidden; background: #FFF; @@ -1995,14 +2224,12 @@ body.no-edit .widgets-container .widget.tabbed:before { / Getting Started */ .modal-overlay.getting-started { - z-index: 99999; background: rgba(0, 0, 0, .3); } .modal.getting-started { width: 800px; height: 600px; - z-index: 999999; max-height: 100%; overflow: visible; border-radius: 6px; @@ -2206,7 +2433,6 @@ body.no-edit .widgets-container .widget.tabbed:before { /*--------------------------------------------- / Widget Store - These are direct selectors so they don't interfere with the widget previews */ .modal.store { overflow: visible; /* This fixes the 1px white gap above the close button caused by subpixel rounding in the automatic modal centering. */ @@ -2214,41 +2440,32 @@ body.no-edit .widgets-container .widget.tabbed:before { max-height: 700px; } -.store > .wrapper { +.store .wrapper { height: 100%; } -.store > .wrapper > .title, -.store > .wrapper > .detail > .title { - z-index: 9; +.store .wrapper > .title { height: 70px; font-size: 20px; padding: 25px 30px; border-bottom: 1px solid #EEE; font-family: Open Sans, sans-serif; -} - -.store > .wrapper > .title { box-shadow: 0 4px 3px -2px rgba(0, 0, 0, .05); } -.store > .close { - z-index: 999; -} - -.store > .wrapper > .content, -.store > .wrapper > .title { +.store .content, +.store .title { position: relative; } -.store > .wrapper > .content { +.store .content { overflow: auto; padding: 10px 15px; background: #F5F5F5; height: calc(100% - 70px); } -.store > .wrapper > .content:before { +.store .content:before { top: 0; left: 0; right: 0; @@ -2259,7 +2476,7 @@ body.no-edit .widgets-container .widget.tabbed:before { background: #F5F5F5; } -.store > .wrapper > .content .widget { +.store .content .widget { margin: 5px; cursor: pointer; overflow: hidden; @@ -2271,11 +2488,11 @@ body.no-edit .widgets-container .widget.tabbed:before { box-shadow: 0 1px 2px rgba(102, 102, 102, 0.1); } -.store > .wrapper > .content .widget:hover { +.store .content .widget:hover { background: #FCFCFC; } -.store > .wrapper > .content .widget img { +.store .content .widget img { width: 80px; float: left; height: 80px; @@ -2285,7 +2502,7 @@ body.no-edit .widgets-container .widget.tabbed:before { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); } -.store > .wrapper > .content .widget h2.title { +.store .content .widget h2.title { font-size: 16px; overflow: hidden; line-height: 20px; @@ -2295,7 +2512,7 @@ body.no-edit .widgets-container .widget.tabbed:before { font-family: Open Sans, sans-serif; } -.store > .wrapper > .content .widget .desc { +.store .content .widget .desc { color: #666; font-size: 12px; overflow: hidden; @@ -2309,109 +2526,104 @@ body.no-edit .widgets-container .widget.tabbed:before { + + /*--------------------------------------------- / Store Detail - These ALL need to be direct selectors so they don't interfere with the previews + These need to be direct-descendant selectors so they don't interfere with widget previews */ -.store.detail > .wrapper > .detail { - visibility: visible; - -webkit-transform: scale(1) translateZ(0); - transition: -webkit-transform .3s 0s ease-in-out, visibility 0s 0s linear; +.modal.store-detail { + width: 490px; + max-height: 700px; } -.store > .wrapper > .detail { - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 99; /* Just over the store, but under the close button so the JS is simpler */ - background: #FFF; - position: absolute; - visibility: hidden; - -webkit-transform: scale(0) translateZ(0); - transition: -webkit-transform .3s 0s ease-in-out, visibility 0s .3s linear; +.store-detail > .content { + overflow: auto; + padding: 25px 30px; + background: #F8F8F8; + height: calc(100% - 70px); } -.store > .wrapper > .detail > div > h4 { - font-size: 13px; - margin-top: 25px; - min-height: 16px; - font-weight: 600; - margin-bottom: 15px; - text-transform: uppercase; - font-family: Open Sans, sans-serif; +.store-detail > .content > section { + margin-bottom: 25px; } -.store > .wrapper > .detail > .desc-container { - float: left; - margin-left: 25px; - width: calc(100% - 550px); - height: calc(100% - 85px); +.store-detail > .content > section > h3 { + font-size: 13px; + font-weight: 500; + margin-bottom: 15px; + font-family: Roboto, sans-serif; } -.store > .wrapper > .detail > .desc-container h4 .legend { +.store-detail > .content > section > h3 .legend { float: right; - font-size: 13px; font-weight: 400; - padding-right: 25px; - text-transform: none; } -.store > .wrapper > .detail > .desc-container .handle { +.store-detail > .content > .installation .handle { + font-size: 13px; background: #FFF; + font-weight: 500; padding: 10px 25px; margin-right: 10px; border-radius: 2px; display: inline-block; + text-transform: uppercase; + font-family: Roboto, sans-serif; transition: all .15s ease-in-out; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 2px 1px rgba(102, 102, 102, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, .12), + 0 1px 2px rgba(0, 0, 0, .2); } -.store > .wrapper > .detail > .desc-container .handle:first-of-type { +.store-detail > .content > .installation .handle:first-of-type { margin-left: 20px; } -.store > .wrapper > .detail > .desc-container .handle:hover { - opacity: .8; +.store-detail > .content > .installation .handle:focus, +.store-detail > .content > .installation .handle:hover, +.store-detail > .content > .installation .handle:active { + color: #FFF; cursor: move; - background-color: #FAFAFA; + background: #2196F3; + box-shadow: 0 3px 6px rgba(0, 0, 0, .16), + 0 3px 6px rgba(0, 0, 0, .23); +} + +.store-detail > .content > .installation .handle:focus, +.store-detail > .content > .installation .handle:active { + background: #1E88E5; } -.store > .wrapper > .detail > .desc-container .desc { +.store-detail > .content > .description .desc { overflow: auto; + max-height: 250px; margin-left: 15px; margin-right: 5px; padding-right: 15px; - height: calc(100% - 155px); -} - -.store > .wrapper > .detail > .preview-container { - width: 440px; - float: right; - margin-right: 25px; - height: calc(100% - 85px); } -.store > .wrapper > .detail > .preview-container > .preview { - overflow-x: hidden; - padding-right: 15px; - height: calc(100% - 55px); +.store-detail > .content > section.preview { + padding-bottom: 10px; } -.store > .wrapper > .detail > .preview-container > .preview > .widget { +.store-detail > .content > section.preview > .widget { width: 410px; padding: 15px; font-size: 14px; overflow: hidden; background: #FFF; border-radius: 2px; - margin: 0 10px 10px; - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 2px 1px rgba(102, 102, 102, 0.1); + box-shadow: 0 1px 3px rgba(0, 0, 0, .12), + 0 1px 2px rgba(0, 0, 0, .2); } -.store > .wrapper > .detail > .preview-container > .preview > .widget.tiny { +/* This doesn't have to use direct-desendant because widgets need to be tolerant of the handle and settings classes */ +.store-detail .preview .widget .handle, +.store-detail .preview .widget .settings { + pointer-events: none; +} + +.store-detail > .content > section.preview > .widget.tiny { width: 210px; } @@ -2424,17 +2636,12 @@ body.no-edit .widgets-container .widget.tabbed:before { /*--------------------------------------------- / Themes */ -.modal-overlay.themes { - z-index: 999996; /* Just under the themes modal but over the settings */ -} - .modal.themes { top: 25px; left: 25px; right: 25px; bottom: 25px; cursor: default; - z-index: 999997; max-width: 1400px; max-height: 700px; } @@ -2680,14 +2887,6 @@ body.no-edit .widgets-container .widget.tabbed:before { /*--------------------------------------------- / Themes / Create */ -.modal-overlay.themes.create { - z-index: 999998; -} - -.modal.themes.create { - z-index: 999999; -} - .themes.create .content .title { box-shadow: none; } @@ -3175,6 +3374,94 @@ body.no-edit .widgets-container .widget.tabbed:before { color: #D43F3A; } +.settings .advanced .debug { + float: left; + padding-left: 15px; +} + + + + + + + +/*--------------------------------------------- + / Settings / Advanced / Debug +*/ +.debug .content { + font-family: Roboto, sans-serif; +} + +.debug .section { + margin: 0 25px; + padding: 15px 0; +} + +.debug .section h3 { + font-size: 15px; + font-weight: 500; + margin-bottom: 15px; + font-family: inherit; +} + +.debug button { + border: 0; + outline: 0; + margin: 0 2px; + color: #2196F3; + padding: 0 10px; + font-size: 14px; + min-width: 64px; + font-weight: 500; + line-height: 34px; + text-align: center; + border-radius: 2px; + font-family: inherit; + background: transparent; + text-transform: uppercase; + transition: all .25s cubic-bezier(0, 0, .2, 1); +} + +.debug button:hover, +.debug button:focus { + background: rgba(153, 153, 153, .2); +} + +.debug button:active { + background: rgba(153, 153, 153, .4); +} + +.debug .status { + margin: 0; + font-size: 13px; + padding: 20px 25px 10px; + transition: all .25s cubic-bezier(0, 0, .2, 1); +} + +.debug .status.no-status { + font-size: 0; + padding: 0 25px; +} + +.debug .console { + position: relative; +} + +.debug .console textarea { + width: 100%; + height: 75px; + resize: none; + border-radius: 0; + border-width: 0 0 1px 0!important; +} + +.debug .console button { + right: 0; + top: 12px; + color: #4CAF50; + position: absolute; +} + @@ -3189,7 +3476,9 @@ body.no-edit .widgets-container .widget.tabbed:before { .tooltip:lang(zh), .getting-started .slide:lang(zh), .toolbar .apps-toggle .apps:lang(zh), -.toolbar .search .suggestions div:lang(zh) { +.toolbar .search .suggestions div:lang(zh), +.store-detail > .content > section > h3:lang(zh), +.store-detail > .content > .installation .handle:lang(zh) { font-family: "微軟正黑體", "Microsoft JhengHei", Roboto; } @@ -3197,7 +3486,9 @@ body.no-edit .widgets-container .widget.tabbed:before { .tooltip:lang(ja), .getting-started .slide:lang(ja), .toolbar .apps-toggle .apps:lang(ja), -.toolbar .search .suggestions div:lang(ja) { +.toolbar .search .suggestions div:lang(ja), +.store-detail > .content > section > h3:lang(ja), +.store-detail > .content > .installation .handle:lang(ja) { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", Roboto; } @@ -3216,10 +3507,8 @@ body.no-edit .widgets-container .widget.tabbed:before { .modal > .content > .title:lang(zh), .store > .wrapper > .title:lang(zh), .widget-settings .list .item:lang(zh), -.store > .wrapper > .detail > .title:lang(zh), -.store > .wrapper > .detail > div > h4:lang(zh), -.store > .wrapper > .content .widget .desc:lang(zh), -.store > .wrapper > .content .widget h2.title:lang(zh) { +.store .content .widget .desc:lang(zh), +.store .content .widget h2.title:lang(zh) { font-family: "微軟正黑體", "Microsoft JhengHei", Open Sans; } @@ -3238,10 +3527,8 @@ body.no-edit .widgets-container .widget.tabbed:before { .modal > .content > .title:lang(ja), .store > .wrapper > .title:lang(ja), .widget-settings .list .item:lang(ja), -.store > .wrapper > .detail > .title:lang(ja), -.store > .wrapper > .detail > div > h4:lang(ja), -.store > .wrapper > .content .widget .desc:lang(ja), -.store > .wrapper > .content .widget h2.title:lang(ja) { +.store .content .widget .desc:lang(ja), +.store .content .widget h2.title:lang(ja) { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", Open Sans; } diff --git a/app/css/widgets.css b/app/css/widgets.css index 21683362..a7cdcd10 100644 --- a/app/css/widgets.css +++ b/app/css/widgets.css @@ -954,6 +954,31 @@ /*--------------------------------------------- / Clock */ +.widget.clock { + font-family: Roboto, sans-serif; +} + +.widget.clock.small { + background: #FAFAFA; +} + +.clock .section { + padding: 15px; + position: absolute; + margin: 0 -15px -15px; + transform: translateX(-100%); + transition: transform .2s ease-in-out; +} + +.clock .section.active { + position: static; + transform: translateX(0); +} + +.clock .section.active ~ .section { + transform: translateX(100%); +} + .clock .time { color: #555; font-size: 85px; @@ -963,6 +988,23 @@ font-family: Open Sans, sans-serif; } +.clock input:not([type="checkbox"]) { + border-radius: 0; + border-width: 0 0 1px 0!important; +} + +.clock input.time { + width: 100%; + font-size: 80px; + border-radius: 0; + border: 0!important; + padding: 0 0 5px!important; +} + +.clock input.date { + font-size: 16px; +} + .clock .time:after { color: #67A9E2; font-size: 25px; @@ -980,16 +1022,197 @@ .clock .time.no-seconds { font-size: 120px; - line-height: 150px; + line-height: 115px; } .clock .date { color: #428BCA; font-size: 18px; + margin-top: 20px; + text-align: center; +} + +.clock .controls { + display: flex; + margin-top: 15px; + align-items: flex-end; + justify-content: space-between; +} + +.clock .controls button.material { + margin: 0; +} + +.clock .controls button.material.toggle { + margin: -6px 4px; +} + +.clock .controls button.material.toggle:first-child { + margin-left: -6px; +} + +.clock .start-stop.started #start, +.clock .start-stop:not(.started) #stop { + display: none; +} + + + + + + + +/*--------------------------------------------- + / Clock / Header +*/ +.clock header.tabs { + height: 44px; + display: flex; + background: #FFF; + margin: -15px -15px 0; + border-bottom: 1px solid rgba(0, 0, 0, .1); +} + +.clock .tabs .item { + flex: 1 25%; + padding: 10px 0; + cursor: pointer; + text-align: center; +} + +.clock .tabs svg { + width: 22px; + height: 22px; + fill: #757575; + display: inline-block; + vertical-align: middle; +} + +.clock .tabs .item:hover svg { + fill: #444; +} + +.clock .tabs .item.active svg { + opacity: 1; + fill: #2196F3; +} + + + + + + + + +/*--------------------------------------------- + / Clock / Clock +*/ +.clock .section.clock { + padding-top: 25px; +} + + + + + + +/*--------------------------------------------- + / Clock / Alarm +*/ +.clock .alarm.running input.time, +.clock .alarm:not(.running) div.time { + display: none; +} + +.clock .alarm input.time { + padding: 3px 0 3px!important; +} + +.clock .alarm .date { + color: #333; + flex: 0 145px; + margin-top: 0; + border: 0!important; + padding: 0!important; +} + +.clock .alarm .audio { + margin-left: 5px; + font-weight: 500; +} + + + + + + + +/*--------------------------------------------- + / Clock / Timer +*/ +.clock .timer .controls { margin-top: 10px; +} + +.clock .timer.running input.time, +.clock .timer:not(.running) div.time { + display: none; +} + + + + + + + +/*--------------------------------------------- + / Clock / Alert +*/ +.clock .alert { + left: 0; + right: 0; + top: 100%; + margin: 0; + border: 0; + bottom: 0; + z-index: 1; + color: #FFF; + width: 100%; + height: 100%; + display: flex; + border-radius: 0; + position: absolute; text-align: center; + background: #FB8C00; + flex-flow: row wrap; + align-content: space-around; + transition: top .2s ease-in-out; } +.clock .alert.visible { + top: 0; +} + +.clock .alert > * { + flex-basis: 100%; +} + +.clock .alert h3 { + font-weight: 300; + font-family: inherit; +} + +.clock .alert .time, +.clock .alert button.flat { + color: inherit; +} + +.clock .alert .time { + margin: 0; +} + + + @@ -1232,6 +1455,11 @@ cursor: pointer; } +.widget.traffic a { + color: inherit; + text-decoration: none; +} + .widget.traffic .dest { font-size: 16px; margin-top: 10px; @@ -2621,13 +2849,15 @@ body.no-edit .bookmarks .tools { /*--------------------------------------------- - / iFrame, HTML, Keep, Plus and Facebook shared + / iframe widgets shared */ .widget.html, .widget.keep, .widget.plus, +.widget.gmail, .widget.iframe, .widget.facebook, +.widget.classroom, .widget.notifications { padding: 0!important; } @@ -2635,8 +2865,10 @@ body.no-edit .bookmarks .tools { .html iframe, .keep iframe, .plus iframe, +.gmail iframe, .iframe iframe, .facebook iframe, +.classroom iframe, .notifications iframe { width: 100%; height: 100%; @@ -2650,7 +2882,7 @@ body.no-edit .bookmarks .tools { / Now */ .widgets-container .widget.now, -.preview-container .widget.now { +.store-detail .preview .widget.now { padding: 0!important; border: none!important; box-shadow: none!important; @@ -2814,22 +3046,6 @@ body.no-edit .bookmarks .tools { -/*--------------------------------------------- - / Gmail -*/ -.widget.gmail { - padding: 0!important; -} - -.gmail iframe { - width: 100%; - height: 100%; -} - - - - - /*--------------------------------------------- / Twitter */ @@ -3375,4 +3591,196 @@ body.no-edit .bookmarks .tools { .quotes footer .refresh:hover svg { fill: #222; +} + + + + + + + +/*--------------------------------------------- + / Site Link +*/ +.widget.sitelink { + padding: 0!important; + border-radius: 4px 4px 2px 2px; +} + +.sitelink a { + display: block; + text-decoration: none; +} +.widget.sitelink h2.header { + margin: 0; + padding: 12px; +} + +.sitelink .thumbnail { + display: block; + overflow: hidden; + position: relative; + background: #F8F8F8; + padding-bottom: 65%; + border-radius: 4px 4px 0 0; + box-shadow: 0 0 4px rgba(0, 0, 0, .2); +} + +.sitelink .thumbnail:not(.fill) { + background-image: none!important; +} + +.sitelink .thumbnail img { + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + max-width: 100%; + max-height: 100%; + position: absolute; +} + +.sitelink .thumbnail.fill { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.sitelink .thumbnail.fill img { + display: none; +} + + + + + + + +/*--------------------------------------------- + / System Stats +*/ +.stats { + font-family: Roboto, sans-serif; +} + +.stats .header { + margin-bottom: 15px; +} + +.stats .cpu, +.stats .memory { + margin-bottom: 20px; +} + +.stats .label { + width: 60px; + padding-right: 5px; + display: inline-block; + vertical-align: middle; +} + +.stats h3 { + font-size: 13px; + font-weight: 500; + text-align: center; + margin-bottom: 5px; + font-family: inherit; +} + +.stats .icon { + width: 100%; + opacity: .6; + height: 36px; + display: inline-block; +} + +.stats .status { + display: inline-block; + vertical-align: middle; + width: calc(100% - 65px); +} + +.stats .name, +.stats .summary { + font-size: 13px; + margin-bottom: 2px; +} + +.stats progress { + width: auto; + height: 6px; + margin: 6px 0; + display: block; + overflow: hidden; + border-radius: 2px; + -webkit-appearance: none; +} + +.stats progress::-webkit-progress-value { + background: #2196F3; + transition: width .5s ease; +} + +.stats progress::-webkit-progress-bar { + background: #BBDEFB; +} + + + + + + + +/*--------------------------------------------- + / Search +*/ +.widget.search form { + height: 50px; + margin: -15px; + position: relative; +} + +.widget.search .searchbox { + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + border-radius: 0; + position: absolute; + border: 0!important; + font-family: Roboto; + padding: 6px 18px!important; +} + +.widget.search .searchbox:focus, +.widget.search .searchbox:active { + background: rgba(0, 0, 0, .015)!important; +} + +.widget.search button.submit { + top: 0; + right: 0; + bottom: 0; + margin: 0; + border-radius: 0; + position: absolute; +} + +.widget.search.tiny form { + height: 65px; +} + + + + + + + +/*--------------------------------------------- + / Classroom +*/ +.widget.classroom { + height: 450px; } \ No newline at end of file diff --git a/app/icons/classroom.png b/app/icons/classroom.png new file mode 100644 index 00000000..55dc4498 Binary files /dev/null and b/app/icons/classroom.png differ diff --git a/app/icons/search.png b/app/icons/search.png new file mode 100644 index 00000000..cc5d859d Binary files /dev/null and b/app/icons/search.png differ diff --git a/app/icons/sitelink.png b/app/icons/sitelink.png new file mode 100644 index 00000000..0110a8ab Binary files /dev/null and b/app/icons/sitelink.png differ diff --git a/app/icons/stats.png b/app/icons/stats.png new file mode 100644 index 00000000..35102bbf Binary files /dev/null and b/app/icons/stats.png differ diff --git a/app/images/sitelink_demo.png b/app/images/sitelink_demo.png new file mode 100644 index 00000000..50024d0f Binary files /dev/null and b/app/images/sitelink_demo.png differ diff --git a/app/inject/js/classroom.js b/app/inject/js/classroom.js new file mode 100644 index 00000000..5fb45c3a --- /dev/null +++ b/app/inject/js/classroom.js @@ -0,0 +1,56 @@ +var s = document.createElement("script"); + +s.textContent = "(" + (function() { + // Ignore eval + /* jshint -W060 */ + /* jshint -W061 */ + + var oEval = window.eval, + oOpen = window.open; + + window.eval = function(js) { + if (js == "win.frameElement.src") { + document.write( + "" + + "