-
-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix osx buttons and cmd+c/cmd+v inputs
- Loading branch information
Showing
5 changed files
with
444 additions
and
7 deletions.
There are no files selected for viewing
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,331 @@ | ||
| body, p, h1, h2{ | ||
| margin: 0; | ||
| font-family: sans-serif; | ||
| } | ||
| body{ | ||
| overflow: hidden; | ||
| } | ||
| a{color: inherit;text-decoration: none;} | ||
|
|
||
|
|
||
| /** | ||
| * TOOLBAR | ||
| */ | ||
| .toolbar{ | ||
| margin: 3px; | ||
| padding: 10px; | ||
| position: relative; | ||
| z-index: 10000; | ||
| box-sizing: border-box; | ||
| -webkit-app-region: drag; | ||
| } | ||
| .toolbar p{ | ||
| color: rgba(0, 0, 0, 0.3); | ||
| font-weight: bold; | ||
| cursor: default; | ||
| display: inline-block; | ||
| margin-right: 20px; | ||
| -webkit-app-region: no-drag; | ||
| cursor: pointer; | ||
| transition: 0.3s; | ||
| } | ||
| .toolbar p:hover{ | ||
| color: rgba(0, 0, 0, 0.4); | ||
| } | ||
| .toolbar .active{ | ||
| color: rgba(0, 0, 0, 0.5); | ||
| } | ||
| .whited p{ | ||
| color: rgba(255, 255, 255, 0.3); | ||
| } | ||
| .whited p:hover{ | ||
| color: rgba(255, 255, 255, 0.4); | ||
| } | ||
| .whited .active{ | ||
| color: rgba(255, 255, 255, 0.5); | ||
| } | ||
| .toolbar p::selection, .toolbar li::selection, .toolbar div::selection{ | ||
| background: rgba(0, 0, 0, 0); | ||
| } | ||
| .toolbar ul{ | ||
| -webkit-app-region: no-drag; | ||
| display: inline-block; | ||
| position: relative; | ||
| bottom: 3px; right: 3px; | ||
| margin: 0; | ||
| margin-right: 10px;; | ||
| padding: 0; | ||
| } | ||
| .toolbar li{ | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| cursor: pointer; | ||
| } | ||
| .toolbar li div{ | ||
| cursor: pointer; | ||
| transition: 0.2s; | ||
| width: 13px; height: 13px; | ||
| margin-left: 4px; | ||
| border-radius: 15px; | ||
| } | ||
| .toolbar .minimize{ | ||
| background: #FEBF3C; | ||
| } | ||
| .toolbar li:hover .minimize{ | ||
| background: #FEB219; | ||
| } | ||
| .toolbar .square{ | ||
| background: #35CC48; | ||
| } | ||
| .toolbar li:hover .square{ | ||
| background: #32C544; | ||
| } | ||
| .toolbar .close{ | ||
| background: #FC635C; | ||
| } | ||
| .toolbar li:hover .close{ | ||
| background: #FC4B43; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| /** | ||
| * HEADER CSS | ||
| */ | ||
| header{ | ||
| position: relative; | ||
| z-index: 900; | ||
| width: 100%; | ||
| } | ||
| header .nu, header .ni{ | ||
| display: flex; | ||
| } | ||
| header .nu aside{ | ||
| background: rgb(40, 40, 40); | ||
| flex: 1 100%; | ||
| height: 65px; | ||
| cursor: pointer; | ||
| } | ||
| header .ni aside{ | ||
| background: rgb(70, 70, 70); | ||
| flex: 1 100%; | ||
| height: 50px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /** | ||
| * HEADER BOX CSS | ||
| */ | ||
| .nuance, .alea, .mode{ | ||
| display: inline-block; | ||
| width: 80px; | ||
| padding: 5px 0; | ||
| background: rgba(0, 0, 0, 0.2); | ||
| cursor: pointer; | ||
| text-align: center; | ||
| color: white; | ||
| font-weight: 300; | ||
| } | ||
| .alea{ left: 200px;} | ||
| .mode{ left: 110px;} | ||
|
|
||
|
|
||
| /** | ||
| * BOX COLORPICKER CSS | ||
| */ | ||
| .edit-box{ | ||
| background: rgba(0, 0, 0, 0); | ||
| position: absolute; | ||
| z-index: 200; | ||
| bottom: 0; left: 0; | ||
| padding-top: 15px; | ||
| padding-bottom: 3px; | ||
| padding-left: 10px; | ||
| width: 100%; | ||
| text-align: center; | ||
| display: flex; | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| .sliders{ | ||
|
|
||
| } | ||
|
|
||
| .redBar, .greenBar, .blueBar{ | ||
| position: relative; | ||
| width: 220px; | ||
| height: 20px; | ||
| padding: 6px 0; | ||
| } | ||
|
|
||
| /* STYLING SLIDER */ | ||
| input[type=range]{ | ||
| margin: 0; | ||
| padding: 3px 0; | ||
| -webkit-appearance: none; | ||
| outline: none; | ||
| background: none; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| } | ||
| input[type=range]::-webkit-slider-thumb { | ||
| position: relative; | ||
| z-index: 100; | ||
| -webkit-appearance: none; | ||
| border: none; | ||
| height: 22px; | ||
| width: 22px; | ||
| border-radius: 50%; | ||
| background: white; | ||
| margin-top: -10px; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| progress[value]::-webkit-progress-bar { | ||
| position: absolute; | ||
| width: 99%; | ||
| top: 5px; left: 1px; | ||
| background-color: white; | ||
| border-radius: 6px; | ||
| height: 10px; | ||
| } | ||
| .redBar progress[value]::-webkit-progress-value { | ||
| background: rgb(255, 87, 57); | ||
| border-radius: 6px; | ||
| height: 10px; | ||
| } | ||
| .greenBar progress[value]::-webkit-progress-value { | ||
| background: rgb(105, 195, 59); | ||
| border-radius: 6px; | ||
| height: 10px; | ||
| } | ||
| .blueBar progress[value]::-webkit-progress-value { | ||
| background: rgb(65, 165, 225); | ||
| border-radius: 6px; | ||
| height: 10px; | ||
| } | ||
| progress{ | ||
| -webkit-appearance: none; | ||
| appearance: none; | ||
| } | ||
|
|
||
| /* INPUTS STYLE */ | ||
| .inputs{ | ||
|
|
||
| } | ||
| .inputs input{ | ||
| display: block; | ||
| margin-bottom: 8px; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
| .inputs input[type=number]::-webkit-inner-spin-button, | ||
| .inputs input[type=number]::-webkit-outer-spin-button { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .inputs input[type="number"], input[type="text"]{ | ||
| width: 30px; | ||
| text-align: center; | ||
| background: rgba(0, 0, 0, 0.1); | ||
| color: rgba(0, 0, 0, 0.5); | ||
| border: none; | ||
| padding: 2px; | ||
| font-family: "Source Sans Pro", sans-serif; | ||
| font-size: 1.1em; | ||
| font-weight: bold; | ||
| outline: none; | ||
| transition: 0.3s; | ||
| } | ||
| .whited .inputs input[type="number"], .whited input[type="text"], .whited .value p{ | ||
| background: rgba(255, 255, 255, 0.1); | ||
| color: rgba(255, 255, 255, 0.5); | ||
| } | ||
|
|
||
| .value{ | ||
| margin-bottom: 8px; | ||
| margin-left: 10px; | ||
| } | ||
| .value input{ | ||
| display: block; | ||
| margin-bottom: 8px; | ||
| width: 105px; | ||
| } | ||
| .value p{ | ||
| background: rgba(0, 0, 0, 0.1); | ||
| color: rgba(0, 0, 0, 0.5); | ||
| font-weight: bold; | ||
| padding: 4px 2px; | ||
| width: 105px; | ||
| transition: 0.3s; | ||
| } | ||
|
|
||
| #newBox{ | ||
| position: absolute; | ||
| bottom: 15px; right: 30px; | ||
| border: 3px solid rgba(0, 0, 0, 0.15); | ||
| width: 12px; height: 12px; | ||
| cursor: pointer; | ||
| z-index: 999; | ||
| transition: 0.3s; | ||
| } | ||
| #newBox:hover{ | ||
| border: 3px solid rgba(0, 0, 0, 0.25); | ||
| } | ||
| .whited #newBox{ | ||
| border: 3px solid rgba(255, 255, 255, 0.15); | ||
| } | ||
| .whited #newBox:hover{ | ||
| border: 3px solid rgba(255, 255, 255, 0.25); | ||
| } | ||
| #newBox.active{ | ||
| border: 3px solid rgba(0, 0, 0, 0.3); | ||
| } | ||
| .whited #newBox.active{ | ||
| border: 3px solid rgba(255, 255, 255, 0.3); | ||
| } | ||
|
|
||
| .box{ | ||
| position: absolute; | ||
| top: 0; right: -200px; | ||
| height: 100%; | ||
| width: 200px; | ||
| transition: right 0.5s; | ||
| } | ||
|
|
||
| #numberBoxHex{ | ||
| cursor: default; | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| transition: 0.4s; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /** | ||
| * RESPONSIVE CSS | ||
| */ | ||
| @media screen and (max-width: 500px){ | ||
|
|
||
| } | ||
|
|
||
| @media screen and (max-height: 200px){ | ||
| .edit-box{ | ||
| background: none; | ||
| } | ||
| } | ||
| /** | ||
| * VIEWPORT CSS | ||
| */ | ||
| @viewport{ | ||
| zoom: 1.0; | ||
| width: extend-to-zoom; | ||
| } | ||
| @-ms-viewport{ | ||
| zoom: 1.0; | ||
| width: extend-to-zoom; | ||
| } |
Oops, something went wrong.