mirror of
https://github.com/cryptpad/cryptpad.git
synced 2026-09-14 11:05:41 +05:00
Merge pull request #1560 from cryptpad/focus-style-fixes
Focus style fixes
This commit is contained in:
commit
8f9ba4022d
@ -28,8 +28,9 @@ define([
|
||||
var premiumButton = h('a', {
|
||||
href: accounts.upgradeURL,
|
||||
target: '_blank',
|
||||
rel: 'noopener noreferrer'
|
||||
}, h('button.cp-features-register-button', Msg.features_f_subscribe));
|
||||
rel: 'noopener noreferrer',
|
||||
class: 'cp-features-register-button',
|
||||
}, Msg.features_f_subscribe);
|
||||
|
||||
var groupItemTemplate = function (title, content) {
|
||||
return h('li.list-group-item', [
|
||||
@ -119,8 +120,9 @@ define([
|
||||
h('div.card-body',[
|
||||
h('div.cp-features-register#cp-features-register', [
|
||||
h('a', {
|
||||
href: '/register/'
|
||||
}, h('button.cp-features-register-button', Msg.features_f_register))
|
||||
href: '/register/',
|
||||
class: 'cp-features-register-button',
|
||||
}, Msg.features_f_register)
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
|
||||
@ -153,10 +153,10 @@ define([
|
||||
if (Pages.areSubscriptionsAllowed() && !LocalStore.getPremium()) {
|
||||
var sub = h('div.cp-sub-prompt', [
|
||||
h('span', Msg.home_morestorage),
|
||||
h('a', {href:"/accounts/"}, h('button', [
|
||||
h('a', {href:"/accounts/", class:'subscribe-btn'}, [
|
||||
h('i.fa.fa-ticket'),
|
||||
Msg.features_f_subscribe
|
||||
]))
|
||||
])
|
||||
]);
|
||||
return sub;
|
||||
} else {
|
||||
|
||||
@ -200,8 +200,8 @@
|
||||
}
|
||||
.cp-usergrid-user, textarea, a, .fa-times {
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -244,8 +244,8 @@
|
||||
}
|
||||
}
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
span.alertify-tabs-active {
|
||||
@ -275,7 +275,7 @@
|
||||
.tools_placeholder-color();
|
||||
outline: none;
|
||||
&:focus-visible {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -129,8 +129,8 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
@ -217,8 +217,8 @@
|
||||
height: var(--checkmark-dim1);
|
||||
}
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -30,6 +30,11 @@
|
||||
.cp-unselectable {
|
||||
.tools_unselectable();
|
||||
}
|
||||
.btn-primary{
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
/* local mixins */
|
||||
@drive_icon-margin: 10px;
|
||||
@ -329,11 +334,10 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.leftside-menu-category_main();
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
margin: 0 0 2px -5px;
|
||||
padding-left: 5px;
|
||||
.fa, .cptools {
|
||||
display: inline-block;
|
||||
@ -348,6 +352,9 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -373,6 +380,9 @@
|
||||
padding-left: 20px;
|
||||
.leftside-menu-category_main();
|
||||
margin: 0;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -399,6 +409,10 @@
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
border-radius: @variables_radius_S;
|
||||
}
|
||||
}
|
||||
.cp-app-drive-tree-docs {
|
||||
box-shadow: @cryptpad_ui_shadow;
|
||||
|
||||
@ -28,6 +28,9 @@
|
||||
}
|
||||
&.tui-full-calendar-content {
|
||||
font-size: @colortheme_app-font-size;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
&[readonly] {
|
||||
//margin-top:1rem;
|
||||
@ -138,8 +141,8 @@
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -257,8 +260,8 @@
|
||||
|
||||
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
@import (reference) "./colortheme-all.less";
|
||||
@import (reference) "./font.less";
|
||||
@import (reference) "./variables.less";
|
||||
|
||||
@infopages-radius: 5px;
|
||||
@infopages-radius-L: 10px;
|
||||
@ -46,6 +47,10 @@ body.html {
|
||||
a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
a:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -231,6 +236,9 @@ body.html {
|
||||
border: 0px;
|
||||
border-radius: @infopages-radius;
|
||||
padding: 0.5em 0.7em;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-footer-version {
|
||||
@ -293,6 +301,9 @@ body.html {
|
||||
&:hover {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@ -47,6 +47,9 @@
|
||||
align-items: center;
|
||||
.leftside-menu-category_main();
|
||||
box-shadow: @cryptpad_ui_shadow;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.cp-leftside-narrow {
|
||||
|
||||
@ -81,8 +81,8 @@
|
||||
padding-left: 4px;
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
.close {
|
||||
|
||||
@ -77,8 +77,8 @@
|
||||
&:hover {
|
||||
background-color: contrast(@cp_toolbar-bg, darken(@cp_toolbar-bg, 5%), lighten(@cp_toolbar-bg, 5%));
|
||||
}
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
button:nth-of-type(1) {
|
||||
@ -373,7 +373,7 @@
|
||||
* {
|
||||
outline-style: none;
|
||||
&:focus-visible {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
@ -676,6 +676,10 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-collapse: collapse;
|
||||
&:focus {
|
||||
margin: 2px;
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
}
|
||||
input {
|
||||
color: @cryptpad_text_col;
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
@variables_shadow: 0 8px 32px 0 @cp_shadow-color;
|
||||
|
||||
// Rounded corners
|
||||
@variables_radius_S: 3px;
|
||||
@variables_radius: 5px;
|
||||
@variables_radius_L: 10px;
|
||||
|
||||
@variables_focus_style: @cryptpad_color_brand solid 2px;
|
||||
|
||||
@ -15,12 +15,19 @@
|
||||
padding: 20px;
|
||||
}
|
||||
.cp-features-register-button {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
background-color: @cp_buttons-primary;
|
||||
color: @cryptpad_text_col;
|
||||
font-size: 20px;
|
||||
color: @cryptpad_color_white;
|
||||
background: @cryptpad_color_brand;
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
border-radius: @infopages-radius;
|
||||
padding: 10px 20px;
|
||||
&:hover, &:focus {
|
||||
background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
|
||||
}
|
||||
&:visited {
|
||||
color: @cryptpad_text_col;
|
||||
}
|
||||
}
|
||||
.cp-features-web {
|
||||
|
||||
@ -255,9 +255,10 @@
|
||||
* {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
background-color: @cryptpad_color_link;
|
||||
color: @cryptpad_text_col_inv;
|
||||
.subscribe-btn {
|
||||
text-align: center;
|
||||
background-color: @cp_buttons-primary;
|
||||
color: @cryptpad_text_col;
|
||||
font-size: 1.4rem;
|
||||
margin: 10px 0;
|
||||
border-radius: @infopages-radius-L;
|
||||
@ -267,8 +268,7 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background-color: @cp_static-card-bg;
|
||||
color: @cryptpad_text_col;
|
||||
background-color: contrast(@cp_buttons-primary-text, darken(@cp_buttons-primary, 10%), lighten(@cp_buttons-primary, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,11 @@
|
||||
flex-flow: column;
|
||||
font: @colortheme_app-font;
|
||||
|
||||
input, textarea, .cp-appblock {
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
.cp-admin-customize-logo {
|
||||
padding: 1em;
|
||||
img {
|
||||
|
||||
@ -647,6 +647,9 @@
|
||||
color: @cp_sidebar-left-active-fg;
|
||||
border: 0px;
|
||||
}
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@ -177,8 +177,8 @@
|
||||
align-self: flex-start;
|
||||
outline-style: none;
|
||||
border-radius: @variables_radius;
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
@media (hover: none) {
|
||||
margin-right: 20px;
|
||||
@ -413,8 +413,8 @@
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&:focus{
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -651,8 +651,8 @@
|
||||
&:hover {
|
||||
background-color: @cp_kanban-add-hover;
|
||||
}
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -51,6 +51,11 @@
|
||||
|
||||
#cp-sidebarlayout-container {
|
||||
#cp-sidebarlayout-rightside {
|
||||
input, button, span[tabindex="0"] {
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
@ -123,6 +128,9 @@
|
||||
margin-top:0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.cp-password-reveal {
|
||||
border-radius:@variables_radius;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
|
||||
@ -62,6 +62,14 @@
|
||||
div#cp-sidebarlayout-leftside {
|
||||
background-color: @cp_teams-leftside-bg;
|
||||
}
|
||||
#cp-sidebarlayout-rightside{
|
||||
input, button, textarea {
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
div#cp-sidebarlayout-rightside.cp-rightside-drive {
|
||||
padding: 0;
|
||||
& > .cp-team-chat {
|
||||
@ -73,7 +81,11 @@
|
||||
}
|
||||
.cp-app-contacts-input {
|
||||
textarea {
|
||||
border: 0px;
|
||||
border: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.fa-paper-plane{
|
||||
border-radius: @variables_radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -142,6 +154,9 @@
|
||||
height: 384px;
|
||||
padding: 50px;
|
||||
margin: 5px;
|
||||
&:focus-visible {
|
||||
outline: @variables_focus_style;
|
||||
}
|
||||
&.create, &:not(.empty) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user