|
|
| (не показано 70 промежуточных версий 2 участников) |
| Строка 48: |
Строка 48: |
| display: flex; | | display: flex; |
| width: 100%; | | width: 100%; |
| border: 1px solid #1e222c; | | border: 1px solid #1e222ccc; |
| border-radius: 6px; | | border-radius: 6px; |
| overflow: hidden; | | overflow: hidden; |
| Строка 57: |
Строка 57: |
| flex-direction: column; | | flex-direction: column; |
| width: 220px; | | width: 220px; |
| background-color: #0d121b; | | background-color: #1a232ab3; |
| border-right: 1px solid #1e222c; | | border-right: 1px solid #1e222ccc; |
|
| |
|
| } | | } |
| Строка 67: |
Строка 67: |
| font-weight: bold; | | font-weight: bold; |
| color: #fcfcfc; | | color: #fcfcfc; |
| border-bottom: 1px solid #1e222c; | | border-bottom: 1px solid #1e222ccc; |
| transition: background 0.2s, color 0.2s; | | transition: background 0.2s, color 0.2s; |
| } | | } |
|
| |
|
| .vtabs-button:hover { | | .vtabs-button:hover { |
| background-color: #1e222c; | | background-color: #1e222ccc; |
| } | | } |
|
| |
|
| .vtabs-button.active { | | .vtabs-button.active { |
| background-color: #1e222c; | | background-color: #1a232ab3; |
| color: #2a6ddf; | | color: #2a6ddf; |
| border-left: 4px solid #2a6ddf; | | border-left: 4px solid #2a6ddf; |
| Строка 84: |
Строка 84: |
| flex-grow: 1; | | flex-grow: 1; |
| padding: 20px; | | padding: 20px; |
| background: #0d121b; | | background: #1a232ab3; |
| color: #fcfcfc; | | color: #fcfcfc; |
| } | | } |
| Строка 94: |
Строка 94: |
| .vtabs-content.active { | | .vtabs-content.active { |
| display: block; | | display: block; |
| }
| |
|
| |
| /* Сворачиваемая панель */
| |
|
| |
| .colstr-panel {
| |
|
| |
| border-radius: 2px;
| |
| margin: 10px 0;
| |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
| .colstr-header {
| |
| background-color: #0d121b;
| |
| padding: 10px 14px;
| |
| cursor: pointer;
| |
| font-weight: bold;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| border-radius: 5px 5px 0 0;
| |
| transition: background-color 0.1s;
| |
| color: #fcfcfc;
| |
| }
| |
|
| |
| .colstr-header:hover {
| |
| background-color: #1e222c;
| |
| }
| |
|
| |
| .colstr-content {
| |
| padding: 10px 14px;
| |
| display: none;
| |
| animation: fadeIn 0.3s ease-in-out;
| |
| background-color: #0d121b;
| |
| color: #fcfcfc;
| |
| }
| |
|
| |
| .colstr-panel.open .colstr-content {
| |
| display: block;
| |
| }
| |
|
| |
| .colstr-panel .arrow {
| |
| transition: transform 0.3s;
| |
| }
| |
|
| |
| .colstr-panel.open .arrow {
| |
| transform: rotate(180deg);
| |
| }
| |
|
| |
| .colstr-panel.open .colstr-header {
| |
| border-bottom: 3px solid #4a90e2;
| |
| background-color: #1e222c;
| |
| } | | } |
|
| |
|
| Строка 221: |
Строка 170: |
| z-index: -1; | | z-index: -1; |
| opacity: 0.3; | | opacity: 0.3; |
| }
| |
| /* Стрелочка url('/images/a/a7/Testbg2.png')*/
| |
|
| |
| a.back-to-top {
| |
| display: none;
| |
| width: 70px;
| |
| height: 70px;
| |
| text-indent: -9999px;
| |
| position: fixed;
| |
| z-index: 999;
| |
| right: 100px;
| |
| bottom: 40px;
| |
| background-color: darkred;
| |
| background: url(https://wiki.ss13-bluemoon.ru/images/4/41/Arrowtop.png) 0% 0%/70px
| |
| 70px no-repeat;
| |
| background-position: 43%;
| |
| background-position-x: center;
| |
| border-radius: 30px;
| |
| } | | } |
|
| |
|
| a.back-to-top:hover {
| |
| background-color: transparent;
| |
| }
| |
|
| |
|
| /* Панель для гайдов */ | | /* Панель для гайдов */ |
| Строка 373: |
Строка 301: |
| } | | } |
|
| |
|
| .whitemoon-bg { | | .palemoon-bg { |
| background-image: linear-gradient(to bottom right, rgba(91, 99, 109, 0.45), rgba(150, 150, 150, 0.45)); | | background-image: linear-gradient(to bottom right, rgba(63, 69, 77, 0.45), rgba(110, 107, 107, 0.45)); |
| } | | } |
|
| |
|
| Строка 526: |
Строка 454: |
| } | | } |
| } | | } |
|
| |
|
| |
|
| .tooltip { | | .tooltip { |
| Строка 547: |
Строка 474: |
| background-color: #005069; | | background-color: #005069; |
| border-radius: 8px; | | border-radius: 8px; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.3);
| |
| transition-delay: 0.2s; | | transition-delay: 0.2s; |
| color: #fcfcfc; | | color: #fcfcfc; |
| } | | } |
|
| |
|
| .tooltip:hover > .tooltiptext { | | .tooltip:hover > .tooltiptext{ |
| visibility: visible; | | visibility: visible; |
| opacity: 1; | | opacity: 1; |
| transition-delay: 0.1s; | | transition-delay: 0.1s; |
| }
| |
|
| |
|
| |
|
| |
|
| |
| .pagebutton {
| |
| --pagebutton-transition: calc(var(--transition-time) * 2);
| |
| --color-tmp-100: var(--tmp-100);
| |
| --color-tmp-75: var(--tmp-75);
| |
| --color-tmp-50: var(--tmp-50);
| |
| --color-tmp-25: var(--tmp-25);
| |
| --color-tmp-10: var(--tmp-10);
| |
|
| |
| user-select: none;
| |
| position: relative;
| |
| display: inline-flex;
| |
| flex-direction: column;
| |
| overflow: hidden;
| |
| outline: 1px outset var(--color-tmp-25);
| |
| border-radius: var(--border-radius-small);
| |
| transition-property: box-shadow, outline-color, transform;
| |
| transition-duration: var(--pagebutton-transition);
| |
| transition-timing-function: var(--linear-bounce);
| |
| z-index: 1;
| |
| }
| |
|
| |
| .pagebutton:hover {
| |
| --pagebutton-transition: var(--transition-time);
| |
| --color-tmp-100: var(--hover-100, var(--tmp-100));
| |
| --color-tmp-75: var(--hover-75, var(--tmp-75));
| |
| --color-tmp-50: var(--hover-50, var(--tmp-50));
| |
| --color-tmp-25: var(--hover-25, var(--tmp-25));
| |
| --color-tmp-10: var(--hover-10, var(--tmp-10));
| |
|
| |
| box-shadow: 0 0.2rem 0.4rem var(--color-tmp-75);
| |
| transform: translateY(-0.25rem);
| |
| transition-timing-function: ease;
| |
| z-index: 2;
| |
| }
| |
|
| |
| .pagebutton-image {
| |
| flex: 1;
| |
| display: inline-flex;
| |
| justify-content: center;
| |
| background-color: var(--color-tmp-10);
| |
| transition-property: background-color;
| |
| transition-duration: var(--pagebutton-transition);
| |
| }
| |
|
| |
| .pagebutton-image a {
| |
| transition-property: filter;
| |
| transition-duration: var(--transition-time);
| |
| }
| |
|
| |
| .pagebutton:active .pagebutton-image a {
| |
| filter: drop-shadow(0 0 6px var(--color-tmp-75));
| |
| transition-duration: 0s;
| |
| }
| |
|
| |
| .pagebutton-image a,
| |
| .pagebutton-image span {
| |
| display: inline-flex;
| |
| justify-content: center;
| |
| width: 100%;
| |
| }
| |
|
| |
| .pagebutton-image img {
| |
| padding: 0.5em;
| |
| }
| |
|
| |
| .pagebutton-text {
| |
| overflow: hidden;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| height: calc(1.25rem + 1px);
| |
| font-weight: bold;
| |
| white-space: nowrap;
| |
| background-color: hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bg-l));
| |
| color: var(--color-white) !important;
| |
| border-top: 1px solid hsl(from var(--color-tmp-75) h var(--adjust-s) var(--adjust-bd-l));
| |
| transition-property: background-color, border;
| |
| transition-duration: var(--pagebutton-transition);
| |
| }
| |
|
| |
| .pagebutton-text a {
| |
| color: var(--color-white) !important;
| |
| }
| |
|
| |
| .pagebutton-text a:before {
| |
| content: '';
| |
| position: absolute;
| |
| inset: 0;
| |
| } | | } |
