EZPPFarm/hanayo
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

replace zxq.co/ripple/hanayo

Browse Source
This commit is contained in:
Alicia
2019-02-23 13:29:15 +00:00
commit c3d206c173
5871 changed files with 1353715 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
semantic/src/themes/dark/modules/accordion.overrides Normal file
View File

@@ -0,0 +1,28 @@
/*******************************
Theme Overrides
*******************************/
@font-face {
font-family: 'Accordion';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'),
url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff')
;
font-weight: normal;
font-style: normal;
}
/* Dropdown Icon */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
font-family: Accordion;
line-height: 1;
backface-visibility: hidden;
font-weight: normal;
font-style: normal;
text-align: center;
}
.ui.accordion .title .dropdown.icon:before,
.ui.accordion .accordion .title .dropdown.icon:before {
content: '\f0da'/*rtl:'\f0d9'*/;
}

100
semantic/src/themes/dark/modules/accordion.variables Normal file
View File

@@ -0,0 +1,100 @@
/*******************************
Accordion
*******************************/
@boxShadow: none;
/* Title */
@titleFont: @headerFont;
@titlePadding: 0.5em 0em;
@titleFontSize: 1em;
@titleColor: @textColor;
/* Icon */
@iconOpacity: 1;
@iconFontSize: 1em;
@iconFloat: none;
@iconWidth: 1.25em;
@iconHeight: 1em;
@iconDisplay: inline-block;
@iconMargin: 0em 0.25rem 0em 0rem;
@iconPadding: 0em;
@iconTransition:
transform @defaultDuration @defaultEasing,
opacity @defaultDuration @defaultEasing
;
@iconVerticalAlign: baseline;
@iconTransform: none;
/* Child Accordion */
@childAccordionMargin: 1em 0em 0em;
@childAccordionPadding: 0em;
/* Content */
@contentMargin: '';
@contentPadding: 0.5em 0em 1em;
/*-------------------
Coupling
--------------------*/
@menuTitlePadding: 0em;
@menuIconFloat: right;
@menuIconMargin: @lineHeightOffset 0em 0em 1em;
@menuIconTransform: rotate(180deg);
/*-------------------
States
--------------------*/
@activeIconTransform: rotate(90deg);
/*-------------------
Variations
--------------------*/
/* Styled */
@styledWidth: 600px;
@styledBackground: @white;
@styledBorderRadius: @defaultBorderRadius;
@styledBoxShadow:
@subtleShadow,
0px 0px 0px 1px @borderColor
;
/* Content */
@styledContentMargin: 0em;
@styledContentPadding: 0.5em 1em 1.5em;
/* Child Content */
@styledChildContentMargin: 0em;
@styledChildContentPadding: @styledContentPadding;
/* Styled Title */
@styledTitleMargin: 0em;
@styledTitlePadding: 0.75em 1em;
@styledTitleFontWeight: bold;
@styledTitleColor: @unselectedTextColor;
@styledTitleTransition: background-color @defaultDuration @defaultEasing;
@styledTitleBorder: 1px solid @borderColor;
@styledTitleTransition:
background @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing
;
/* Styled Title States */
@styledTitleHoverBackground: transparent;
@styledTitleHoverColor: @textColor;
@styledActiveTitleBackground: transparent;
@styledActiveTitleColor: @selectedTextColor;
/* Styled Child Title States */
@styledHoverChildTitleBackground: @styledTitleHoverBackground;
@styledHoverChildTitleColor: @styledTitleHoverColor;
@styledActiveChildTitleBackground: @styledActiveTitleBackground;
@styledActiveChildTitleColor: @styledActiveTitleColor;
/* Inverted */
@invertedTitleColor: @invertedTextColor;

3
semantic/src/themes/dark/modules/chatroom.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

3
semantic/src/themes/dark/modules/chatroom.variables Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Chatroom
*******************************/

36
semantic/src/themes/dark/modules/checkbox.overrides Normal file
View File

@@ -0,0 +1,36 @@
/*******************************
Theme Overrides
*******************************/
@font-face {
font-family: 'Checkbox';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype')
;
}
/* Checkmark */
.ui.checkbox label:after,
.ui.checkbox .box:after {
font-family: 'Checkbox';
}
/* Checked */
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
content: '\e800';
}
/* Indeterminate */
.ui.checkbox input:indeterminate ~ .box:after,
.ui.checkbox input:indeterminate ~ label:after {
font-size: 12px;
content: '\e801';
}
/* UTF Reference
.check:before { content: '\e800'; }
.dash:before { content: '\e801'; }
.plus:before { content: '\e802'; }
*/

193
semantic/src/themes/dark/modules/checkbox.variables Normal file
View File

@@ -0,0 +1,193 @@
/*******************************
Checkbox
*******************************/
@checkboxSize: 17px;
@checkboxColor: @textColor;
@checkboxLineHeight: @checkboxSize;
/* Label */
@labelDistance: 1.85714em; /* 26px @ 14/em */
/* Checkbox */
@checkboxBackground: @white;
@checkboxBorder: 1px solid @solidBorderColor;
@checkboxBorderRadius: @3px;
@checkboxTransition:
border @defaultDuration @defaultEasing,
opacity @defaultDuration @defaultEasing,
transform @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing
;
/* Checkmark */
@checkboxCheckFontSize: 14px;
@checkboxCheckTop: 0px;
@checkboxCheckLeft: 0px;
@checkboxCheckSize: @checkboxSize;
/* Label */
@labelFontSize: @relativeMedium;
@labelColor: @textColor;
@labelTransition: color @defaultDuration @defaultEasing;
/*-------------------
States
--------------------*/
/* Hover */
@checkboxHoverBackground: @checkboxBackground;
@checkboxHoverBorderColor: @selectedBorderColor;
@labelHoverColor: @hoveredTextColor;
/* Pressed */
@checkboxPressedBackground: @offWhite;
@checkboxPressedBorderColor: @selectedBorderColor;
@checkboxPressedColor: @selectedTextColor;
@labelPressedColor: @selectedTextColor;
/* Focus */
@checkboxFocusBackground: @white;
@checkboxFocusBorderColor: @focusedFormMutedBorderColor;
@checkboxFocusCheckColor: @selectedTextColor;
@labelFocusColor: @selectedTextColor;
/* Active */
@labelActiveColor: @selectedTextColor;
@checkboxActiveBackground: @white;
@checkboxActiveBorderColor: @selectedBorderColor;
@checkboxActiveCheckColor: @selectedTextColor;
@checkboxActiveCheckOpacity: 1;
/* Active Focus */
@checkboxActiveFocusBackground: @white;
@checkboxActiveFocusBorderColor: @checkboxFocusBorderColor;
@checkboxActiveFocusCheckColor: @selectedTextColor;
/* Indeterminate */
@checkboxIndeterminateBackground: @checkboxActiveBackground;
@checkboxIndeterminateBorderColor: @checkboxActiveBorderColor;
@checkboxIndeterminateCheckOpacity: 1;
@checkboxIndeterminateCheckColor: @checkboxActiveCheckColor;
/* Disabled */
@disabledCheckboxOpacity: 0.5;
@disabledCheckboxLabelColor: rgba(0, 0, 0, 1);
/*-------------------
Types
--------------------*/
/* Radio */
/* Uses px to avoid rounding issues with circles */
@radioSize: 15px;
@radioTop: 1px;
@radioLeft: 0px;
@radioLabelDistance: @labelDistance;
@bulletTop: 1px;
@bulletLeft: 0px;
@bulletScale: (7 / 15); /* 7px as unitless value from radio size */
@bulletColor: @textColor;
@bulletRadius: @circularRadius;
@radioFocusBackground: @checkboxFocusBackground;
@radioFocusBulletColor: @checkboxFocusCheckColor;
@radioActiveBackground: @checkboxActiveBackground;
@radioActiveBulletColor: @checkboxActiveCheckColor;
@radioActiveFocusBackground: @checkboxActiveFocusBackground;
@radioActiveFocusBulletColor: @checkboxActiveFocusCheckColor;
/* Slider & Toggle Handle */
@handleBackground: @white @subtleGradient;
@handleBoxShadow:
@subtleShadow,
0px 0px 0px 1px @borderColor inset
;
/* Slider */
@sliderHandleSize: 1.5rem;
@sliderLineWidth: 3.5rem;
@sliderTransitionDuration: 0.3s;
@sliderHandleOffset: (1rem - @sliderHandleSize) / 2;
@sliderHandleTransition: left @sliderTransitionDuration @defaultEasing;
@sliderWidth: @sliderLineWidth;
@sliderHeight: (@sliderHandleSize + @sliderHandleOffset);
@sliderLineHeight: @3px;
@sliderLineVerticalOffset: 0.4rem;
@sliderLineColor: @transparentBlack;
@sliderLineRadius: @circularRadius;
@sliderLineTransition: background @sliderTransitionDuration @defaultEasing;
@sliderTravelDistance: @sliderLineWidth - @sliderHandleSize;
@sliderLabelDistance: @sliderLineWidth + 1rem;
@sliderOffLabelColor: @unselectedTextColor;
@sliderLabelLineHeight: 1rem;
/* Slider States */
@sliderHoverLaneBackground: @veryStrongTransparentBlack;
@sliderHoverLabelColor: @hoveredTextColor;
@sliderOnLineColor: @lightBlack;
@sliderOnLabelColor: @selectedTextColor;
@sliderOnFocusLineColor: @lightBlackFocus;
@sliderOnFocusLabelColor: @sliderOnLabelColor;
/* Toggle */
@toggleLaneWidth: 3.5rem;
@toggleHandleSize: 1.5rem;
@toggleTransitionDuration: 0.2s;
@toggleWidth: @toggleLaneWidth;
@toggleHeight: @toggleHandleSize;
@toggleHandleRadius: @circularRadius;
@toggleHandleOffset: 0rem;
@toggleHandleTransition:
background @sliderTransitionDuration @defaultEasing,
left @sliderTransitionDuration @defaultEasing
;
@toggleLaneBackground: @transparentBlack;
@toggleLaneHeight: @toggleHandleSize;
@toggleLaneBoxShadow: none;
@toggleLaneVerticalOffset: 0rem;
@toggleOffOffset: -0.05rem;
@toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem;
@toggleLabelDistance: @toggleLaneWidth + 1rem;
@toggleLabelLineHeight: 1.5rem;
@toggleLabelOffset: 0.15em;
@toggleFocusColor: @veryStrongTransparentBlack;
@toggleHoverColor: @toggleFocusColor;
@toggleOffLabelColor: @checkboxColor;
@toggleOffHandleBoxShadow: none;
@toggleOnLabelColor: @selectedTextColor;
@toggleOnLaneColor: @primaryColor;
@toggleOnHandleBoxShadow: none;
@toggleOnFocusLaneColor: @primaryColorFocus;
@toggleOnFocusLabelColor: @toggleOnLabelColor;
/*-------------------
Variations
--------------------*/

