license import { StyleSheet } from "aphrodite" ; const previewPendingAnimation = { "0%" : { opacity : 0.0 , } , "50%" : { opacity : 0.15 , } , "100%" : { opacity : 0.0 , } , } ; const PREVIEW_WIDTH = "50%" ; const EDITOR_WIDTH = "50%" ; export const APP_STYLE = StyleSheet . create ( { errorDecoration : { border : "2px solid red" , color : "red" , fontStyle : "oblique" , fontWeight : "bold" , textDecoration : "underline" , } , errorMask : { backgroundColor : "black" , bottom : 0 , color : "white" , left : PREVIEW_WIDTH , padding : 15 , position : "absolute" , right : 0 , textAlign : "center" , top : 0 , } , monacoHidden : { display : "none" , } , pendingPreviewMask : { animationDuration : "2s" , animationIterationCount : "infinite" , animationName : previewPendingAnimation , animationTimingFunction : "ease-in-out" , backgroundColor : "black" , bottom : 0 , left : PREVIEW_WIDTH , position : "absolute" , right : 0 , top : 0 , } , previewPendingMaskModeView : { left : 0 , } , sheetMusicError : { color : "#aeaeae" , display : "inline-block" , textAlign : "center" , verticalAlign : "middle" , } , sheetMusicView : { alignItems : "center" , backgroundColor : "white" , border : "0 none" , bottom : 0 , display : "flex" , justifyContent : "center" , overflow : "hidden" , position : "absolute" , right : "0" , top : 0 , } , sheetMusicViewEdit : { left : EDITOR_WIDTH , } , sheetMusicViewView : { left : 0 , } , urgentEditorNotification : { backgroundColor : "#1e1e1e" , color : "white" , fontWeight : "bold" , left : 0 , padding : 10 , top : 0 , zIndex : 100000 , } , urgentEditorNotificationClose : { color : "#aeaeae" , } , } ) ; export const GITHUB_STYLE = StyleSheet . create ( { btnGithub : { ":active" : { backgroundColor : "#101010" , } , ":hover" : { backgroundColor : "#444444" , } , backgroundColor : "#2a2a2a" , backgroundImage : "url('./github.svg')" , backgroundPosition : "1em" , backgroundRepeat : "no-repeat" , backgroundSize : "2em" , border : "none" , borderRadius : "0.5em" , color : "white" , cursor : "pointer" , fontSize : "1em" , height : "4em" , lineHeight : "1em" , padding : "0 2em 0 4em" , textDecoration : "none" , transition : "all 0.5s" , width : 262 , } , } ) ; license export const BUTTON_STYLE = StyleSheet . create ( { buttonStyle : { ":first-child" : { borderBottomLeftRadius : "3px" , borderLeft : "1px solid #ccc" , borderTopLeftRadius : "3px" , } , [ ":focus" as any ] : { zIndex : "2" , } , ":hover" : { backgroundColor : "#ccc" , } , ":last-child" : { borderBottomRightRadius : "3px" , borderRight : "1px solid #ccc" , borderTopRightRadius : "3px" , } , backgroundColor : "white" , border : "1px solid #ccc" , borderLeft : "0" , cursor : "pointer" , margin : "0" , padding : "5px 10px" , position : "relative" , } , downloadChoiceButton : { boxSizing : "border-box" , color : "black" , display : "inline-block" , marginBottom : 10 , textDecoration : "none" , width : "100%" , } , selectedStyle : { backgroundColor : "#ddd" , } , } ) ;