overleaf/services/web/frontend/stylesheets/modules/galileo.less
Tim Down 2bb8bd6f14 Merge pull request #10196 from overleaf/ta-galileo-instruction-modal
Add Galileo Instruction Modal

GitOrigin-RevId: c6eb9465c9a90b7b6fb681537bf2851a4570b397
2022-11-02 09:03:46 +00:00

152 lines
2.7 KiB
Text

.galileo {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 220px;
background-color: @galileo-bg;
color: @galileo-color;
.galileo-header {
display: flex;
align-items: center;
padding-left: @padding-sm;
background-color: @galileo-header-background;
:first-child {
flex: 1;
}
.toggle-switch {
overflow: clip;
margin-left: @margin-sm;
}
.galileo-close-button {
background: transparent;
color: @galileo-color;
padding-left: @padding-sm;
padding-right: @padding-sm;
font-size: 24px;
font-weight: bold;
line-height: 1;
}
}
.galileo-body {
padding: 0 @padding-sm @padding-xs @padding-sm;
overflow-y: auto;
flex: 1;
.galileo-suggestions {
.loading {
text-align: center;
margin: @margin-sm;
}
}
.galileo-promo {
margin-top: @margin-md;
text-align: center;
p {
margin: @margin-md 0;
}
}
.galileo-promo-boxes {
display: flex;
justify-content: center;
gap: @margin-md;
text-align: left;
}
.galileo-promo-box {
width: 40%;
background: @galileo-suggestion-background;
padding-top: @padding-xs;
border-radius: @border-radius-base;
img {
width: 100%;
}
h3,
p {
color: @galileo-color;
padding: 0 @padding-sm;
margin: 0;
}
h3 {
padding-top: @padding-xs;
}
h3,
p {
padding-top: @padding-xs;
padding-bottom: @padding-xs;
}
}
.galileo-promo-image {
width: 100%;
height: 100px;
background-size: cover;
}
}
.galileo-footer {
background-color: @galileo-bg;
display: flex;
justify-content: center;
gap: @padding-xs;
padding: @padding-xs 0;
}
a,
button.btn-inline-link {
color: @galileo-color;
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
}
.galileo-suggestion {
background: @galileo-suggestion-background;
color: @galileo-color;
margin-top: @margin-xs;
.galileo-suggestion-body {
padding: @padding-xs;
max-height: @line-height-computed * 4; // 4 lines
overflow: hidden;
}
.galileo-suggestion-footer {
display: flex;
justify-content: space-between;
padding: @padding-xs;
}
.galileo-suggestion-footer-links {
display: flex;
align-items: flex-end;
gap: @padding-xs;
}
}
.galileo-suggestion-text {
white-space: break-spaces;
}
.galileo-font-lucida {
font-family: @editor-font-lucida;
}
.galileo-font-monaco {
font-family: @editor-font-monaco;
}