3
semantic/src/themes/dark/modules/dimmer.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

61
semantic/src/themes/dark/modules/dimmer.variables Normal file
View File

@@ -0,0 +1,61 @@
/*******************************
Dimmer
*******************************/
@dimmablePosition: relative;
@dimmerPosition: absolute;
@backgroundColor: rgba(0, 0, 0 , 0.85);
@lineHeight: 1;
@perspective: 2000px;
@duration: 0.5s;
@transition:
background-color @duration linear
;
@zIndex: 1000;
@textAlign: center;
@verticalAlign: middle;
@textColor: @white;
@overflow: hidden;
@blurredStartFilter: ~"blur(0px) grayscale(0)";
@blurredEndFilter: ~"blur(5px) grayscale(0.7)";
@blurredTransition: 800ms filter @defaultEasing;
@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6);
/* Hidden (Default) */
@hiddenOpacity: 0;
/* Content */
@contentDisplay: table;
@contentChildDisplay: table-cell;
/* Visible */
@visibleOpacity: 1;
/*-------------------
Types
--------------------*/
/* Page Dimmer*/
@transformStyle: '';
@pageDimmerPosition: fixed;
/*-------------------
Variations
--------------------*/
/* Inverted */
@invertedBackgroundColor: rgba(255, 255, 255, 0.85);
@invertedTextColor: @textColor;
/* Simple */
@simpleZIndex: 1;
@simpleStartBackgroundColor: rgba(0, 0, 0, 0);
@simpleEndBackgroundColor: @backgroundColor;
@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;

62
semantic/src/themes/dark/modules/dropdown.overrides Normal file
View File

@@ -0,0 +1,62 @@
/*******************************
Theme Overrides
*******************************/
/* Dropdown Carets */
@font-face {
font-family: 'Dropdown';
src:
url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),
url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff')
;
font-weight: normal;
font-style: normal;
}
.ui.dropdown > .dropdown.icon {
font-family: 'Dropdown';
line-height: 1;
height: 1em;
width: 1.23em;
backface-visibility: hidden;
font-weight: normal;
font-style: normal;
text-align: center;
}
.ui.dropdown > .dropdown.icon {
width: auto;
}
.ui.dropdown > .dropdown.icon:before {
content: '\f0d7';
}
/* Sub Menu */
.ui.dropdown .menu .item .dropdown.icon:before {
content: '\f0da'/*rtl:'\f0d9'*/;
}
.ui.dropdown .item .left.dropdown.icon:before,
.ui.dropdown .left.menu .item .dropdown.icon:before {
content: "\f0d9"/*rtl:"\f0da"*/;
}
/* Vertical Menu Dropdown */
.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
content: "\f0da"/*rtl:"\f0d9"*/;
}
/* Icons for Reference
.dropdown.down.icon {
content: "\f0d7";
}
.dropdown.up.icon {
content: "\f0d8";
}
.dropdown.left.icon {
content: "\f0d9";
}
.dropdown.icon.icon {
content: "\f0da";
}
*/

373
semantic/src/themes/dark/modules/dropdown.variables Normal file
View File

