Search the source of every open source package.
33 results
.slidercontrol
{
flex-direction: row;
min-width: 50px;
position: relative;
flex-shrink: 0;
flex-direction: row;
pointer-events: all;
cursor: pointer;
gap: 8px;
flex-grow: 1;
align-items: center;
> .inner
{
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
min-height: 32px;
> .values
{
width: 100%;
pointer-events: none;
font-size: 14px;
color: #aaa;
> .left
{
flex-grow: 1;
}
}
> .track
{
position: relative;
background-color: #888;
height: 7px;
margin: 8px;
align-items: center;
border-radius: 4px;
> .track-active
{
background-color: #fff;
position: absolute;
height: 100%;
left: 0px;
border-radius: 4px;
}
> .thumb
{
position: relative;
background-color: #fff;
border-radius: 100px;
width: 16px;
height: 16px;
transform: translateX( -50% );
}
}
}
>.entry
{
width: 50px;
flex-shrink: 0;
flex-grow: 0;
> textentry
{
text-align: right;
width: 100%;
border-radius: 4px;
padding: 0;
min-height: 0px;
> .content-label
{
padding: 0 4px;
}
}
}
}
.slidercontrol .value-tooltip
{
position: absolute;
bottom: 150%;
left: -8px;
z-index: 1000;
flex-direction: column;
> .label
{
background-color: black;
padding: 8px 12px;
border-radius: 8px;
}
>.tail
{
left: 8px;
background-color: black;
width: 10px;
height: 10px;
transform: rotateZ(45 deg);
}
}@import "base/_popup.scss";
@import "base/_splitcontainer.scss";
@import "base/_tabcontainer.scss";
@import "base/_navigator.scss";
@import "base/_textentry.scss";
.button
{
cursor: pointer;
}
IconPanel
{
font-family: Material Icons;
}
.is-half
{
width: 50%;
}
.is-third
{
width: 33%;
}
.is-quarter
{
width: 25%;
}
.button.has-subtitle
{
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-left: 40px; // icon space
.iconpanel
{
position: absolute;
left: 5px;
top: 0;
bottom: 0;
align-items: center;
}
.button-label
{
font-weight: bold;
}
.button-subtitle
{
font-size: 12px;
opacity: 0.5;
mix-blend-mode: lighten;
}
}using Sandbox;
using Sandbox.Citizen;
using System;
using System.Threading;
using System.Threading.Tasks;
public sealed class fixedPlayer : Component, Component.ITriggerListener
{
public float multyplier;
[Property] public GameObject cam;
[Property] public int jumps;
[Property] public int jumpsnow;
[Property] public CharacterController cc;
public void OnTriggerEnter(Collider other)
{
jumpsnow = 2;
}
protected override void OnStart()
{
this.Transform.LocalRotation = new Angles(0, 0, 0);
jumpsnow = jumps;
if (!IsProxy)
{
cam.Enabled = true;
}
}
protected override void OnUpdate()
{
//var cc = CharacterController;
if (IsProxy)
return;
if (Input.Down("Run"))
{
multyplier = 2f;
}
else
{
multyplier = 1;
}
if (jumpsnow > 0 && Input.Pressed("jump"))
{
jumpsnow = jumpsnow - 1;
Transform.Position += new Vector3(0, 0, 25);
}
if (!Input.AnalogMove.IsNearZeroLength)
{
Transform.Position += Input.AnalogMove.Normal * Time.Delta * 100.0f * multyplier;
}
/*
if (Input.Down("jump") && jumpnow > 0)
{
jumpnow = jumpnow - 1;
Transform.Position += new Vector3(0,0,5);
}
*/
/*if (Input.Down("jump"))
{
Transform.Position += new Vector3(0, 0, 5);
}
*/
if (Input.Down("reload"))
{
Transform.Rotation = new Angles(0, 0, 0);
}
}
}
$form-control-height: 28px !default;
@import "form/_checkbox.scss";
@import "form/_switch.scss";
@import "form/_dropdown.scss";
@import "form/_slider.scss";
@import "form/_coloreditor.scss";
@import "form/_colorproperty.scss";
.form
{
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
overflow: scroll;
}
.field-group
{
flex-direction: column;
flex-shrink: 0;
}
.field-header
{
flex-shrink: 0;
}
.field
{
color: white;
font-size: 14px;
flex-shrink: 0;
flex-grow: 0;
> .label
{
flex-grow: 0;
flex-shrink: 0;
font-weight: 600;
opacity: 0.4;
width: 20%;
font-size: 13px;
}
> .control
{
flex-shrink: 0;
flex-grow: 1;
flex-direction: column;
}
}
.is-vertical > .field, .field.is-vertical
{
flex-direction: column;
> .label
{
width: auto;
height: auto;
}
}.packagefilter
{
width: 100%;
margin-bottom: 40px;
flex-shrink: 0;
.left
{
flex-grow: 1;
flex-shrink: 0;
gap: 16px;
}
.right
{
flex-grow: 0;
flex-shrink: 0;
gap: 16px;
textentry
{
width: 300px;
}
}
}
.packagefilterfacet, .packagefilter textentry
{
background-color: rgba( black, 0.4 );
padding: 4px 12px;
gap: 16px;
flex-shrink: 0;
flex-grow: 0;
font-size: 18px;
.clear-button
{
height: 100%;
margin-right: -16px;
align-items: center;
padding: 0px 12px;
&:hover
{
background-color: white;
color: #222;
}
}
}
.packagefilterfacet
{
cursor: pointer;
align-items: center;
&.is-active
{
opacity: 1;
}
}
@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
@if ( Network.OwnerConnection is Connection owner && owner != Connection.Local )
{
<root>
<div class="card">
<div class="avatar" style="background-image: url( avatar:@owner.SteamId )"></div>
<div class="name">@owner.DisplayName</div>
</div>
</root>
}
@code
{
protected override void OnEnabled()
{
base.OnEnabled();
}
protected override int BuildHash() => System.HashCode.Combine(Network.OwnerConnection);
}
@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
<root>
<div class="title">@MyStringValue</div>
</root>
@code
{
[Property, TextArea] public string MyStringValue { get; set; } = "Hello World!";
/// <summary>
/// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
/// </summary>
protected override int BuildHash() => System.HashCode.Combine( MyStringValue );
}
$primary: red !default;
$primary-alt: white !default;
.slidercontrol
{
flex-direction: row;
min-width: 50px;
position: relative;
flex-shrink: 0;
flex-direction: row;
pointer-events: all;
cursor: pointer;
gap: 8px;
flex-grow: 1;
align-items: center;
> .inner
{
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
min-height: 32px;
> .values
{
color: $primary;
}
> .track
{
background-color: rgba( $primary, 0.2 );
height: 10px;
margin: 10px 18px;
> .track-active
{
background-color: $primary;
}
> .thumb
{
background-color: $primary;
position: relative;
width: 22px;
height: 22px;
box-shadow: 2px 2px 20px #0002;
}
}
}
> .entry
{
width: 50px;
flex-shrink: 0;
flex-grow: 0;
> textentry
{
text-align: right;
width: 100%;
border-radius: 4px;
padding: 0;
min-height: 0px;
> .content-label
{
padding: 0 4px;
}
}
}
&:active
{
> .inner > .track > .thumb
{
width: 22px;
height: 22px;
background-color: #fff;
}
}
}
Panel
{
position: absolute;
top: -500;
left: 0;
right: 1000;
bottom: 0;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 20px;
.title
{
font-size: 25px;
font-family: Poppins;
color: #fff;
}
}using Sandbox;
public sealed class Camcontrol : Component
{
[Property] public GameObject cam;
private void OnStart()
{
cam.Transform.LocalPosition = new Vector3(-1000, 19, 575);
//cam.Transform.Rotation = new Rotation(45, 45, 45, 180);
}
}
menupanel
{
position: absolute;
z-index: 1000;
pointer-events: all;
font-size: 12px;
flex-shrink: 0;
.background
{
position: absolute;
left: -5000px;
right: -5000px;
top: -5000px;
bottom: -5000px;
}
.inner
{
min-width: 200px;
min-height: 20px;
flex-direction: column;
font-family: Poppins;
font-weight: bold;
border-radius: 10px;
box-shadow: 5px 5px 30px #000e;
background-color: #2a2a2a;
flex-shrink: 0;
.spacer
{
height: 1px;
background-color: #0005;
}
.option
{
color: #fffa;
padding: 0px 8px;
cursor: pointer;
flex-shrink: 0;
height: 32px;
&:first-child
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
&:last-child
{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon
{
padding: 8px;
font-family: Material Icons;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.text
{
padding: 8px;
flex-shrink: 0;
}
&:hover
{
background-color: #3472e6;
color: #f5f8fe;
}
}
}
}
RootPanel
{
font-family: Roboto;
color: white;
}
IconPanel, i
{
font-family: Material Icons;
}
.tooltip
{
background-color: rgba( black, 0.8 );
border: 1px solid rgba( #555, 0.1 );
padding: 10px;
border-radius: 4px;
color: white;
font-weight: bold;
transition: opacity 0.09s ease;
opacity: 1;
margin: 0px;
&:intro, &:outro
{
opacity: 0;
}
}
.textentry
{
cursor: text;
align-items: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
flex-direction: row;
position: relative;
&.disabled
{
cursor: default;
}
&.is-multiline
{
align-items: flex-start;
white-space: normal;
}
.content-label,
.placeholder
{
flex-grow: 1;
}
.placeholder
{
opacity: 0.2;
pointer-events: none;
display: none;
}
.iconpanel
{
position: absolute;
right: 0;
font-size: 24px;
padding-right: 10px;
pointer-events: none;
}
&.has-icon
{
padding-right: 30px;
}
.content-label,
.prefix-label,
.suffix-label,
.placeholder
{
padding: 10px;
overflow: hidden;
}
.prefix-label,
.suffix-label
{
flex-shrink: 0;
opacity: 0.5;
background-color: rgba( black, 0.8 );
}
&.has-placeholder
{
.placeholder
{
display: flex;
}
.content-label
{
display: none;
}
}
&:hover
{
.placeholder
{
display: none;
}
.content-label
{
display: flex;
}
}
&.invalid
{
box-shadow: 0px 0px 1px 2px #f8356b;
}
}
$popup-border-radius: 10px !default;
$primary: #e500ff !default;
$primary-fg: white !default;
.popup-panel
{
background-color: #2b303c;
flex-direction: column;
color: #cfdbf2;
transition: all 0.1s ease-out;
position: absolute;
z-index: 1000;
min-height: 20px;
min-width: 10px;
overflow: scroll;
pointer-events: all;
&.medium
{
max-width: 300px;
}
&.center-horizontal
{
transform-origin: top center;
}
&.below-center
{
transform: translateX( -50% );
transform-origin: 50% 0%;
}
&.above-left
{
transform-origin: 0% 100%;
}
&.left
{
transform-origin: 100% 50%;
transform: translate( 00% -50% );
}
&:intro
{
transform: scale( 0 );
pointer-events: none;
opacity: 0;
}
&:outro
{
opacity: 0;
transition: all 0.1s ease-in;
margin-top: 50px;
pointer-events: none;
}
&.below-stretch
{
transform-origin: 0% 0%;
&:intro
{
transform: scaleY( 0.1 );
}
}
> .canvas
{
flex-direction: column;
}
.information
{
padding: 16px;
font-size: 14px;
opacity: 0.5;
}
.button
{
background-color: transparent;
border-radius: 0;
font-size: 18px;
padding: 8px 12px;
padding-right: 24px;
min-height: 10px;
border: 0;
flex-shrink: 0;
gap: 16px;
cursor: pointer;
color: #ccc;
font-weight: 400;
white-space: nowrap;
.iconpanel
{
color: #eee;
flex-grow: 0;
flex-shrink: 0;
}
.button-label
{
flex-grow: 1;
flex-shrink: 0;
}
.count
{
flex-grow: 0;
flex-shrink: 0;
margin-left: 32px;
text-align: right;
}
&:hover, &.active, &:active
{
color: #fff;
background-color: #fff1;
.iconpanel
{
color: #fff;
}
}
&.disabled
{
pointer-events: none;
opacity: 0.2;
}
}
}
using Sandbox;
public sealed class MyComponent : Component
{
[Property] public string StringProperty { get; set; }
protected override void OnUpdate()
{
}
}
.textentry
{
font-size: 16px;
}
.splitcontainer
{
flex-grow: 1;
> .split-left, > .split-right
{
flex-grow: 1;
}
> .split-left
{
height: 100%;
}
> .splitter
{
flex-grow: 1;
width: 8px;
cursor: ew-resize;
&:hover
{
}
}
&.dragging > .splitter
{
}
&.vertical
{
flex-direction: column;
> .splitter
{
height: 8px;
width: 100%;
cursor: ns-resize;
}
}
}
$outline: #fff;
$highlight: #5c5;
.card-package
{
max-width: 250px;
min-width: 250px;
border: 1px solid transparent;
margin: 2px;
flex-direction: column;
.card-image
{
border-radius: 5px;
box-shadow: 5px 5px 30px rgba( black, 0.2 );
cursor: pointer;
background-position: center;
background-size: cover;
position: relative;
.hover-overlay
{
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
justify-content: center;
align-items: center;
border-radius: 5px;
opacity: 0;
background-color: rgba( #222, 0.0 );
display: none;
transition: all 0.3s ease-out;
pointer-events: none;
.thumb-video
{
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
i
{
font-size: 80px;
text-shadow: 4px 4px 4px black;
}
}
&:hover
{
box-shadow: 0px 0px 2px 2px $outline, 0px 0px 10px rgba( $outline, 0.8 );
.hover-overlay
{
opacity: 1;
display: flex;
}
}
&:active
{
top: 5px;
left: 2px;
}
}
.package-card-body
{
flex-shrink: 0;
font-size: 13px;
flex-direction: row;
margin-top: 12px;
// border: 1px solid red;
gap: 10px;
.org-image
{
width: 38px;
flex-shrink: 0;
//border: 1px solid green;
.img
{
width: 38px;
height: 38px;
background-size: cover;
border-radius: 5px;
background-color: white;
}
}
.body-content
{
// border: 1px solid cyan;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
white-space: nowrap;
gap: 3px;
.orgrow
{
flex-direction: row;
flex-shrink: 0;
flex-grow: 1;
gap: 4px;
color: #5A738B;
.orgname
{
flex-grow: 0;
}
.updated
{
flex-shrink: 0;
}
}
.body-meta
{
gap: 12px;
margin-top: 6px;
color: #5A738B;
> div
{
gap: 2px;
font-size: 13px;
align-items: center;
i
{
font-size: 16px;
}
}
}
}
.title
{
font-weight: bold;
text-overflow: ellipsis;
cursor: pointer;
&:hover
{
text-decoration: underline;
}
}
.orgname
{
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover
{
text-decoration: underline;
color: white;
}
}
}
.card-image
{
aspect-ratio: 16/9;
flex-grow: 1;
flex-shrink: 0;
}
&.is-favourite .body-meta .favourite
{
color: #fac;
}
&:intro
{
opacity: 0.0;
}
opacity: 1;
transition: all 0.1s ease-out;
}
.card-decorator-unplayed, .card-decorator-updated
{
background-color: #182229;
color: #65788B;
position: absolute;
left: 0px;
top: 0px;
padding: 6px 8px;
text-transform: uppercase;
border-radius: 3px 0px 2px 0px;
font-size: 10px;
letter-spacing: 1px;
}
.card-decorator-updated
{
background-color: darken( rgba( $highlight, 0.95 ), 0.33 );
color: lighten( $highlight, 0.5 );
}
.card-decorator-hidden
{
position: absolute;
background-color: #0009;
bottom: 0;
left: 0;
right: 0;
color: white;
padding: 10px;
text-transform: uppercase;
font-size: 12px;
z-index: 5;
}
.card-decorator-users
{
background-color: darken( rgba( $highlight, 0.95 ), 0.33 );
color: lighten( $highlight, 0.5 );
position: absolute;
right: 0px;
top: 0px;
padding: 3px 8px;
border-radius: 0px 3px 0px 2px;
aspect-ratio: 1;
box-shadow: 2px 2px 16px #0002;
font-size: 12px;
font-weight: bold;
gap: 3px;
align-items: center;
i
{
font-size: 16px;
}
}
using Sandbox;
public sealed class SexyLittleSlut : Component
{
protected override void OnUpdate()
{
Mouse.Visible = true;
}
}
$primary: red !default;
$primary-alt: white !default;
$switch-padding: 6px !default;
.checkbox.switch
{
cursor: pointer;
> .checkmark
{
font-size: 22px;
border: 0px solid $primary;
border-radius: 100px;
text-align: center;
justify-content: center;
align-items: center;
color: $primary-alt;
padding: $switch-padding;
padding-right: 32px;
padding-left: $switch-padding;
transition: all 0.3s ease;
background-color: rgba( $primary, 0.1 );
> .handle
{
background-color: $primary-alt;
width: 20px;
height: 20px;
border-radius: 100px;
box-shadow: 2px 2px 12px black;
}
}
&.checked
{
> .checkmark
{
background-color: $primary;
padding-left: 32px;
padding-right: $switch-padding;
}
}
&:active
{
transform: scale( 0.9 );
transform-origin: 20px 50%;
}
}
.package-list
{
overflow-y: scroll;
flex-shrink: 1;
flex-wrap: wrap;
flex-grow: 1;
gap: 10px;
justify-content: space-around;
h1
{
width: 100%;
margin-top: 50px;
font-size: 40px;
}
}
$primary: red !default;
$primary-alt: white !default;
$switch-padding: 6px !default;
.button.popupbutton.dropdown
{
cursor: pointer;
transition: all .1s ease-out;
position: relative;
> .dropdown_indicator
{
position: absolute;
right: 8px;
}
&.open
{
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
transition: border-radius 0.2s ease-out;
}
}
select
{
min-height: 40px;
> option
{
display: none;
}
}Menu
{
}global using Microsoft.AspNetCore.Components;
global using Microsoft.AspNetCore.Components.Rendering;
.navigator-body
{
&.hidden
{
display: none;
}
}
$primary: red !default;
$primary-alt: white !default;
$switch-padding: 6px !default;
.coloreditor
{
flex-direction: column;
min-width: 250px;
max-width: 250px;
> .canvas
{
border-top: 1px solid rgba( white, 0.5 );
flex-grow: 1;
flex-direction: column;
padding: 10px 15px;
> textentry.textentry
{
flex-grow: 0;
flex-shrink: 0;
width: auto;
}
}
.slider
{
padding: 6.5px;
}
.slider .track
{
height: 14px;
border-radius: 14px;
left: 0px;
right: 0px;
transition: all 0.1s ease-out;
.inner
{
display: none;
}
}
.slider:hover, .slider:active
{
padding: 7px;
.track
{
height: 20px;
border-radius: 6px;
}
.thumb
{
width: 10px;
height: 16px;
margin-left: 2px;
}
}
.slider .thumb
{
width: 10px;
height: 10px;
box-shadow: 0px 0px 0px transparent;
background-color: white;
backdrop-filter: invert( 1 );
margin-left: 1px;
pointer-events: none;
}
.alpha_slider .track
{
background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
}
.hue .track
{
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
.inner
{
display: none;
}
}
.satval
{
background: linear-gradient(to right, white, transparent);
height: 200px;
position: relative;
&:active
{
z-index: 10;
cursor: none;
}
.value_gradient
{
background: linear-gradient(to bottom, black, white);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
mix-blend-mode: multiply;
}
.thumb
{
z-index: 10;
}
}
.presets
{
flex-wrap: wrap;
align-content: center;
justify-content: center;
padding: 15px;
border-top: 1px solid rgba( white, 0.5 );
.preset
{
background-color: white;
width: 16px;
height: 16px;
margin: 2px;
border-radius: 20px;
cursor: pointer;
&:hover
{
box-shadow: 0px 0px 1px 2px white;
}
}
}
}
.coloreditorrgba
{
flex-direction: column;
.slider
{
padding-right: 16px;
}
.slider .track
{
background-color: transparent;
height: 14px;
border-radius: 14px;
left: 0px;
right: 0px;
.inner
{
display: none;
}
}
.slider .thumb
{
width: 12px;
height: 12px;
box-shadow: 0px 0px 0px transparent;
background-color: white;
margin-left: 2px;
backdrop-filter: invert( 1 );
}
.red_slider .track
{
background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
}
.green_slider .track
{
background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
}
.blue_slider .track
{
background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
}
.alpha_slider .track
{
background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
}
}
.coloreditorhsva
{
flex-direction: column;
.slider
{
padding-right: 16px;
}
.slider .track
{
background-color: transparent;
height: 14px;
border-radius: 14px;
left: 0px;
right: 0px;
.inner
{
display: none;
}
}
.slider .thumb
{
width: 12px;
height: 12px;
box-shadow: 0px 0px 0px transparent;
background-color: white;
margin-left: 2px;
backdrop-filter: invert( 1 );
}
.hue_slider .track
{
background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
}
.alpha_slider .track
{
background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
}
}
.colorproperty
{
align-items: center;
position: relative;
.colorsquare
{
width: 20px;
height: 20px;
border-radius: 4px;
margin-right: 8px;
position: absolute;
left: 7px;
z-index: 1;
cursor: pointer;
}
> .textentry:not( .a.b.c )
{
padding-left: 36px;
}
}using Sandbox;
public sealed class Player : Component
{
public Angles LookInput;
protected override void OnUpdate()
{
// If we're a proxy then don't do any controls
// because this client isn't controlling us
if (IsProxy)
return;
// direction keys are pressed
if (!Input.AnalogMove.IsNearZeroLength)
{
Transform.Position += Input.AnalogMove.Normal * Time.Delta * 100.0f;
}
if (Input.Down("jump"))
{
Transform.Position += Vector3.Forward * Time.Delta;
}
// position the camera
var mouselook = Input.AnalogLook + 1;
mouselook = (mouselook + Input.AnalogLook);
var lookInput = (LookInput + Input.AnalogLook).Normal;
GameObject.Transform.Rotation = LookInput;
if(Input.Down("Run"))
{
Transform.Rotation = new Angles(0,90,0);
}
if (Input.Down("Duck"))
{
Transform.Rotation = new Angles(0, -90, 0);
}
}
}
$primary: red !default;
$primary-alt: white !default;
$form-control-height: 24px !default;
.checkbox
{
cursor: pointer;
color: rgba( $primary-alt, 0.6 );
align-items: center;
label
{
pointer-events: none;
}
> .checkmark
{
padding: 1px;
font-size: 22px;
border: 3px solid $primary;
border-radius: 4px;
text-align: center;
justify-content: center;
align-items: center;
color: transparent;
min-height: $form-control-height;
margin-right: 10px;
pointer-events: none;
}
&.checked
{
> .checkmark
{
color: $primary-alt;
background-color: $primary;
}
}
&:active
{
color: $primary-alt;
}
&:hover
{
color: $primary-alt;
}
}
$popup-border-radius: 10px !default;
$primary: #e500ff !default;
$primary-fg: white !default;
.popup-panel
{
background-color: #2b303c;
background-image: linear-gradient( #2b303c, #1d2028 );
border-radius: $popup-border-radius;
box-shadow: 5px 5px 30px rgba( black, 0.8 );
flex-direction: column;
color: #cfdbf2;
transition: all 0.1s ease-out;
position: absolute;
z-index: 1000;
min-height: 10px;
min-width: 10px;
font-family: Poppins;
overflow: scroll;
pointer-events: all;
&.flat-top
{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
.button:nth-child(1)
{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
&.medium
{
max-width: 300px;
}
> .header
{
font-size: 16px;
font-weight: 600;
padding: 8px 12px;
align-items: center;
background-color: rgba( $primary, 0.4 );
border-radius: $popup-border-radius $popup-border-radius 0 0;
color: $primary-fg;
flex-shrink: 0;
.iconpanel
{
margin-right: 10px;
font-size: 18px;
color: $primary-fg;
}
}
&.center-horizontal
{
transform-origin: top center;
}
&.below-center
{
transform: translateX( -50% );
transform-origin: 50% 0%;
}
&.above-left
{
transform-origin: 0% 100%;
}
&.left
{
transform-origin: 100% 50%;
transform: translate( 00% -50% );
}
&:intro
{
transform: scale( 0 );
pointer-events: none;
opacity: 0;
}
&:outro
{
opacity: 0;
transition: all 0.1s ease-in;
margin-top: 50px;
pointer-events: none;
}
&.below-stretch
{
transform-origin: 0% 0%;
&:intro
{
transform: scaleY( 0.1 );
}
}
&.success:outro
{
opacity: 0;
transition: all 0.1s ease;
margin-top: 0px;
transform: scale( 0.7 );
&.center-horizontal
{
transform: scale( 1.4 ) translateX( -50% );
transform-origin: center;
}
}
> .arrow-top
{
//background-color: #454e60;
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: 50%;
//transform: rotate( 45deg );
z-index: -10;
}
> .canvas
{
flex-direction: column;
}
.information
{
padding: 16px;
font-size: 14px;
opacity: 0.5;
}
.button
{
background-color: transparent;
border-radius: 0;
font-size: 18px;
padding: 8px 12px;
padding-right: 24px;
min-height: 10px;
border: 0;
flex-shrink: 0;
gap: 16px;
&:nth-child( even )
{
background-color: rgba( black, 0.3 );
}
color: #cfdbf2;
font-weight: 400;
white-space: nowrap;
&:first-child
{
border-top-left-radius: $popup-border-radius;
border-top-right-radius: $popup-border-radius;
}
&:last-child
{
border-bottom-left-radius: $popup-border-radius;
border-bottom-right-radius: $popup-border-radius;
}
.iconpanel
{
color: $primary;
flex-grow: 0;
flex-shrink: 0;
}
.button-label
{
flex-grow: 1;
flex-shrink: 0;
}
.count
{
flex-grow: 0;
flex-shrink: 0;
margin-left:32px;
text-align: right;
}
&:hover, &.active
{
color: $primary-fg;
background-color: $primary;
&:nth-child( even )
{
background-color: rgba( $primary, 0.8 );
}
// Lol might be too much
// box-shadow: 0px 0px 100px rgba( $primary, 0.2 );
// text-shadow: 0px 0px 20px rgba( white, 0.2 );
.iconpanel
{
color: $primary-fg;
}
}
&:active
{
color: $primary-fg;
background-color: rgba( #a1b7e1, 0.3 );
.iconpanel
{
color: $primary-fg;
}
}
&.disabled
{
pointer-events: none;
opacity: 0.2;
}
}
}
.switchcontrol
{
flex-direction: row;
width: 100px;
min-height: 24px;
align-items: center;
cursor: pointer;
.switch-frame
{
flex-grow: 0;
flex-shrink: 1;
width: 48px;
height: 16px;
background-color: #fff1;
margin: 0px 5px;
align-items: center;
border-radius: 100px;
transition: all 0.4s linear;
.switch-inner
{
position: relative;
flex-grow: 0;
flex-shrink: 1;
background-color: #999;
width: 25px;
height: 25px;
border-radius: 100px;
left: 20%;
transform: translateX( -50% );
transition: all 0.3s ease-out;
}
}
&.active
{
.switch-frame
{
background-color: #fffa;
}
.switch-inner
{
left: 80%;
background-color: #fff;
}
}
}
NameTag {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
white-space: nowrap;
justify-content: center;
align-items: center;
font-weight: bold;
.card {
flex-direction: row;
background-color: #0004;
border-radius: 5px;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 16px;
.avatar {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
border-radius: 100px;
}
.name {
font-family: Poppins;
color: #fff;
}
.voice {
background-color: #111a;
border-radius: 20px;
padding: 4px;
position: absolute;
top: -12px;
right: -12px;
font-family: "Material Icons";
font-size: 24px;
color: #aaa;
}
}
}
global using static Sandbox.Internal.GlobalGameNamespace;
[assembly: global::System.Reflection.AssemblyMetadata( "AddonTitle", "Ponchik" )]
[assembly: global::System.Reflection.AssemblyMetadata( "AddonIdent", "ponchik" )]
[assembly: global::System.Reflection.AssemblyMetadata( "OrgIdent", "bananapeelsteam" )]
[assembly: global::System.Reflection.AssemblyMetadata( "Ident", "bananapeelsteam.ponchik" )]
[assembly: global::System.Reflection.AssemblyMetadata( "CompileTime", "10/16/2024 7:56:49 PM" )]
[assembly: global::System.Reflection.AssemblyMetadata( "EngineVersion", "17" )]
[assembly: global::System.Reflection.AssemblyMetadata( "EngineMinorVersion", "1" )]
[assembly: System.Runtime.Versioning.TargetFramework( ".NETCoreApp,Version=v7.0", FrameworkDisplayName = ".NET 7.0" )]
[assembly: global::System.Reflection.AssemblyVersion("0.0.107.0")]
[assembly: global::System.Reflection.AssemblyFileVersion("0.0.107.0")]@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
<style>
Hud {
pointer-events: all;
width: 100%;
height: 100%;
}
.hello {
margin: 100px;
font-size: 32px;
color: red;
text-shadow: 2px 2px 10px black}
.goodbye {
margin: 200px;
font-size: 64px;
color: green;
text-shadow: 5px 5px 20px black}
</style>
<root>
<panel class="hello" onmousedown="@Play" >
Hello Razer. Ti gondone: @SomeNumber
</panel>
@if(ShowGoodbye)
{
<panel class="goodbye">
Goodbye Lads!
</panel>
}
</root>
@code
{
private int SomeNumber = 32;
private bool ShowGoodbye = false;
private void Play()
{
Log.Error("SEX TIME!");
ShowGoodbye = !ShowGoodbye;
}
}
.tabcontainer
{
flex-grow: 1;
flex-direction: column;
> .tabs
{
flex-grow: 0;
flex-shrink: 0;
> .button
{
padding: 5px 10px;
border-radius: 4px 4px 0px 0px;
opacity: 0.2;
font-family: Roboto;
font-size: 13px;
background-color: #aaa;
.iconpanel
{
margin-right: 4px;
}
&:hover
{
opacity: 0.5;
}
&.active
{
opacity: 1;
}
}
}
> .sheets
{
border: 4px solid #aaa;
border-radius: 0px 2px 2px 2px;
flex-grow: 1;
flex-direction: column;
> :not( .active )
{
display: none;
}
}
&.tabs-bottom
{
flex-direction: column-reverse;
> .tabs
{
padding-left: 5px; // just to get out of the sheet border radius
}
> .tabs .button
{
border-radius: 0px 0px 4px 4px;
}
> .sheet
{
border-radius: 3px 3px 3px 0px;
}
}
&.tabs-left
{
flex-direction: row;
> .tabs
{
padding-top: 5px; // just to get out of the sheet border radius
flex-direction: column;
}
> .tabs .button
{
border-radius: 4px 0 0px 4px;
}
> .sheet
{
border-radius: 0px 3px 3px 3px;
}
}
}