https://github.com/boriskrasko/macos-big-sur-terminal

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
https://github.com/boriskrasko/macos-big-sur-terminal

apple bigsur css css-modules css3 flex html html5 javascript js macos modules nativescript terminal window

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/boriskrasko/macos-big-sur-terminal
• Owner: boriskrasko
• Created: 2020-11-13T01:36:51.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-07T17:47:24.000Z (almost 4 years ago)
• Last Synced: 2024-07-30T16:58:35.602Z (6 months ago)
• Topics: apple, bigsur, css, css-modules, css3, flex, html, html5, javascript, js, macos, modules, nativescript, terminal, window
• Language: CSS
• Homepage: https://boriskrasko.github.io/macos-big-sur-terminal/
• Size: 8.71 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# macos-big-sur-terminal

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. For each element of window used in different styles (css folder).

Terminal was created for tutorial pages where we need to use command line.

## [GitHub pages](https://boriskrasko.github.io/macos-big-sur-terminal)

My Discord:  [Boris Krasko#8935](https://discordapp.com/users/748253869389250560/)

![inactivity window](https://boriskrasko.github.io/macos-big-sur-terminal/images/macos-traffic-lights-inactive.png)

![activity window](https://boriskrasko.github.io/macos-big-sur-terminal/images/macos-traffic-lights-active.png)

Sample css code for traffic lights

```

:root {

/* Traffic Light Colors */

    --red: #F96057;

    --yellow: #F8CE52;

    --green: #5FCF65;

    --oval: rgba(0, 0, 0, 0.1);

    --inactive: rgba(0, 0, 0, 0.05);

}

.traffic__lights {

    position: absolute;

    width: 52px;

    height: 12px;

    left: 8px;

    top: 8px;

}

.traffic__light, .oval {

    position: absolute;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    box-sizing: border-box;

    transition: all 0.05s ease-in-out;

}

.traffic__light {

    background: var(--inactive);

}

.oval {

    border: 0.5px solid var(--oval);

}

.close {

    left: 0px;

}

.minimise {

    left: 19.89px;

}

.zoom {

    left: 39.89px;

}

.red {

    background: var(--red);

}

.yellow {

     background: var(--yellow);

}

.green {

     background: var(--green);

}

```