@@ -0,0 +1,373 @@
/*******************************
Dropdown
*******************************/
/*-------------------
Element
--------------------*/
@transition:
box-shadow @defaultDuration @defaultEasing,
width @defaultDuration @defaultEasing
;
@borderRadius: @defaultBorderRadius;
@raisedShadow: 0px 2px 3px 0px @borderColor;
/*-------------------
Content
--------------------*/
/* Icon */
@dropdownIconSize: @relative12px;
@dropdownIconMargin: 0em 0em 0em 1em;
/* Current Text */
@textTransition: none;
/* Menu */
@menuBackground: #3A3A3A;
@menuMargin: 0em;
@menuPadding: 0em 0em;
@menuTop: 100%;
@menuTextAlign: left;
@menuBorderWidth: 1px;
@menuBorderColor: @borderColor;
@menuBorder: @menuBorderWidth solid @menuBorderColor;
@menuBoxShadow: @raisedShadow;
@menuBorderRadius: @borderRadius;
@menuTransition: opacity @defaultDuration @defaultEasing;
@menuMinWidth: ~"calc(100% + "(@menuBorderWidth * 2)~")";
@menuZIndex: 11;
/* Text */
@textLineHeight: 1em;
@textLineHeightOffset: (@textLineHeight - 1em);
@textCursorSpacing: 1px;
/* Menu Item */
@itemFontSize: @medium;
@itemTextAlign: left;
@itemBorder: none;
@itemHeight: auto;
@itemDivider: none;
@itemColor: @textColor;
@itemVerticalPadding: @mini;
@itemHorizontalPadding: @large;
@itemPadding: @itemVerticalPadding @itemHorizontalPadding;
@itemFontWeight: normal;
@itemLineHeight: 1em;
@itemLineHeightOffset: (@itemLineHeight - 1em);
@itemTextTransform: none;
@itemBoxShadow: none;
/* Sub Menu */
@subMenuTop: 0%;
@subMenuLeft: 100%;
@subMenuRight: auto;
@subMenuDistanceAway: -0.5em;
@subMenuMargin: 0em 0em 0em @subMenuDistanceAway;
@subMenuBorderRadius: @borderRadius;
@subMenuZIndex: 21;
/* Menu Header */
@menuHeaderColor: @darkTextColor;
@menuHeaderFontSize: @relative11px;
@menuHeaderFontWeight: bold;
@menuHeaderTextTransform: uppercase;
@menuHeaderMargin: 1rem 0rem 0.75rem;
@menuHeaderPadding: 0em @itemHorizontalPadding;
/* Menu Divider */
@menuDividerMargin: 0.5em 0em;
@menuDividerColor: @internalBorderColor;
@menuDividerSize: 1px;
@menuDividerBorder: @menuDividerSize solid @menuDividerColor;
/* Menu Input */
@menuInputMargin: @large @mini;
@menuInputMinWidth: 10rem;
@menuInputVerticalPadding: 0.5em;
@menuInputHorizontalPadding: @inputHorizontalPadding;
@menuInputPadding: @menuInputVerticalPadding @menuInputHorizontalPadding;
/* Menu Image */
@menuImageMaxHeight: 2em;
/* Item Sub-Element */
@itemElementFloat: none;
@itemElementDistance: @mini;
/* Sub-Menu Dropdown Icon */
@itemDropdownIconDistance: 1em;
@itemDropdownIconFloat: right;
@itemDropdownIconMargin: @itemLineHeightOffset 0em 0em @itemDropdownIconDistance;
/* Description */
@itemDescriptionFloat: right;
@itemDescriptionMargin: 0em 0em 0em 1em;
@itemDescriptionColor: @lightTextColor;
/* Message */
@messagePadding: @selectionItemPadding;
@messageFontWeight: normal;
@messageColor: @unselectedTextColor;
/* Floated Content */
@floatedDistance: 1em;
/*-------------------
Types
--------------------*/
/*------------
Selection
--------------*/
@selectionMinWidth: 14em;
@selectionVerticalPadding: @inputVerticalPadding;
@selectionHorizontalPadding: @inputHorizontalPadding;
@selectionBorderEmWidth: @relative1px;
@selectionMinHeight: @inputLineHeight + (@selectionVerticalPadding * 2) - @selectionBorderEmWidth;
@selectionBackground: @inputBackground;
@selectionDisplay: inline-block;
@selectionIconDistance: @inputHorizontalPadding + @glyphWidth;
@selectionPadding: @selectionVerticalPadding @selectionIconDistance @selectionVerticalPadding @selectionHorizontalPadding;
@selectionZIndex: 10;
@selectionItemDivider: 1px solid @solidInternalBorderColor;
@selectionMessagePadding: @selectionItemPadding;
/* <select> */
@selectBorder: 1px solid @borderColor;
@selectPadding: 0.5em;
@selectVisibility: visible;
@selectHeight: 38px;
@selectionTextColor: @textColor;
@selectionTextUnderlayIconOpacity: @disabledOpacity;
@selectionTextUnderlayColor: @inputPlaceholderFocusColor;
@selectionBoxShadow: none;
@selectionBorderColor: @borderColor;
@selectionBorder: 1px solid @selectionBorderColor;
@selectionBorderRadius: @borderRadius;
@selectionIconOpacity: 0.8;
@selectionIconZIndex: 3;
@selectionIconHitbox: @selectionVerticalPadding;
@selectionIconMargin: -@selectionIconHitbox;
@selectionIconPadding: @selectionIconHitbox;
@selectionIconTransition: opacity @defaultDuration @defaultEasing;
@selectionMenuBorderRadius: 0em 0em @borderRadius @borderRadius;
@selectionMenuBoxShadow: @raisedShadow;
@selectionMenuItemBoxShadow: none;
@selectionItemHorizontalPadding: @itemHorizontalPadding;
@selectionItemVerticalPadding: @itemVerticalPadding;
@selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding;
@selectionTransition: @transition;
@selectionMenuTransition: @menuTransition;
/* Responsive */
@selectionMobileMaxItems: 3;
@selectionTabletMaxItems: 4;
@selectionComputerMaxItems: 6;
@selectionWidescreenMaxItems: 8;
/* Derived */
@selectedBorderEMWidth: 0.1em; /* 1px / em size */
@selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth;
@selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems);
@selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems);
@selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems);
@selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems);
/* Hover */
@selectionHoverBorderColor: @selectedBorderColor;
@selectionHoverBoxShadow: none;
/* Focus */
@selectionFocusBorderColor: @focusedFormMutedBorderColor;
@selectionFocusBoxShadow: none;
@selectionFocusMenuBoxShadow: @raisedShadow;
/* Visible */
@selectionVisibleTextFontWeight: normal;
@selectionVisibleTextColor: @hoveredTextColor;
@selectionVisibleBorderColor: @focusedFormMutedBorderColor;
@selectionVisibleBoxShadow: @raisedShadow;
@selectionVisibleMenuBoxShadow: @raisedShadow;
/* Visible Hover */
@selectionActiveHoverBorderColor: @focusedFormMutedBorderColor;
@selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow;
@selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow;
@selectionVisibleConnectingBorder: 0em;
@selectionVisibleIconOpacity: 1;
/*--------------
Search
--------------*/
@searchMinWidth: '';
/* Search Selection */
@searchSelectionLineHeight: @inputLineHeight;
@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2);
@searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset);
@searchSelectionHorizontalPadding: @selectionHorizontalPadding;
@searchSelectionInputPadding: @searchSelectionVerticalPadding @selectionIconDistance @searchSelectionVerticalPadding @searchSelectionHorizontalPadding;
@searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight;
@searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight;
@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight;
@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight;
/* Inline */
@inlineIconMargin: 0em @relative7px 0em @relative3px;
@inlineTextColor: inherit;
@inlineTextFontWeight: bold;
@inlineMenuDistance: @relative3px;
@inlineMenuBorderRadius: @borderRadius;
/*--------------
Multiple
--------------*/
/* Split Actual Padding Between Child and Parent (allows for label spacing) */
@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3));
@multipleSelectionLeftPadding: @relative5px;
@multipleSelectionRightPadding: @selectionIconDistance;
@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding;
/* Child Elements */
@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3));
@multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding);
@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin;
@multipleSelectionChildLineHeight: @relative17px;
@multipleSelectionSearchStartWidth: (@glyphWidth * 2);
/* Dropdown Icon */
@multipleSelectionDropdownIconMargin: '';
@multipleSelectionDropdownIconPadding: '';
@multipleSelectionSearchAfterLabelDistance: @relative2px;
/* Selection Label */
@labelSize: @relativeMedium;
@labelHorizontalMargin: @4px;
@labelVerticalMargin: @2px;
@labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0em;
@labelBorderWidth: 1px;
@labelBoxShadow: 0px 0px 0px @labelBorderWidth @borderColor inset;
@labelVerticalPadding: @relative5px;
@labelHorizontalPadding: @relativeMini;
@labelPadding: @labelVerticalPadding @labelHorizontalPadding;
/*-------------------
States
--------------------*/
/* Hovered */
@hoveredItemBackground: @transparentBlack;
@hoveredItemColor: @selectedTextColor;
@hoveredZIndex: @menuZIndex + 2;
/* Default Text */
@defaultTextColor: @inputPlaceholderColor;
@defaultTextFocusColor: @inputPlaceholderFocusColor;
/* Loading */
@loadingZIndex: -1;
/* Active Menu Item */
@activeItemZIndex: @menuZIndex + 1;
@activeItemBackground: transparent;
@activeItemBoxShadow: none;
@activeItemFontWeight: bold;
@activeItemColor: @selectedTextColor;
/* Selected */
@selectedBackground: @subtleTransparentBlack;
@selectedColor: @selectedTextColor;
/* Error */
@errorLabelBackground: #EACBCB;
@errorLabelColor: @errorTextColor;
@errorItemTextColor: @errorTextColor;
@errorItemHoverBackground: #FFF2F2;
@errorItemActiveBackground: #FDCFCF;
/*-------------------
Variations
--------------------*/
/* Scrolling */
@scrollingMenuWidth: 100%;
@scrollingMenuItemBorder: none;
@scrollingMenuRightItemPadding: ~"calc("(@itemHorizontalPadding)~" + "(@scrollbarWidth)~")";
@scrollingMobileMaxItems: 4;
@scrollingTabletMaxItems: 6;
@scrollingComputerMaxItems: 8;
@scrollingWidescreenMaxItems: 12;
@scrollingBorderEMWidth: 0em; /* 0px / em size */
@scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @scrollingBorderEMWidth;
@scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems);
@scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems);
@scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems);
@scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems);
/* Upward */
@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius;
@upwardMenuBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
@upwardSelectionMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
@upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em;
@upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
@upwardSelectionVisibleBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
@upwardSelectionActiveHoverBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
@upwardSelectionActiveHoverMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
/* Flyout Direction */
@leftMenuDropdownIconFloat: left;
@leftMenuDropdownIconMargin: @itemLineHeightOffset @itemElementDistance 0em 0em;
/* Left */
@leftSubMenuBorderRadius: @borderRadius;
/* Simple */
@simpleTransitionDuration: @defaultDuration;
@simpleTransition: opacity @simpleTransitionDuration @defaultEasing;
/* Floating */
@floatingMenuDistance: 0.5em;
@floatingMenuBoxShadow: @floatingShadow;
@floatingMenuBorderRadius: @borderRadius;
/* Pointing */
@pointingArrowOffset: -(@pointingArrowSize / 2);
@pointingArrowDistanceFromEdge: 1em;
@pointingArrowBackground: @white;
@pointingArrowZIndex: 2;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
@pointingArrowSize: @relative7px;
@pointingMenuDistance: @mini;
@pointingMenuBorderRadius: @borderRadius;
@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px @menuBorderWidth @menuBorderColor;
/* Pointing Upward */
@pointingUpwardMenuBorderRadius: @borderRadius;
@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px @menuBorderWidth @menuBorderColor;

