dc09.ru-old/styles.less

502 lines
7.1 KiB
Text

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
@spacebg: #000015;
@menubg: rgba(0,0,0,0.65);
@menuhl: lighten(@menubg, 14%);
@menusel: lighten(@menubg, 30%);
@textfg: #fff;
@linkfg: #fff;
@linkhl: #b0bfff;
@popup: #223;
body {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: @spacebg;
color: @textfg;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
color: @linkfg;
}
.link:hover {
cursor: pointer;
color: @linkhl;
}
.hidden {
display: none;
&:target {
display: block;
}
}
.separator {
width: 100%;
height: 0;
border-top: 1px solid #aaa;
}
.row-fill {
flex-grow: 1;
background: @menubg;
}
.menu {
position: absolute;
z-index: 999;
border-radius: 5px;
ul {
background-color: @menubg;
list-style: none;
margin: 0;
padding: 0;
li, li label {
cursor: pointer;
}
}
.top-menu {
border-radius: 5px;
}
}
.about-menu {
top: 15px;
left: 15px;
display: flex;
flex-direction: column;
z-index: 998;
transition: opacity 0.32s ease 0s;
&.dragging {
opacity: 0.6;
}
.top-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
ul {
&:nth-child(1) {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
&:nth-last-child(1) {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
}
ul.section {
display: flex;
flex-direction: row;
li {
display: block;
label {
display: block;
border-radius: 5px;
a {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
width: 1.3rem;
font-size: 1.2rem;
border-radius: 5px;
}
}
}
#move, #move label, #move a {
cursor: move !important;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked ~ label {
background-color: @menusel;
}
label:hover {
background-color: @menuhl;
}
}
.card {
background-color: @menubg;
border-radius: 5px;
margin-top: 5px;
padding: 5px;
.title {
font-size: 1.8rem;
font-weight: 700;
}
&.profiles {
margin: 0;
padding: 0;
& > div {
position: relative;
align-items: center;
border-radius: 5px;
padding: 5px;
&:hover {
background-color: @menuhl;
}
.content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
a.name {
display: block;
width: 100%;
}
.copylink {
display: flex;
flex-direction: row;
margin-left: 6px;
.link {
display: block;
padding: 4px;
padding-right: 5px;
font-size: 1.1rem;
}
}
}
.icon {
width: 1.5rem !important;
font-size: 1.25rem !important;
}
.inline-popup {
display: none;
position: absolute;
left: 100%;
margin-left: 10px;
cursor: default;
font-size: 0.85rem;
padding: 3px 6px;
background: @popup;
border-radius: 5px;
box-shadow: 0 0 15px #000;
animation-duration: 0.6s;
&.show {
display: flex !important;
flex-direction: row;
align-items: center;
}
&.right::before {
content: '';
position: absolute;
width: 0.5rem;
height: 0.5rem;
rotate: z 45deg;
left: -0.25rem;
background: @popup;
z-index: -1;
}
}
}
}
& > div:not(.title) {
display: flex;
flex-direction: row;
margin-top: 5px;
gap: 10px;
.content {
width: 100%;
}
}
&.about-card {
.icon {
margin-left: 2px;
}
}
.icon {
width: 1.1rem;
margin-top: 1px;
font-size: 1rem;
display: flex;
justify-content: center;
i {
width: 1.1rem;
text-align: center;
display: flex;
flex-direction: row;
justify-content: center;
}
img {
width: 1rem;
}
}
}
#code {
.card {
& > div {
margin-top: 0;
padding: 4px 3px;
}
.content {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 15px;
}
.details {
display: flex;
flex-direction: row;
gap: 5px;
}
.lang-wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.lang-skills {
ol {
list-style: disc;
margin: 0;
padding: 0;
.less-logo {
margin: 0;
padding: 0;
img {
margin: 0;
padding: 0;
display: block;
height: 1.16rem;
}
}
}
}
.projects:not(:empty) {
border: 2px solid shade(@linkhl, 40%);
border-radius: 5px;
.repo {
display: grid;
grid-template-columns: 6fr repeat(2, 1fr);
grid-column-gap: 5px;
border-radius: 5px;
padding: 5px;
&:hover {
background-color: @menuhl;
}
a {
padding-right: 5px;
}
}
}
}
}
#selfhosted {
.card {
& > div {
margin-top: 0;
padding: 5px;
border-radius: 5px;
a {
display: block;
}
&:hover {
background-color: @menuhl;
}
}
}
}
}
.context-menu {
display: none;
animation-duration: 0.6s;
&.show {
display: flex;
flex-direction: column;
ul {
border-radius: 5px;
}
li {
padding: 7px;
border-radius: 5px;
&:hover {
background-color: @menuhl;
}
a {
display: flex;
flex-direction: row;
gap: 5px;
}
.icon {
width: 1.2rem;
margin-top: 1px;
font-size: 1.1rem;
display: flex;
justify-content: center;
i {
width: 100%;
height: 100%;
text-align: center;
}
}
}
}
}
.expand-wrapper {
display: flex;
flex-direction: column;
align-items: end;
.expand {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
input[type=checkbox] {
display: none;
&:checked ~ .hidden {
display: block;
}
& ~ label > i {
margin-right: 5px;
}
&:checked ~ label > i {
rotate: z 180deg;
}
}
}
.space {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
z-index: 997;
#stars {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
filter: blur(2px);
}
img {
width: auto;
max-width: 100%;
z-index: 0;
animation: rotate 480s linear 0s infinite normal;
user-select: none;
}
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}