adjust styles
This commit is contained in:
isUnknown
parent
dd217e7a6a
commit
3804d13cb6
34 changed files with 756 additions and 174 deletions
309
assets/front-comments/style.css
Normal file
309
assets/front-comments/style.css
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
:root {
|
||||
--fc-border: 2px solid #000;
|
||||
--fc-border-light: 1px solid #999;
|
||||
--fc-font-size-m: 1.2rem;
|
||||
--fc-font-size-s: calc(var(--fc-font-size-m) / 1.3);
|
||||
}
|
||||
|
||||
.fc__btn {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fc__btn:not(.fc__bubble):hover,
|
||||
.fc__btn-add.fc__btn-add--move {
|
||||
filter: invert(100%);
|
||||
}
|
||||
.fc__icon {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fc__bubble,
|
||||
.fc__btn-add {
|
||||
z-index: 999;
|
||||
}
|
||||
.fc__btn-add:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.fc__edition-panel,
|
||||
.fc__btn-add,
|
||||
.fc__bubble {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.fc__btn-add {
|
||||
position: fixed;
|
||||
width: 3rem;
|
||||
height: 2.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fc__btn-add--bottom-right {
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
.fc__btn-add--bottom-left {
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
.fc__btn-add--top-left {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
.fc__btn-add--top-right {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.fc__btn-add .fc__plus {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: inline-block;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.fc__btn-add:not(.fc__btn-add--move) {
|
||||
top: auto !important;
|
||||
left: auto !important;
|
||||
}
|
||||
.fc__btn-add.fc__btn-add--move {
|
||||
position: absolute;
|
||||
cursor: none !important;
|
||||
}
|
||||
|
||||
.fc__btn-add--field {
|
||||
right: 5rem;
|
||||
}
|
||||
|
||||
.fc__edition-panel {
|
||||
--panel-width: 15rem;
|
||||
position: absolute;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.fc__edition-panel--left {
|
||||
transform: translateX(calc(0rem - var(--panel-width)));
|
||||
}
|
||||
.fc__edition-panel--top {
|
||||
transform: translateY(calc(0rem - 150px));
|
||||
}
|
||||
|
||||
.fc__edition-panel textarea {
|
||||
position: relative !important;
|
||||
resize: none !important;
|
||||
color: #000 !important;
|
||||
font-family: sans-serif !important;
|
||||
font-weight: 100 !important;
|
||||
|
||||
width: var(--panel-width) !important;
|
||||
height: 7rem !important;
|
||||
outline: none !important;
|
||||
border: var(--fc-border) !important;
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.fc__edition-panel textarea:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.fc__edition-panel__btns {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.fc__edition-panel__btns button {
|
||||
all: initial;
|
||||
|
||||
color: #000;
|
||||
font-family: sans-serif;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: var(--fc-border) !important;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fc__edition-panel__btns button:first-child {
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
.fc__edition-panel__btns button:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.fc__bubble {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 3rem;
|
||||
height: 2.9rem;
|
||||
scroll-margin-top: 6rem;
|
||||
|
||||
color: #000;
|
||||
font-family: sans-serif;
|
||||
font-size: var(--fc-font-size-m);
|
||||
font-weight: 500;
|
||||
|
||||
background-image: var(--fc-icon-chat-box-empty);
|
||||
background-size: 3rem 2.5rem;
|
||||
background-position: 0 4px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.fc__comment {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
|
||||
width: 20rem;
|
||||
padding: 1rem;
|
||||
background-color: #fff;
|
||||
border: var(--fc-border) !important;
|
||||
}
|
||||
|
||||
.fc__comment * {
|
||||
color: #000 !important;
|
||||
font-family: sans-serif !important;
|
||||
font-weight: 100 !important;
|
||||
}
|
||||
|
||||
.fc__comment p {
|
||||
margin: 1rem 0 !important;
|
||||
}
|
||||
|
||||
.fc__comment-delete {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.fc__icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.fc__comment,
|
||||
.fc__edition-panel {
|
||||
font-family: sans-serif;
|
||||
font-size: var(--fc-font-size-m);
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
/* ================= CONTEXT ================= */
|
||||
#collapsible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fc__label-toggle {
|
||||
display: block;
|
||||
font-size: var(--fc-font-size-s);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fc__label-toggle::before {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid currentColor;
|
||||
|
||||
vertical-align: middle;
|
||||
margin-right: 0.7rem;
|
||||
transform: translateY(-2px);
|
||||
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.fc__collapsible-content {
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
transition: max-height 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.fc__toggle:checked + .fc__label-toggle + .fc__collapsible-content {
|
||||
max-height: 100vh;
|
||||
}
|
||||
.fc__toggle:checked + .fc__label-toggle::before {
|
||||
transform: rotate(90deg) translateX(-3px);
|
||||
}
|
||||
|
||||
.fc__content-inner {
|
||||
margin: 0;
|
||||
margin-top: 1rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.fc__context-item {
|
||||
list-style-type: none;
|
||||
font-size: var(--fc-font-size-s);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.fc__context-item:not(:last-child) {
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: 1px dotted #000;
|
||||
}
|
||||
|
||||
.fc__open-window {
|
||||
background-color: transparent;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.fc__open-window:hover {
|
||||
background-color: #000;
|
||||
color: #fff !important;
|
||||
}
|
||||
/* ================= END CONTEXT ================= */
|
||||
|
||||
.fc__author {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fc__datetime {
|
||||
font-size: var(--fc-font-size-s);
|
||||
}
|
||||
|
||||
.fc__suggestion {
|
||||
position: relative;
|
||||
padding: 0.1rem 0.2rem;
|
||||
margin: 0 0.2rem;
|
||||
background-color: inherit;
|
||||
border: var(--fc-border);
|
||||
}
|
||||
.fc__suggestion:hover {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
.fc__suggestion--edit {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.fc__suggestion-bubble {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
width: 20vw;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: var(--fc-border);
|
||||
padding: 1rem;
|
||||
left: -0.1rem;
|
||||
bottom: -5.5rem;
|
||||
}
|
||||
|
||||
.fc__suggestion-bubble__btns {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue