Skip to content

Commit

Permalink
Custom Shortcuts Implementation
Browse files Browse the repository at this point in the history 
Custom shortcuts
  • Loading branch information
@arnav-kr
arnav-kr authored Jul 29, 2024
2 parents fecc7da + 0cb09eb commit 5b39f39
Show file tree
Hide file tree
Showing 7 changed files with 760 additions and 81 deletions.
192 changes: 189 additions & 3 deletions extension/css/UI.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
* {
box-sizing: border-box;
}

h1,
h2,
h3,
Expand Down Expand Up @@ -76,6 +77,11 @@ div.item {
-webkit-user-select: none;
}

.hotkeys .item:not(.item-end) {
padding-right: 8px;
cursor: pointer;
}

div.icon-actions {
display: flex;
gap: 8px;
Expand All @@ -86,7 +92,7 @@ div.item.clickable:hover {
background-color: rgba(32, 33, 36, 0.1);
}

div.item.clickable > a:focus-visible {
div.item.clickable>a:focus-visible {
box-shadow: none;
outline: none;
}
Expand All @@ -107,8 +113,59 @@ div.item-inner {
min-height: 56px;
width: 100%;
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
}

.hotkeys div.item-inner {
padding: 8px 0;
min-height: auto;
}

div.item-control {
display: flex;
align-items: center;
gap: 8px;
}

.cr-icon-button {
appearance: none;
background-color: transparent;
border: none;
cursor: pointer;
color: #292a2d;
display: flex;
justify-content: center;
align-items: center;
padding: 2px;
border-radius: 4px;
transition: background-color 0.2s;
}

.cr-icon-button:hover {
background-color: rgba(0, 0, 0, 0.08);
}

.item-action {
visibility: hidden;
}

.header-note {
font-size: 0.8rem;
display: block;
color: #5f6368;
margin-bottom: 6px;
padding: 0 4px;
}

div.item:hover .item-action {
visibility: visible;
}

.item-end {
margin-bottom: 12px;
}

.icon {
Expand Down Expand Up @@ -189,6 +246,7 @@ div.item-inner {
line-height: inherit;
user-select: none;
-webkit-user-select: none;
appearance: none;
-webkit-appearance: none;
overflow: visible;
vertical-align: middle;
Expand All @@ -211,6 +269,15 @@ div.item-inner {
cursor: pointer;
}

.cr-button:disabled {
opacity: 0.38;
cursor: default;
}

.cr-button:disabled:hover {
background-color: #1a73e8;
}

.cr-button-icon {
fill: #ffffff;
}
Expand All @@ -235,6 +302,90 @@ div.item-inner {
box-shadow: none;
}

.kbd-wrapper {
display: flex;
gap: 4px;
}

kbd {
font-size: 0.8rem;
font-weight: 500;
display: block;
background-color: #f1f3f4;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 2px 6px;
margin-bottom: 1px;
border-radius: 4px;
}

.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal-box {
background-color: #ffffff;
color: #202124;
border-radius: 4px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
padding: 16px;
max-width: 400px;
width: 100%;
margin: 0 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

.modal-box p {
margin: 0;
text-align: center;
}

.modal-input {
border: 1px solid #dadce0;
background-color: #f1f3f4;
border-radius: 4px;
padding: 8px;
width: 100%;
font-size: 14px;
transition: border-color 0.2s;
text-align: center;
}

.modal-input:focus-visible {
box-shadow: 0 0 0 2px #1a73e8;
outline: none;
}

.modal-info {
display: flex;
gap: 4px;
align-items: center;
flex-direction: row-reverse;
vertical-align: middle;
color: #d93025;
}

.modal-note:empty+svg {
display: none;
}

.modal-info svg {
margin-top: 1px;
}

@media (prefers-color-scheme: dark) {
.md-select {
background-color: rgba(0, 0, 0, 0.3);
Expand All @@ -244,6 +395,29 @@ div.item-inner {
outline-color: rgb(232, 234, 237);
}

.modal-box {
color: rgb(232, 234, 237);
background-color: #292a2d;
}

.modal-input {
background-color: #202124;
border-color: #292a2d;
color: rgb(232, 234, 237);
}

.cr-icon-button {
color: #f8f9fa;
}

.header-note {
color: #9ea0a5;
}

.cr-icon-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}

body {
background-color: #202124;
color: rgb(232, 234, 237);
Expand Down Expand Up @@ -278,7 +452,7 @@ div.item-inner {
background-color: rgba(255, 255, 255, 0.1);
}

div.item.clickable > a:focus-visible {
div.item.clickable>a:focus-visible {
box-shadow: none;
outline: none;
}
Expand All @@ -294,11 +468,23 @@ div.item-inner {
.md-select:focus {
box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.5);
}

.md-select option {
background-color: #202124;
}

kbd {
background-color: #202124;
color: rgb(232, 234, 237);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.modal-info {
color: #ff8385;
}
}

.hidden {
display: none;
}
}
24 changes: 22 additions & 2 deletions extension/css/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,9 +373,12 @@ body.JF_dark .JF_context_menu {
}

.JF_context_menu .JF_context_menu_item {
display: flex;
gap: 8px;
padding: 8px 24px;
cursor: pointer;
transition: background-color 100ms ease;
font-family: Roboto, "Segoe UI", Tahoma, sans-serif;
}

.JF_context_menu .JF_context_menu_item:hover {
Expand All @@ -387,6 +390,23 @@ body.JF_dark #JF_context_menu .JF_context_menu_item:hover {
}

.JF_context_menu .JF_context_menu_item .JF_context_menu_item_shortcut {
display: inline-flex;
gap: 4px;
}

.JF_context_menu .JF_context_menu_item kbd {
font-size: 0.7rem;
font-weight: 500;
display: block;
background-color: #f1f3f4;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 2px 6px;
margin-bottom: 1px;
border-radius: 4px;
}

/* .JF_context_menu .JF_context_menu_item kbd {
font-size: 0.7rem;
background-color: #f1f3f4;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
Expand All @@ -395,9 +415,9 @@ body.JF_dark #JF_context_menu .JF_context_menu_item:hover {
border-radius: 4px;
margin-left: 8px;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
}
} */

body.JF_dark #JF_context_menu .JF_context_menu_item .JF_context_menu_item_shortcut {
body.JF_dark #JF_context_menu .JF_context_menu_item kbd {
background-color: #202124;
color: rgb(232, 234, 237);
border: 1px solid rgba(255, 255, 255, 0.1);
Expand Down
Loading

0 comments on commit 5b39f39

Please sign in to comment.