3
semantic/src/themes/dark/modules/embed.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Video Overrides
*******************************/

53
semantic/src/themes/dark/modules/embed.variables Normal file
View File

@@ -0,0 +1,53 @@
/*******************************
Video
*******************************/
/*-------------------
Element
--------------------*/
/* Simple */
@background: @lightGrey;
@transitionDuration: 0.5s;
@transitionEasing: @defaultEasing;
/* Placeholder */
@placeholderUnderlay: @background;
/* Placeholder Overlayed Background */
@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
@placeholderBackgroundOpacity: 0.5;
@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;
/* Icon */
@iconBackground: @veryStrongTransparentBlack;
@iconSize: 6rem;
@iconTransition:
opacity @transitionDuration @transitionEasing,
color @transitionDuration @transitionEasing
;
@iconColor: @white;
@iconShadow:
0px 2px 10px rgba(34, 36, 38, 0.2)
;
@iconZIndex: 10;
/*-------------------
States
--------------------*/
/* Hover */
@hoverPlaceholderBackground: @placeholderBackground;
@hoverPlaceholderBackgroundOpacity: 1;
@hoverIconColor: @white;
/*-------------------
Variations
--------------------*/
/* Aspect Ratios */
@squareRatio: (1/1) * 100%;
@widescreenRatio: (9/16) * 100%;
@ultraWidescreenRatio: (9/21) * 100%;
@standardRatio: (3/4) * 100%;

3
semantic/src/themes/dark/modules/modal.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

151
semantic/src/themes/dark/modules/modal.variables Normal file
View File

@@ -0,0 +1,151 @@
/*******************************
Modal
*******************************/
@background: @white;
@border: none;
@zIndex: 1001;
@borderRadius: @defaultBorderRadius;
@transformOrigin: 50% 25%;
@boxShadow:
1px 3px 3px 0px rgba(0, 0, 0, 0.2),
1px 3px 15px 2px rgba(0, 0, 0, 0.2)
;
/* Close Icon */
@closeOpacity: 0.8;
@closeSize: 1.25em;
@closeColor: @white;
@closeHitbox: 2.25rem;
@closeDistance: 0.25rem;
@closeHitBoxOffset: (@closeHitbox - 1rem) / 2;
@closePadding: @closeHitBoxOffset 0rem 0rem 0rem;
@closeTop: -(@closeDistance + @closeHitbox);
@closeRight: -(@closeDistance + @closeHitbox);
/* Header */
@headerMargin: 0em;
@headerVerticalPadding: 1.25rem;
@headerHorizontalPadding: 1.5rem;
@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
@headerBackground: @white;
@headerColor: @darkTextColor;
@headerFontSize: @huge;
@headerBoxShadow: none;
@headerFontWeight: bold;
@headerFontFamily: @headerFont;
@headerBorder: 1px solid @borderColor;
/* Content */
@contentFontSize: 1em;
@contentPadding: 1.5rem;
@contentLineHeight: 1.4;
@contentBackground: @white;
/* Image / Description */
@imageWidth: '';
@imageIconSize: 8rem;
@imageVerticalAlign: top;
@descriptionDistance: 2em;
@descriptionMinWidth: '';
@descriptionWidth: auto;
@descriptionVerticalAlign: top;
/* Modal Actions */
@actionBorder: 1px solid @borderColor;
@actionBackground: @offWhite;
@actionPadding: 1rem 1rem;
@actionAlign: right;
@buttonDistance: 0.75em;
/* Inner Close Position (Tablet/Mobile) */
@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));
@innerCloseRight: 1rem;
@innerCloseColor: @textColor;
/* Mobile Positions */
@mobileHeaderPadding: 0.75rem 1rem;
@mobileContentPadding: 1rem;
@mobileImagePadding: 0rem 0rem 1rem;
@mobileDescriptionPadding: 1rem 0rem ;
@mobileButtonDistance: 1rem;
@mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance);
@mobileImageIconSize: 5rem;
@mobileCloseTop: 0.5rem;
@mobileCloseRight: 0.5rem;
/* Responsive Widths */
@mobileWidth: 95%;
@tabletWidth: 88%;
@computerWidth: 850px;
@largeMonitorWidth: 900px;
@widescreenMonitorWidth: 950px;
@mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
@tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
@computerMargin: 0em 0em 0em -(@computerWidth / 2);
@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
@fullScreenWidth: 95%;
@fullScreenOffset: (100% - @fullScreenWidth) / 2;
@fullScreenMargin: 1em auto;
/* Coupling */
@invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
/*-------------------
Types
--------------------*/
/* Basic */
@basicModalHeaderColor: @white;
@basicModalColor: @white;
@basicModalCloseTop: 1rem;
@basicModalCloseRight: 1.5rem;
@basicInnerCloseColor: @white;
@basicInvertedModalColor: @textColor;
@basicInvertedModalHeaderColor: @darkTextColor;
/* Scrolling Margin */
@scrollingMargin: 3.5rem;
@mobileScrollingMargin: 1rem;
/*-------------------
Variations
--------------------*/
/* Size Widths */
@smallRatio: 0.8;
@largeRatio: 1.2;
/* Derived Responsive Sizes */
@smallHeaderSize: 1.3em;
@smallMobileWidth: @mobileWidth;
@smallTabletWidth: (@tabletWidth * @smallRatio);
@smallComputerWidth: (@computerWidth * @smallRatio);
@smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
@smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2);
@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2);
@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2);
@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2);
@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2);
@largeHeaderSize: 1.6em;
@largeMobileWidth: @mobileWidth;
@largeTabletWidth: @tabletWidth;
@largeComputerWidth: (@computerWidth * @largeRatio);
@largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
@largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2);
@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2);
@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2);
@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2);
@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2);

3
semantic/src/themes/dark/modules/nag.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

74
semantic/src/themes/dark/modules/nag.variables Normal file
View File

@@ -0,0 +1,74 @@
/*******************************
Nag
*******************************/
/*--------------
Collection
---------------*/
@position: relative;
@width: 100%;
@zIndex: 999;
@margin: 0em;
@background: #555555;
@opacity: 0.95;
@minHeight: 0em;
@padding: 0.75em 1em;
@lineHeight: 1em;
@boxShadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
@fontSize: 1rem;
@textAlign: center;
@color: @textColor;
@transition: 0.2s background ease;
/*--------------
Elements
---------------*/
/* Title */
@titleColor: @white;
@titleMargin: 0em 0.5em;
@closeSize: 1em;
@closeMargin: (-@closeSize / 2) 0em 0em;
@closeTop: 50%;
@closeRight: 1em;
@closeColor: @white;
@closeTransition: opacity 0.2s ease;
@closeOpacity: 0.4;
/*--------------
States
---------------*/
/* Hover */
@nagHoverBackground: @background;
@nagHoverOpacity: 1;
@closeHoverOpacity: 1;
/*--------------
Variations
---------------*/
/* Top / Bottom */
@top: 0em;
@bottom: 0em;
@borderRadius: @defaultBorderRadius;
@topBorderRadius: 0em 0em @borderRadius @borderRadius;
@bottomBorderRadius: @borderRadius @borderRadius 0em 0em;
/* Inverted */
@invertedBackground: @darkWhite;
/*--------------
Plural
---------------*/
@groupedBorderRadius: 0em;

3
semantic/src/themes/dark/modules/popup.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

137
semantic/src/themes/dark/modules/popup.variables Normal file
View File

@@ -0,0 +1,137 @@
/*******************************
Popup
*******************************/
/*-------------------
Element
--------------------*/
@zIndex: 1900;
@background: @white;
@maxWidth: 250px;
@borderColor: @solidBorderColor;
@borderWidth: 1px;
@boxShadow: @floatingShadow;
@color: #FFF;
@verticalPadding: 0.833em;
@horizontalPadding: 1em;
@fontWeight: normal;
@fontStyle: normal;
@borderRadius: @defaultBorderRadius;
/*-------------------
Parts
--------------------*/
/* Placement */
@arrowSize: @relative10px;
@arrowWidth: 1em;
@arrowDistanceFromEdge: 1em;
@boxArrowOffset: 0em;
@popupDistanceAway: @arrowSize;
/* Header */
@headerFontFamily: @headerFont;
@headerFontSize: @relativeLarge;
@headerDistance: @relative7px;
@headerLineHeight: 1.2;
/* Content Border */
@border: @borderWidth solid @borderColor;
/* Arrow */
@arrowBackground: @white;
@arrowZIndex: 2;
@arrowJitter: 0.05em;
@arrowOffset: -(@arrowSize / 2) + @arrowJitter;
@arrowStroke: @borderWidth;
@arrowColor: darken(@borderColor, 10);
/* Arrow color by position */
@arrowTopBackground: @arrowBackground;
@arrowCenterBackground: @arrowBackground;
@arrowBottomBackground: @arrowBackground;
@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor;
@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor;
@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor;
@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor;
/*-------------------
Types
--------------------*/
/* Tooltip */
@tooltipBackground: @background;
@tooltipBorderRadius: @borderRadius;
@tooltipPadding: @verticalPadding @horizontalPadding;
@tooltipFontWeight: @fontWeight;
@tooltipFontStyle: @fontStyle;
@tooltipColor: @color;
@tooltipBorder: @border;
@tooltipBoxShadow: @boxShadow;
@tooltipMaxWidth: none;
@tooltipFontSize: @medium;
@tooltipLineHeight: @lineHeight;
@tooltipDistanceAway: @relative7px;
@tooltipZIndex: 1;
@tooltipDuration: @defaultDuration;
@tooltipEasing: @defaultEasing;
/* Inverted */
@tooltipInvertedBackground: @invertedBackground;
@tooltipInvertedColor: @invertedColor;
@tooltipInvertedBorder: @invertedBorder;
@tooltipInvertedBoxShadow: @invertedBoxShadow;
@tooltipInvertedHeaderBackground: @invertedHeaderBackground;
@tooltipInvertedHeaderColor: @invertedHeaderColor;
/* Arrow */
@tooltipArrowVerticalOffset: -@2px;
@tooltipArrowHorizontalOffset: -@1px;
@tooltipArrowBoxShadow: @arrowBoxShadow;
@tooltipArrowBackground: @arrowBackground;
@tooltipArrowTopBackground: @arrowTopBackground;
@tooltipArrowCenterBackground: @arrowCenterBackground;
@tooltipArrowBottomBackground: @arrowBottomBackground;
/*-------------------
Coupling
--------------------*/
/* Grid Inside Popup */
@nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */
@nestedGridWidth: ~"calc(100% + 1.75rem)";
/*-------------------
States
--------------------*/
@loadingZIndex: -1;
/*-------------------
Variations
--------------------*/
/* Wide */
@wideWidth: 350px;
@veryWideWidth: 550px;
/* Inverted */
@invertedBackground: @black;
@invertedColor: @white;
@invertedBorder: none;
@invertedBoxShadow: none;
@invertedHeaderBackground: none;
@invertedHeaderColor: @white;
@invertedArrowColor: @invertedBackground;
/* Arrow color by position */
@invertedArrowTopBackground: @invertedBackground;
@invertedArrowCenterBackground: @invertedBackground;
@invertedArrowBottomBackground: @invertedBackground;

3
semantic/src/themes/dark/modules/progress.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Progress
*******************************/

113
semantic/src/themes/dark/modules/progress.variables Normal file
View File

@@ -0,0 +1,113 @@
/*******************************
Progress
*******************************/
/*-------------------
Element
--------------------*/
@verticalSpacing: 1em;
@margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing);
@firstMargin: 0em 0em (@labelHeight + @verticalSpacing);
@lastMargin: 0em 0em (@labelHeight);
@background: @strongTransparentBlack;
@border: none;
@boxShadow: none;
@padding: 0em;
@borderRadius: @defaultBorderRadius;
/* Bar */
@barPosition: relative;
@barHeight: 1.75em;
@barBackground: #888888;
@barBorderRadius: @borderRadius;
@barTransitionEasing: @defaultEasing;
@barTransitionDuration: @defaultDuration;
@barTransition:
width @barTransitionDuration @barTransitionEasing,
background-color @barTransitionDuration @barTransitionEasing
;
@barInitialWidth: 0%;
@barMinWidth: 2em;
/* Progress Bar Label */
@progressWidth: auto;
@progressSize: @relativeSmall;
@progressPosition: absolute;
@progressTop: 50%;
@progressRight: 0.5em;
@progressLeft: auto;
@progressBottom: auto;
@progressOffset: -0.5em;
@progressColor: @lightTextColor;
@progressTextShadow: none;
@progressFontWeight: bold;
@progressTextAlign: left;
/* Label */
@labelWidth: 100%;
@labelHeight: 1.5em;
@labelSize: 1em;
@labelPosition: absolute;
@labelTop: 100%;
@labelLeft: 0%;
@labelRight: auto;
@labelBottom: auto;
@labelOffset: (@labelHeight - 1.3em);
@labelColor: @textColor;
@labelTextShadow: none;
@labelFontWeight: bold;
@labelTextAlign: center;
@labelTransition: color 0.4s @defaultEasing;
/*-------------------
Types
--------------------*/
@indicatingFirstColor: #D95C5C;
@indicatingSecondColor: #EFBC72;
@indicatingThirdColor: #E6BB48;
@indicatingFourthColor: #DDC928;
@indicatingFifthColor: #B4D95C;
@indicatingSixthColor: #66DA81;
@indicatingFirstLabelColor: @textColor;
@indicatingSecondLabelColor: @textColor;
@indicatingThirdLabelColor: @textColor;
@indicatingFourthLabelColor: @textColor;
@indicatingFifthLabelColor: @textColor;
@indicatingSixthLabelColor: @textColor;
/*-------------------
States
--------------------*/
/* Active */
@activePulseColor: @white;
@activePulseMaxOpacity: 0.3;
@activePulseDuration: 2s;
@activeMinWidth: @barMinWidth;
/*-------------------
Variations
--------------------*/
/* Attached */
@attachedBackground: transparent;
@attachedHeight: 0.2rem;
@attachedBorderRadius: @borderRadius;
/* Inverted */
@invertedBackground: @transparentWhite;
@invertedBorder: none;
@invertedBarBackground: @barBackground;
@invertedProgressColor: @offWhite;
@invertedLabelColor: @white;
/* Sizing */
@tinyBarHeight: 0.5em;
@smallBarHeight: 1em;
@largeBarHeight: 2.5em;
@bigBarHeight: 3.5em;

