mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-01 04:23:27 +01:00
468 lines
11 KiB
CSS
Executable File
468 lines
11 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) * var(--layout-padding-multiplier));
|
|
padding-left: calc(var(--gutter) * var(--layout-padding-multiplier));
|
|
padding-right: calc(var(--gutter) * var(--layout-padding-multiplier));
|
|
font-size: calc(var(--link-item-size) * 1);
|
|
position: relative;
|
|
width: var(--link-area-width);
|
|
display: grid;
|
|
grid-auto-rows: 1fr;
|
|
grid-gap: calc(var(--gutter) * var(--layout-gutter-multiplier));
|
|
grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
|
|
}
|
|
|
|
.is-header-border-bottom .link-area,
|
|
.is-header-shade-style-always .link-area {
|
|
padding-top: calc(var(--gutter) * var(--layout-padding-multiplier));
|
|
}
|
|
|
|
.link-item {
|
|
font-size: 1em;
|
|
position: relative;
|
|
height: var(--link-item-height);
|
|
display: block;
|
|
transform: scale(1);
|
|
transition: transform var(--animation-speed-fast) ease-in-out;
|
|
z-index: 1;
|
|
}
|
|
|
|
.link-item:focus-within,
|
|
.link-item:focus,
|
|
.link-item:hover {
|
|
z-index: 2;
|
|
outline: 0;
|
|
}
|
|
|
|
.is-link-item-hover-scale .link-item:focus-within,
|
|
.is-link-item-hover-scale .link-item:focus,
|
|
.is-link-item-hover-scale .link-item:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.is-link-item-hover-scale .link-item:active {
|
|
transform: scale(1.04);
|
|
transition: none;
|
|
}
|
|
|
|
.link-item-placeholder {
|
|
background-color: rgba(var(--theme-accent), 0.2);
|
|
border-radius: var(--theme-radius);
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.link-panel-front {
|
|
background-color: rgb(var(--gray-02));
|
|
border-radius: var(--theme-radius);
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
z-index: 3;
|
|
overflow: hidden;
|
|
position: relative;
|
|
user-select: none;
|
|
transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.is-link-item-line .link-panel-front {
|
|
height: calc(100% - var(--line-width));
|
|
}
|
|
|
|
.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: var(--shadow-large);
|
|
}
|
|
|
|
.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-url-show .link-item:focus .link-panel-front,
|
|
.is-link-url-show .link-item:focus-within .link-panel-front,
|
|
.is-link-url-show .link-item:hover .link-panel-front {
|
|
height: calc(100% - var(--link-item-url-height));
|
|
}
|
|
|
|
.link-panel-back {
|
|
background-color: rgb(var(--theme-accent));
|
|
border-radius: var(--theme-radius);
|
|
width: calc(100% - calc(var(--line-width) * 2));
|
|
height: calc(100% - calc(var(--line-width) * 2));
|
|
position: absolute;
|
|
top: var(--line-width);
|
|
left: var(--line-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: stretch;
|
|
z-index: 2;
|
|
transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.is-link-item-line .link-panel-back {
|
|
height: calc(100% - var(--line-width));
|
|
}
|
|
|
|
.is-link-edit .link-panel-back,
|
|
.is-link-url-show:not(.is-link-item-line) .link-item:focus .link-panel-back,
|
|
.is-link-url-show:not(.is-link-item-line) .link-item:focus-within .link-panel-back,
|
|
.is-link-url-show:not(.is-link-item-line) .link-item:hover .link-panel-back {
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.link-control {
|
|
margin: 0;
|
|
padding: 0;
|
|
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;
|
|
border-radius: 0;
|
|
margin-bottom: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
color: rgb(var(--gray-02));
|
|
flex-grow: 1;
|
|
flex-basis: 50%;
|
|
}
|
|
|
|
.link-control-item:first-child {
|
|
border-radius: 0 0 0 var(--theme-radius);
|
|
}
|
|
|
|
.link-control-item:last-child {
|
|
border-radius: 0 0 var(--theme-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-url-show .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;
|
|
}
|
|
|
|
.is-link-url-show .link-item:focus-within .link-url,
|
|
.is-link-url-show .link-item:focus .link-url,
|
|
.is-link-url-show .link-item:hover .link-url {
|
|
height: var(--link-item-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-style-dark .link-url-text {
|
|
color: rgb(var(--black));
|
|
}
|
|
|
|
.is-link-url-style-light .link-url-text {
|
|
color: rgb(var(--white));
|
|
}
|
|
|
|
.link-display {
|
|
font-size: 1em;
|
|
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(--theme-accent));
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
transition: color var(--animation-speed-fast) ease-in-out;
|
|
}
|
|
|
|
.link-display-icon {
|
|
color: rgb(var(--theme-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-item-display-letter-size);
|
|
}
|
|
|
|
.is-link-style-block .link-display-icon,
|
|
.is-link-style-list .link-display-icon {
|
|
font-size: var(--link-item-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: var(--link-item-name-size);
|
|
font-family: var(--font-regular);
|
|
color: rgb(var(--gray-12));
|
|
display: none;
|
|
text-align: center;
|
|
transition: color 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 {
|
|
grid-column-start: 1;
|
|
grid-column-end: -1;
|
|
text-align: center;
|
|
}
|
|
|
|
.link-empty-heading {
|
|
color: rgb(var(--gray-16));
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.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(--link-item-edit-height));
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
|
|
.is-link-edit.is-link-url-show .link-item:focus-within .link-panel-front,
|
|
.is-link-edit.is-link-url-show .link-item:hover .link-panel-front {
|
|
height: calc(100% - var(--link-item-edit-height));
|
|
}
|
|
|
|
.is-link-edit .link-control {
|
|
height: var(--link-item-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;
|
|
}
|