mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-27 02:24:22 +01:00
486 lines
10 KiB
CSS
Executable File
486 lines
10 KiB
CSS
Executable File
.link {
|
|
display: none;
|
|
position: relative;
|
|
flex-direction: row;
|
|
z-index: var(--z-index-link);
|
|
}
|
|
|
|
.is-link-show .link {
|
|
display: flex;
|
|
}
|
|
|
|
.is-link-area-alignment-horizontal-left .link {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.is-link-area-alignment-horizontal-center .link {
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-link-area-alignment-horizontal-right .link {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.link-area {
|
|
padding-bottom: calc(var(--gutter) * 4);
|
|
padding-left: calc(var(--gutter) * 4);
|
|
padding-right: calc(var(--gutter) * 4);
|
|
position: relative;
|
|
width: var(--link-area-width);
|
|
}
|
|
|
|
.is-link-fit-best .link-area {
|
|
display: grid;
|
|
grid-auto-rows: 1fr;
|
|
grid-gap: calc(var(--gutter) * 2);
|
|
}
|
|
|
|
.is-link-fit-custom .link-area {
|
|
margin-top: calc(var(--gutter) * -1);
|
|
padding-bottom: calc(var(--gutter) * 3);
|
|
padding-left: calc(var(--gutter) * 3);
|
|
padding-right: calc(var(--gutter) * 3);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.is-link-fit-custom.is-link-items-alignment-horizontal-left .link-area {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.is-link-fit-custom.is-link-items-alignment-horizontal-center .link-area {
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-link-fit-custom.is-link-items-alignment-horizontal-right .link-area {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.is-header-shade-border-bottom-show .link-area,
|
|
.is-header-shade-style-always .link-area {
|
|
padding-top: calc(var(--gutter) * 4);
|
|
}
|
|
|
|
.is-link-fit-best.is-link-style-block .link-area {
|
|
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
|
|
}
|
|
|
|
.is-link-fit-best.is-link-style-list .link-area {
|
|
grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
|
|
}
|
|
|
|
.link-item {
|
|
font-size: 1em;
|
|
position: relative;
|
|
display: block;
|
|
transform: scale(1);
|
|
transition: transform var(--animation-speed-fast) ease-in-out;
|
|
direction: ltr;
|
|
}
|
|
|
|
.link-item:focus-within,
|
|
.link-item:focus,
|
|
.link-item:hover {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
.link-item:active {
|
|
transform: scale(1.04);
|
|
transition: none;
|
|
}
|
|
|
|
.is-link-fit-best .link-item {
|
|
height: var(--link-items-height);
|
|
}
|
|
|
|
.is-link-fit-custom .link-item {
|
|
height: var(--link-items-height);
|
|
width: var(--link-items-width);
|
|
margin: var(--gutter);
|
|
}
|
|
|
|
.link-panel-front {
|
|
background-color: rgb(var(--gray-02));
|
|
border-radius: var(--radius);
|
|
width: 100%;
|
|
height: calc(100% - var(--line-width));
|
|
display: flex;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
position: relative;
|
|
user-select: none;
|
|
transition: all var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.link-panel-front:hover,
|
|
.link-panel-front:focus {
|
|
background-color: rgb(var(--gray-03));
|
|
outline: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.link-item:focus .link-panel-front,
|
|
.link-item:focus-within .link-panel-front,
|
|
.link-item:hover .link-panel-front {
|
|
text-decoration: none;
|
|
outline: none;
|
|
background-color: rgb(var(--gray-03));
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.is-link-style-block .link-panel-front {
|
|
padding: 1em;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.is-link-style-block.is-link-display-alignment-horizontal-left .link-panel-front {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.is-link-style-block.is-link-display-alignment-horizontal-center .link-panel-front {
|
|
align-items: center;
|
|
}
|
|
|
|
.is-link-style-block.is-link-display-alignment-horizontal-right .link-panel-front {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.is-link-style-block.is-link-display-alignment-vertical-top .link-panel-front {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.is-link-style-block.is-link-display-alignment-vertical-center .link-panel-front {
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-link-style-block.is-link-display-alignment-vertical-bottom .link-panel-front {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.is-link-style-list .link-panel-front {
|
|
padding: 0.5em 1em;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.is-link-style-list.is-link-display-alignment-horizontal-left .link-panel-front {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.is-link-style-list.is-link-display-alignment-horizontal-center .link-panel-front {
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-link-style-list.is-link-display-alignment-horizontal-right .link-panel-front {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.is-link-style-list.is-link-display-alignment-vertical-top .link-panel-front {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.is-link-style-list.is-link-display-alignment-vertical-center .link-panel-front {
|
|
align-items: center;
|
|
}
|
|
|
|
.is-link-style-list.is-link-display-alignment-vertical-bottom .link-panel-front {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.is-link-show-url .link-item:focus .link-panel-front,
|
|
.is-link-show-url .link-item:focus-within .link-panel-front,
|
|
.is-link-show-url .link-item:hover .link-panel-front {
|
|
height: calc(100% - var(--url-height));
|
|
}
|
|
|
|
.link-panel-back {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.link-panel-back:before {
|
|
content: "";
|
|
background-color: rgb(var(--accent));
|
|
border-radius: var(--radius);
|
|
width: calc(100% - calc(var(--line-width) + var(--line-width)));
|
|
height: calc(100% - 0.25em);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: var(--line-width);
|
|
z-index: -1;
|
|
}
|
|
|
|
.link-control {
|
|
margin: 0;
|
|
padding: 0 var(--line-width);
|
|
height: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
transition: all var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.link-control-item {
|
|
background-color: transparent;
|
|
margin-bottom: 0;
|
|
border: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
color: rgb(var(--gray-02));
|
|
flex-grow: 1;
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
.link-control-item:first-child {
|
|
border-radius: 0 0 0 var(--radius);
|
|
}
|
|
|
|
.link-control-item:last-child {
|
|
border-radius: 0 0 var(--radius) 0
|
|
}
|
|
|
|
.link-control-item:focus,
|
|
.link-control-item:hover {
|
|
color: rgb(var(--style-neutral-text));
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.link-control-item:active {
|
|
color: rgb(var(--style-neutral-text));
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
transition: none;
|
|
}
|
|
|
|
.link-url {
|
|
padding: 0 1em;
|
|
width: 100%;
|
|
height: 0;
|
|
overflow: hidden;
|
|
display: none;
|
|
align-items: center;
|
|
transition: all var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.is-link-show-url .link-url {
|
|
display: flex;
|
|
}
|
|
|
|
.is-link-display-alignment-horizontal-left .link-url {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.is-link-display-alignment-horizontal-center .link-url {
|
|
justify-content: center;
|
|
}
|
|
|
|
.is-link-display-alignment-horizontal-right .link-url {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.link-item:focus-within .link-url,
|
|
.link-item:focus .link-url,
|
|
.link-item:hover .link-url {
|
|
height: var(--url-height);
|
|
}
|
|
|
|
.link-url-text {
|
|
margin: 0;
|
|
font-size: 0.7em;
|
|
font-family: var(--font-regular);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.is-link-url-dark .link-url-text {
|
|
color: rgb(var(--black));
|
|
}
|
|
|
|
.is-link-url-light .link-url-text {
|
|
color: rgb(var(--white));
|
|
}
|
|
|
|
.link-display {
|
|
font-size: 1rem;
|
|
display: none;
|
|
}
|
|
|
|
.is-link-display-show .link-display {
|
|
display: block;
|
|
}
|
|
|
|
.link-display-letter,
|
|
.link-display-icon {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.link-display-letter {
|
|
font-family: var(--font-fjalla);
|
|
color: rgb(var(--accent));
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
transition: color var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.link-display-icon {
|
|
color: rgb(var(--accent));
|
|
transition: color var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.is-link-style-block .link-display-letter,
|
|
.is-link-style-list .link-display-letter {
|
|
font-size: var(--link-display-letter-size);
|
|
}
|
|
|
|
.is-link-style-block .link-display-icon,
|
|
.is-link-style-list .link-display-icon {
|
|
font-size: var(--link-display-icon-size);
|
|
}
|
|
|
|
.is-link-style-block.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.is-link-style-list.is-link-name-show.is-link-display-show .link-panel-front>*:not(:only-child):not(:last-child) {
|
|
margin-right: 0.5em
|
|
}
|
|
|
|
.link-item:hover .link-display-letter,
|
|
.link-item:focus .link-display-letter,
|
|
.link-item:hover .link-display-icon,
|
|
.link-item:focus .link-display-icon {
|
|
color: rgb(var(--style-neutral-text));
|
|
}
|
|
|
|
.link-panel-front:focus .link-display-letter,
|
|
.link-panel-front:focus .link-display-icon {
|
|
color: rgb(var(--style-neutral-text));
|
|
}
|
|
|
|
.link-name {
|
|
margin: 0;
|
|
font-size: 0.9em;
|
|
font-family: var(--font-regular);
|
|
color: rgb(var(--gray-12));
|
|
display: none;
|
|
text-align: center;
|
|
transition: all var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.is-link-display-alignment-horizontal-left .link-name {
|
|
text-align: left;
|
|
}
|
|
|
|
.is-link-display-alignment-horizontal-center .link-name {
|
|
text-align: center;
|
|
}
|
|
|
|
.is-link-display-alignment-horizontal-right .link-name {
|
|
text-align: right;
|
|
}
|
|
|
|
.is-link-name-show .link-name {
|
|
display: block;
|
|
}
|
|
|
|
.link-item:hover .link-name,
|
|
.link-item:focus .link-name {
|
|
color: rgb(var(--style-neutral-text));
|
|
}
|
|
|
|
.link-panel-front:focus .link-name {
|
|
color: rgb(var(--style-neutral-text));
|
|
}
|
|
|
|
.link-empty {
|
|
text-align: center;
|
|
}
|
|
|
|
.link-empty-heading {
|
|
color: rgb(var(--gray-16));
|
|
}
|
|
|
|
.is-link-fit-best .link-empty {
|
|
grid-column-start: 1;
|
|
grid-column-end: -1;
|
|
}
|
|
|
|
.is-link-fit-custom .link-empty {
|
|
margin: 1em;
|
|
}
|
|
|
|
.is-link-style-list .link-name {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.is-link-edit .link-panel-front,
|
|
.is-link-edit .link-item:hover .link-panel-front,
|
|
.is-link-edit .link-item:focus .link-panel-front {
|
|
height: calc(100% - var(--edit-height));
|
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.is-link-edit.is-link-show-url .link-item:focus .link-panel-front,
|
|
.is-link-edit.is-link-show-url .link-item:focus-within .link-panel-front,
|
|
.is-link-edit.is-link-show-url .link-item:hover .link-panel-front {
|
|
height: calc(100% - var(--edit-height));
|
|
}
|
|
|
|
.is-link-edit .link-control {
|
|
height: var(--edit-height);
|
|
}
|
|
|
|
.is-link-edit .link-item:hover .link-url,
|
|
.is-link-edit .link-item:focus .link-url {
|
|
height: 0;
|
|
}
|
|
|
|
.is-link-edit .link-control-item {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.link-form-text-icon {
|
|
position: relative;
|
|
}
|
|
|
|
.link-form-text-icon:empty:before {
|
|
content: "";
|
|
background-color: rgb(var(--gray-04));
|
|
top: 50%;
|
|
left: 50%;
|
|
position: absolute;
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
border-radius: 50%;
|
|
display: block;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.link-form-text-icon .link-form-icon {
|
|
transform: scale(1) rotate(0deg);
|
|
transition: transform var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.link-form-text-icon:not([disabled]):hover .link-form-icon {
|
|
transform: scale(2) rotate(360deg);
|
|
z-index: 1;
|
|
}
|
|
|
|
.link-form-text-icon:not([disabled]):active .link-form-icon {
|
|
transform: scale(4) rotate(360deg);
|
|
}
|
|
|
|
.link-form-icon {
|
|
font-size: 1.5em;
|
|
}
|