Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| @import (less) "../node_modules/normalize.css/normalize.css"; | |
| @import "mixins/bfc.less"; | |
| @import "mixins/clearfix.less"; | |
| @import "mixins/user-select.less"; | |
| @import "variables.less"; | |
| @blueText: #3B48F6; | |
| @purple: #aa1dc1; | |
| @pageWidth: 740px; | |
| .clearfix { | |
| .clearfix(); | |
| } | |
| .hide { display: none ; } | |
| /************ | |
| * Common styles | |
| ************/ | |
| body { | |
| font-family: @fontSans; | |
| font-size: 16px; | |
| line-height: 1.4; | |
| color: #333; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| input { | |
| color: #333; | |
| } | |
| a { | |
| color: @blueText; | |
| text-decoration: none; | |
| } | |
| button.input-button { | |
| color: @blueText; | |
| outline: none; | |
| background: transparent; | |
| border: none; | |
| height: 32px; | |
| cursor: pointer; | |
| .user-select(none); | |
| } | |
| /************ | |
| * body.app | |
| ************/ | |
| body.app { | |
| background-color: #f8f9fa; | |
| /** | |
| * Header | |
| */ | |
| header { | |
| background-color: white; | |
| div.header { | |
| .clearfix(); | |
| padding: 10px 30px; | |
| img.logo { | |
| height: 50px; | |
| float: left; | |
| margin-right: 26px; | |
| } | |
| /** | |
| * or: | |
| */ | |
| a.cross-collab { | |
| float: left; | |
| margin-right: 24px; | |
| img.logo-collab { | |
| height: 50px; | |
| &.logo-uber { | |
| height: 25px; | |
| vertical-align: 10px; | |
| } | |
| } | |
| img.cross { | |
| height: 20px; | |
| margin: 0 8px; | |
| vertical-align: 12px; | |
| } | |
| } | |
| .header-inner { | |
| float: left; | |
| .title { | |
| color: #222; | |
| font-weight: 600; | |
| font-size: 21px; | |
| margin-bottom: 4px; | |
| .info { | |
| margin-left: 8px; | |
| cursor: pointer; | |
| opacity: 0.8; | |
| &:hover { | |
| opacity: 1; | |
| } | |
| } | |
| code { | |
| margin-left: 4px; | |
| vertical-align: 3px; | |
| } | |
| } | |
| .toolbar { | |
| margin-bottom: 2px; | |
| font-size: 14px; | |
| color: #6D6D6D; | |
| a { | |
| img { | |
| vertical-align: bottom; | |
| margin-right: 6px; | |
| } | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| } | |
| .toolbar-el { | |
| display: inline-block; | |
| margin-right: 34px; | |
| } | |
| kbd { | |
| margin-left: 2px; | |
| } | |
| } | |
| &[data-page-editable="false"] { | |
| margin-top: 4px; | |
| } | |
| } | |
| .rightbar { | |
| float: right; | |
| margin-top: 14px; | |
| font-size: 14px; | |
| a { | |
| img { | |
| vertical-align: sub; | |
| margin-left: 8px; | |
| } | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| } | |
| span.doc-status { | |
| font-size: 14px; | |
| color: #6D6D6D; | |
| } | |
| a.btn { | |
| margin-left: 10px; | |
| border-radius: 6px; | |
| padding: 5px 10px; | |
| color: white; | |
| box-shadow: 0 5px 17px 0 rgba(64,64,64,0.4); | |
| background-color: grey; | |
| &.btn-primary { | |
| background-color: #40bf0e; | |
| } | |
| position: relative; | |
| &:active { | |
| top: 1px; | |
| } | |
| } | |
| } | |
| } | |
| div.ruler { | |
| height: 5px; | |
| background-color: #e8eaeda3; | |
| border-top: 1px solid #dddddd61; | |
| border-bottom: 1px solid #dddddd30; | |
| } | |
| } | |
| } | |
| /** | |
| * page container | |
| */ | |
| .page-wrapper { | |
| padding-top: 50px; | |
| padding-bottom: 80px; | |
| @media (max-width: 1100px) { | |
| padding-top: initial; | |
| } | |
| .page-container { | |
| box-shadow: 0 1px 3px 1px rgba(60, 60, 60, 0.13); | |
| box-sizing: border-box; | |
| margin-left: auto; | |
| margin-right: auto; | |
| max-width: @pageWidth; | |
| background-color: white; | |
| padding: 56px 50px; | |
| min-height: 700px; | |
| .page-inner { | |
| padding: 20px 30px; | |
| /// div.editor is here. | |
| .watermark { | |
| visibility: hidden; | |
| text-align: right; | |
| margin-top: 20px; | |
| span.sep { | |
| margin-left: 3px; | |
| margin-right: 3px; | |
| } | |
| span.website { | |
| color: #aaa; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /** | |
| * Editor | |
| */ | |
| div.editor { | |
| /// This is a `position: relative` because of quill and .ql-container | |
| /// ^^ | |
| font-weight: 400; // also experimented w/ 600; | |
| a { | |
| text-decoration: underline; | |
| color: inherit; | |
| } | |
| img.js-loader { | |
| width: 20px; | |
| position: absolute; | |
| } | |
| a.share-screenshot { | |
| text-decoration: none; | |
| font-size: 13px; | |
| border-radius: 1000px; | |
| border: 1px solid @purple; | |
| color: @purple; | |
| position: absolute; | |
| top: 20px; | |
| right: -230px; | |
| padding: 1px 10px; | |
| img { | |
| vertical-align: text-top; | |
| margin-left: 4px; | |
| width: 16px; | |
| } | |
| transition: opacity 0.3s; | |
| &.fadeout { | |
| opacity: 0; | |
| } | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| @media (max-width: 1100px) { | |
| top: initial; | |
| right: initial; | |
| left: 0; | |
| bottom: -40px; | |
| } | |
| } | |
| } | |
| @import "quill.less"; | |
| @import "style-mention.less"; | |
| /** | |
| * Settings and modals | |
| */ | |
| div.decoder-settings { | |
| @media (max-width: 1100px) { | |
| display: none; | |
| } | |
| background-color: #ececec; | |
| position: fixed; | |
| bottom: 0; | |
| width: 140px; | |
| padding: 2px 6px; | |
| .title { | |
| font-size: 11px; | |
| img { | |
| margin-left: 4px; | |
| vertical-align: middle; | |
| opacity: 0.5; | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| } | |
| } | |
| .setting { | |
| .desc { | |
| font-size: 11px; | |
| font-weight: bold; | |
| } | |
| .js-val { | |
| margin-left: 3px; | |
| &.green { color: rgb(109, 144, 6); } | |
| &.orange { color: #FF7E00; } | |
| &.red { color: red; } | |
| } | |
| } | |
| input.slider { | |
| width: 100%; | |
| } | |
| label.radio { | |
| font-size: 12px; | |
| input[type=radio] { | |
| margin-right: 2px; | |
| } | |
| &.block { | |
| display: block; | |
| } | |
| } | |
| } | |
| div.modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 10000; | |
| background-color: rgba(32, 23, 49, 0.36); | |
| transition: opacity .3s; | |
| &.fadeout { | |
| opacity: 0; | |
| } | |
| .modal-inner { | |
| width: 500px; | |
| padding: 24px 24px; | |
| box-sizing: border-box; | |
| margin: 36px auto; | |
| max-height: 80%; | |
| overflow-y: auto; | |
| @media (max-width: 500px) { | |
| width: 100%; | |
| } | |
| background-color: white; | |
| box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12); | |
| border-radius: 2px; | |
| .modal-content { | |
| font-size: 15px; | |
| p { | |
| margin-top: 0; | |
| } | |
| } | |
| img.js-loader.big { | |
| width: 40px; | |
| display: block; | |
| margin: 60px auto; | |
| } | |
| div.buttons { | |
| border-top: 1px solid #c0b5c57d; | |
| padding-top: 4px; | |
| a { | |
| float: right; | |
| } | |
| } | |
| } | |
| } | |
| div.modal.share-screenshot { | |
| img.js-result { | |
| width: 100%; | |
| margin: 16px auto; | |
| } | |
| } | |
| div.modal.save-publish { | |
| .modal-title { | |
| color: #222; | |
| font-weight: 600; | |
| font-size: 18px; | |
| margin-bottom: 6px; | |
| } | |
| input.doc-url { | |
| margin: 10px auto; | |
| width: 100%; | |
| font-size: 11px; | |
| border-radius: 4px; | |
| border: 1px solid #e0e0e0; | |
| padding: 6px 6px; | |
| box-sizing: border-box; | |
| outline: none; | |
| font-family: monospace; | |
| background-color: #f7f7f7; | |
| } | |
| div.descr-doc-title { | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| } | |
| input.doc-title { | |
| margin: 10px auto; | |
| width: 100%; | |
| border-radius: 4px; | |
| border: 1px solid #e0e0e0; | |
| padding: 6px 6px; | |
| box-sizing: border-box; | |
| outline: none; | |
| font-weight: 600; | |
| font-size: 16px; | |
| } | |
| } | |
| /** | |
| * Other pages | |
| */ | |
| @import "style-pages.less"; | |
| /** | |
| * Imports | |
| */ | |
| @import "style-end.less"; | |
| /** | |
| * The End. | |
| */ | |