68
semantic/src/themes/dark/modules/rating.overrides Normal file
View File

File diff suppressed because one or more lines are too long

103
semantic/src/themes/dark/modules/rating.variables Normal file
View File

@@ -0,0 +1,103 @@
/*******************************
Rating
*******************************/
@margin: 0em @relativeMini;
@whiteSpace: nowrap;
@verticalAlign: baseline;
@iconCursor: pointer;
@iconWidth: 1.25em;
@iconHeight: auto;
@iconTransition:
opacity @defaultDuration @defaultEasing,
background @defaultDuration @defaultEasing,
text-shadow @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing
;
/*-------------------
Types
--------------------*/
/* Standard */
@inactiveBackground: transparent;
@inactiveColor: rgba(0, 0, 0, 0.15);
@selectedBackground: @inactiveBackground;
@selectedColor: @textColor;
@activeBackground: @inactiveBackground;
@activeColor: @darkTextColor;
/* Star */
@starIconWidth: @iconWidth;
@starIconHeight: @iconHeight;
@starShadowWidth: 1px;
@starInactiveBackground: @inactiveBackground;
@starInactiveColor: @inactiveColor;
@starInactiveTextShadow: none;
@starActiveBackground: @activeBackground;
@starActiveColor: #FFE623;
@starActiveShadowColor: #DDC507;
@starActiveTextShadow:
0px -@starShadowWidth 0px @starActiveShadowColor,
-@starShadowWidth 0px 0px @starActiveShadowColor,
0px @starShadowWidth 0px @starActiveShadowColor,
@starShadowWidth 0px 0px @starActiveShadowColor
;
@starSelectedBackground: @selectedBackground;
@starSelectedColor: #FFCC00;
@starSelectedShadowColor: #E6A200;
@starSelectedTextShadow:
0px -@starShadowWidth 0px @starSelectedShadowColor,
-@starShadowWidth 0px 0px @starSelectedShadowColor,
0px @starShadowWidth 0px @starSelectedShadowColor,
@starShadowWidth 0px 0px @starSelectedShadowColor
;
/* Heart */
@heartIconWidth: 1.4em;
@heartIconHeight: @iconHeight;
@heartShadowWidth: 1px;
@heartInactiveBackground: @inactiveBackground;
@heartInactiveColor: @inactiveColor;
@heartInactiveTextShadow: none;
@heartActiveBackground: @activeBackground;
@heartActiveColor: #FF6D75;
@heartActiveShadowColor: #CD0707;
@heartActiveTextShadow:
0px -@heartShadowWidth 0px @heartActiveShadowColor,
-@heartShadowWidth 0px 0px @heartActiveShadowColor,
0px @heartShadowWidth 0px @heartActiveShadowColor,
@heartShadowWidth 0px 0px @heartActiveShadowColor
;
@heartSelectedBackground: @selectedBackground;
@heartSelectedColor: #FF3000;
@heartSelectedShadowColor: #AA0101;
@heartSelectedTextShadow:
0px -@heartShadowWidth 0px @heartSelectedShadowColor,
-@heartShadowWidth 0px 0px @heartSelectedShadowColor,
0px @heartShadowWidth 0px @heartSelectedShadowColor,
@heartShadowWidth 0px 0px @heartSelectedShadowColor
;
/*-------------------
States
--------------------*/
@interactiveActiveIconOpacity: 1;
@interactiveSelectedIconOpacity: 1;
/*-------------------
Variations
--------------------*/
@massive: 2rem;

3
semantic/src/themes/dark/modules/search.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

158
semantic/src/themes/dark/modules/search.variables Normal file
View File

@@ -0,0 +1,158 @@
/*******************************
Search
*******************************/
/* Search Prompt */
@promptBackground: @inputBackground;
@promptVerticalPadding: @inputVerticalPadding;
@promptHorizontalPadding: @inputHorizontalPadding;
@promptLineHeight: @inputLineHeight;
@promptFontSize: @relativeMedium;
@promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding;
@promptBorder: 1px solid @borderColor;
@promptBorderRadius: @circularRadius;
@promptColor: @textColor;
@promptTransition:
background-color @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing
;
@promptBoxShadow: 0em 0em 0em 0em transparent inset;
/* Result Box */
@resultsWidth: 18em;
@resultsBackground: darken(@white, 5%);
@resultsDistance: 0.5em;
@resultsBorderRadius: @defaultBorderRadius;
@resultsBorder: 1px solid @solidBorderColor;
@resultsBoxShadow: @floatingShadow;
/* Result */
@resultFontSize: 1em;
@resultVerticalPadding: @relativeTiny;
@resultHorizontalPadding: @relativeLarge;
@resultPadding: @resultVerticalPadding @resultHorizontalPadding;
@resultTextColor: @textColor;
@resultLineHeight: 1.33;
@resultDivider: 1px solid @internalBorderColor;
@resultLastDivider: none;
/* Result Image */
@resultImageFloat: right;
@resultImageBackground: none;
@resultImageWidth: 5em;
@resultImageHeight: 3em;
@resultImageBorderRadius: 0.25em;
@resultImageMargin: 0em 6em 0em 0em;
/* Result Content */
@resultTitleFont: @headerFont;
@resultTitleMargin: -@headerLineHeightOffset 0em 0em;
@resultTitleFontWeight: bold;
@resultTitleFontSize: @relativeMedium;
@resultTitleColor: @darkTextColor;
/* Description */
@resultDescriptionFontSize: @relativeSmall;
@resultDescriptionDistance: 0;
@resultDescriptionColor: @lightTextColor;
/* Price */
@resultPriceFloat: right;
@resultPriceColor: @green;
/* Special Message */
@messageVerticalPadding: 1em;
@messageHorizontalPadding: 1em;
@messageHeaderFontSize: @medium;
@messageHeaderFontWeight: bold;
@messageHeaderColor: @textColor;
@messageDescriptionDistance: 0.25rem;
@messageDescriptionFontSize: 1em;
@messageDescriptionColor: @textColor;
/* All Results Link */
@actionBorder: none;
@actionBackground: @darkWhite;
@actionPadding: @relativeSmall @relativeMedium;
@actionColor: @textColor;
@actionFontWeight: bold;
@actionAlign: center;
/*******************************
States
*******************************/
/* Focus */
@promptFocusBackground: @promptBackground;
@promptFocusBorderColor: @selectedBorderColor;
@promptFocusColor: @selectedTextColor;
/* Hover */
@resultHoverBackground: @offWhite;
@actionHoverBackground: #E0E0E0;
/* Loading */
@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
/* Active Category */
@categoryActiveBackground: @darkWhite;
@categoryNameActiveColor: @textColor;
/* Active Result */
@resultActiveBorderLeft: @internalBorderColor;
@resultActiveBackground: @darkWhite;
@resultActiveBoxShadow: none;
@resultActiveTitleColor: @darkTextColor;
@resultActiveDescriptionColor: @darkTextColor;
@resultsZIndex: 998;
/*******************************
Types
*******************************/
/* Selection */
@selectionPromptBorderRadius: @defaultBorderRadius;
@selectionCloseTop: 0em;
@selectionCloseTransition:
color @defaultDuration @defaultEasing,
opacity @defaultDuration @defaultEasing
;
@selectionCloseRight: 0em;
@selectionCloseIconOpacity: 0.8;
@selectionCloseIconColor: '';
@selectionCloseIconHoverOpacity: 1;
@selectionCloseIconHoverColor: @red;
@selectionCloseIconInputRight: 1.85714em;
/* Category */
@categoryBackground: @darkWhite;
@categoryBoxShadow: none;
@categoryDivider: 1px solid @internalBorderColor;
@categoryTransition:
background @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing
;
@categoryResultsWidth: 28em;
@categoryResultBackground: @white;
@categoryResultLeftBorder: 1px solid @borderColor;
@categoryResultDivider: @resultDivider;
@categoryResultLastDivider: none;
@categoryResultPadding: @resultPadding;
@categoryResultTransition: @categoryTransition;
@categoryNameWidth: 100px;
@categoryNameBackground: transparent;
@categoryNameFont: @pageFont;
@categoryNameFontSize: 1em;
@categoryNameFloat: left;
@categoryNamePadding: 0.4em 1em;
@categoryNameFontWeight: bold;
@categoryNameColor: @lightTextColor;

