{"id":21212504,"url":"https://github.com/boriskrasko/macos-big-sur-terminal","last_synced_at":"2025-07-19T23:36:42.459Z","repository":{"id":54691979,"uuid":"312441832","full_name":"boriskrasko/macos-big-sur-terminal","owner":"boriskrasko","description":"MacOS Big Sur terminal window design including traffic lights, shadows, first command line with actual time and date, and text input effect | Each design element can be used as an independent element","archived":false,"fork":false,"pushed_at":"2021-02-07T17:47:24.000Z","size":9138,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-10T15:02:12.184Z","etag":null,"topics":["apple","bigsur","css","css-modules","css3","flex","html","html5","javascript","js","macos","modules","nativescript","terminal","window"],"latest_commit_sha":null,"homepage":"https://boriskrasko.github.io/macos-big-sur-terminal/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boriskrasko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-13T01:36:51.000Z","updated_at":"2024-05-30T16:28:44.000Z","dependencies_parsed_at":"2022-08-14T00:10:36.437Z","dependency_job_id":null,"html_url":"https://github.com/boriskrasko/macos-big-sur-terminal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/boriskrasko/macos-big-sur-terminal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boriskrasko%2Fmacos-big-sur-terminal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boriskrasko%2Fmacos-big-sur-terminal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boriskrasko%2Fmacos-big-sur-terminal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boriskrasko%2Fmacos-big-sur-terminal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boriskrasko","download_url":"https://codeload.github.com/boriskrasko/macos-big-sur-terminal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boriskrasko%2Fmacos-big-sur-terminal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266042032,"owners_count":23867960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","bigsur","css","css-modules","css3","flex","html","html5","javascript","js","macos","modules","nativescript","terminal","window"],"created_at":"2024-11-20T21:10:45.607Z","updated_at":"2025-07-19T23:36:42.436Z","avatar_url":"https://github.com/boriskrasko.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# macos-big-sur-terminal\n\nMacOS Big Sur terminal window design including traffic lights, shadows, first command line with actual time and date, and text input effect.\nEach design element can be used as an independent element. For each element of window used in different styles (css folder).\nTerminal was created for tutorial pages where we need to use command line.\n\n## [GitHub pages](https://boriskrasko.github.io/macos-big-sur-terminal)\n\nMy Discord:  [Boris Krasko#8935](https://discordapp.com/users/748253869389250560/)\n\n![inactivity window](https://boriskrasko.github.io/macos-big-sur-terminal/images/macos-traffic-lights-inactive.png)\n\n![activity window](https://boriskrasko.github.io/macos-big-sur-terminal/images/macos-traffic-lights-active.png)\n\n\nSample css code for traffic lights\n```\n:root {\n/* Traffic Light Colors */\n    --red: #F96057;\n    --yellow: #F8CE52;\n    --green: #5FCF65;\n    --oval: rgba(0, 0, 0, 0.1);\n    --inactive: rgba(0, 0, 0, 0.05);\n}\n\n.traffic__lights {\n    position: absolute;\n    width: 52px;\n    height: 12px;\n    left: 8px;\n    top: 8px;\n}\n\n.traffic__light, .oval {\n    position: absolute;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    transition: all 0.05s ease-in-out;\n}\n\n.traffic__light {\n    background: var(--inactive);\n}\n\n.oval {\n    border: 0.5px solid var(--oval);\n}\n\n.close {\n    left: 0px;\n}\n\n.minimise {\n    left: 19.89px;\n}\n\n.zoom {\n    left: 39.89px;\n}\n\n.red {\n    background: var(--red);\n}\n\n.yellow {\n     background: var(--yellow);\n}\n\n.green {\n     background: var(--green);\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboriskrasko%2Fmacos-big-sur-terminal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboriskrasko%2Fmacos-big-sur-terminal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboriskrasko%2Fmacos-big-sur-terminal/lists"}