snappymail/dev/Styles/Ui.less
2021-12-28 14:48:20 +01:00

146 lines
2.1 KiB
Plaintext

#rl-settings-subscreen,
.g-ui-user-select-none {
user-select: none;
-webkit-touch-callout: none;
}
.g-ui-link {
color: var(--link-color, #369);
cursor: pointer;
padding: 2px;
text-decoration: underline;
&:focus {
outline: 1px;
outline-style: dotted;
}
}
.settings-save-trigger {
display: inline-block;
height: 1em;
line-height: 1em;
margin-left: 0.5em;
&::after {
font-family: "snappymail";
content: " ";
display: block;
opacity: 0;
transition: opacity 1s linear;
}
&.saving::after {
animation: rotation .8s infinite ease-in-out;
border: 3px solid transparent;
border-radius: 100%;
border-top-color: #999;
height: 11px;
opacity: 1;
width: 11px;
}
&.success::after {
color: #080;
content: "✔";
opacity: 1;
}
&.error::after {
color: #F00;
content: "✖";
opacity: 1;
}
}
textarea + .settings-save-trigger {
vertical-align: top;
}
.settings-saved-trigger-input {
transition: border-color 0.5s linear;
&.success {
border-color: green;
}
&.error {
border-color: red;
}
}
.e-action {
cursor: pointer;
}
.list-table {
max-width: 800px;
}
.button-confirm-delete {
transition: all 0.2s linear;
white-space: nowrap;
}
.button-confirm-delete:not(.delete-access) {
opacity: 0;
transform: translateX(-15px);
visibility: hidden;
}
.drag-handle {
color: #eee;
cursor: grab;
}
tr:hover .drag-handle {
color: #aaa;
}
// TABS
// -------------
.tabs {
display: grid;
}
.tabs input[type="radio"] {
position: absolute;
top: 0;
left: -9999px;
display: none;
}
// Actual tabs
.tabs label {
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
cursor: pointer;
grid-row-start: 1;
line-height: @baseLineHeight;
opacity: 0.6;
margin: 0 2px -1px 0;
padding: 5px;
text-align: center;
&:hover {
border-color: @grayLighter;
opacity: 0.8;
}
}
.tabs [id^="tab"]:checked + label {
background-color: @white;
border-color: #ddd #ddd transparent #ddd;
opacity: 1;
z-index: 1;
}
// TABBABLE
// --------
.tabs .tab-content {
grid-column-start: 1;
grid-row-start: 2;
visibility: hidden;
}
.tabs [id^="tab"]:checked + label + .tab-content {
visibility: visible;
}