3
semantic/src/themes/dark/modules/shape.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

40
semantic/src/themes/dark/modules/shape.variables Normal file
View File

@@ -0,0 +1,40 @@
/*******************************
Shape
*******************************/
@display: inline-block;
/* Animating */
@perspective: 2000px;
@duration: 0.6s;
@easing: ease-in-out;
@hiddenSideOpacity: 0.6;
@animatingZIndex: 100;
@transition:
transform @duration @easing,
left @duration @easing,
width @duration @easing,
height @duration @easing
;
@sideTransition: opacity @duration @easing;
@backfaceVisibility: hidden;
/* Side */
@sideMargin: 0em;
/*--------------
Types
---------------*/
/* Cube */
@cubeSize: 15em;
@cubeBackground: #E6E6E6;
@cubePadding: 2em;
@cubeTextColor: @textColor;
@cubeBoxShadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
@cubeTextAlign: center;
@cubeFontSize: 2em;

3
semantic/src/themes/dark/modules/sidebar.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

45
semantic/src/themes/dark/modules/sidebar.variables Normal file
View File

@@ -0,0 +1,45 @@
/*******************************
Sidebar
*******************************/
/*-------------------
Content
--------------------*/
/* Animation */
@perspective: 1500px;
@duration: 500ms;
@easing: @defaultEasing;
/* Dimmer */
@dimmerColor: rgba(0, 0, 0, 0.4);
@dimmerTransition: opacity @duration;
/* Color below page */
@canvasBackground: @lightBlack;
/* Shadow */
@boxShadow: 0px 0px 20px @borderColor;
@horizontalBoxShadow: @boxShadow;
@verticalBoxShadow: @boxShadow;
/* Layering */
@bottomLayer: 1;
@middleLayer: 2;
@fixedLayer: 101;
@topLayer: 102;
@dimmerLayer: 1000;
/*-------------------
Variations
--------------------*/
/* Width */
@veryThinWidth: 60px;
@thinWidth: 150px;
@width: 260px;
@wideWidth: 350px;
@veryWideWidth: 475px;
/* Height */
@height: 36px;

3
semantic/src/themes/dark/modules/sticky.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Theme Overrides
*******************************/

7
semantic/src/themes/dark/modules/sticky.variables Normal file
View File

@@ -0,0 +1,7 @@
/*******************************
Sticky
*******************************/
@transitionDuration: @defaultDuration;
@transition: none;
@zIndex: 800;

3
semantic/src/themes/dark/modules/tab.overrides Normal file
View File

@@ -0,0 +1,3 @@
/*******************************
Tab Overrides
*******************************/

11
semantic/src/themes/dark/modules/tab.variables Normal file
View File

@@ -0,0 +1,11 @@
/*******************************
Tab
*******************************/
/* Loading */
@loadingMinHeight: 250px;
@loadingContentPosition: relative;
@loadingContentOffset: -10000px;
@loaderDistanceFromTop: 100px;
@loaderSize: 2.5em;

910
semantic/src/themes/dark/modules/transition.overrides Normal file
View File

