{"id":24482269,"url":"https://github.com/ozzies-code/circletoolbar","last_synced_at":"2025-03-14T19:22:50.418Z","repository":{"id":183102405,"uuid":"669602594","full_name":"ozzies-code/CircleToolbar","owner":"ozzies-code","description":"This project consists of a circular toolbar that is located in the upper left corner with a series of icons to access the functions of a web platform but intelligently located visually to make the most of the space.","archived":false,"fork":false,"pushed_at":"2023-07-22T20:27:35.000Z","size":11,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T12:13:08.579Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ozzies-code.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,"governance":null}},"created_at":"2023-07-22T20:18:12.000Z","updated_at":"2023-07-22T20:28:28.000Z","dependencies_parsed_at":"2023-07-22T21:38:36.243Z","dependency_job_id":null,"html_url":"https://github.com/ozzies-code/CircleToolbar","commit_stats":null,"previous_names":["ozzies-code/circletoolbar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FCircleToolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FCircleToolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FCircleToolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ozzies-code%2FCircleToolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ozzies-code","download_url":"https://codeload.github.com/ozzies-code/CircleToolbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243633063,"owners_count":20322530,"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":[],"created_at":"2025-01-21T12:13:16.699Z","updated_at":"2025-03-14T19:22:50.391Z","avatar_url":"https://github.com/ozzies-code.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CircleToolbar\nThis project consists of a circular toolbar that is located in the upper left corner with a series of icons to access the functions of a web platform but intelligently located visually to make the most of the space.\n\nCSS:\n\nbody {\n  padding: 0;\n  margin: 0;\n  background-color: orange;\n  color: #fff;\n}\n\nbody * {\n  box-sizing: border-box;\n}\n\n.icon {\n  position: absolute;\n  top: 70%;\n  left: 70%;\n  transform: translateX(-50%) translateY(-50%);\n}\n\n.hamburger {\n  content: ' ';\n  position: relative;\n  width: 20px;\n  border: 2px solid #392338;\n  border-radius: 5px;\n  transition: all 0.333333333333333s ease;\n}\n\n.hamburger:after,\n.hamburger:before {\n  content: ' ';\n  position: absolute;\n  left: 50%;\n  width: 100%;\n  border: 2px solid #392338;\n  border-radius: 5px;\n  transform: translateX(-50%);\n  transition-property: top, bottom, transform;\n  transition-duration: 1s, 1s, 0.25s;\n}\n\n.hamburger:after {\n  top: -8px;\n}\n\n.hamburger:before {\n  bottom: -8px;\n}\n\n.menu {\n  pointer-events: none;\n}\n\n.menu--circle {\n  position: absolute;\n  z-index: 13;\n  width: 243.33333333333334px;\n  height: 243.33333333333334px;\n  background-color: orange;\n  overflow: hidden;\n}\n\n.menu__active {\n  position: relative;\n}\n\n.menu__toggle {\n  z-index: 11;\n  position: absolute;\n  top: -100px;\n  left: -100px;\n  width: 200px;\n  height: 200px;\n  background-color: blue;\n  border-radius: 50%;\n  transition: transform 1.3s;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.menu__listings {\n  z-index: 10;\n  position: absolute;\n  top: -200px;\n  left: -200px;\n  width: 400px;\n  height: 400px;\n  border-radius: 50%;\n  transform: scale(0.1) rotate(150deg);\n  transition: transform 1s;\n}\n\n.menu__arrow {\n  visibility: hidden;\n  position: absolute;\n}\n\n.menu__arrow input[type=\"radio\"] {\n  position: fixed;\n  top: -99999px;\n  left: -99999px;\n}\n\n.menu__arrow ul {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.menu__arrow--top {\n  top: 0.5em;\n  left: 220px;\n}\n\n.menu__arrow--top .arrow {\n  transform: rotate(-45deg);\n}\n\n.menu__arrow--left {\n  top: 220px;\n  left: 0.5em;\n}\n\n.menu__arrow--left .arrow {\n  transform: rotate(-135deg);\n}\n\n.arrow {\n  width: 20px;\n  height: 20px;\n  border-right: 6.666666666666667px solid #fff;\n  border-top: 6.666666666666667px solid #fff;\n  border-radius: 3px;\n  transition: border-color 0.3s;\n  cursor: pointer;\n  pointer-events: auto;\n}\n\n.arrow:hover {\n  border-color: #ff947f;\n  transition: border-color 0.3s;\n}\n\n.circle {\n  position: relative;\n  padding: 0;\n  margin: 0;\n  height: 100%;\n  width: 100%;\n  background-color: red;\n  border-radius: 50%;\n  transform: rotate(108deg);\n  overflow: hidden;\n  list-style: none;\n}\n\n.circle li {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 50%;\n  height: 50%;\n  transform-origin: 0 100%;\n}\n\n.circle li .placeholder {\n  position: absolute;\n  left: -100%;\n  padding-top: 1.5em;\n  width: 200%;\n  height: 200%;\n  text-align: center;\n  transform: skewY(54deg) rotate(18deg);\n}\n\n.circle li .placeholder .upside {\n  transform: rotate(180deg);\n}\n\n.circle li .placeholder a {\n  text-decoration: none;\n  pointer-events: auto;\n}\n\n.circle li .placeholder button {\n  pointer-events: auto;\n}\n\n.circle li .placeholder .button {\n  font-size: 2.3em;\n  background-color: transparent;\n  border: none;\n  color: red;\n  cursor: pointer;\n}\n\n.circle li:nth-child(1) {\n  transform: rotate(0deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(2) {\n  transform: rotate(36deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(3) {\n  transform: rotate(72deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(4) {\n  transform: rotate(108deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(5) {\n  transform: rotate(144deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(6) {\n  transform: rotate(180deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(7) {\n  transform: rotate(216deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(8) {\n  transform: rotate(252deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(9) {\n  transform: rotate(288deg) skewY(-54deg);\n  background-color: #000;\n}\n\n.circle li:nth-child(10) {\n  transform: rotate(324deg) skewY(-54deg);\n  background-color: #000;\n}\n\n#menu__active {\n  position: fixed;\n  top: -99999px;\n  left: -99999px;\n}\n\n#menu__active:checked ~ label .menu__listings {\n  transform: rotate(10deg) scale(1);\n  transition: transform 1s;\n}\n\n#menu__active:checked ~ label .menu__toggle {\n  background-color: #000000;\n  transition: all 1s;\n}\n\n#menu__active:checked ~ label .hamburger {\n  border-color: transparent;\n  transition: border-color 0.333333333333333s;\n}\n\n#menu__active:checked ~ label .hamburger:after {\n  top: -2px;\n  border-color: #fff;\n  transform: translateX(-50%) rotate(45deg);\n  transition-property: top, transform;\n  transition-duration: 0.25s, 1s;\n}\n\n#menu__active:checked ~ label .hamburger:before {\n  bottom: -2px;\n  border-color: #fff;\n  transform: translateX(-50%) rotate(-45deg);\n  transition-property: bottom, transform;\n  transition-duration: 0.25s, 1s;\n}\n\n#menu__active:checked ~ label .button:hover {\n  color: #c1264e;\n}\n\n#menu__active:checked ~ label .menu__arrow {\n  visibility: visible;\n  transition: all 1s 1.111111111111111s;\n}\n\n#menu__active:checked ~ label .menu__arrow--top label {\n  display: none;\n}\n\n#menu__active:checked ~ label .menu__arrow--top label[for=\"degree--up-0\"] {\n  display: block;\n}\n\n#menu__active:checked ~ label #degree--up-0:checked ~ .menu__listings {\n  transform: rotate(116deg);\n}\n\n#menu__active:checked ~ label #degree--up-0:checked ~ .menu__arrow--top label {\n  display: none;\n}\n\n#menu__active:checked ~ label #degree--up-0:checked ~ .menu__arrow--top label[for=\"degree--up-1\"] {\n  display: block;\n}\n\n#menu__active:checked ~ label #degree--up-1:checked ~ .menu__listings {\n  transform: rotate(224deg);\n}\n\n#menu__active:checked ~ label #degree--up-1:checked ~ .menu__listings ~ .menu__arrow--top label {\n  display: none;\n}\n\n#menu__active:checked ~ label #degree--up-1:checked ~ .menu__listings ~ .menu__arrow--top label[for=\"degree--up-2\"] {\n  display: block;\n}\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozzies-code%2Fcircletoolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fozzies-code%2Fcircletoolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fozzies-code%2Fcircletoolbar/lists"}