@@ -0,0 +1,910 @@
/*******************************
Transitions
*******************************/
/*
Some transitions adapted from Animate CSS
https://github.com/daneden/animate.css
Additional transitions adapted from Glide
by Nick Pettit - https://github.com/nickpettit/glide
*/
/*--------------
Browse
---------------*/
.transition.browse {
animation-duration: 500ms;
}
.transition.browse.in {
animation-name: browseIn;
}
.transition.browse.out,
.transition.browse.left.out {
animation-name: browseOutLeft;
}
.transition.browse.right.out {
animation-name: browseOutRight;
}
/* In */
@keyframes browseIn {
0% {
transform: scale(0.8) translateZ(0px);
z-index: -1;
}
10% {
transform: scale(0.8) translateZ(0px);
z-index: -1;
opacity: 0.7;
}
80% {
transform: scale(1.05) translateZ(0px);
opacity: 1;
z-index: 999;
}
100% {
transform: scale(1) translateZ(0px);
z-index: 999;
}
}
/* Out */
@keyframes browseOutLeft {
0% {
z-index: 999;
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
}
50% {
z-index: -1;
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
}
80% {
opacity: 1;
}
100% {
z-index: -1;
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
opacity: 0;
}
}
@keyframes browseOutRight {
0% {
z-index: 999;
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
}
50% {
z-index: 1;
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
}
80% {
opacity: 1;
}
100% {
z-index: 1;
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
opacity: 0;
}
}
/*--------------
Drop
---------------*/
.drop.transition {
transform-origin: top center;
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
}
.drop.transition.in {
animation-name: dropIn;
}
.drop.transition.out {
animation-name: dropOut;
}
/* Drop */
@keyframes dropIn {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes dropOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
/*--------------
Fade
---------------*/
.transition.fade.in {
animation-name: fadeIn;
}
.transition[class*="fade up"].in {
animation-name: fadeInUp;
}
.transition[class*="fade down"].in {
animation-name: fadeInDown;
}
.transition[class*="fade left"].in {
animation-name: fadeInLeft;
}
.transition[class*="fade right"].in {
animation-name: fadeInRight;
}
.transition.fade.out {
animation-name: fadeOut;
}
.transition[class*="fade up"].out {
animation-name: fadeOutUp;
}
.transition[class*="fade down"].out {
animation-name: fadeOutDown;
}
.transition[class*="fade left"].out {
animation-name: fadeOutLeft;
}
.transition[class*="fade right"].out {
animation-name: fadeOutRight;
}
/* In */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(-10%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
/* Out */
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(5%);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(-5%);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(5%);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(-5%);
}
}
/*--------------
Flips
---------------*/
.flip.transition.in,
.flip.transition.out {
animation-duration: 600ms;
}
.horizontal.flip.transition.in {
animation-name: horizontalFlipIn;
}
.horizontal.flip.transition.out {
animation-name: horizontalFlipOut;
}
.vertical.flip.transition.in {
animation-name: verticalFlipIn;
}
.vertical.flip.transition.out {
animation-name: verticalFlipOut;
}
/* In */
@keyframes horizontalFlipIn {
0% {
transform: perspective(2000px) rotateY(-90deg);
opacity: 0;
}
100% {
transform: perspective(2000px) rotateY(0deg);
opacity: 1;
}
}
@keyframes verticalFlipIn {
0% {
transform: perspective(2000px) rotateX(-90deg);
opacity: 0;
}
100% {
transform: perspective(2000px) rotateX(0deg);
opacity: 1;
}
}
/* Out */
@keyframes horizontalFlipOut {
0% {
transform: perspective(2000px) rotateY(0deg);
opacity: 1;
}
100% {
transform: perspective(2000px) rotateY(90deg);
opacity: 0;
}
}
@keyframes verticalFlipOut {
0% {
transform: perspective(2000px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(2000px) rotateX(-90deg);
opacity: 0;
}
}
/*--------------
Scale
---------------*/
.scale.transition.in {
animation-name: scaleIn;
}
.scale.transition.out {
animation-name: scaleOut;
}
@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Out */
@keyframes scaleOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}
/*--------------
Fly
---------------*/
/* Inward */
.transition.fly {
animation-duration: 0.6s;
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.transition.fly.in {
animation-name: flyIn;
}
.transition[class*="fly up"].in {
animation-name: flyInUp;
}
.transition[class*="fly down"].in {
animation-name: flyInDown;
}
.transition[class*="fly left"].in {
animation-name: flyInLeft;
}
.transition[class*="fly right"].in {
animation-name: flyInRight;
}
/* Outward */
.transition.fly.out {
animation-name: flyOut;
}
.transition[class*="fly up"].out {
animation-name: flyOutUp;
}
.transition[class*="fly down"].out {
animation-name: flyOutDown;
}
.transition[class*="fly left"].out {
animation-name: flyOutLeft;
}
.transition[class*="fly right"].out {
animation-name: flyOutRight;
}
/* In */
@keyframes flyIn {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@keyframes flyInUp {
0% {
opacity: 0;
transform: translate3d(0, 1500px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes flyInDown {
0% {
opacity: 0;
transform: translate3d(0, -1500px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
}
}
@keyframes flyInLeft {
0% {
opacity: 0;
transform: translate3d(1500px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
100% {
transform: none;
}
}
@keyframes flyInRight {
0% {
opacity: 0;
transform: translate3d(-1500px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
100% {
transform: none;
}
}
/* Out */
@keyframes flyOut {
20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
@keyframes flyOutUp {
20% {
transform: translate3d(0, 10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
@keyframes flyOutDown {
20% {
transform: translate3d(0, -10px, 0);
}
40%, 45% {
opacity: 1;
transform: translate3d(0, 20px, 0);
}
100% {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
@keyframes flyOutRight {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes flyOutLeft {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
/*--------------
Slide
---------------*/
.transition.slide.in,
.transition[class*="slide down"].in {
animation-name: slideInY;
transform-origin: top center;
}
.transition[class*="slide up"].in {
animation-name: slideInY;
transform-origin: bottom center;
}
.transition[class*="slide left"].in {
animation-name: slideInX;
transform-origin: center right;
}
.transition[class*="slide right"].in {
animation-name: slideInX;
transform-origin: center left;
}
.transition.slide.out,
.transition[class*="slide down"].out {
animation-name: slideOutY;
transform-origin: top center;
}
.transition[class*="slide up"].out {
animation-name: slideOutY;
transform-origin: bottom center;
}
.transition[class*="slide left"].out {
animation-name: slideOutX;
transform-origin: center right;
}
.transition[class*="slide right"].out {
animation-name: slideOutX;
transform-origin: center left;
}
/* In */
@keyframes slideInY {
0% {
opacity: 0;
transform: scaleY(0);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
@keyframes slideInX {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
/* Out */
@keyframes slideOutY {
0% {
opacity: 1;
transform: scaleY(1);
}
100% {
opacity: 0;
transform: scaleY(0);
}
}
@keyframes slideOutX {
0% {
opacity: 1;
transform: scaleX(1);
}
100% {
opacity: 0;
transform: scaleX(0);
}
}
/*--------------
Swing
---------------*/
.transition.swing {
animation-duration: 800ms;
}
.transition[class*="swing down"].in {
animation-name: swingInX;
transform-origin: top center;
}
.transition[class*="swing up"].in {
animation-name: swingInX;
transform-origin: bottom center;
}
.transition[class*="swing left"].in {
animation-name: swingInY;
transform-origin: center right;
}
.transition[class*="swing right"].in {
animation-name: swingInY;
transform-origin: center left;
}
.transition.swing.out,
.transition[class*="swing down"].out {
animation-name: swingOutX;
transform-origin: top center;
}
.transition[class*="swing up"].out {
animation-name: swingOutX;
transform-origin: bottom center;
}
.transition[class*="swing left"].out {
animation-name: swingOutY;
transform-origin: center right;
}
.transition[class*="swing right"].out {
animation-name: swingOutY;
transform-origin: center left;
}
/* In */
@keyframes swingInX {
0% {
transform: perspective(1000px) rotateX(90deg);
opacity: 0;
}
40% {
transform: perspective(1000px) rotateX(-30deg);
opacity: 1;
}
60% {
transform: perspective(1000px) rotateX(15deg);
}
80% {
transform: perspective(1000px) rotateX(-7.5deg);
}
100% {
transform: perspective(1000px) rotateX(0deg);
}
}
@keyframes swingInY {
0% {
transform: perspective(1000px) rotateY(-90deg);
opacity: 0;
}
40% {
transform: perspective(1000px) rotateY(30deg);
opacity: 1;
}
60% {
transform: perspective(1000px) rotateY(-17.5deg);
}
80% {
transform: perspective(1000px) rotateY(7.5deg);
}
100% {
transform: perspective(1000px) rotateY(0deg);
}
}
/* Out */
@keyframes swingOutX {
0% {
transform: perspective(1000px) rotateX(0deg);
}
40% {
transform: perspective(1000px) rotateX(-7.5deg);
}
60% {
transform: perspective(1000px) rotateX(17.5deg);
}
80% {
transform: perspective(1000px) rotateX(-30deg);
opacity: 1;
}
100% {
transform: perspective(1000px) rotateX(90deg);
opacity: 0;
}
}
@keyframes swingOutY {
0% {
transform: perspective(1000px) rotateY(0deg);
}
40% {
transform: perspective(1000px) rotateY(7.5deg);
}
60% {
transform: perspective(1000px) rotateY(-10deg);
}
80% {
transform: perspective(1000px) rotateY(30deg);
opacity: 1;
}
100% {
transform: perspective(1000px) rotateY(-90deg);
opacity: 0;
}
}
/*******************************
Static Animations
*******************************/
/*--------------
Emphasis
---------------*/
.flash.transition {
animation-duration: 750ms;
animation-name: flash;
}
.shake.transition {
animation-duration: 750ms;
animation-name: shake;
}
.bounce.transition {
animation-duration: 750ms;
animation-name: bounce;
}
.tada.transition {
animation-duration: 750ms;
animation-name: tada;
}
.pulse.transition {
animation-duration: 500ms;
animation-name: pulse;
}
.jiggle.transition {
animation-duration: 750ms;
animation-name: jiggle;
}
/* Flash */
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
/* Shake */
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
/* Bounce */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* Tada */
@keyframes tada {
0% {
transform: scale(1);
}
10%, 20% {
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
transform: scale(1.1) rotate(-3deg);
}
100% {
transform: scale(1) rotate(0);
}
}
/* Pulse */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(0.9);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Rubberband */
@keyframes jiggle {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}

10
semantic/src/themes/dark/modules/transition.variables Normal file
View File

@@ -0,0 +1,10 @@
/*******************************
Transition
*******************************/
@transitionDefaultEasing: @defaultEasing;
@transitionDefaultFill: both;
@transitionDefaultDuration: 300ms;
@use3DAcceleration: translateZ(0);
@backfaceVisibility: hidden;